我們首先來(lái)介紹一下head標(biāo)簽的主要內(nèi)容和作用逞盆，文檔的頭部描述了文檔的各種屬性和信息灯变，包括文檔的標(biāo)題乓土、編碼方式及URL等信息,這些信息大部分是用于提供索引,辯認(rèn)或其他方面的應(yīng)用（移動(dòng)端）的等琳钉。 以下標(biāo)簽是可以用在head標(biāo)簽中的：
<head lang='en'>
<title>標(biāo)題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
一 title標(biāo)簽
<title>標(biāo)簽：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁(yè)的標(biāo)題信息纪他，它會(huì)顯示在瀏覽器標(biāo)簽頁(yè)的標(biāo)題欄中〕苊海可以把它看成是一個(gè)網(wǎng)頁(yè)的標(biāo)題具壮。主要用來(lái)告訴用戶和搜索引擎這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么，搜索引擎可以通過(guò)網(wǎng)頁(yè)標(biāo)題哈蝇，迅速的判斷出當(dāng)前網(wǎng)頁(yè)的主題棺妓。
我們接下來(lái)做一個(gè)小練習(xí)，創(chuàng)建一個(gè)帶有我們自定義標(biāo)題內(nèi)容的網(wǎng)頁(yè)：
<!DOCTYPE HTML>
<html>
<head>
<title>路飛學(xué)城</title>
</head>
<body></body>
</html>
將上面的文件另存為demo.html炮赦，然后用瀏覽器打開怜跑，就可以看到下面的內(nèi)容。
上面我們介紹了title標(biāo)簽的用法吠勘，接下來(lái)我們繼續(xù)看一下head標(biāo)簽中可以使用的其他標(biāo)簽：
二 meta標(biāo)簽
Meta標(biāo)簽介紹：
元素可提供有關(guān)頁(yè)面的原信息（mata-information）,針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞性芬。
標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容剧防。
提供的信息是用戶不可見的植锉。 meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name屬性峭拘，不同的屬性又有不同的參數(shù)值俊庇，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。
常用的meta標(biāo)簽：
- http-equiv屬性
它用來(lái)向?yàn)g覽器傳達(dá)一些有用的信息鸡挠，幫助瀏覽器正確地顯示網(wǎng)頁(yè)內(nèi)容辉饱，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值拣展。
<!--重定向 2秒后跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)址彭沼，注意分號(hào)-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內(nèi)容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級(jí)模式渲染當(dāng)前網(wǎng)頁(yè)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name屬性
主要用于頁(yè)面的關(guān)鍵字和描述，是寫給搜索引擎看的备埃，關(guān)鍵字可以有多個(gè)用 ‘,’號(hào)隔開溜腐，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的瓜喇。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="路飛學(xué)城">
三 body標(biāo)簽
想要在網(wǎng)頁(yè)上展示出來(lái)的內(nèi)容一定要放在body標(biāo)簽中挺益。 把我們之前海燕那一段HTML代碼貼過(guò)來(lái)，保存到一個(gè)HTML格式的文件中乘寒。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飛學(xué)城</title>
</head>
<body>
<h1>海燕</h1>
<p>在蒼茫的大海上望众，</p>
<p>狂風(fēng)卷集著烏云。</p>
<p>在烏云和大海之間，</p>
<p>海燕像黑色的閃電烂翰，</p>
<p>在高傲地飛翔夯缺。</p>
</body>
</html>
四 標(biāo)題標(biāo)簽 h1~h6
<h1> - <h6> 標(biāo)簽可定義標(biāo)題。<h1> 定義最大的標(biāo)題甘耿。<h6> 定義最小的標(biāo)題踊兜。 由于 h 元素?fù)碛写_切的語(yǔ)義，因此請(qǐng)您慎重地選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)來(lái)構(gòu)建文檔的結(jié)構(gòu)佳恬。因此捏境，請(qǐng)不要利用標(biāo)題標(biāo)簽來(lái)改變同一行中的字體大小。相反毁葱，我們應(yīng)當(dāng)使用css來(lái)定義來(lái)達(dá)到漂亮的顯示效果垫言。 標(biāo)題標(biāo)簽通常用來(lái)制作文章或網(wǎng)站的標(biāo)題。
h1~h6標(biāo)簽的默認(rèn)樣式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飛學(xué)城</title>
</head>
<body>
<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
</body>
</html>
請(qǐng)看上面代碼 <h1>和<h2>書寫在一行上展示倾剿，但是在瀏覽器的效果卻是換行了筷频，大家現(xiàn)在預(yù)習(xí)一下9.1.9標(biāo)簽分類知識(shí)點(diǎn)。
文本樣式標(biāo)簽主要用來(lái)對(duì)HTML頁(yè)面中的文本進(jìn)行修飾前痘，比如加粗凛捏、斜體、線條樣式等...
1\. `<b></b>`：加粗
2\. `<i></i>`：斜體
3\. `<u></u>`：下劃線
4\. `<s></s>`：刪除線
5\. `<sup></sup>`：上標(biāo)
6\. `<sub></sub>`：下標(biāo)
現(xiàn)在如果想在一段文字中特別強(qiáng)調(diào)某幾個(gè)字芹缔，這時(shí)候就可以用到`<em>`或`<strong>`標(biāo)簽坯癣。
這兩個(gè)標(biāo)簽都是表示強(qiáng)調(diào)，但是兩者在強(qiáng)調(diào)的語(yǔ)氣上有區(qū)別:`<em>`表示強(qiáng)調(diào)乖菱，`<strong>`表示更強(qiáng)烈的強(qiáng)調(diào)。
在瀏覽器中`<em>`默認(rèn)會(huì)用斜體表示蓬网，`<strong>`會(huì)用粗體來(lái)表示窒所。兩個(gè)標(biāo)簽相比，我們通常會(huì)推薦大家使用`<strong>`表示強(qiáng)調(diào)
段落標(biāo)簽 p
<p>,paragraph的簡(jiǎn)寫帆锋。定義段落
<body>
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,金融分析,人工智能等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,金融分析,人工智能等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
</body>
瀏覽器展示特點(diǎn)：
- 跟普通文本一樣，但我們可以通過(guò)css來(lái)設(shè)置當(dāng)前段落的樣式
- 是否又獨(dú)占一行呢？ 答案是的 塊級(jí)元素
超鏈接標(biāo)簽 a
超級(jí)鏈接<a>標(biāo)記代表一個(gè)鏈接點(diǎn)捏浊，是英文anchor（錨點(diǎn)）的簡(jiǎn)寫叭爱。它的作用是把當(dāng)前位置的文本或圖片連接到其他的頁(yè)面、文本或圖像
<body>
<h1>
<!-- a鏈接 超鏈接
target:_blank 在新的網(wǎng)站打開鏈接的資源地址
_self 在當(dāng)前網(wǎng)站打開鏈接的資源地址
title: 鼠標(biāo)懸停時(shí)顯示的標(biāo)題
-->
<a target="_blank" title="路飛學(xué)城">路飛學(xué)城</a>
<a href="a.zip">下載包</a>
<a href="mailto:zhaoxu@tedu.cn">聯(lián)系我們</a>
<!-- 返回頁(yè)面頂部的內(nèi)容 -->
<a href="#">跳轉(zhuǎn)到頂部</a>
<!-- 返回某個(gè)id -->
<a href="#p1">跳轉(zhuǎn)到p1</a>
<!-- javascript:是表示在觸發(fā)<a>默認(rèn)動(dòng)作時(shí)实辑，執(zhí)行一段JavaScript代碼捺氢，而 javascript:; 表示什么都不執(zhí)行，這樣點(diǎn)擊<a>時(shí)就沒有任何反應(yīng)剪撬。 -->
<a href="javascript:alert(1)">內(nèi)容</a>
<a href="javascript:;">內(nèi)容</a>
</h1>
</body>
target:_blank 在新的網(wǎng)站打開鏈接的資源地址 target：_self 在當(dāng)前網(wǎng)站打開鏈接的資源地址 title: 表示鼠標(biāo)懸停時(shí)顯示的標(biāo)題
鏈接其他表現(xiàn)形式：
- 目標(biāo)文檔為下載資源 例如：href屬性值摄乒，指定的文件名稱，就是下載操作(rar、zip等)
- 電子郵件鏈接 前提：計(jì)算機(jī)中必須安裝郵件客戶端馍佑，并且配置好了郵件相關(guān)信息斋否。 例如：
<a href="mailto:zhaoxu@tedu.cn">聯(lián)系我們</a> - 返回頁(yè)面頂部的空鏈接或具體id值的標(biāo)簽 例如：
<a href="#">內(nèi)容</a>或<a href="#id值">內(nèi)容</a> - javascript:是表示在觸發(fā)
<a>默認(rèn)動(dòng)作時(shí)，執(zhí)行一段JavaScript代碼拭荤。 例如：<a href="javascript:alert()">內(nèi)容</a> - javascript:;表示什么都不執(zhí)行茵臭，這樣點(diǎn)擊
<a>時(shí)就沒有任何反應(yīng) 例如：<a href="javascrip:;">內(nèi)容</a
四 列表標(biāo)簽 ul，ol
網(wǎng)站頁(yè)面上一些列表相關(guān)的內(nèi)容比如說(shuō)物品列表舅世、人名列表等等都可以使用列表標(biāo)簽來(lái)展示旦委。通常后面跟<li>標(biāo)簽一起用，每條li表示列表的內(nèi)容
<ul>:unordered lists的縮寫 無(wú)序列表 <ol>:ordered listsde的縮寫 有序列表
<!-- 無(wú)序列表 type可以定義無(wú)序列表的樣式-->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優(yōu)惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
打開網(wǎng)頁(yè)樣式如下圖：
<!-- 有序列表 type可以定義有序列表的樣式 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優(yōu)惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
有序列表如圖所示
(https://upload-images.jianshu.io/upload_images/24072767-f8cd528ed8afc54d.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ol標(biāo)簽的屬性：
type：列表標(biāo)識(shí)的類型
* 1：數(shù)字
* a：小寫字母
* A：大寫字母
* i：小寫羅馬字符
* I：大寫羅馬字符
列表標(biāo)識(shí)的起始編號(hào)
* 默認(rèn)為1
ul標(biāo)簽的屬性： type：列表標(biāo)識(shí)的類型
* disc：實(shí)心圓(默認(rèn)值)
* circle：空心圓
* square：實(shí)心矩形
* none：不顯示標(biāo)識(shí)
五 盒子標(biāo)簽 `div`
`<div>`可定義文檔的分區(qū) division的縮寫 譯：區(qū) `<div>` 標(biāo)簽可以把文檔分割為獨(dú)立的歇终、不同的部分,請(qǐng)看下面代碼我們將他們進(jìn)行分區(qū)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>常用標(biāo)簽一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a target="_blank" title="路飛學(xué)城">路飛學(xué)城</a>
<a href="a.zip">下載包</a>
<a href="mailto:zhaoxu@tedu.cn">聯(lián)系我們</a>
<a href="#">跳轉(zhuǎn)到頂部</a>
<a href="#p1">跳轉(zhuǎn)到p1</a>
<a href="javascript:alert(1)">內(nèi)容</a>
<a href="javascript:;">內(nèi)容</a>
</h1>
</div>
<!-- <h2>路飛學(xué)城</h2>
<h3>路飛學(xué)城</h3>
<h4>路飛學(xué)城</h4>
<h5>路飛學(xué)城</h4>
<h6>路飛學(xué)城</h6> -->
<div class="para">
<!-- 定義段落 通常指文章一段內(nèi)容 -->
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,金融分析,人工智能等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,金融分析,人工智能等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,金融分析,人工智能等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
</div>
<div class="lists">
<!-- 無(wú)序列表 -->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優(yōu)惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優(yōu)惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代碼可以下面的層次結(jié)構(gòu)
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
我們將文檔放在一個(gè)父級(jí)的區(qū)（div）中社证，它里面包含四塊區(qū)（div）域，瀏覽器查看效果,你會(huì)發(fā)現(xiàn)每小塊區(qū)域都是獨(dú)占一行的评凝，所以div是塊級(jí)元素追葡。另外，每塊區(qū)域表示獨(dú)立的一塊奕短，id屬性和class屬性其實(shí)很簡(jiǎn)單宜肉，你可以看成給這個(gè)區(qū)域起個(gè)名字。id是唯一的翎碑，一個(gè)頁(yè)面中不能有兩個(gè)重復(fù)的id谬返，跟身份證號(hào)碼一樣，class可以設(shè)置同樣的屬性值日杈，并且可以設(shè)置多個(gè)遣铝，例如class=’para n1‘
六 圖片標(biāo)簽 `<img/>`
一個(gè)網(wǎng)頁(yè)除了有文字，還會(huì)有圖片莉擒。我們使用`<img/>`標(biāo)簽在網(wǎng)頁(yè)中插入圖片酿炸。
語(yǔ)法：`<img src="圖片地址" alt="圖片加載失敗時(shí)顯示的內(nèi)容" title = "提示信息" />`
注意：
1. src設(shè)置的圖片地址可以是本地的地址也可以是一個(gè)網(wǎng)絡(luò)地址。
2. 圖片的格式可以是png涨冀、jpg和gif填硕。
3. alt屬性的值會(huì)在圖片加載失敗時(shí)顯示在網(wǎng)頁(yè)上。
4. 還可以為圖片設(shè)置寬度(width)和高度(height)鹿鳖，不設(shè)置就顯示圖片默認(rèn)的寬度和高度
```
<div>
<span>與行內(nèi)元素展示的標(biāo)簽<span>
<span>與行內(nèi)元素展示的標(biāo)簽<span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能實(shí)戰(zhàn)" style="width: 200px;height: 200px">
</div>
```
瀏覽器查看效果：行內(nèi)塊元素
5. 與行內(nèi)元素在一行內(nèi)顯示
6. 可以設(shè)置寬度和高度
7. span標(biāo)簽可以單獨(dú)摘出某塊內(nèi)容扁眯，結(jié)合css設(shè)置相應(yīng)的樣式
<p>路飛學(xué)城立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí)獲得體面的工作和生活!路飛學(xué)員通過(guò)學(xué)習(xí)Python ,<span>金融分析</span>,<span>人工智能</span>等互聯(lián)網(wǎng)最前沿技術(shù),開啟職業(yè)生涯新可能</p>
好的，同學(xué)們翅帜，此時(shí)大家是不是對(duì)于以上標(biāo)簽有所認(rèn)知了呢姻檀？ 這樣吧！我來(lái)出一個(gè)小練習(xí)涝滴，你來(lái)做施敢！ 練習(xí)：將img標(biāo)簽中的圖片獨(dú)占一行展示周荐，并設(shè)置設(shè)置相應(yīng)標(biāo)題，在圖片下方僵娃，描述該圖片內(nèi)容的信息概作。
## 其他標(biāo)簽
#### 換行標(biāo)簽 `<br>`
`<br>`標(biāo)簽用來(lái)將內(nèi)容換行，其在HTML網(wǎng)頁(yè)上的效果相當(dāng)于我們平時(shí)使用word編輯文檔時(shí)使用回車換行默怨。
#### 分割線 `<hr>`
`<hr>`標(biāo)簽用來(lái)在HTML頁(yè)面中創(chuàng)建水平分隔線讯榕，通常用來(lái)分隔內(nèi)容
#### 特殊符號(hào)
瀏覽器在顯示的時(shí)候會(huì)移除源代碼中多余的空格和空行。 所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格匙睹。需要注意的是愚屁，HTML代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格。
舉個(gè)例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飛學(xué)城</title>
</head>
<body>
<p>幫助有志向的年輕人
通過(guò)努力學(xué)習(xí)獲得
體面的 工作 和 生活痕檬！</p>
</body>
</html>
上面的代碼在瀏覽器中最終的顯示效果：
[圖片上傳失敗...(image-c4d9e-1600085645105)]
> 所以HTML代碼對(duì)縮進(jìn)的要求并不嚴(yán)格霎槐，我們通常使用縮進(jìn)來(lái)讓我們的代碼結(jié)構(gòu)更清晰，僅此而已梦谜。
### 特殊字符
在上一個(gè)實(shí)例中丘跌，我們演示了HTML中輸入空格、回車都是沒有作用的唁桩。要想輸入空格闭树，需要用特殊符號(hào) -- ` `。
### 表格標(biāo)簽 table
表格由`<table>` 標(biāo)簽來(lái)定義荒澡。每個(gè)表格均有若干行（由 `<tr>` 標(biāo)簽定義）报辱，每行被分割為若干單元格（由`<td>`標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data）单山，即數(shù)據(jù)單元格的內(nèi)容碍现。數(shù)據(jù)單元格可以包含文本、圖片米奸、列表昼接、段落、表單躏升、水平線辩棒、表格等等
<div class="table">
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</div>
表格行和列的合并
rowspan 合并行(豎著合并)
colspan 合并列(橫著合并)
<body>
<div class="table">
<table border="1" cellspacing="0">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英文</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英文</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英文</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td rowspan ="2">下午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英文</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英文</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">課程表</td>
</tr>
</tfoot>
</table>
</div>
</body>
### 表單標(biāo)簽 form
表單是一個(gè)包含表單元素的區(qū)域
表單元素是允許用戶在表單中輸入內(nèi)容狼忱，比如：文本域(textarea)膨疏、輸入框(input)、單選框（）
### 表單的作用
表單用于顯示钻弄、手機(jī)信息佃却，并將信息提交給服務(wù)器
1. 語(yǔ)法：
<form>允許出現(xiàn)表單控件</form>
1. 屬性 見下圖：
2. 表單控件分類 見下圖
(https://upload-images.jianshu.io/upload_images/24072767-c46c198aaa13134b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<form action="http://www.baidu.com" method="get">
<p>
用戶名稱：
<input type="text" name="txtUsename" value="請(qǐng)輸入用戶名稱" readonly>
</p>
<p>
用戶密碼：
<input type="password" name="txtUsepwd">
</p>
<p>
確認(rèn)密碼：
<input type="password" name="txtcfmpwd" disabled>
</p>
<p>
用戶性別：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<p>
用戶愛好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 樂
<input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按鈕">
</p>
<p>
請(qǐng)上傳文件：
<input type="file" name="txtfile">
</p>
<p>
自我介紹：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<p>籍貫：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
</form>
最后效果代碼最終效果如下圖所示
(https://upload-images.jianshu.io/upload_images/24072767-d3ece2b59b15f5b4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
