<所有內容摘自慕課網(wǎng)>
一 標簽的語法
-
標簽由英文尖括號<和>括起來，如
<html>就是一個標簽 - html中的標簽一般都是成對出現(xiàn)的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個
/
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
- 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：
<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。
- HTML標簽不區(qū)分大小寫，
<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。
二 認識html文件基本結構
<html>
<head>...</head>
<body>...</body>
</html>
-
<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。 -
<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、<style>、<link>、 <meta>等標簽。 - 在
<body>和</body>標簽之間的內容是網(wǎng)頁的主要內容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
三 head標簽
<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內容都是不同的，每個網(wǎng)頁都應該有一個獨一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示：
四 HTML的代碼注釋
語法：
``
五 <body>標簽
<body>標簽，網(wǎng)頁上顯示的內容放在這里
在網(wǎng)頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網(wǎng)頁。
在瀏覽器中的顯示效果：
六 <p>標簽，添加段落
如果想在網(wǎng)頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標中。
語法：
<p>段落文本</p>
注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。
在瀏覽器中顯示的效果：
<p>
標簽的默認樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。
七 <hx>標簽，為你的網(wǎng)頁添加標題
文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節(jié)我們將使用<hx>
標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6
分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據(jù)重要性遞減。
<h1>是最高的等級。語法：<hx>標題文本</hx>
(x為1-6)文章的標題前面已經(jīng)說過了，可以使用標題標簽，另外網(wǎng)頁上的各個欄目的標題也可使用它們。如下圖為騰訊網(wǎng)站。
注意：因為h1標簽在網(wǎng)頁中比較重要，所以一般h1標簽被用在網(wǎng)站名稱上。騰訊網(wǎng)站就是這樣做的。如：
<h1>騰訊網(wǎng)</h1>
h1-h6 標簽的默認樣式：
標簽代碼：
在瀏覽器中顯示的樣式：
從上面的圖片可以看出標題標簽的樣式都會加粗，h1標簽字號最大，h2標簽字號相對h1要小，以此類推h6標簽的字號最小。
<h1></h1>就是標題標簽，它在網(wǎng)頁上的代碼寫成<h1>勇氣</h1>
<p></p>是段落標簽。它在網(wǎng)頁上的代碼寫成<p>三年級時...我也沒勇氣參加。</p>
<img>是圖片標簽，它在網(wǎng)頁上的代碼寫成<img src="1.jpg">
八 加入強調語氣，使用<strong>和<em>標簽
有了段落又有了標題，現(xiàn)在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽。
但兩者在強調的語氣上有區(qū)別:<em>表示強調，<strong> 表示更強烈的強調。并且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
語法：
<em>需要強調的文本</em>
<strong>需要強調的文本</strong>
如，在網(wǎng)上商城中，某產(chǎn)品的打折后的價格是需要強調的。如下圖。
代碼實現(xiàn)：
在瀏覽器中默認樣式是有區(qū)別的：
原代碼，如下圖。
瀏覽器中的樣子，如下圖。
<em>的內容在瀏覽中顯示為斜體，<strong>顯示為加粗。如果不喜歡這種樣式，沒有關系，以后可以使用css樣式去改變它。
九 使用<span>標簽為文字設置單獨樣式
<span>標簽，我們對<em>、<strong>、<span>這三個標簽進行一下總結：
<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。
如下面例子：
<p>1922年的春天，一個想要成名名叫**<em>尼克?卡拉威</em>**（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，**<strong>股票</strong>**飛漲的時代。為了追尋他的**<span>美國夢</span>**，他搬入紐約附近一海灣居住。</p>
語法：
<span>文本</span>
十 <q>標簽，短文本引用
想在你的html中加一段引用嗎？比如在你的網(wǎng)頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。
語法：
<q>引用文本</q>
如下面例子：
<p>最初知道莊子，是從一首詩**<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>**開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p>
講解：
- 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用
<q></q>實現(xiàn)引用。 - 注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
下圖是代碼顯示結果：
注意這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
十一 <blockquote>標簽，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用<blockquote>
。
語法:
**<**blockquote>引用文本</blockquote>
如下面例子：
**<blockquote>**明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰(zhàn)地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。**</blockquote>**
