HTML CSS Javascript 的關係
HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
JavaScript是用來實現網頁上的動態效果。如:鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。
HTML 標籤語法
1. 標籤由英文尖括號<和>括起來，如<html>就是一個標籤。
2. html中的標籤一般都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 標籤與標籤之間是可以嵌套的，但先後順序必須保持一致，如：<div>裏嵌套<p>，那麼</p>必須放在</div>的前面。如下圖所示。
4. HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因爲大部分程序員都以小寫爲準。
HTML標籤
<p> 標籤
如果想在網頁上顯示文章，就需要<p>標籤，把文章的段落放到<p>標籤中。
語法：
<p>段落文本</p>
<hx> 標籤
使用<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法：
<h1>段落文本</h1>
<strong> 和 <em>標籤
在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標籤。
但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。
語法：
<em>段落文本</em>
<strong>段落文本</strong>
<q> 標籤
使用q標籤可以在html中添加一段引用，如作家的話、詩句等。
1. 注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。
語法：
段落文本<q>引用文本</q>段落文本
<blockquote> 標籤
blockquote的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。
1. 瀏覽器對<blockquote>標籤的解析是縮進樣式，而不是添加引號
語法：
<blockquote>引用段落</blockquote>
<br /> 標籤
需要加回車換行的地方加入<br />，<br />標籤作用相當於word文檔中的回車。
1. 瀏覽器會忽略HTML中的回車和空格，如果需要換行，就要用到<br />標籤。
2. 如果需要加空格，則需要用 來替換空格。
語法：
引用段落<br />
<hr /> 標籤
在信息展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些.
1. <hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
2. <hr />標籤的在瀏覽器中的默認樣式線條比較粗，顏色爲灰色。可以通過css來改變水平線的樣式。
語法：
<p>文本段落</p>
<hr />
<address> 標籤
一般網頁中會有一些網站的聯繫地址信息需要在網頁中展示出來，這些聯繫地址信息如公司的地址就可以<address>標籤。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
1. <address>標籤中的內容會在瀏覽器中顯示爲斜體。
語法：
<address>地址信息或聯繫人信息</address>
<code>和<pre> 標籤
在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼爲一行代碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
1. 如果是多行代碼，可以使用<pre>標籤。
2. <pre> 標籤的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
語法：
<code>一行計算機代碼</code>
<pre>多行計算機代碼</pre>
<ul> 和 <li>標籤
利用<ul>和<li>可以生成沒有順序的列表。
語法：
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
<ol> 和 <li>標籤
利用<ol>和<li>可以生成有順序的列表。
語法：
<ol>
<li>前端開發面試心法 </li>
<li>JavaScript全攻略</li>
</ul>
<div> 標籤
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
1. div和span類似，都沒有特殊的語義。
2. div可以用來排版。
3. div屬於塊級元素。
4. 可以用id來爲div分組命名
語法：
<div id=’xxx’>
…
</div>
<caption> 標籤
可以使用caption標籤來爲表格添加標題：
語法：
<table>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a> 標籤
使用<a>標籤可實現超鏈接，它在網頁製作中可以說是無處不在，只要有鏈接的地方，就會有這個標籤。
語法：
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
1. title屬性的作用：鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎瞭解鏈接地址的內容（語義化更友好）
2. <a>標籤在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，如果需要在新的瀏覽器窗口中打開，則需要用到target選項。
<a href="目標網址" target="_blank">click here!</a>
3. a標籤還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
<img> 標籤
使用<img>標籤可以在網頁中插入圖片。
語法：
<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
1、src：標識圖像的位置；
2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。
HTML表單
表單可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：
<form method="傳送方式" action=”URL">
</form>
1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ： 數據傳送的方式（get/post）。
4. 所有表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間
5. get請求會把表單提供的參數放到URL中，而post請求會把參數放到http請求體中
文本、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1、type：
當type="text"時，輸入框爲文本輸入框;
當type="password"時, 輸入框爲密碼輸入框。
2、name：爲文本框命名，以備後臺程序ASP 、PHP使用。
3、value：爲文本輸入框設置默認值。(一般起到提示作用)
文本域 多行文本輸入
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：
<textarea rows="行數" cols="列數">
文本
</textarea>
1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入默認值。
單選框、複選框
在使用表單設計調查表時，爲了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件爲單選框
當 type="checkbox" 時，控件爲複選框
2、value：提交數據到服務器的值（後臺程序PHP使用）
3、name：爲控件命名，以備後臺程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
下拉列表框
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選
下拉列表也可以進行多選操作，在<select>標籤中設置multiple="multiple"屬性，就可以實現多選功能
提交按鈕
在表單中有兩種按鈕可以使用，分別爲：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
1, type：只有當type值設置爲submit時，按鈕纔有提交作用
2, value：按鈕上顯示的文字
重置按鈕
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置爲"reset"就可以。
語法：
<input type=”reset" value=”重置">
1, type：只有當type值設置爲reset時，按鈕才有重置作用
2, value：按鈕上顯示的文字
form表單中的label標籤
label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。
語法：
<label for="控件id名稱"> </label>
HTML5
更簡化的語法：
- <!doctype html>
- <html lang=“zh-CN”>
- <meta charset=“utf-8”>
- 不區分大小寫 HTML = HtMl
- checked=“checked” à checked
- <html><head><body>可以省略
。。。
廢除的標籤
- 能用css替代的標籤：basefont, font, center…
- Frame相關的標籤，只支持iframe： frameset, frame, noframes
- 只有部分瀏覽器支持的標籤：applet, bgsound…
- 其他廢除的標籤：rb, dir, listing, xmp…
廢除了一些和樣式相關的屬性
HTML5 新增標籤
- <section></section> 表示頁面中的一個內容區塊，不用作排版
- <article></article> 表示與上下文不相干的獨立內容，比如說文章
- <aside></aside> 表示與文章相關的輔助信息，如文章後面的推薦閱讀
- <header></header> 頁眉
- <footer></footer> 頁腳
- <nav></nav> 導航欄
- <figure></figure> 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
- <figcaption></figcaption> 標籤定義 figure 的標題（caption）。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
- <video></video> 視頻標籤
- <audio></audio> 音頻標籤
- <embed /> 嵌入標籤，可以是視頻、音頻、flash等多媒體內容
- <mark></mark> 替換文本的背景色來標記文本
- <progress max=“100” value=“85”></progress> 進度條
- <canvas></canvas> 繪圖，替代flash
- <details><summary>always show</summary>something can be hidden</details>
- <datalist></datalist>
HTML5 新增屬性
- <html manifest=“xxx.manifest”>
- <meta charset=“utf-8”>
- <link rel=‘icon’ href=“URL” type=image/gif sizes=“16x16”> //目前幾乎沒有主流瀏覽器支持 sizes 屬性。
- <script defer src=“*.js”></script>
- <script async src=“*.js”></script>
- <a media=“tv” href=“www.baidu.com” hreflang=“zh” ref=“external”>baidu</a>
- <ol start=”50” reversed></ol>
- <style scoped></style>
- <iframe seamless srcdoc=“<h1>hello</h1>” sandbox src=www.baidu.com> </iframe>
HTML5 新增全局屬性
- data-*
- Hidden
- Tabindex
- spellcheck=”true”
- contenteditable=“true”