首頁 > 開發者 > JavaScript
HTML簡要內容，html
1. html基礎
html是用來製作網頁的標記語言，不需編譯，直接由瀏覽器執行。大小寫不敏感，推薦使用小寫。html檔案必須使用html或htm為檔案名稱尾碼。
html主體結構：
(1)DTD頭：用於告訴瀏覽器用什麼標準解析當前頁面
(2)head部分：告訴瀏覽器一些相應資訊
(3)body部分：給人看的資料
2. html語言的文法
2.1 html標籤
標籤是html中最基本單位，也是最重要的組成部分，用角括弧< >括起來。
標籤都是閉合的，有兩種形式：<標籤名>內容<標籤名> ；<標籤名 />
有三部分組成：標籤名，要顯示的資料，顯示資料的屬性
<標籤名 屬性名稱1=“屬性值” …屬性名稱n=“屬性值”></ 標籤名>
2.2 html注釋
<!--被注釋的內容-->
2.3 html代碼格式
斷行符號和空格在原始碼中不起作用，所以在編寫html代碼時可以使用斷行符號或空格進行排版，可使代碼清晰，也便於團隊合作。必須保持嚴格的縮排規則，以“Tab”鍵為準。
把代碼寫得漂亮比把代碼寫得正確更重要。
3. head部分
表示html文檔的頭資訊，以<head>開始，以</head>結束。
包含了當前文檔的一些資訊，例如標題資訊，meta資訊等，正常情況下頭資訊是不會顯示在html文檔中的。
常用標籤：
title標籤--代表html文檔的標題
base標籤--將相對URL轉換為完整的絕對URL
meta標籤--用於定義檔案資訊的名稱、內容等資訊
link標籤--當在文檔中聲明使用外接資源(如CSS)時使用此標籤
style標籤--在文檔中聲明樣式時使用此標籤
script標籤--在文檔中使用JavaScript指令碼
4.body標籤中的常用屬性(注意預設值)
text-------設定頁面文字的顏色
bgcolor---------設定頁面的背景顏色
background-------設定頁面背景圖片
bgroperties-------設定頁面背景映像為固定，不隨頁面滾動而滾動
link--------設定頁面預設的連結顏色
alink-----------設定滑鼠正在點擊時的顏色
vlink-----------設定訪問後連結文字的顏色
topmargin-----------設定頁面的上邊距
leftmargin-------------設定頁面的左邊距
5. 文字版面的編輯
5.1 格式標籤
<br> 換列標籤
<p> 段落標籤，裡邊可加入文字、列表、表格等
<center> 置中對齊標籤
<pre> 按原文顯示標籤，可把原檔案中的空格，斷行符號，換行，tab鍵表現出來
<li> 代表html清單項目，每個清單項目使用一對<li></li>
<ul> html無序列表
<ol> html有序列表
<hr> 水平分割線標籤，用於段落與段落間的分割
5.2 文字標籤
<hn> 標題字標籤，n為1-6，定義六級標題，而且會自動換行插入一個空行
<b> 粗體字標籤
<i> 斜體字標籤
<u> 底線字型標籤
<sub> 文字上標字型標籤
<sup> 文字下表字型標籤
<font> 字型標籤，可通過標籤的屬性指定文字的大小、顏色及字型等屬性
<tt> 打字機文字
<cite> 用於引證、舉例，通常為斜體字
<em> 表示強調，通常為斜體字
<strong> 表示強調，通常為粗體字
<small> 小型字型標籤
<big> 大型字型標籤
6. 插入映像
img標籤，單獨出現，<img />
常用屬性：
alt-------代表映像的替代文字
src------映像源(即映像的位置)
border-------圖片邊框的寬度
height--------映像的高度
width---------映像的寬度
設計網頁時常用的圖片格式：gif，jpeg，png
7. 建立錨點和超連結
7.1 a標籤-------代表html連結，成對出現<a>…</a>
常用屬性：
href---------代表一個url連結源
url可以是網頁，其他的檔案，指向HTML檔案中的一個位置，email地址
target---------用來指出連結開啟檔案
target=_blank：將連結內容在新的視窗中開啟
target=_parent：將連結的內容當成檔案的上一個畫面
target=_self：將連結的內容顯示在當前視窗
target=_top：使整個畫面重新顯示成連結的畫面內容
連結文法：
<a href=“url” target=“_blank”>顯示的文字</a>
7.2 定位網頁內部的連結（錨點連結）
用<a name=””>定義,如：<a name=”here1”>第一部分</a>，使用<a href=”#here1”>跳轉到第一部分</a>，超連結就可以定位到網頁中的“第一部分”這個位置。
7.3 超連結
三種連結路徑：
絕對路徑：http://www.sohu.com/index.html
文檔相對路徑：adver/contents.html
網站根目錄相對路徑：/support/app/customer.html
8. html表格
8.1 常見標籤
<table> 代表html表格，成對出現
屬性：width------表格寬度
height------表格高度
border------表格邊框
cellspacing-----表格邊框與表格內容填充的距離，也是內容填充之間的距離
cellpadding------內容填充的寬度
<caption> 定義表格標題的位置，可由align和valign屬性來設定
<tr> 表中的一行
<th> 表中的一列
tr、th屬性：
width與height------代表寬度和高度
colspan---------一行跨越多列
Rowspan--------一列跨越多行
align-------------水平對齊（left，center，right）
valign----------豎直對齊（top，middle，bottom）
<td> 表中的一個儲存格，用於存放具體資料內容
align，valign具體解釋詳見上面
9. html架構結構
9.1 簡述
一個瀏覽器表單可通過幾個頁面的組合來顯示。可使用架構（frames）來完成。可分為數行和數列。
優點：重載頁面時不需重載整個頁面；方便製作導覽列。
缺點：會產生很多頁面，不易管理；不易列印；瀏覽器的後退按鈕無效；代碼複雜，無法被一些搜尋引擎索引到；多數小型的行動裝置（PDA手機）無法完全顯示架構；多架構的頁面會增加伺服器的http請求
由於這許多缺點，不符合標準網頁設計的理念，已被標準網頁設計拋棄
9.2 html架構標籤
<frameset>標籤--代替body標籤定義了架構頁，並定義了架構將分為多少行多少列
常用屬性：
cols---架構含有多少列與列的大小
rows----架構還有多少行與行的大小
border----架構頁是否有邊框
framespacing----架構之間間隔的距離
<noframes>標籤--可為那些不支援架構的瀏覽器顯示文本，與<body>組合使用
<iframe>標籤----建立一個包含另外一個文檔的內斂架構，iframe標籤內的內容可以作為瀏覽器不支援iframe標籤是顯示
frame標籤---定義frameset標籤中每個架構頁的內容
單獨出現，<frame />
常用屬性：
frameborder----定義了內容頁的邊框，取值為（1|0），預設值為1
1--在每個頁面之間顯示邊框 0----不顯示邊框
name-----在一個架構頁連結到另一架構頁是使用（另一個架構頁可使用target定義連結頁）
Noresize----定義了瀏覽者是否可以通過拖拽改變架構頁尺寸，取值為（noresize）
scrolling----定義了是否有捲軸，取值為（yes|no|auto），預設值為auto
yes---顯示捲軸 no----不顯示捲軸 auto----需要時再顯示捲軸
src----定義了內容條URL
border---設定邊框粗細
10. html表單設定
10.1 form標籤
網頁怎樣與使用者進行互動？答案是：使用html表單（form）
form標籤-----代表html表單
常用屬性：
action---瀏覽者輸入的資料被傳送到的地方，如一個jsp頁面
method----資料傳送的方法，常用post
10.2 input標籤-----html表單的單行輸入欄位
單獨出現，<input />
屬性：
type----代表一個輸入欄位的顯示方式（分為輸入型，選擇型，點擊型）
取值：
text---文字輸入欄位（輸入型）
password----文字輸入欄位，但輸入的文字以密碼符號*顯示（輸入型）
file----可以輸入一個檔案路徑（輸入型）
checkbox----複選框，可以選擇零個或多個（選擇型）
radio----單選框，只選且必選一個（選擇型）
hidden---代表隱藏欄位，可傳送一些隱藏的資訊到伺服器
button----按鈕（點擊型）（有提交功能，會把所有表單一起提交）
image----使用圖片來顯示按鈕，使用src屬性指定映像的位置（點擊型）
submit---提交按鈕，可使用value屬性來顯示按鈕上的文字（點擊型）
reset----重設按鈕，可以把表單中的資訊清空（點擊型）
name-----此表單項名稱
value----輸入欄位的值
size----輸入欄位的長度
maxlength-----輸入欄位最多可以輸入文字的長度（個數）
checked-----如果是選擇型的輸入欄位，代表已經被選擇，值為checked
readonly-----輸入欄位可以選擇，但無法修改，值為readonly
disabled-----輸入欄位無法獲得焦點，無法選擇，以灰色顯示，在表單中不起任何作用
accesskey-----表單的快速鍵訪問方式如值為h即按Alt+h
tabindex-----輸入欄位的“tab”鍵遍曆順序
src----當使用圖片來表示按鈕時，代表圖片的位置（URI）
alt----用來替換提交按鈕的圖片提示資訊
10.3 textarea標籤-----代表表單多行輸入欄位
成對出現，<textarea></textarea>
屬性：
cols----多行輸入欄位的列數
rows----多行輸入欄位的行數
name----此表單項名稱
accesskey-----表單的快速鍵訪問方式
disabled-----無法獲得焦點，無法選擇
readonly----輸入欄位可選擇，但無法修改
tabindex-----輸入欄位，使用“tab”鍵的遍曆順序
10.4 select標籤
Select標籤----挑選清單標籤
成對出現<select></select>
此標籤中的每對option標籤代表一個選擇項
屬性：
name---表單項名稱
size---選擇域的高度
multiple---可以有多個選擇
disabled---以灰色顯示，在表單中不起任何作用
tabindex--使用“tab”鍵的遍曆順序
option標籤---代表挑選清單的一個選擇項
成對出現<option></option>
屬性：
label----說明選擇項
value----說明選擇項的值
selected---此選擇項已經被選擇
disabled----輸入框無法獲得焦點，以灰色顯示，在表單中表示禁用
tabindex----使用“tab”鍵的遍曆順序
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
