HTML5學習筆記之基礎標簽

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"這種格式的文本我們稱之為標簽屬性
屬性名稱 作用
src(source) 告訴瀏覽器需要插入的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片
alt(alternate) 規定圖像的替代文本, 只有在src指定的路徑下找不到圖片,才會顯示alt指定的文本
title 懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時才會顯示)
height 設置圖片顯示的高度
width 設置圖片顯示的寬度

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標簽的屬性

屬性名稱 作用
href(hypertext reference) 指定跳轉的目標地址
target 告訴瀏覽器是否保留原始界面, _blank保留, _self不保留
title 懸停文本(介紹這個鏈接, 只有在鼠標移動到超鏈接上時才會顯示)

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 + 跨平臺開發,只是不知道會不會繼續更新

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,107評論 1贊 25
  • HTML需要掌握標簽 標簽（空格分隔）： H5+CSS [TOC] 常用標簽 img 注意點 和H系列標簽/p標簽...
    袁俊亮技術博客閱讀 2,063評論 1贊 8
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,807評論 1贊 92
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32贊 459
  • 內容LongLongLong是一種情懷 本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,...
    西巴擼閱讀 1,034評論 0贊 0