1.1 HTML 基礎(chǔ)
1.1.1 HTML 的定義
HTML（Hyper Text Markup Language）是一種超文本標記語言，用來給內(nèi)容賦予結(jié)構(gòu)和意義绣溜。
1.1.2 HTML基礎(chǔ)術(shù)語
元素：元素是定義頁面內(nèi)對象結(jié)構(gòu)和內(nèi)容的指示符聘芜，通常是指開始標簽到結(jié)束標簽內(nèi)的所有代碼尚蝌。
- 行內(nèi)元素：
<em>不皆、<a>蟆技、<b>魄懂、<span>沿侈、<strong> - 塊級元素：
<p>、<h1>市栗、<h2>……<div>缀拭、<ul>、<ol>填帽、<li>蛛淋、<dl>、<dt>篡腌、<dd> - 空元素：
<br>褐荷、<meta>、<hr>嘹悼、<img>叛甫、<input>、<link>
標簽：元素通常由標簽成對組成杨伙。開始標簽標記了元素的開始合溺，例如:<p>，閉合標簽標記了一個元素的結(jié)束缀台，標簽內(nèi)以一個斜杠開始，例如：</p>
<p> ……</p>
屬性：屬性提供了有關(guān) HTML 元素的更多的信息哮奇。屬性總是以名稱/值對的形式在開始標簽中出現(xiàn)膛腐，例如：<a > cc log </a>
HTML基礎(chǔ)術(shù)語例子：cc log
1.2 HTML頁面基本結(jié)構(gòu)
1.2.1 文檔類型聲明
在HTML文件的開頭需進行文檔類型聲明（doctype）睛约，以告訴瀏覽器頁面使用的哪個版本的HTML 。
<!DOCTYPE html>
1.2.2 文檔基本結(jié)構(gòu)
HTML文檔基本結(jié)構(gòu)一般包含以下聲明和標簽：doctype哲身、html辩涝、head、body
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<title> HELLO,WORLD!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>hello,world!</h1>
<p>This is a website.</p>
</body>
</html>
1.3 視口
一般而言勘天，對于響應(yīng)式站點怔揩，應(yīng)設(shè)置適口如下：
<meta name="viewport" content="width=device-width,initial-scale=1">
1.4 結(jié)構(gòu)性元素
主要包括：<header>、<nav>脯丝、<section>商膊、<aside>、<footer>
1.4.1 <header>
在<header>元素中宠进，應(yīng)包含介紹性和導(dǎo)航性的輔助內(nèi)容晕拆，如：logo、搜索功能和主導(dǎo)航欄材蹬。
對應(yīng)的WAI-ARIA屬性是banner.
<header role="banner">……</header>
1.4.2 <nav>
頁面主導(dǎo)航包含在<nav>元素中实幕，通常在<header>中會有一個<nav>元素。
對應(yīng)的WAI-ARIA屬性是navigation堤器。
<nav role="navigation"> ……</nav>
1.4.3 <footer>
可以用作頁面頁腳昆庇，也可以在其他地方設(shè)置腳標，對內(nèi)容區(qū)塊（而不是）相對應(yīng)的WAI-ARIA屬性是contentinfo闸溃。
<footer role="contentinfo"> ……</footer>
1.4.4 <article>
<article>元素師網(wǎng)頁上一塊獨立的內(nèi)容整吆，一個頁面可以有多個<article>元素。但沒有對應(yīng)的WAI-ARIA 屬性圈暗。
<article>……</article>
1.4.5 <aside>
<aside>元素用于次要的內(nèi)容掂为，可以是與網(wǎng)站或整個頁面相關(guān)的（友情鏈接等），或者是嵌套在<article>元素中员串，與文章相關(guān)（術(shù)語表等）勇哗。
相對應(yīng)的WAI-ARIA 屬性是complementary。
<aside role="complementary">……</aside>
<body>
<header role="banner">
<nav role="navigation">……</nav>
</header>
<article>……</article>
<aside role="complementary">……</article>
<footer role="contentinfo">……</footer>
</body>
1.4.6 IE 支持
為了讓網(wǎng)站能在老版的IE中正確顯示寸齐，需要使用polyfill或利刃shive腳本欲诺。我們所要做的就是下載這個文件，然后在<head>元素中鏈接他渺鹦，如：
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->
1.5 創(chuàng)建一個頁面
1.5.1 示例
以下示例為一個不包含任何css樣式的頁面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello,World!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![end if]-->
</head>
<body>
<header role="banner">
<h1>Learning html</h1>
<nav role="navigation">
<ul>
<li><a href="……">Home</li>
<li><a href="……">About</li>
<li><a href="……">Contact</li>
<li><a href="……">Links</li>
</ul>
</nav>
</header>
<article>
<h2>html的定義</h2>
<p>HTML（Hyper Text Markup Language）是一種超文本標記語言扰法，用來給內(nèi)容賦予結(jié)構(gòu)和意義。</p>
</article>
<aside role="complementary">
<h2>Related links</h2>
<ul>
<li><a >cc log</a></li>
<li><a >hipo</a></li>
</ul>
</aside>
<footer role="contentinfo">
<p>?2016 html forever</p>
</footer>
</body>
</html>
1.5.2 注釋
<!--這是一個html注釋-->
<!--這是另一個html注釋毅厚，
分成多行-->
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![end if]-->
以上示例為條件注釋塞颁，只能被IE瀏覽器識別（其他瀏覽器只會將其當作普通注釋并忽略），可以用來給予IE特別的指示。
