HTML（5）基礎
阿新 • • 發佈：2018-11-16
inpu 北京 small canvas 單選按鈕的值 lock 通用 參考 cti
1、html常用標簽
- <pre>...</pre>：標識預定義文本
- <a>是anchor的縮寫，<a>標簽定義錨點和超鏈接，<a>常與href屬性連用表示超鏈接連接地址並用target來表示打開文檔的方法：_blank表示在新窗口中打開、_parent表示在父窗口中打開、_self表示在當前窗口中打開文檔， _top表示在頂層窗口中打開文檔
- em表示小強調，以斜體顯示；strong為著重強調，以粗體顯示
- abbr表示簡稱如dfn表示Definesa Definition Term;samp是Sample；acronym表示首字母縮寫如CSS是Cascading Style Sheets的縮寫
2、字符格式標簽：
- <b>...</b>：標識強調文本，以加粗效果顯示。
- <i>...</i>：標識引用文本，以斜體效果顯示。
- <blink>...</blink>：標識閃爍文本，以閃爍效果顯示。IE瀏覽器不支持該標簽。
- <big>...</big>：標識放大文本，以放大效果顯示。
- <small>...</small>：標識縮小文本，以縮小效果顯示。
- <sup>...</sup>：標識上標文本，以上標效果顯示。
- <sub>...</sub>：標識下標文本，以下標效果顯示。
- <cite>...</cite>：標識引用文本，以引用效果顯示。
3、xhtml即可擴展標記語言
- 在文檔開頭必須定義文檔類型
- 在根元素中應聲明命名空間，如<html xmlns="http://www.w3.org/1999/xhtml">
- 所有標簽必須閉合
- 所有元素和屬性必須必須小寫
- 所有屬性必須使用“”括起來
- 所有屬性必須被賦值
- 所有特殊符號必須都要用編碼表示"<"用"<"表示，">"用">"表示
- 不要在註釋中使用"--"標記
- 廢除name屬性統一使用ID屬性
4、meta標記表示網頁的相關信息即網頁元信息
<meta name="discription" content="標準網頁設計專業技術資訊"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-language" content="zh-CN"/> <meta http-equiv="refresh" content="5;url="http://www.css8.cn/"/> <meta http-equiv="pragma" content="no-cache"/>
5、一般一個網頁只有一個一級標題。h1、h2和h3元素比較常用，h4元素偶爾使用，h5和h6元素基本上不被使用
6、 引用blockquote、cite和q
- blockquote常用來作大段引用，一般不直接包含內容，引用的內容必須包含在一個元素中，可以與cite聯合使用，此時，cite屬性指定引文的地址
- q元素可直接包含引文內容，顯示效果為外加“”
- cite也可與q元素通用，但不能與<span>元素同用，顯示效果為斜體
<cite title="轉載地址">http://article.hongxiu.com/a/2007-1-26/1674332.shtml </cite>
7、address表示地址、簽名、作者和文檔摘要
<address title="作者">張三</address> <address title="詳細地址">中國北京</address> <address title="文章摘要">HTML元素的語義特征及其表現</address>
8、列表應該是同類、同型或同質信息的排列和組合
9、table屬性summary屬性表示表格摘要，不會顯示，僅是為語音合成，非視覺瀏覽器或機器定義的。
<!--表格分組-->
<colgroup>
<col span="3" />
<col span="3" />
<col span="3" />
<col span="3" />
</colgroup>
<thead> <tr> <td rowspan="2">排名</td> <td rowspan="2">校名</td> <td rowspan="2">總得分</td> <td colspan="3">人才培養</td> <td scope="col" colspan="3">科學研究</td> <td scope="col" colspan="2" rowspan="2">分省排名</td> <td rowspan="2">學校類型</td> </tr> <tr> <td>得分</td> <td>研究生培養</td> <td>本科生培養</td> <td>得分</td> <td>自然科學研究</td> <td>社會科學研究</td> </tr> </thead>
10、form元素
- enctype是Encase Type（包裝類型）的簡稱
- enctype="application/x-www-form-urlencoded"：將表單中的數據編碼為名/值對的形式通過URL字符串的形式發送給服務器
- enctype="multipart/form-data"：將表單中的數據編碼為一條消息，每個表單域對應消息中的一個部分，然後通過http方式發送到服務器，使用這種方式一般常用來傳遞二進制信息，例如，使用表單進行 文件上傳、提交圖像等。
- enctype="text/plain"：將表單中的數據以純文本的形式進行編碼，其中不含任何空間（即表單域的名稱）的格式字符。這種方法一般很少使用，也不建議使用。
- get和post傳遞方法：get以ADCII字符通過URL地址欄傳遞，不夠安全，且受地址欄長度的影響，傳輸數據量有限；post方法則沒有字符集和容量大小的限制，且比較安全。
11、input元素
- 復選框包括value屬性和checked屬性，value屬性設置復選框的傳遞值，checked屬性設置默認選中狀態
- 單選按鈕多個name屬性值必須相同，因為單選按鈕實質上僅是一個開關，只有兩個值，true和false，服務器僅把單選按鈕的值作為一個邏輯值來處理
- type="file"當表單域包含file域時，必須設置method屬性為post且enctype="multipart/form-data"，否則提交操作將失敗
- type="image"圖像按鈕，它是普通按鈕的自定義樣式。src指定圖像URL，該按鈕沒有動作，需要通過腳本形式為其定義操作的動作
- type="button"普通按鈕，沒有動作，需要通過腳本為其定義動作
12、表單分組：legend元素必須包含在fieldset元素內部，且緊鄰fieldset元素。
<form action="action.asp" name="register" id="login">
<fieldset>
<legend>基本信息（必填）</legend>
<ul>
<li>用戶名<input id="" maxlength="12" size="30" name="username" />
<span>註冊用戶名長度限制為3～12字節</span></li>
<li>論壇密碼<input type="password" maxlength="16" size="30" value="" name="psw" /></li>
</ul>
</fieldset>
<fieldset>
<legend>參考資料（選填）</legend>
<ul>
<li>個人網址<input maxlength="80" size="44" name="homepage" /></li>
<li>QQ號碼<input maxlength="20" size="44" name="OICQ" />
<span>填寫您的QQ號碼，方便與他人的聯系 </span></li>
</ul>
</fieldset>
<p><input name="" type="submit" value="提交" /></p>
</form>
13、綁定標簽和定義鍵盤屬性
<li>
<label for="username">用戶名</label>
<input type="text" id="username" name="username" accesskey="a" tabindex="2"/>
<span>註冊用戶名長度限制為3～12字節</span></li>
<li>
14、select選項分區
<form action="action.asp" name="register" id="login">
<p>
<select name="">
<optgroup label="數字">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="字母">
<option value="a">a</option>
<option value="b">b</option>
</optgroup>
</select>
<input name="" type="submit" value="提交" />
</p>
</form>
15、元素顯示類型
- 塊狀顯示
- 第一：塊狀元素默認寬度都是100%，即塊狀元素會擠滿一行顯示
- 第二：塊狀元素的頭尾都會隱藏一個換行符，即塊狀元素前面和後面都不能再有其它塊狀元素和行內元素，也就是每個塊狀元素都單獨在新行顯示
- 行內顯示
- 第一：行內元素沒有高度和寬度，即使為它定義高度，瀏覽器也不會解析
- 第二：行內元素的呈現效果與塊狀元素存在很大差異，這不僅僅體現在寬度和高度方面，它們可以並列顯示，隨行移動
- 行內塊狀顯示
- 行內塊狀顯示是行內顯示和塊狀顯示的結合，擁有各自優勢，但必須通過CSS樣式申明，即元素不會默認顯示為行內塊狀元素
- 表格顯示和列表顯示都是一種有其自身特點的塊狀元素
16、塊狀元素
- html、body、form、fieldset、legend、div、p、h1~h6、ol、ul、ol、dl、dt、dd、menu、col、colgroup、pre、address、blockquote、hr、title
行內元素
- span、a、area、img、abbr、acronym、b、bdo、big、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、sub、sup、tt、u、var、strong、button、select、textarea、label、object、caption、noscript
標頭區域隱藏元素
- head、base、basefont、link、meta、script、style
行內塊狀元素
- input、optgroup、option
列表項元素
- li
結構內隱藏元素
- map、param、br
表格系列類型元素
- table、th、tr、caption、summary、tbody、thead、tfoot、td
17、結構嵌套規則
- 元素名稱必須小寫
- 塊狀元素可以包含行內元素，但是行內元素不能包含塊狀元素，只有ins和des兩個特殊的行內元素可以包含塊狀元素或行內元素
- scrpt元素既能包含在head元素中也能包含在body元素中，而style元素只能包含在head元素中
- p和h1~h6可以直接包含行內元素和純文本內容而不能直接包含塊狀元素，但可以間接包含塊狀元素
- ul和ol只能直接包含li元素，但是li元素可以包含任何其它元素
- dl只能直接包含dt和dd元素，但dt元素只能包含行內元素，不能包含任何塊狀元素，而dd元素可以包含任何元素
- form只能直接包含塊狀元素，input是行內元素，因此form不能直接包含input元素
- caption只能包含行內元素，而th和td能包含任何元素
18、局部結構的設計中盡量避免使用ID
- 第一：局部結構一般多使用語義性標簽，定義ID意義不打
- 第二：局部結構可能會出現很多重復的結構，定義ID容易引發沖突
- 第三：如果要控制局部結構的樣式，可以使用包含選擇符來精確控制文檔結構
19、HTML5語法是為了保證和之前的html語法達到最大程度的兼容而設計的。
- 文檔類型聲明統一定義為<!doctype html>
- meta元信息可以簡化為<meta charset="utf-8"/>
- 可以省略標記的元素
- 第一：不允許寫結束標記的元素有area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr
- 第二：可以省略結束標記的元素有li、dd、dt、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
- 第三：可以省略全部標記的元素有html、head、body、colgroup、tbody
- 具有布爾值的屬性
- <!--只寫屬性，不寫屬性值，代表屬性為true--> <input type="checkbox" checked> <!--不寫屬性，代表屬性為false--> <input type="checked"> <!--屬性值=屬性名，代表屬性為true--> <input type="checkbox" checked="checked"> <!--屬性值=空字符串，代表屬性值為true--> <input type="checkbox" checked="">
- 省略引號<input type="text"> <input type=text> <input type="“>
20、html5把元素分為六大類
- 內嵌：在文檔中添加其它類型的內容，如audio、video、canvas、和iframe等
- 流：在文檔和引用的body中使用的元素，如form、p和div等
- 標題：段落標題，如h1、h2和hgroup等
- 交互：與用戶交互的內容，如音頻和視頻的控件、button和textarea等
- 元素據：通常出現在頁面的head中，設置頁面其它部分的表現和行為，如script、style和title等
- 短語：文本和文本結束標記，如mark、kbd、sub和sup等
HTML（5）基礎