HTML5學(xué)習(xí)筆記之基礎(chǔ)標(biāo)簽

其他HTML5相關(guān)文章

HTML5學(xué)習(xí)筆記之HTML5基本介紹

HTML5學(xué)習(xí)筆記之基礎(chǔ)標(biāo)簽

HTML5學(xué)習(xí)筆記之表格標(biāo)簽

HTML5學(xué)習(xí)筆記之表單標(biāo)簽

HTML5學(xué)習(xí)筆記之音視頻標(biāo)簽

一.列表標(biāo)簽

1.無序列表(unordered list)

無序 : 沒有先后之分

1) 作用:

• 給一堆內(nèi)容添加無序列表語義(一個(gè)沒有先后順序整體), 列表中的條目是不分先后

2) 格式:

• li 英文是 list item, 翻譯為列表項(xiàng)

    <h4>中國(guó)城市列舉(CN)</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
    <li>杭州</li>
</ul>

Snip20170614_4.png

3) ul應(yīng)用場(chǎng)景:

• 導(dǎo)航條
• 商品列表等
• 新聞列表

4) 注意:

• 其實(shí)ul還有一個(gè)type屬性, 可以修改先導(dǎo)符號(hào)的樣式, 取值有disc、square、circle幾種
  • 但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
• ul是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說li標(biāo)簽不能單獨(dú)存在, 必須包裹在ul里面
• 由于ul和li是一個(gè)整體, 所以u(píng)l里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
• 雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽

<h4>課程安排</h4>
<ul>
    <li>
        上午
        <ul>
            <li>HTML5</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>
        下午
        <ul>
            <li>OC</li>
            <li>Swift</li>
        </ul>
    </li>

</ul>

Snip20170614_5.png

2.有序列表(ordered list)

1) 作用: 給一堆內(nèi)容添加有序列表語義(一個(gè)有順序整體), 列表中的條目有先后之分

<h4>中國(guó)房?jī)r(jià)排行榜</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>杭州</li>
    <li>廣州</li>
    <li>深圳</li>
</ol>

Snip20170614_6.png

2) ol應(yīng)用場(chǎng)景:

• xxx排行榜
• 其實(shí)ol應(yīng)用場(chǎng)景并不多, 因?yàn)槟苡胦l做的用ul都能做
• ul的常見屬性start、type屬性, 可以修改先導(dǎo)符號(hào)的樣式和序號(hào)

二.定義列表(definition list)

1) 作用:

• 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個(gè)條目進(jìn)行相應(yīng)的描述

2) 格式:

• dt英文definition title, 翻譯為定義標(biāo)題
• dd英文definition description, 翻譯為定義描述信息

<dl>
    <dt>北京</dt>
    <dd>國(guó)家的首都</dd>
    <dt>杭州</dt>
    <dd>坑爹,房?jī)r(jià)上漲最快的地方</dd>
</dl>

![Snip20170614_7.png](http://upload-images.jianshu.io/upload_images/4122543-2d304b7b5f58b8c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3) dl應(yīng)用場(chǎng)景:

• 網(wǎng)站底部相關(guān)信息
  • 但凡看到一堆內(nèi)容都是用于描述某一個(gè)內(nèi)容的時(shí)候就要想到dl

Snip20170614_9.png

4) 注意事項(xiàng):

• dl是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標(biāo)簽不能單獨(dú)存在, 必須包裹在dl里面
• 由于dl和dt邻寿、dd是一個(gè)整體, 所以dl里面不推薦包裹其它標(biāo)簽
• dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽
• 定義列表非常靈活, 可以給一個(gè)dt配置多個(gè)dd, 但是最好不要出現(xiàn)多個(gè)dt對(duì)應(yīng)一個(gè)dd, dd的語義是描述離它最近的一個(gè)dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個(gè)條目又可以對(duì)每一個(gè)條目進(jìn)行描述
• 定義列表非常靈活, 可以將多個(gè)dt+dd組合拆分為多個(gè)dl

三.H系列標(biāo)簽(Header 1~Header 6)

1.作用:

• 用于給文本添加標(biāo)題語義
• 格式:
• <h1>xxxxxx</h1>

2.注意點(diǎn):

• H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的
• H標(biāo)簽一共有6個(gè), 從H1~H6, 最多就只能到6, 超過6則無效
• 被H系列標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行
• 在H系列的標(biāo)簽中, H1最大, H6最小
• 在企業(yè)開發(fā)中, 一定要慎用H系列的標(biāo)簽, 特別是H1標(biāo)簽. 在企業(yè)開發(fā)中一般情況下一個(gè)界面中只能出現(xiàn)一個(gè)H1標(biāo)簽(和SEO有關(guān))

四.P標(biāo)簽(Paragraph)

1.作用:

• 告訴瀏覽器哪些文字是一個(gè)段落
• 格式:
• <p>xxxxxxxx</p>

2.注意點(diǎn):

• 在瀏覽器中會(huì)單獨(dú)占一行

五.Hr標(biāo)簽(Horizontal Rule)

1.作用:

• 在瀏覽器上顯示一條分割線
• 格式:
• <hr />

2.注意點(diǎn):

• 在瀏覽器中會(huì)單獨(dú)占一行
• 通過我的觀察發(fā)現(xiàn)HR標(biāo)簽可以寫/也可以不寫
  • 如果不寫/那么就是按照HTML的規(guī)范來編寫
  • 如果寫上/那么就是按照XHTML的規(guī)范來編寫.
• 由于hr標(biāo)簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做

六.HTML注釋(Annotation)

1.什么是注釋?

1.注釋格式

``

2.注意點(diǎn):

• 被注釋的內(nèi)容不會(huì)在瀏覽器中顯示, 注釋是寫給我們自己看的
  • 注釋不能嵌套使用

-->

3.快捷鍵: ctrl + /

示例代碼

<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>
<h7>我是假的,標(biāo)題7</h7>

<!--我是注釋-->
<hr />

<p>告訴瀏覽器哪些文字是一個(gè)段落</p>

<!--下面是分割線-->
<hr />

Snip20170614_10.png

七.img標(biāo)簽(image)

1) 作用:

• 在網(wǎng)頁上插入一張圖片

2) 格式:

• ![image](http://note.youdao.com/favicon.ico)

3) 標(biāo)簽的屬性

• 寫在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性

4) 注意點(diǎn):

• img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間
  如果想讓圖片等比拉伸,只寫高度或者寬度即可

5) 示例代碼

<!--圖片標(biāo)簽-->
![](http://note.youdao.com/favicon.ico)
![有道云筆記](http://note.youdao.com/favicon.ico)
![有道云筆記](http://note.youdao.com/favicon.ico)
![有道云筆記](http://note.youdao.com/favicon.ico)
![有道云筆記](http://note.youdao.com/favicon.ico)
![有道云筆記](http://note.youdao.com/favicon.ico)
<img src="" alt="找不到圖片">

5) 運(yùn)行結(jié)果

Snip20170614_12.png

八.br標(biāo)簽(Break)

1) 作用:

• 讓內(nèi)容換行

2) 格式:

• <br/>

3) 注意點(diǎn):

• br的意思是不另起一個(gè)段落進(jìn)行換行, 而網(wǎng)頁中99.99%需要換行時(shí)都是因?yàn)榱砥鹆艘粋€(gè)段落, 所以應(yīng)該用p來做

九.a標(biāo)簽(anchor)

1) 格式:

• <a href="http://www.reibang.com/u/5bd5e9ed569e">我的簡(jiǎn)書</a>

2) 作用:

• 用于從一個(gè)頁面鏈接到另一個(gè)頁面

3) 注意事項(xiàng):

• 在a標(biāo)簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個(gè)標(biāo)簽
  a標(biāo)簽也叫做超級(jí)鏈接或超鏈接

4) a標(biāo)簽的屬性

4) 代碼示例

<!--a標(biāo)簽-->
<a href="http://www.reibang.com/u/5bd5e9ed569e">我的簡(jiǎn)書</a>
<a href="http://www.reibang.com/u/5bd5e9ed569e" title="我的簡(jiǎn)書">我的簡(jiǎn)書</a>
<a href="http://www.reibang.com/u/5bd5e9ed569e" title="我的簡(jiǎn)書" target="_blank">我的簡(jiǎn)書</a>

Snip20170614_13.png

5) base標(biāo)簽和a標(biāo)簽結(jié)合使用

• 如果每個(gè)a標(biāo)簽都想在新頁面中打開,那么逐個(gè)設(shè)置a標(biāo)簽的target屬性比較麻煩, 這時(shí)我們可以使用base和a標(biāo)簽結(jié)合的方式,一次性設(shè)置有a標(biāo)簽都在新頁面中打開
  • 格式: <base target="_blank" />
• 注意事項(xiàng):
  • base必須嵌套在head標(biāo)簽里面
  • 如果標(biāo)簽上指定了target,base中也指定了target,那么會(huì)按照標(biāo)簽上指定的來執(zhí)行

6) a標(biāo)簽其它用法

• 假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)
  • 格式<a href="#">我的簡(jiǎn)書</a>
  • 格式<a href="javascript:">我的簡(jiǎn)書</a>
    • 跳轉(zhuǎn)到當(dāng)前頁面指定位置(錨點(diǎn)鏈接)
    • 1.格式<a href="#location">跳轉(zhuǎn)到指定位置</a>
    • 2.在頁面的指定位置給任意標(biāo)簽添加一個(gè)id屬性
      • 例如 <p id="location">這個(gè)是目標(biāo)</p>
  • 跳轉(zhuǎn)到指定頁面的指定位置
    • 格式: <a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
    • 只需要在01-錨點(diǎn)鏈接.html頁面添加一個(gè)id位置即可
  • 下載(極力不推薦使用)
    • 例如<a href="girl.zip">下載福利資源<a/>

• 對(duì)HTML5語言有興趣的同學(xué),給大家極力推薦:江哥的視頻HTML5 + 跨平臺(tái)開發(fā),只是不知道會(huì)不會(huì)繼續(xù)更新