HTML基礎(chǔ)學(xué)習(xí)(新收獲)
通過(guò)再一次學(xué)習(xí)HTML的知識(shí)曲饱,有了更多的收獲即彪,發(fā)現(xiàn)了更多之前沒(méi)有注意到的知識(shí)點(diǎn)街州,在學(xué)習(xí)HTML5中通過(guò)使用標(biāo)簽將代碼封裝起來(lái)使結(jié)構(gòu)更加清晰
-
HTML Section學(xué)習(xí)
- <hgroup></hgroup> 封裝h標(biāo)簽
? - <header></header> 包含任何內(nèi)容晴音,通常修飾文檔或文章的標(biāo)題
? - <footer> 標(biāo)簽通常包含文檔的摘要信息部分或者作者,版權(quán)信息
? - <section></section> 適用于對(duì)文檔進(jìn)行分塊,將文檔劃分為章節(jié)饲常,或者對(duì)文章分內(nèi)容塊(包含h1~h6中的標(biāo)題元素蹲堂,一般不用包含header和footer標(biāo)簽)
? - <article></article> 特殊的section標(biāo)簽,將文檔或文章中的內(nèi)容劃分為相對(duì)獨(dú)立的模塊(一般包含header標(biāo)簽和footer標(biāo)簽)
? - <nav></nav> 代表一個(gè)部分包含鏈接
? - <detail></detail> 描述某個(gè)文檔或者部分模塊的細(xì)節(jié),配合使用<summary> 標(biāo)簽可為details 定義標(biāo)題贝淤,點(diǎn)擊標(biāo)題則顯示detail內(nèi)容
? - <aside></aside> 設(shè)置將與文本相關(guān)的顯示在內(nèi)容外
? - <figure> 表示網(wǎng)頁(yè)上一塊獨(dú)立的內(nèi)容柒竞,其中可用figuretion修飾標(biāo)題,且只能包含一個(gè)
-
TEXT 相關(guān)標(biāo)簽
- <blockquote></blockquote>
縮進(jìn)
? - <pre></pre>
按照pre中顯示內(nèi)容播聪,保留空格及換行
? - <abbr></abbr> 包含一段文本的縮寫,使用title屬性擴(kuò)展縮寫的文本
? - <bdi></bdi> 把包含的內(nèi)容從周圍的文檔中隔離出來(lái)
? - <bdo></bdo> 覆蓋當(dāng)前文本的方向 以相反的方向展示文本
? - ````<cite></cite>引用的標(biāo)題朽基,像書、文章或電影离陶,并以斜體的形式展現(xiàn) ? -
<code></code>定義計(jì)算機(jī)代碼 ? - <del></del> 將其包含的內(nèi)容標(biāo)記為刪除稼虎,使用cite屬性指向另一個(gè)文檔解釋刪除原因,datetime屬性顯示刪除時(shí)間 ? - <dfn></dfn> 定義一個(gè)詞或者短語(yǔ)招刨,并解釋意義 ? -
<em></em>強(qiáng)調(diào) ? - <kdd></kdd> 文本從鍵盤鍵入霎俩,經(jīng)常用在與計(jì)算機(jī)相關(guān)的文檔或手冊(cè)中 ? - <mark> 表示包含的文本被高亮標(biāo)記 ? -
<q>``` 內(nèi)容從其他來(lái)源,cite屬性表明內(nèi)容來(lái)源
? - <ruby> </ruby>包含ruby注釋其中rt 標(biāo)記ruby標(biāo)簽里面內(nèi)容的注釋沉眶、rp 定義不支持ruby元素的瀏覽器所顯示的內(nèi)容
? - <s></s> 標(biāo)記不再使用或者不再正確的內(nèi)容
? - <sample></sample> 定義樣本文本
? - 定義上標(biāo) / 定義下標(biāo)
? - <time></time> 定義時(shí)間
-
列表
- 普通列表
<dl>
<dt>
<dd></dd>
</dt>
</dl>
- 無(wú)序列表
<ul>
<li></li>
</ul>
- 有序列表
<ol>
<li></li>
</ol>
-
表格
<table>
<theader>定義表格的頁(yè)頭
<tr>
<th></th>
</tr>
</theader>
<tbody>定義表格的主體
<tr>
<td></td>
</tr>
</tbody>
<tfoot>定義表格的頁(yè)腳
<td></td>
</tfoot>
</table>
- td標(biāo)簽中通過(guò)header屬性的設(shè)置可將單元格與標(biāo)題關(guān)聯(lián)起來(lái)
- <colgroup> 將列進(jìn)行組合打却,在<head></head> 中設(shè)置樣式
- <caption> 設(shè)置表格的標(biāo)題
-
表單
<form method="" action="URL" accept-charset=“ ” autocoplete=“ ” targe = " ">
name:<input name="name" type =" "/>
<button>submit</button>
</form>
- method:設(shè)置如何發(fā)送表單數(shù)據(jù),分為兩種方式"post"(分段傳輸谎倔,安全)和"get"(一次性傳輸柳击,不安全),默認(rèn)為"get"方法
- accept-charset :設(shè)置服務(wù)器用哪種字符集處理表單數(shù)據(jù)。常用的字符集為:(UTF-8:Unicode字符編碼)片习、 (ISO-8859-1:拉丁字母表的字符編碼)捌肴、(gb2312:簡(jiǎn)體中文字符集)
- autocomplete :設(shè)置是否開(kāi)啟表單自動(dòng)填寫補(bǔ)全功能,默認(rèn)為"on"
- target : 設(shè)置在何處打開(kāi)action屬性的URL藕咏。
????_blank 在新的窗口中打開(kāi)
????_self 默認(rèn)哭靖。在相同的框架中打開(kāi)
????_parent 在父框架集中打開(kāi)
????_top 在整個(gè)窗口中打開(kāi)
????framename 在指定的框架中打開(kāi) - <label> 給表單或者其他元素添加文本屬性
- <FieldSet> 將表單中的相關(guān)內(nèi)容分組,添加disabled屬性 設(shè)置禁用一組表單,使其不可點(diǎn)擊
- <legend> 給表單中的每個(gè)組添加描述信息
- input屬性
- placeholder: 文字占位符
- value: 輸入框中顯示的文字
- size: 表示輸入框可以展示字符的長(zhǎng)度
- maxlength: 表示輸入框最大長(zhǎng)度
- disabled侈离、readonly :表示不可編輯的文本輸入框
- autofocus : 自動(dòng)將光標(biāo)聚焦在已設(shè)置的輸入框中
- password :密碼輸入框
- button :按鈕類型
- number:數(shù)字輸入框,min筝蚕、max最小值卦碾、最大值
- range :范圍輸入框 ,min起宽、max最大值和最小值
- checkbox (radio):選項(xiàng)輸入框
- email :郵箱輸入框
- tel :電話輸入框
- date :日期輸入框
- time :時(shí)間輸入框
- color :顏色輸入框
- search :搜索輸入框
- hidden : 隱藏輸入框,隱藏需要上傳的數(shù)據(jù)
- <datalist> 文本框創(chuàng)建展示列表
<code>
<form>
names: <input list="list" />
</form>
<datalist id="list">
<option value="A" />
<option value="B"></option>
<option value="C"/>
</datalist>
</code> - 選擇輸入框
<code><select id="char"name="char">
<option value="A" >A</option>
<option value="B" >B</option>
<option value="C" selected >C</option>
<option value="D" >D</option>
</select></code>
<optgroup></optgroup>:把選項(xiàng)相關(guān)的組合在一起 - <textarea></textarea>:創(chuàng)建可以輸入多行文本的文本框