塊級元素和內(nèi)聯(lián)元素
在HTML中有兩種你需要知道的重要元素類別乘客，塊級元素和內(nèi)聯(lián)元素鉴腻。
- 塊級元素在頁面中以塊的形式展現(xiàn)司致，相對于其前面的內(nèi)容會出現(xiàn)在新的一行，其后的內(nèi)容也會被擠到下一行量淌。塊級元素通常用來展示頁面的結(jié)構(gòu)化內(nèi)容，例如段落褐筛、列表类少、導航菜單、頁腳等渔扎。一個以block形式展現(xiàn)的塊級元素不會被嵌套進內(nèi)聯(lián)元素中硫狞，但可以嵌套在其它的塊級元素中。
- 內(nèi)聯(lián)元素通常出現(xiàn)在塊級元素中并包裹文檔內(nèi)容的一小部分晃痴，而不是一整個段落或者一組內(nèi)容残吩。內(nèi)聯(lián)元素不會導致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素
<a>或者強調(diào)元素<em>和<strong>。
空元素
不是所有元素都擁有來說標簽倘核，內(nèi)容和結(jié)束標簽泣侮，一些元素只有一個標簽，通常用來在此元素位置插/嵌入一些東西紧唱。例如：例如：元素<img>是用來在元素<img>所在位置插入一張指定的圖片活尊。
屬性
元素也可以擁有屬性
屬性包含元素的額外信息，不出現(xiàn)在實際內(nèi)容中漏益。在這個例子中蛹锰，class屬性給元素賦予了一個識別的名字（id），這個名字此后被用來識別此元素的樣式和其他信息绰疤。
一個屬性必須包含如下內(nèi)容:
- 在元素和屬性之間有個space（如果有一個或多個已存在的屬性铜犬，就與前一個屬性之間有一個空格）。
- 屬性后面緊跟著=號轻庆。
- 有一個屬性值癣猾，由一對引號“”引起來。
為<a>元素添加屬性
元素<a>是錨余爆，它使被標簽包裹的內(nèi)容成為一個鏈接纷宇。此元素也可以添加大量的屬性，其中幾個如下蛾方。
-
href:這個屬性聲明超鏈接的web地址像捶，當這個鏈接被點擊瀏覽器會跳轉(zhuǎn)至聲明的web地址。 -
title:標題title屬性為超鏈接聲明額外的信息转捕，當鼠標懸停鏈接時，將出現(xiàn)一個工具提示唆垃。 -
target:目標target屬性指定將用于顯示鏈接的瀏覽上下文五芝。例如，target="_blank"將在新標簽頁中顯示鏈接辕万。如果你希望在目標標簽頁顯示鏈接枢步，只需要忽略這個屬性沉删。
布爾屬性
沒有值的屬性也是合法的，這是布爾屬性醉途，他們只能有跟它的屬性名一樣的屬性值矾瑰。例如disabled屬性，他們可以標記表單輸入使之變?yōu)椴豢捎茫ㄗ優(yōu)榛疑?隘擎，此時用戶不能輸入任何數(shù)據(jù)殴穴。
<input type="text" disabled="disabled">
分析HTML文檔
<!DOCTYPE html> 聲明文檔類型赴涵，最短有效的文檔聲明
<html> <!--這個元素包含完整的頁面卦碾，根元素-->
<head> 這個元素是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內(nèi)容靠粪。這些內(nèi)容包括你想在搜索結(jié)果中出現(xiàn)的關(guān)鍵字和頁面描述震桶，CSS樣式休傍，字符集聲明等等。
<meta charset="utf-8"> 這個元素設置文檔使用utf-8字符集編碼蹲姐，utf-8字符集包含了人類大部分的文字磨取。
<title>My test page</title> 設置頁面標題，出現(xiàn)在瀏覽器標簽上柴墩，當你標記/收藏頁面時它可用來描述頁面忙厌。
</head>
<body> 包含了你訪問頁面時所有顯示在頁面上的內(nèi)容，文本拐邪，圖片慰毅，音頻，游戲等等扎阶。
<p>This is my page</p>
</body>
</html>
HTML中的空格
下面的兩個代碼是等價的：
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
無論用了多少空格（包括白字符汹胃，包括換行），當渲染這些代碼的時候东臀，HTML解釋器會將這些連續(xù)出現(xiàn)的空白字符減少為一個單獨的空格符着饥。為了代碼的可讀性我們會使用多的空白，在HTML代碼中惰赋，我們讓每個嵌套的元素以兩個空格縮進宰掉。
實體引用：在HTML中包含特殊字符
在HTML中，字符 <, >,",'和 & 是特殊字符. 它們是HTML語法自身的一部分, 那么你如何將這些字符包含進你的文本中呢, 比如說如果你真的想要在文本中使用符號&或者小于號, 而不想讓它們被瀏覽器視為代碼并被解釋?
必須使用字符引號——表示字符的特殊編碼
每個字符引用以符號&開始赁濒，以;結(jié)束轨奄。
原義字符 等價字符引用
| 原義字符 | 等價字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
例子
<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> element.</p>
元數(shù)據(jù)：<meta>元素
元素就是描述數(shù)據(jù)的數(shù)據(jù)，而HTML有一個“官方的”方式來為一個文檔添加元數(shù)據(jù)<meta>元素拒炎。然而挪拟，其他在這篇文章中提到的東西也可以被當作元數(shù)據(jù)。有很多不同類型的<meta>元素可以被包含進你的頁面<head>元素.
指定你文檔中字符的編碼
<meat charset="utf-8">
這個元素簡單的指定文檔的字符編碼击你，在這個文檔中被允許使用的字符集玉组。utf-8是一個通用的字符集谎柄，它包含了任何人類語言中的大部分字符。這意味著你的web頁面可以顯示任意語言惯雳；所以對于你的每一個頁面朝巫，使用這個設置是很好的。
添加作者和描述
許多<meta> 元素包含了name 和 content 特性：
- name指定了meta元素的類型石景；說明該元素包含了是什么類型信息劈猿。
- content指定了實際的元數(shù)據(jù)內(nèi)容
這兩個meta元素對于定義你的頁面作者和提供頁面的描述內(nèi)容是很有用的。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
其他類型的metadata
當你在網(wǎng)站上查看源碼時鸵钝，你也會發(fā)現(xiàn)其他類型的元數(shù)據(jù)糙臼。你在網(wǎng)站上看到的許多功能都是專有創(chuàng)作，旨在向某些網(wǎng)站(如社交網(wǎng)站)提供可使用的特定信息恩商。
例如变逃，F(xiàn)acebook 編寫的元數(shù)據(jù)協(xié)議 Open Graph Data 為網(wǎng)站提供了更豐富的元數(shù)據(jù)
Twitter 還擁有自己的類型的專有元數(shù)據(jù)協(xié)議，當網(wǎng)站的 URL 顯示在 twitter.com 上時怠堪，它具有相似的效果揽乱。例如下面：
<meta name="twitter:title" content="Mozilla Developer Network">
為你的站點增加自定義圖標
為進一步豐富網(wǎng)站設計，可以在元素據(jù)中添加對自定義圖標的引用粟矿，這些將在特定的場合中顯示凰棉。
這個不起眼的圖標已經(jīng)存在很多年了，16×16像素是這種圖標的第一種類型陌粹。
頁面添加圖標的方式有：
- 將其保存在與網(wǎng)站頁面相同的目錄中撒犀，以.ico格式保存（大多數(shù)瀏覽器將支持更通用的格式，如.gif或.png掏秩，但使用ICO格式將確保它能在如Internet Explorer 6一樣久遠的瀏覽器顯示）
- 將以下行添加到HTML<head>中以引用它：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
現(xiàn)代瀏覽器在各種場合使用favicons或舞，如打開的頁面標簽頁和書簽面板中的書簽頁面。下面是一個favicon 出現(xiàn)在書簽面板中的例子：
如今還有很多其他的圖標類型可以考慮蒙幻。例如映凳，你可以在 MDN 主頁的源代碼中找到它：
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" >
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" >
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" >
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" >
<!-- basic favicon -->
<link rel="shortcut icon" >
這些注釋解釋了每個圖標的用途 - 這些元素涵蓋的東西提供一個高分辨率圖標，這些高分辨率圖標當網(wǎng)站保存到iPad的主屏幕時使用邮破。
在HTML中應用css和JavaScript
如今诈豌，幾乎你使用的所有網(wǎng)站都會使用 CSS 讓網(wǎng)頁更加炫酷，使用JavaScript讓網(wǎng)頁有交互功能抒和，比如視頻播放器矫渔，地圖，游戲以及更多功能摧莽。這些應用在網(wǎng)頁中很常見庙洼，它們分別使用 <link>元素以及 <script> 元素。
-
<link>元素經(jīng)常位于文檔的頭部。這個link元素有2個屬性送膳，rel="stylesheet"表明這是文檔的樣式表，而 href包含了樣式表文件的路徑：
<link rel="stylesheet" href="my-css-file.css">
-
<script>部分沒必要非要放在文檔頭部丑蛤；實際上叠聋，把它放在文檔的尾部（在</body>標簽之前）是一個更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了HTML內(nèi)容（如果腳本加載某個不存在的元素受裹，瀏覽器會報錯）碌补。
<script src="my-js-file.js"></script>
為文檔設置主語言
最后，值得一提的是你可以（而且確實應該）為你的站點設定語言棉饶， 這個可以通過添加lang屬性到HTML開始標簽中來實現(xiàn) (參考 meta-example.html)厦章，如下所示：
<html lang="en-US">
這在很多方面都很有用。如果你的HTML文檔的語言設置好了照藻，那么你的HTML文檔就會被搜索引擎更有效地索引 (例如袜啃，允許它在特定于語言的結(jié)果中正確顯示)，對于那些使用屏幕閱讀器的視障人士也很有用(比如幸缕， 法語和英語中都有“six”這個單詞群发，但是發(fā)音卻完全不同)。
你還可以將文檔的分段設置為不同的語言发乔。例如熟妓，我們可以把日語部分設置為日語，如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い栏尚。</span>.</p>
在下載鏈接時使用下載屬性節(jié)
當您鏈接到要下載的資源而不是在瀏覽器中打開時起愈，您可以使用下載屬性來提供一個默認的保存文件名。下面是一個下載鏈接到Firefox 的 Windows最新版本的示例：
<a
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
電子郵件鏈接節(jié)
當點擊一個鏈接或按鈕時译仗，打開一個新的電子郵件發(fā)送信息而不是連接到一個資源或頁面抬虽，這種情況是可能做到的。這樣做是使用<a>元素和mailto：URL的方案古劲。
其最基本和最常用的使用形式為一個mailto:link （鏈接）斥赋，鏈接簡單說明收件人的電子郵件地址。例如:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
這會創(chuàng)建一個鏈接产艾，看起來像這樣： Send email to nowhere.
實際上疤剑，郵件地址甚至是可選的。如果你忘記了（也就是說闷堡，你的[href](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-href)僅僅只是簡單的"mailto:"）隘膘，一個新的發(fā)送電子郵件的窗口也會被用戶的郵件客戶端打開，只是沒有收件人的地址信息杠览，這通常在“分享”鏈接是很有用的弯菊，用戶可以發(fā)送給他們選擇的地址郵件
具體細節(jié)節(jié)
除了電子郵件地址，您還可以提供其他信息踱阿。事實上管钳，任何標準的郵件頭字段可以被添加到你提供的郵件URL钦铁。 其中最常用的是主題(subject)、抄送(cc)和主體(body) (這不是一個真正的頭字段才漆，但允許您為新郵件指定一個短內(nèi)容消息)牛曹。 每個字段及其值被指定為查詢項。
下面是一個包含cc醇滥、bcc黎比、主題和主體的示例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
注意: 每個字段的值必須是URL編碼的。 也就是說鸳玩，不能有非打印字符（不可見字符比如制表符阅虫、換行符、分頁符）和空格 percent-escaped. 同時注意使用問號（?）來分隔主URL與參數(shù)值不跟，以及使用&符來分隔mailto:中的各個參數(shù)颓帝。 這是標準的URL查詢標記方法。閱讀 The GET method 以了解哪種URL查詢標記方法是更常用的窝革。
什么是超鏈接
超鏈接是互聯(lián)網(wǎng)提供的最令人興奮的創(chuàng)新之一躲履，它們從一開始就一直是互聯(lián)網(wǎng)的一個功能，使互聯(lián)網(wǎng)成為互聯(lián)的網(wǎng)絡聊闯。超鏈接使我們能夠?qū)⑽覀兊奈臋n鏈接到任何其他文檔（或其他資源）工猜，也可以鏈接到文檔的指定部分，我們可以在一個簡單的網(wǎng)址上提供應用程序（與必須先安裝的本地應用程序或其他東西相比）菱蔬。幾乎任何網(wǎng)絡內(nèi)容都可以轉(zhuǎn)換為鏈接篷帅，點擊（或激活）超鏈接將使網(wǎng)絡瀏覽器轉(zhuǎn)到另一個網(wǎng)址（URL）。
注意：URL可以指向HTML文件拴泌、文本文件魏身、圖像、文本文檔蚪腐、視頻和音頻文件以及可以在網(wǎng)絡上保存的任何其他內(nèi)容箭昵。 如果瀏覽器不知道如何顯示或處理文件，它會詢問您是否要打開文件（需要選擇合適的本地應用來打開或處理文件）或下載文件（以后處理它）回季。
鏈接的解析
通過將文本（或其他內(nèi)容家制，見塊級鏈接)轉(zhuǎn)換為<a>元素內(nèi)的鏈接來創(chuàng)建基本鏈接， 給它一個[href]屬性（也稱為目標）泡一，它將包含您希望鏈接指向的網(wǎng)址颤殴。
<p>I'm creating a link to
<a >the Mozilla homepage</a>.
</p>
使用title屬性添加支持信息
添加到到鏈接的另一個屬性是標題；包含關(guān)于鏈接的補充有用的信息鼻忠，例如頁面包含什么樣的信息或需要注意的事情涵但。
<p>I'm creating a link to
<a
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.
</p>
塊級鏈接
可以將一些內(nèi)容轉(zhuǎn)換為鏈接，包括塊級元素。如果想要將一個圖像轉(zhuǎn)換為鏈接矮瘟，只需要把圖象放到<a></a>標簽中間瞳脓。
<a >
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>
鏈接最佳實踐
- 用清晰的鏈接措辭
- 盡可能使用相對鏈接
- 鏈接到非html資源 留下清晰的指示
- 在下載鏈接是使用下載屬性
當您鏈接到要下載的資源而不是在瀏覽器中打開時，您可以使用下載屬性來提供一個默認的保存文件名澈侠。下面是一個下載鏈接到Firefox 的 Windows最新版本的示例：
<a
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
電子郵件鏈接
當點擊一個鏈接或者按鈕時篡殷，打開一個新的電子郵件發(fā)送信息而不是連接到一個資源或者頁面，這種情況是可能做到的埋涧。這樣做是使用<a>元素和mailto:URL的方案。
最基本和常用的使用形式為一個mailto:link(鏈接)奇瘦，鏈接簡單說明收件人的電子郵箱地址棘催。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
實際上，郵件地址甚至是可選的耳标。如果你忘記了（href="mailto:"）,一個新的發(fā)送電子郵件的窗口也會被用戶的郵件客服端打開醇坝，只是沒有收件人的地址信息，這通常在“分享”鏈接是很有用的次坡，用戶可以發(fā)送給他們選擇的地址郵件呼猪。
具體細節(jié)
還以可提供其它信息。任何標準的郵件頭字段可以被添加到你提供的郵件URL砸琅。其中最常用的主題（subject）宋距、抄送（cc）、和主體（body）
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
意: 每個字段的值必須是URL編碼的症脂。 也就是說谚赎，不能有非打印字符（不可見字符比如制表符、換行符诱篷、分頁符）和空格 percent-escaped. 同時注意使用問號（
?）來分隔主URL與參數(shù)值壶唤，以及使用&符來分隔mailto:中的各個參數(shù)。 這是標準的URL查詢標記方法棕所。閱讀 The GET method 以了解哪種URL查詢標記方法是更常用的闸盔。
什么是超鏈接
超鏈接是互聯(lián)網(wǎng)提供的最令人興奮的創(chuàng)新之一，它們從一開始就一直是互聯(lián)網(wǎng)的一個功能琳省，使互聯(lián)網(wǎng)成為互聯(lián)的網(wǎng)絡迎吵。超鏈接使我們能夠?qū)⑽覀兊奈臋n鏈接到任何其他文檔（或其他資源），也可以鏈接到文檔的指定部分针贬，我們可以在一個簡單的網(wǎng)址上提供應用程序（與必須先安裝的本地應用程序或其他東西相比）钓觉。幾乎任何網(wǎng)絡內(nèi)容都可以轉(zhuǎn)換為鏈接，點擊（或激活）超鏈接將使網(wǎng)絡瀏覽器轉(zhuǎn)到另一個網(wǎng)址（URL）坚踩。
注意：URL可以指向HTML文件荡灾、文本文件、圖像、文本文檔批幌、視頻和音頻文件以及可以在網(wǎng)絡上保存的任何其他內(nèi)容础锐。 如果瀏覽器不知道如何顯示或處理文件，它會詢問您是否要打開文件（需要選擇合適的本地應用來打開或處理文件）或下載文件（以后處理它）荧缘。
鏈接的解析
通過將文本（或其他內(nèi)容皆警，見塊級鏈接)轉(zhuǎn)換為<a>元素內(nèi)的鏈接來創(chuàng)建基本鏈接， 給它一個[href]屬性（也稱為目標）截粗，它將包含您希望鏈接指向的網(wǎng)址信姓。
<p>I'm creating a link to
<a >the Mozilla homepage</a>.
</p>
使用title屬性添加支持信息
添加到到鏈接的另一個屬性是標題；包含關(guān)于鏈接的補充有用的信息绸罗，例如頁面包含什么樣的信息或需要注意的事情意推。
<p>I'm creating a link to
<a
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.
</p>
塊級鏈接
可以將一些內(nèi)容轉(zhuǎn)換為鏈接，包括塊級元素珊蟀。如果想要將一個圖像轉(zhuǎn)換為鏈接菊值，只需要把圖象放到<a></a>標簽中間。
<a >
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>
鏈接最佳實踐
- 用清晰的鏈接措辭
- 盡可能使用相對鏈接
- 鏈接到非html資源 留下清晰的指示
- 在下載鏈接是使用下載屬性
當您鏈接到要下載的資源而不是在瀏覽器中打開時育灸，您可以使用下載屬性來提供一個默認的保存文件名腻窒。下面是一個下載鏈接到Firefox 的 Windows最新版本的示例：
<a
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
電子郵件鏈接
當點擊一個鏈接或者按鈕時，打開一個新的電子郵件發(fā)送信息而不是連接到一個資源或者頁面磅崭，這種情況是可能做到的儿子。這樣做是使用<a>元素和mailto:URL的方案。
最基本和常用的使用形式為一個mailto:link(鏈接)砸喻，鏈接簡單說明收件人的電子郵箱地址典徊。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
實際上，郵件地址甚至是可選的恩够。如果你忘記了（href="mailto:"）,一個新的發(fā)送電子郵件的窗口也會被用戶的郵件客服端打開卒落，只是沒有收件人的地址信息，這通常在“分享”鏈接是很有用的蜂桶，用戶可以發(fā)送給他們選擇的地址郵件儡毕。
具體細節(jié)
還以可提供其它信息。任何標準的郵件頭字段可以被添加到你提供的郵件URL扑媚。其中最常用的主題（subject）腰湾、抄送（cc）、和主體（body）
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
意: 每個字段的值必須是URL編碼的疆股。 也就是說费坊，不能有非打印字符（不可見字符比如制表符、換行符旬痹、分頁符）和空格 percent-escaped. 同時注意使用問號（
?）來分隔主URL與參數(shù)值附井，以及使用&符來分隔mailto:中的各個參數(shù)讨越。 這是標準的URL查詢標記方法。閱讀 The GET method 以了解哪種URL查詢標記方法是更常用的永毅。
HTML的主要工作是編輯文本結(jié)構(gòu)和文本內(nèi)容（也稱為語義semantics）把跨， 以便瀏覽器能正確的顯示。本文介紹了HTML的使用方法：在一段本文中添加標題和段落沼死，強調(diào)語句着逐，創(chuàng)建列表等等。
為什么需要語義
我們在任何地方都要依賴語言學-我們依靠以前的經(jīng)驗就知道日常事務都代表什么意蛀。
同樣的道理耸别，我們需要確保使用了正確的元素來給予正確的意思、作用以及外形县钥。<h1>元素是一個語義元素秀姐，他給出包裹在頁面上用來表示頂級標題的角色。
一般來說魁蒜，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然你可以使用CSS讓它變成任何你想要的樣式。更重要的是吩翻，它的語義值將以多種方式被使用兜看，比如通過搜索引擎和屏幕閱讀器）。
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
這是一個<span>元素狭瞎，它沒有語義细移，當您想要對它用CSS（或者JS）時，您可以用它包裹內(nèi)容熊锭，且不需要附加任何額外的意義（在未來的課程中你會發(fā)現(xiàn)更多這類元素）弧轧。我們已經(jīng)對它使用了CSS來讓它看起來像一個頂級標題。然而碗殷，由于它沒有語義值精绎，所以它不會有任何上文提到的幫助。最好的方法是使用相關(guān)的HTML元素來標記這個項目锌妻。
列表 List
三種不同的列表代乃。
- 無序列表
<ul>
<li>牛奶</li>
<li>雞蛋</li>
<li>面包</li>
<li>鷹嘴豆泥</li>
</ul>
- 有序列表
<ol>
<li>行駛到這條路的盡頭</li>
<li>向右轉(zhuǎn)</li>
<li>直行穿過第一個雙環(huán)形交叉路</li>
<li>在第三個環(huán)形交叉路左轉(zhuǎn)</li>
<li>學校就在你的右邊，300米處</li>
</ol>
- 嵌套列表
將一個列表嵌入另一個列表是完全可以的仿粹，讓一些子項再首項目下搁吓。
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" humous, process it for a short time.</li>
<li>If you want a smooth humous, process it for a longer time.</li>
</ul>
</li>
</ol>
重點強調(diào)
<em> <strong>
HTML的主要工作是編輯文本結(jié)構(gòu)和文本內(nèi)容（也稱為語義semantics）， 以便瀏覽器能正確的顯示吭历。本文介紹了HTML的使用方法：在一段本文中添加標題和段落堕仔，強調(diào)語句，創(chuàng)建列表等等晌区。
為什么需要語義
我們在任何地方都要依賴語言學-我們依靠以前的經(jīng)驗就知道日常事務都代表什么摩骨。
同樣的道理通贞，我們需要確保使用了正確的元素來給予正確的意思、作用以及外形仿吞。<h1>元素是一個語義元素滑频，他給出包裹在頁面上用來表示頂級標題的角色。
一般來說唤冈，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然你可以使用CSS讓它變成任何你想要的樣式峡迷。更重要的是，它的語義值將以多種方式被使用你虹，比如通過搜索引擎和屏幕閱讀器）绘搞。
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
這是一個<span>元素，它沒有語義傅物，當您想要對它用CSS（或者JS）時夯辖，您可以用它包裹內(nèi)容，且不需要附加任何額外的意義（在未來的課程中你會發(fā)現(xiàn)更多這類元素）董饰。我們已經(jīng)對它使用了CSS來讓它看起來像一個頂級標題蒿褂。然而，由于它沒有語義值卒暂，所以它不會有任何上文提到的幫助啄栓。最好的方法是使用相關(guān)的HTML元素來標記這個項目。
列表 List
三種不同的列表也祠。
- 無序列表
<ul>
<li>牛奶</li>
<li>雞蛋</li>
<li>面包</li>
<li>鷹嘴豆泥</li>
</ul>
- 有序列表
<ol>
<li>行駛到這條路的盡頭</li>
<li>向右轉(zhuǎn)</li>
<li>直行穿過第一個雙環(huán)形交叉路</li>
<li>在第三個環(huán)形交叉路左轉(zhuǎn)</li>
<li>學校就在你的右邊昙楚，300米處</li>
</ol>
- 嵌套列表
將一個列表嵌入另一個列表是完全可以的，讓一些子項再首項目下诈嘿。
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" humous, process it for a short time.</li>
<li>If you want a smooth humous, process it for a longer time.</li>
</ul>
</li>
</ol>
重點強調(diào)
<em> <strong>
目標 ：學習如何使用不太知名的HTML元素來來標記高級語言特征
描述列表
第三種類型的列表—描述列表（description list）堪旧。這種列表的目的是標記一組項目及其相關(guān)描述，例如術(shù)語和定義奖亚，或者是問題和答案等淳梦。
描述列表使用與其他列表類型不同的閉合標簽— <dl>; 此外，每一項都用 <dt> (description term) 元素閉合昔字。每個描述都用 <dd> (description description) 元素閉合谭跨。
<dl>
<dt>soliloquy</dt>
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
<dt>monologue</dt>
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
</dl>
請注意：一個術(shù)語<dt>可以同時有多個描述<dd>
引用
展示計算機代碼
標記時間和日期
縮略語
另一個你在web上看到的相當常見的元素是<abbr>——它常被用來包裹一個縮略語或縮寫，并且提供縮寫的解釋（包含在title屬性中）李滴。
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
標記聯(lián)系方式
<addresss>
<p></p>
</address>
上標和下標
當你使用日期螃宙、化學方程式、和數(shù)學方程式時會偶爾使用上標和下標所坯。 <sup> 和<sub>元素可以解決這樣的問題谆扎。
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
`
> 目標 了解如何使用語義標簽來構(gòu)建文檔，以及如何制定簡單網(wǎng)站的結(jié)構(gòu)
# 文檔的基本部分
網(wǎng)頁可以看起來彼此不同芹助，但它們都傾向于使用類似的標準組件堂湖，除非頁面顯示全視頻或游戲闲先，或是某種藝術(shù)項目的一部風，或者是結(jié)構(gòu)不當：
- **標題**
通常在頂部有一個大標題和圖標无蜂，這是一個網(wǎng)站的主要常見信息伺糠，通常存在于每一個網(wǎng)頁。
- **導航**
鏈接到網(wǎng)站的主要部分斥季；通常由菜單按鈕训桶、鏈接或選項卡表示。于標題一樣酣倾，這些內(nèi)容通常在一個網(wǎng)頁于另一個網(wǎng)頁之間保持一致——在您的網(wǎng)站上導航不一致只會使人疑惑和惱火舵揭。許多網(wǎng)頁設計師認為導航欄是標題的一部分，而不是獨立的組件躁锡，但這并不是一個硬性規(guī)定午绳；實際上有些人認為，兩個獨立的會有更好的可訪問性映之，因為如果它們獨立拦焚，屏幕閱讀器可以更好地閱讀兩個功能。
- **主要內(nèi)容**
中心的一個大區(qū)域杠输，包含給定網(wǎng)頁的大部分獨特內(nèi)容赎败，例如您正在閱讀的主要故事，或您要查看的地圖抬伺，或者新聞標題等...這是網(wǎng)頁的一部分螟够，絕對會因頁面而異灾梦。
- **側(cè)欄**
一些次要信息峡钓、鏈接、引言若河、廣告等能岩。通常這是與主要內(nèi)容中包含的內(nèi)容相關(guān)（例如在新聞文章頁面上，側(cè)邊欄可能包含作者的個人信息或相關(guān)文章的鏈接）萧福，但有在一些情況下拉鹃，你會發(fā)現(xiàn)一些重復的元素，如輔助導航系統(tǒng)鲫忍。
- **頁腳**
橫跨頁面底部的條紋膏燕，通常包含精美的打印、版權(quán)通知或者聯(lián)系信息悟民。它是一個放置公共信息（如標題）的地方坝辫，但通常該信息對網(wǎng)站來說不是特別重要。通過提供用于快速訪問內(nèi)容的鏈接射亏，頁腳有時也用于SEO目的近忙。
# 用于結(jié)構(gòu)化網(wǎng)站的HTML
一些網(wǎng)站有更多的列竭业，有些網(wǎng)站更復雜，但你會有你的想法及舍。使用正確的CSS未辆，您可以使用幾乎任何元素來裝飾不同的部分，并得到您想要的結(jié)果锯玛，但如前所述咐柜，我們需要遵守語義，并使用正確的元素進行語義化工作更振。
這是因為視覺效果并不能說明一切炕桨。 我們可以對內(nèi)容最有用的部分使用顏色和字體大小來吸引用戶的關(guān)注，例如導航菜單和相關(guān)鏈接肯腕，但是視覺障礙的人該怎么辦献宫，這難道也對那些沒有“粉紅色”和“大”的概念的人來說非常有用嗎？
在您的HTML代碼中实撒，您可以根據(jù)其功能標記內(nèi)容部分 - 您可以明確地使用表示上述內(nèi)容部分的元素姊途，屏幕閱讀器等輔助技術(shù)可以識別這些元素，并幫助執(zhí)行“找到主導航 “或”找到主要內(nèi)容“知态。 正如我們前面提到的那樣捷兰，[沒有使用正確的元素結(jié)構(gòu)和語義去構(gòu)建網(wǎng)頁會有很多的不良影響](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E7%BB%93%E6%9E%84%E5%8C%96)。
為了實現(xiàn)這樣的語義標記负敏，HTML提供了可以用來表示這些部分的專用標簽贡茅，例如：
- 標題`<header>`
- 導航欄`<nav>`
- 主要元素`<main>`,具有代表性的內(nèi)容段落主題可以使用`<article><section>`,和`<div>`元素。
- 側(cè)欄`<aside>`經(jīng)常嵌套在`<main>`中其做。
- 頁腳`<footer>`
# HTML布局元素細節(jié)
從總體詳細的理解HTML的元素是不錯的——隨著你web開發(fā)經(jīng)驗的逐漸積累顶考，你將會逐漸理解HTML的元素。你可以通過查閱[HTML元素參考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)找到更多的細節(jié)⊙梗現(xiàn)在驹沿，你需要理解這些主要的元素定義：
- `<main>`展現(xiàn)了頁面的獨特性。只可以在每一個頁面上使用一次`<main>`,直接把它放到`<bod>`中蹈胡，在理想的情況下渊季，不應該把它嵌套進其他的元素中。
- `<article>`閉合一塊與自身相關(guān)的內(nèi)容罚渐，這塊內(nèi)容能夠解釋它自身而不是頁面上其他的內(nèi)容（例如一篇單獨的博客）却汉。
- `<section>`似于<article>，但是它更多的是伴隨著由一個單獨功能構(gòu)成的頁面（例如一個小型的地圖荷并，或者是一組文章的標題和摘要）合砂。它被認為最好的實際應用是用[標題](https://developer.mozilla.org/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy)作為每一部分（section）的開頭；也要注意的是你可以把不同的<article>分到不同的<section>中璧坟，或者把不同的<section>分到不同的<article>中既穆，這要取決于內(nèi)容
- `<header>`現(xiàn)了一系列的介紹性內(nèi)容赎懦。如果它是[`<body>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body "HTML body 元素表示文檔的內(nèi)容。document.body 屬性提供了可以輕松訪問文檔的 body 元素的腳本幻工。") 的子元素,它就定義了網(wǎng)站的全局頁眉励两。但是如果它是 [`<article>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article "<article>元素表示文檔、頁面囊颅、應用或網(wǎng)站中的獨立結(jié)構(gòu)穿铆，其意在成為可獨立分配的或可復用的結(jié)構(gòu)蟋软，如在發(fā)布中沥割，它可能是論壇帖子戒劫、雜志或新聞文章、博客胳挎、用戶提交的評論饼疙、交互式組件，或者其他獨立的內(nèi)容項目慕爬。") 或[`<section>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section "HTML Section 元素 (<section>) 表示文檔中的一個區(qū)域（或節(jié)）窑眯，比如，內(nèi)容中的一個專題組医窿，一般來說會有包含一個標題（heading）磅甩。一般通過是否包含一個標題 (<h1>-<h6> element) 作為子節(jié)點 來 辨識每一個<section>。") 的子元素姥卢，它就定義了這些部分的特定的頁眉(不要把這些與[titles and headings](https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)混淆)卷要。
- `<nav>`包含了頁面主要的導航功能。二級鏈接等独榴，不會進入導航功能部分僧叉。
- `<footer>`包含了頁面的頁腳部分。
# 沒有特定語義的裝飾元素
有時候括眠，你找不到理想的語義元素來包含項目或內(nèi)容彪标。有時候你可能只想僅僅用css或JavaScript將一組元素作為一個單獨的實體來修飾倍权。HTML提供了`<div>`和`<span>`元素掷豺。最好使用`class`屬性來提供一些標簽，這樣他們就能容易的被找到薄声。
`<span>`是一個行內(nèi)無語義元素当船，你應該僅僅當無法找到更好的語義元素包含內(nèi)容時使用，或者不想增加特定的含義默辨。
```html
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>
在這種情況中德频，the editor’s note 應該僅僅是提供額外的對編輯器的說明；它沒有額外的語義缩幸。對于用戶來說壹置，CSS可能用于從主文本中抽離這些note竞思。
<div>是一個塊級無語義元素，你應該僅僅當找不到更好的塊級元素時使用钞护，或者不想增加特定的意義盖喷。例如，當你瀏覽淘寶時难咕，有一個購物車部件一直都在你可以選擇的地方课梳。
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
<img src="../products/3333-0985/" alt="Silver earrings">
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>
這并不是一個<aside>, 因為它和主要內(nèi)容并沒有必要的聯(lián)系（你想在任何地方都能看到它。它甚至不能用<section>來特定的指定余佃，因為它不是頁面上主要內(nèi)容的一部分暮刃。所以在這種情況下用<div>是合適的, 我們還需添加一個head標簽幫助屏幕閱讀者找到它。
換行與水平分割線
<br>和<hr>將會是你偶然使用并且想要了解的兩個元素：
<br>在一個段落中創(chuàng)建一個換行爆土；在你想要生成一系列短行的地方椭懊，<br>是唯一能夠生成這種結(jié)構(gòu)的元素。例如一個郵寄地址或一首詩步势。
<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>
沒有<br>元素灾搏，這一段會直接表示在一行中,有了<br>元素，會生成下面這樣的：
There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.
<hr>元素在文檔中生成一條水平分割線立润，表示文本中主題的變化（例如主題或場景的變化）狂窑。
看起來就是一條水平線。
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
