前端現(xiàn)在越來越火艾猜，可以用去年熱門的詞語來形容——“風(fēng)口上的豬”尤揣。希望這個(gè)系列的文集能夠給“毫無任何基礎(chǔ)宙橱，但是想轉(zhuǎn)到前端的人”一點(diǎn)幫助姨俩。
認(rèn)識一個(gè)html文檔的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Here is title</title>
</head>
<body>
Here is content.
</body>
</html>
HTML 文檔是由** HTML 元素** 定義的，而HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼师郑。
- 首先环葵，HTML元素從閉合屬性上可分為2類：
- 自閉和標(biāo)簽
自閉和標(biāo)簽在html元素中的比例不大，常用的就以下幾個(gè)：
<img /> <br /> <input /> <hr />
從上面的標(biāo)簽可以看出宝冕，自閉合標(biāo)簽形如： <標(biāo)簽名 />（建議：/和前面的標(biāo)簽名之間空一格）
- 手動閉合標(biāo)簽
html元素中大多數(shù)標(biāo)簽都是需要我們手動閉合的张遭。
手動閉合的意義就是——告訴瀏覽器，我這個(gè)標(biāo)簽里的內(nèi)容起始位置和結(jié)束位置地梨。
常用的標(biāo)簽：
<h1></h1>
<h2></h2>...
<p></p>
<div></div>
<a></a>
<button></button>
<span></span>
<label></label>
<textarea></textarea>
<table></table>
<thead></thead>
<tbody></tbody>
<tr></tr>
<th></th>
<td></td>
<ul></ul>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<form></form>
#####下面著重介紹一些以后天天都會用到標(biāo)簽
- img
<img src="" alt="" />
<img />標(biāo)簽具體兩個(gè)常用的屬性：
src (source) 屬性是必需的:它的值是圖像文件的 URL菊卷，也就是引用該圖像的文件的的絕對路徑或相對路徑缔恳；
alt 屬性是非必需的：它指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時(shí)洁闰，代替圖像顯示在瀏覽器中的內(nèi)容歉甚；
（備注：我們強(qiáng)烈推薦您在文檔的每個(gè)圖像中都使用這個(gè)屬性。這樣即使圖像無法顯示扑眉，用戶還是可以看到關(guān)于丟失了什么東西的一些信息纸泄。）
- br
<br /> 可插入一個(gè)簡單的換行符。
注釋：請使用
來輸入空行腰素，而不是分割段落聘裁。
- input
<input /> 標(biāo)簽用于搜集用戶信息。
根據(jù)不同的 type 屬性值弓千，輸入字段擁有很多種形式:
輸入字段可以是文本字段咧虎、復(fù)選框、掩碼后的文本控件计呈、單選按鈕、按鈕等等征唬。
1.文本框
<input type="text" value="" placeholder="" />
<input type="text" value="這是value" placeholder="" />
<input type="text" value="" placeholder="這里是提示文字" />
value代表此文本框中顯示的值,placeholder設(shè)置的值表示當(dāng)value為空時(shí)捌显，給用戶的提示文字。
2.密碼框
<input type="password" value="" />
<input type="password" value="123456" />
<input type="password" value="" placeholder="請輸入密碼" />
3.單選框
<input type="radio" value="male" checked name="gender" /> 男
<input type="radio" value="female" name="gender" /> 女
value:在界面上不會顯示出來总寒；
checked:如果存在扶歪，則表示默認(rèn)選中；
name： 當(dāng)多個(gè)<input type="radio" />的name屬性值相同時(shí)摄闸，表示這多個(gè)單選框善镰，同時(shí)只能有一個(gè)選中；
4.復(fù)選框
<input type="checkbox" value="footballl" checked name="hobbies" /> 足球
<input type="checkbox" value="basketball" name="hobbies" /> 籃球
多個(gè)復(fù)選框的name即使相同年枕，也可以同時(shí)選中炫欺；
- textarea元素
<textarea rows="10" cols="30">
在這篇文章中，你可以對html元素有基本的了解熏兄。
</textarea>
<textarea> 標(biāo)簽定義多行的文本輸入控件,上面介紹的<input type="text">是單行文本框品洛。
可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性摩桶。
- a標(biāo)簽
<a target="" title="點(diǎn)擊這里可以跳轉(zhuǎn)到我的個(gè)人網(wǎng)站">我的個(gè)人網(wǎng)站</a>
href屬性是a鏈接必須的屬性桥状，代表你需要跳轉(zhuǎn)的網(wǎng)頁鏈接；
target屬性有兩個(gè)常用值：
target="_blank"：表示在新的窗口打開頁面硝清；
target="_self"（默認(rèn)值）：表示在當(dāng)前窗口打開辅斟；
title屬性：當(dāng)用戶鼠標(biāo)懸浮到鏈接上時(shí)，會出現(xiàn)一段提示文字芦拿，提示文字的內(nèi)容為你設(shè)置的屬性值士飒；
- select標(biāo)簽
<select>
<option value="">請選擇學(xué)院名稱</option>
<option value="1">風(fēng)景園林學(xué)院</option>
<option value="2">家具設(shè)計(jì)學(xué)院</option>
<option value="3">林學(xué)院</option>
<option value="4">藝術(shù)設(shè)計(jì)學(xué)院</option>
<option value="5">信息科學(xué)與技術(shù)學(xué)院</option>
</select>
<select></select> 元素可創(chuàng)建單選或多選菜單查邢；
select元素中的<option></option>標(biāo)簽用于定義列表中的可用選項(xiàng)。
- 表格元素
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>abcdefg</td>
<td>男</td>
</tr>
<tr>
<td>殷曉飛</td>
<td>男</td>
</tr>
</tbody>
</table>
表格一般由多個(gè)子元素構(gòu)成：
<table></table>：最外層容器（可以通過設(shè)置border屬性來控制表格邊框）变汪；
<thead></thead>：表格頭——用于包裹表格的頂部信息;
<tbody></tbody>: 表格主題內(nèi)容;
<tr></tr>表示一行記錄侠坎；
<td></td>表示一列，但嵌套在tbody標(biāo)簽的tr標(biāo)簽內(nèi)裙盾；
<th></th>也表示一列实胸，但嵌套在thead標(biāo)簽的tr標(biāo)簽內(nèi)；
注意：
一個(gè)表格只有一個(gè)table標(biāo)簽番官；
一個(gè)table標(biāo)簽內(nèi)只有一個(gè)thead和一個(gè)tbody;
一個(gè)thead內(nèi)只有一個(gè)tr,thead中的tr中可以有多個(gè)th（可以有多列）;
一個(gè)tbody中可以有多個(gè)tr（可以有多行記錄）,每個(gè)tr中可以有多個(gè)td（可以有多列）庐完；
- button元素
<button type="button">提交按鈕</button>
- label元素
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果徘熔。不過门躯，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本酷师，就會觸發(fā)此控件讶凉。
就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)山孔，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上懂讯。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
- ul標(biāo)簽
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul></ul> 標(biāo)簽定義無序列表台颠。
- ol標(biāo)簽
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol> </ol>標(biāo)簽定義有序列表褐望。
ol上有以下幾個(gè)常用屬性：
start規(guī)定有序列表的起始值，默認(rèn)為1串前。
type規(guī)定在列表中使用的標(biāo)記類型瘫里。
- dl標(biāo)簽
<dl>
<dt>各個(gè)學(xué)院</dt>
<dd>風(fēng)景園林學(xué)院</dd>
<dd>家具設(shè)計(jì)學(xué)院</dd>
<dd>林學(xué)院</dd>
<dd>藝術(shù)設(shè)計(jì)學(xué)院</dd>
<dd>信息科學(xué)與技術(shù)學(xué)院</dd>
</dl>
<dl> 標(biāo)簽定義了定義列表（definition list）。
<dl> 標(biāo)簽用于結(jié)合dt（定義列表中的項(xiàng)目）和 dd (描述列表中的項(xiàng)目）荡碾。
- p標(biāo)簽
<p>文章段落內(nèi)容</p>
<p> 標(biāo)簽具有確切的語義谨读，用于定義段落。
- h1-h6標(biāo)簽
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
<h1> - <h6> 標(biāo)簽可定義標(biāo)題坛吁。<h1> 定義最大的標(biāo)題漆腌。<h6> 定義最小的標(biāo)題。
由于 h 元素?fù)碛写_切的語義阶冈，因此請您慎重地選擇恰當(dāng)?shù)臉?biāo)簽層級來構(gòu)建文檔的結(jié)構(gòu)闷尿。因此，請不要利用標(biāo)題標(biāo)簽來改變同一行中的字體大小女坑。
- div標(biāo)簽
<div>這里面可以只放文本填具，也可以放其他任何標(biāo)簽，當(dāng)然可以放自己</div>
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text... </p>
<div>
<a href="#">這是鏈接</a>
</div>
</div>
<div> 可定義文檔中的分區(qū)或節(jié)（division/section），用于網(wǎng)站布局劳景，塊狀分隔誉简。
<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分盟广。它可以用作嚴(yán)格的組織工具闷串，并且不使用任何格式與其關(guān)聯(lián)。
- span標(biāo)簽
<p><span>殷曉飛</span> <span>web前端</span> 盡己力筋量，聽天命烹吵。</p>
<span></span>標(biāo)簽可以放在任何元素中，行內(nèi)元素桨武，多個(gè)span可以在同一行肋拔。
- form標(biāo)簽
<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單，在頁面中用戶看不到form元素的顯示效果呀酸。
表單能夠包含 input 凉蜂、label、button性誉、select等等元素窿吩。
#####快掌握這些基本的html元素，開始自己的前端學(xué)習(xí)之旅吧~