HTML5學習筆記之基礎標簽

其他HTML5相關文章

HTML5學習筆記之HTML5基本介紹

HTML5學習筆記之基礎標簽

HTML5學習筆記之表格標簽

HTML5學習筆記之表單標簽

HTML5學習筆記之音視頻標簽

一.列表標簽

1.無序列表(unordered list)

無序 : 沒有先后之分

1) 作用:

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

2) 格式:

• li 英文是 list item, 翻譯為列表項

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

Snip20170614_4.png

3) ul應用場景:

• 導航條
• 商品列表等
• 新聞列表

4) 注意:

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

<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) 作用: 給一堆內容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分

<h4>中國房價排行榜</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>杭州</li>
    <li>廣州</li>
    <li>深圳</li>
</ol>

Snip20170614_6.png

2) ol應用場景:

• xxx排行榜
• 其實ol應用場景并不多, 因為能用ol做的用ul都能做
• ul的常見屬性start、type屬性, 可以修改先導符號的樣式和序號

二.定義列表(definition list)

1) 作用:

• 給一堆內容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進行相應的描述

2) 格式:

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

<dl>
    <dt>北京</dt>
    <dd>國家的首都</dd>
    <dt>杭州</dt>
    <dd>坑爹,房價上漲最快的地方</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應用場景:

• 網站底部相關信息
  • 但凡看到一堆內容都是用于描述某一個內容的時候就要想到dl

Snip20170614_9.png

4) 注意事項:

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

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

1.作用:

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

2.注意點:

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

四.P標簽(Paragraph)

1.作用:

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

2.注意點:

• 在瀏覽器中會單獨占一行

五.Hr標簽(Horizontal Rule)

1.作用:

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

2.注意點:

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

六.HTML注釋(Annotation)

1.什么是注釋?

1.注釋格式

``

2.注意點:

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

-->

3.快捷鍵: ctrl + /

示例代碼

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

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

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

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

Snip20170614_10.png

七.img標簽(image)

1) 作用:

• 在網頁上插入一張圖片

2) 格式:

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

3) 標簽的屬性

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

4) 注意點:

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

5) 示例代碼

<!--圖片標簽-->
![](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) 運行結果

Snip20170614_12.png

八.br標簽(Break)

1) 作用:

• 讓內容換行

2) 格式:

• <br/>

3) 注意點:

• br的意思是不另起一個段落進行換行, 而網頁中99.99%需要換行時都是因為另起了一個段落, 所以應該用p來做

九.a標簽(anchor)

1) 格式:

• <a href="http://www.lxweimin.com/u/5bd5e9ed569e">我的簡書</a>

2) 作用:

• 用于從一個頁面鏈接到另一個頁面

3) 注意事項:

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

4) a標簽的屬性

4) 代碼示例

<!--a標簽-->
<a href="http://www.lxweimin.com/u/5bd5e9ed569e">我的簡書</a>
<a href="http://www.lxweimin.com/u/5bd5e9ed569e" title="我的簡書">我的簡書</a>
<a href="http://www.lxweimin.com/u/5bd5e9ed569e" title="我的簡書" target="_blank">我的簡書</a>

Snip20170614_13.png

5) base標簽和a標簽結合使用

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

6) a標簽其它用法

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

• 對HTML5語言有興趣的同學,給大家極力推薦:江哥的視頻HTML5 + 跨平臺開發,只是不知道會不會繼續更新