?HTML是英文Hypr Text Markup Language(超文本標記語言）。
? 1.? h1元素通常被用作主標題，h2元素通常被用作副標題，還有h3、h4、h5、h6元素，它們分別用作不同級別的標題。可以叫做元素或標簽，通常h2等標簽也可以使用很多次。
<h1>Hello World</h1>
p是paragraph的縮寫，通常被用來創(chuàng)建一個段落，就和你寫作文一樣。
<p>I'm a p tag!</p>
HTML 添加注釋
注釋的開始標記是<!--，結束標記是-->。
<!-- 我是注釋 -->
HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section。main元素讓搜索引擎和開發(fā)者瞬間就能找到網頁的主要內容。
添加圖片
用img元素來為你的網站添加圖片，其中src屬性指向一個圖片的地址。所有的img元素必須有alt屬性，alt屬性的文本是當圖片無法加載時顯示的替代文本，這對于通過屏幕閱讀器來瀏覽網頁的用戶非常重要。
<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙灘上豎起兩個大拇指">
HTML 基礎：用錨點實現網頁間的跳轉????????
a錨點（Anchor，簡寫 a）來實現網頁間的跳轉。
絕對 URL - 指向另一個站點 ：<a >cat photos</a>
相對 URL - 指向站點內的某個文件（href="index.html"）
在a標簽里面 target="_blank"?點擊鏈接會打開新的網頁
<a target="_blank">cat photos</a>
HTML 基礎：用a標簽（錨點）實現網頁內部跳轉
設置錨點的href屬性值為井號#加上想跳轉區(qū)域對應的id屬性值，這樣就可以創(chuàng)建一個內部跳轉。id是用來描述網頁元素的一個屬性，它的值在整個頁面中唯一。href=#，可以創(chuàng)建固定鏈接。
<a href="#contacts-header">Contacts</a>
<h2 id="contacts-header">Contacts</h2>
href=#，可以創(chuàng)建固定鏈接。
創(chuàng)建一個無序列表
無序列表unordered lists（縮寫 ul）。
無序列表以<ul>開始，中間包含一個或多個<li>元素，最后以</ul>結尾
<ul>
??<li>機械</li>
??<li>飛機</li>
</ul>
創(chuàng)建一個有序列表
有序列表ordered lists（縮寫 ol）。
無序列表以<ol>開始，中間包含一個或多個<li>元素，最后以</ol>結尾
<ol>
??<li>機械</li>
??<li>飛機</li>
</ol>
創(chuàng)建一個輸入框
現在讓我們來創(chuàng)建一個form表單。
input輸入框可以讓你輕松獲得用戶的輸入。
你可以像這樣創(chuàng)建一個文本輸入框：
<input type="text">
注意：input輸入框是沒有結束標記的
給輸入框添加占位符文本
Placeholder占位符是用戶在input輸入框中輸入任何東西前的預定義文本。
你可以像這樣創(chuàng)建一個占位符：
<input type="text" placeholder="這是輸入框">
創(chuàng)建一個表單
給form表單添加一個action屬性，你可以使用純 HTML 來構建向服務器提交數據的 Web 表單。在 HTML5 中，action 屬性不再是必需的。
<form action="URL">
絕對 URL - 指向另一個網站（比如 action="http://www.example.com/example.htm"）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 相對 URL - 指向網站內的一個文件（比如 action="example.htm"）?
給表單添加提交按鈕
<button> 標簽定義一個按鈕。
在 <button> 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 <input> 元素創(chuàng)建的按鈕之間的不同之處。
提示：請始終為 元素規(guī)定 type 屬性。不同的瀏覽器對 元素的 type 屬性使用不同的默認值。
<button type="submit">提交</button>
onclick鼠標單擊，alert提示，警示
<button type="button" onclick="alert('你好，世界!')">點我!</button>
給表單添加一個必填字段
把文本輸入框設置為必填項，在input元素中加上required屬性就可以了，沒有輸入內容，就無法提交。例如：
<input type="text" required>
創(chuàng)建一組單選按鈕
（單選按鈕）就好比單項選擇題，正確答案只有一個。單選按鈕只是input輸入框的一種類型。每一個單選按鈕都應該嵌套在它自己的label（標簽）元素中。所有關聯的單選按鈕應該擁有相同的name屬性。
<label for="indoor">
??<input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor
</label>
創(chuàng)建一組復選框
checkboxes（復選框）就好比多項選擇題，正確答案有多個。?每一個復選框都應該嵌套在它自己的label（標簽）元素中。?所有關聯的復選框應該擁有相同的name屬性。最佳實踐是在label元素上設置for屬性，讓其值與復選框的id屬性值相等，這樣就在label元素和它的子元素復選框之間創(chuàng)建了一種鏈接關系。例如：
<label for="loving">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????<input id="loving" type="checkbox" name="personality"> Loving? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>
<label><input type="checkbox" name="personality"></label>???????????????????????????????????????????????????????????????????????????????????????????????????????????????????? <label><input type="checkbox" name="personality"></label>???????????????????????????????????????????????????????????????????????????????????????????????????????????????????? <label><input type="checkbox" name="personality"></label>?
給單選按鈕和復選框添加默認選中項
<input type="radio" name="test-name" checked>
元素嵌套
div元素，也叫division（層）元素，是一個盛裝其他元素的通用容器。
它也是 HTML 中出現頻率最高的元素。
和其他普通元素一樣，你可以用<div>來標記一個div元素的開始，用</div>來標記一個div元素的結束。
<div> 標簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分。
<div>標簽常用于組合塊級元素，以便通過 CSS 來對這些元素進行格式化。
提示：
元素經常與 CSS 一起使用，用來布局網頁。
注釋：默認情況下，瀏覽器通常會在
元素前后放置一個換行符。然而，您可以通過使用 CSS 改變這種情況。
<div>? ? ? ??
? ? ? ? <p></p>
</div>
聲明 HTML 文檔的文檔類型
!和大寫的DOCTYPE是很重要的，特別是對于老的瀏覽器。但html大寫小寫都可以。<!DOCTYPE html>對應的就是 HTML5。!與DOCTYPE緊密相連
<!DOCTYPE html>
定義 HTML 文檔的標題和正文
html的結構主要分為兩大部分：head、body。關于網頁的描述都應該放入head標簽，網頁的內容都應該放入body標簽。
比如link、meta、title和style都應該放入head標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style></style>
</head>
<body>
</body>
</html>
HTML?<abbr>?標簽
<abbr> 標簽用來表示一個縮寫詞或者首字母縮略詞，如"WWW"或者"NATO"。
The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
HTML?<address>?標簽
<address> 標簽定義文檔作者/所有者的聯系信息。
如果 <address> 元素位于 <body> 元素內部，則它表示該文檔作者/所有者的聯系信息。
如果 <address> 元素位于 <article> 元素內部，則它表示該文章作者/所有者的聯系信息。
元素的文本通常呈現為斜體。大多數瀏覽器會在該元素的前后添加換行。<p>Contact the author of this page:</p>
<address>
? <a href="mailto:jim@rock.com">jim@rock.com</a><br>
? <a href="tel:+13115552368">(311) 555-2368</a>
</address>
當表示一個和聯系信息無關的任意的地址時，請改用?<p>?元素而不是?<address>?元素。
這個元素不能包含除聯系信息之外的任何信息，比如出版日期（這應當被包含在?<time>?元素之中）。
通常，<address>?元素可以放在?<footer>?元素之中（如果存在的話）。
HTML?<article>?標簽
<article> 標簽定義獨立的內容。
<article> 標簽定義的內容本身必須是有意義的且必須是獨立于文檔的其余部分。
<article> 的潛在來源：論壇帖子、博客文章、新聞故事、評論
<article>????
? ?<h1>Internet Explorer 9</h1>
? ? <p> Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)布。</p>
</article>
HTML?<aside>?標簽
<aside> 標簽定義 <article> 標簽外的內容。
aside 的內容應該與附近的內容相關。其通常表現為側邊欄或者標注框。
<p>My family and I visited The Epcot center this summer.</p>?
<aside>?
?<h4>Epcot Center</h4>?
?<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
HTML?<audio>?標簽
<audio> 標簽定義聲音，比如音樂或其他音頻流。
目前，<audio> 元素支持的3種文件格式：MP3、Wav、Ogg。
提示：可以在 <audio> 和 </audio> 之間放置文本內容，這些文本信息將會被顯示在那些不支持 <audio> 標簽的瀏覽器中。
<audio controls>?
?<source src="horse.ogg" type="audio/ogg">
?<source src="horse.mp3" type="audio/mpeg">?
?您的瀏覽器不支持 audio 元素。
</audio>
HTML?<b>?標簽與?HTML??<strong>標簽
<b>定義粗體文本，<strong>定義粗體，重要的文本，帶有語義化重要的。
<b>粗體文本</b>
<strong>重要的文本</strong>
HTML?<i>?標簽與HTML<em>標簽
<i> 標簽被用來表示科技術語、其他語種的成語俗語、想法、宇宙飛船的名字等等
<em> 標簽是一個短語標簽，用來呈現為被強調的文本，帶有語義化。
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
<em>強調文本</em>
HTML?<head>?標簽
<head> 元素是所有頭部元素的容器。
<head> 元素必須包含文檔的標題（title），可以包含腳本、樣式、meta 信息 以及其他更多的信息。
HTML?<link>?標簽
rel：stylesheet（樣式表）必需。定義當前文檔與被鏈接文檔之間的關系。
type：規(guī)定被鏈接文檔的 MIME 類型。
href：定義被鏈接文檔的位置。
<link> 標簽定義文檔與外部資源的關系。
<link> 標簽最常見的用途是鏈接樣式表
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
HTML?<meta>?標簽
元數據（Metadata）是數據的數據信息。
<meta> 標簽提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，但是會被瀏覽器解析。
META元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者及其他元數據。
元數據可以被使用瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 Web 服務調用。
<head>
<meta name="description" content="免費在線教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob"><meta charset="UTF-8">
</head>
HTML?<style>?標簽
<style> 標簽定義 HTML 文檔的樣式信息。
在 <style> 元素中，您可以規(guī)定在瀏覽器中如何呈現 HTML 文檔。
每個 HTML 文檔能包含多個 <style> 標簽。
<!DOCTYPE html>
<html>
<head>
????<meta charset="utf-8">
????<title>菜鳥教程(runoob.com)</title>
????<style type="text/css">
????????h1 {color:red;}p {color:blue;}
????</style>
</head>
<body>
????<h1>這是一個標題</h1>
????<p>這是一個段落。</p>
</body>
</html>
HTML?<title>?標簽
<title> 標簽定義文檔的標題，在所有 HTML 文檔中是必需的。只能有一個。
<title>元素：
定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時的標題
顯示在搜索引擎結果中的頁面標題
<html>
<head>
????<meta charset="utf-8">
????<title>文檔標題</title>
</head>
?<body>文檔內容......</body>
</html>
HTML?<header>?標簽
<header> 標簽定義文檔或者文檔的一部分區(qū)域的頁眉。
<header> 元素應該作為介紹內容或者導航鏈接欄的容器。
在一個文檔中，您可以定義多個 <header> 元素。
注釋：<header> 標簽不能被放在 <footer>、<address> 或者另一個 <header> 元素內部。
<article>
????<header>
????????<h1>Internet Explorer 9</h1>
????????<p><time pubdate datetime="2011-03-15"></time></p>
????</header>
????<p> Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p>
</article>
HTML?<nav>?標簽
<nav> 標簽定義導航鏈接的部分。
并不是所有的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是作為標注一個導航鏈接的區(qū)域。
在不同設備上（手機或者PC）可以制定導航鏈接是否顯示，以適應不同屏幕的需求。
<nav> ????
? ? ?<a href="/html/">HTML</a> |
? ? <a href="/css/">CSS</a> |
? ? <a href="/js/">JavaScript</a> |
? ? <a href="/jquery/">jQuery</a>
</nav>
HTML?<footer>?標簽
<footer> 標簽定義文檔或者文檔的一部分區(qū)域的頁腳。
<footer> 元素應該包含它所包含的元素的信息。
在典型情況下，該元素會包含文檔創(chuàng)作者的姓名、文檔的版權信息、使用條款的鏈接、聯系信息等等。
在一個文檔中，您可以定義多個 <footer> 元素。
提示：假如您使用 元素來插入聯系信息，應該在元素內使用?<address>?標簽。
<footer>?
?????<p>Posted by: Hege Refsnes</p>?
?????<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
HTML?<section>?標簽
HTML <section>元素表示一個包含在HTML文檔中的獨立部分，它沒有更具體的語義元素來表示，一般來說會有包含一個標題。<section> 標簽定義了文檔的某個區(qū)域。比如章節(jié)、頭部、底部或者文檔的其他區(qū)域。
例如，導航菜單應該包含在<nav>元素中，但搜索結果列表和地圖顯示及其控件沒有特定元素，可以放在<section>里。
注意：如果元素的內容作為一個獨立的有意義的集合，<article>元素可能是更好的選擇。
一般通過是否包含一個標題?(<h1>-<h6>?element) 作為子節(jié)點 來 辨識每一個<section>。
如果元素內容可以分為幾個部分的話，應該使用?<article>?而不是<section>。
不要把?<section>?元素作為一個普通的容器來使用，這是本應該是<div>的用法（特別是當片段（the sectioning?）僅僅是為了美化樣式的時候）。 一般來說，一個?<section>?應該出現在文檔大綱中。
<section>
????<h1>WWF</h1>
????<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
HTML?<figure>?標簽
<figure> 標簽規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figure> 元素的內容應該與主內容相關，同時元素的位置相對于主內容是獨立的。如果被刪除，則不應對文檔流產生影響。
使用 <figure> 元素標記文檔中的一個圖像：
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"></figure>
HTML?<figcaption>?標簽
使用 <figure> 元素標記文檔中的一個圖像。<figure> 元素帶有一個標題：
標簽為?<figure>?元素定義標題。
<figcaption> 元素應該被置于 <figure> 元素的第一個或最后一個子元素的位置。
<figure>?
?????<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">?
?????<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
HTML?<cite>?標簽
<cite> 標簽定義作品（比如書籍、歌曲、電影、電視節(jié)目、繪畫、雕塑等等）的標題。但人名不算。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
HTML<code>標簽
<code> 標簽是一個短語標簽，用來定義計算機代碼文本。
<code>一段電腦代碼</code>
HTML5?<mark>?標簽
被mark標簽的milk黃色高亮顯示。<mark> 標簽定義帶有記號的文本。HTML新屬性
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML?<del>、<ins> 標簽
一段帶有刪除部分的文本和新插入部分的文本。
<del> 標簽定義文檔中已刪除的文本。
<del> 和 <ins> 一起使用，描述文檔中的更新和修正。瀏覽器通常會在已刪除文本上添加一條刪除線，在新插入文本下添加一條下劃線。
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
HTML?<small>?標簽
定義小型字體或旁注
<p> runoob.com - the world's largest web development site.</p>
<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>
HTML?<span>?標簽
行內容器，行內元素，沒有語義，?<span>?與?<div>?元素很相似，但<div>?是一個塊元素?而?<span>?則是?行內元素?。? ?
<span> 用于對文檔中的行內元素進行組合。
<span> 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
<span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
使用 <span> 元素對文本中的一部分進行著色：
<p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>
HTML<var>標簽
<var> 標簽是一個短語標簽，用來定義變量。
對文檔中的文本進行格式化：
<var>變量</var>
HTML?<video>?標簽
<video> 標簽定義視頻，比如電影片段或其他視頻流。
目前，<video> 元素支持三種視頻格式：MP4、WebM、Ogg。
可以在 <video> 和 </video> 標簽之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就可以顯示出該標簽的信息。
<video width="320" height="240" controls>
?????<source src="movie.mp4" type="video/mp4">
?????<source src="movie.ogg" type="video/ogg">?
?????您的瀏覽器不支持 video 標簽。
</video>
HTML?<script>?標簽
<script> 標簽用于定義客戶端腳本，比如 JavaScript。
<script> 元素既可包含腳本語句，也可以通過 "src" 屬性指向外部腳本文件。
JavaScript 通常用于圖像操作、表單驗證以及動態(tài)內容更改。
注釋：如果使用 "src" 屬性，則 <script> 元素必須是空的。
通過 JavaScript 輸出 "Hello world"：
<script type="text/javascript">
????document.write("Hello World!")
</script>
HTML <script>src 屬性
指向一個外部 JavaScript 文件：
<script src="myscripts.js"></script>
src 屬性規(guī)定外部腳本文件的 URL。
如果您希望在網站中的多個頁面上運行相同的 JavaScript，就應該創(chuàng)建外部 JavaScript 文件，而不是重復編寫相同的腳本。把腳本文件以 .js 擴展名進行保存，然后在 <script> 標簽中使用 src 屬性引用它。
注意：外部腳本文件不能包含 <script> 標簽。
表格
HTML?<table>?標簽
<table> 標簽定義 HTML 表格
一個 HTML 表格包括 元素，一個或多個?<tr>、<th>?以及?<td>?元素。
<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。
表頭單元格 - 包含頭部信息（由?<th>?元素創(chuàng)建）
標準單元格 - 包含數據（由 <td> 元素創(chuàng)建）
<th> 元素中的文本通常呈現為粗體并且居中。
<td> 元素中的文本通常是普通的左對齊文本。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML ?rowspan?屬性
rowspan 屬性定義單元格應該橫跨的行數。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
HTML ?colspan?屬性
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
HTML?<caption>?標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<table border="1">
? <caption>Monthly savings</caption>
? <tr>
? ? <th>Month</th>
? ? <th>Savings</th>
? </tr>
? <tr>
? ? <td>January</td>
? ? <td>$100</td>
? </tr>
? <tr>
? ? <td>February</td>
? ? <td>$50</td>
? </tr>
</table>
</body>
</html>
HTML?<thead>?標簽
<thead> 標簽用于組合 HTML 表格的表頭內容。
元素應該與?<tbody>?和?<tfoot>?元素結合起來使用，用來規(guī)定表格的各個部分（表頭、主體、頁腳）。
通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
<!DOCTYPE html>
<html>
<head>
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table border="1">
? <thead>
? ? <tr>
? ? ? <th>Month</th>
? ? ? <th>Savings</th>
? ? </tr>
? </thead>
? <tfoot>
? ? <tr>
? ? ? <td>Sum</td>
? ? ? <td>$180</td>
? ? </tr>
? </tfoot>
? <tbody>
? ? <tr>
? ? ? <td>January</td>
? ? ? <td>$100</td>
? ? </tr>
? ? <tr>
? ? ? <td>February</td>
? ? ? <td>$80</td>
? ? </tr>
? </tbody>
</table>
<p><b>提示:</b>? thead, tbody, 和 tfoot 元素默認不會影響表格的布局。不過，您可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。</p>
</body>
</html>
tbody(tr,th,td)
<tbody> 標簽用于組合 HTML 表格的主體內容。
元素應該與?<thead>?and?<tfoot>?元素結合起來使用，用來規(guī)定表格的各個部分（主體、表頭、頁腳）
tfoot
<tfoot> 標簽用于組合 HTML 表格的頁腳內容。
元素應該與?<thead>?和?<tbody>?元素結合起來使用，用來規(guī)定表格的各個部分（頁腳、表頭、主體）。
表單
HTML?<form>?標簽
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<p>點擊"提交"按鈕，表單數據將被發(fā)送到服務器上的“demo-form.php”。</p>
</body>
</html>
HTML?<input>?標簽
<input> 標簽規(guī)定了用戶可以在其中輸入數據的輸入字段。
<input> 元素在 <form> 元素中使用，用來聲明允許用戶輸入數據的 input 控件。
輸入字段可通過多種方式改變，取決于 type 屬性。
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<p>點擊"提交"按鈕，表單數據將被發(fā)送到服務器上的“demo-form.php”。</p>
</body>
</html>
HTML?<label>?標簽
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<p>點擊其中一個文本標簽選中選項：</p>
<form action="demo_form.php">
? <label for="male">Male</label>
? <input type="radio" name="sex" id="male" value="male"><br>
? <label for="female">Female</label>
? <input type="radio" name="sex" id="female" value="female"><br><br>
? <input type="submit" value="提交">
</form>
</body>
</html>
fieldset
<fieldset> 標簽可以將表單內的相關元素分組。
<fieldset> 標簽會在相關表單元素周圍繪制邊框
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<form>
<fieldset>
? <legend>Personalia:</legend>
? Name: <input type="text"><br>
? Email: <input type="text"><br>
? Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
legend:提示：<legend>?標簽為元素定義標題。
HTML?<datalist>?標簽
<datalist> 標簽規(guī)定了 <input> 元素可能的選項列表。
<datalist> 標簽被用來在為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。
請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
? <option value="Internet Explorer">
? <option value="Firefox">
? <option value="Chrome">
? <option value="Opera">
? <option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 標簽。</p>
</body>
</html>
HTML?<select>?標簽
<select> 元素用來創(chuàng)建下拉列表。
<select> 元素中的<option>標簽定義了列表中的可用選項。
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<select>
? <option value="volvo">Volvo</option>
? <option value="saab">Saab</option>
? <option value="opel">Opel</option>
? <option value="audi">Audi</option>
</select>
</body>
</html>
datalist比select更高級?。?/p>
之前使用select制作下拉菜單，但是H5之后，datalist也可以充當select的角色，而且兩者還有一點小的不同。
對于select來說，select的下拉菜單是供用戶選擇的，用戶只能選擇其中的選項不能自己添加。
但是datalist就不同了，datalist不僅可以供用戶選擇，用戶還可以自己輸入，而且datalist還可以達到模糊匹配的效果，使用很方便。
————————————————
HTML?<textarea>?標簽
rows:規(guī)定文本區(qū)域內可見的行數。
cols:規(guī)定文本區(qū)域內可見的寬度。
最好的方法是用css控制?height 和 width 屬性。
<textarea> 標簽定義一個多行的文本輸入控件。
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>菜鳥教程(runoob.com)</title>?
</head>
<body>
<textarea rows="10" cols="30">
我是一個文本框。
</textarea>
</body>
</html>
