Web前端學習——HTML
HTML其實還是蠻容易學習的，無非就是一些標簽、格式的填寫，大學的時候也做過網站設計，所以這裏主要記錄一些常用的HTML標簽、屬性以及書寫方法等。
一、常見HTML格式
主要包含文件type，html標簽、head標簽、body標簽三個主題標簽，其中Head主要包含字符集、描述、關鍵字等信息，而Body標簽裏是HTML的主要內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
二、head標簽
1、自閉合標簽
（1）<meta>標簽
<meta charset="UTF-8"> ##設置html內容字符集
<meta http-equiv="refresh" content="3"> ##每隔3秒刷新一次
<meta http-equiv="refresh" content="3;Url=http://www.hao123.com"> ##隔3秒刷新並跳轉值url指定網頁
<meta name="keywords" content="測試網頁,網頁頭部"> ##指定網頁關鍵字，利於SEO，網頁搜索排序
<meta name="description" content="描述信息"> ##指定網頁描述信息
（2）link
<link rel="shortcut icon" href="image/fac.ico"> ##頭部圖標
（3）stype
（4）script
2、主動閉合標簽
（1）title
<title>網頁頭部標題內容</title> ##網頁頭部顯示內容
三、body
1、a標簽：
定義超鏈接，最重要的屬性為href,超鏈接和錨使用
##普通超鏈接
<a href="http://www.hao123.com" target="_blank"> 中國人</a>
##通過a標簽做錨點
<a href="#id1" > 第一章 </a>
<a href="#id2"> 第二章 </a>
<a href="#id3"> 第三章 </a>
<div id="id1" style="height:100px"> 第一章內容 </div>
<p id="id2"style="height:300px"> 第二章內容 </p>
<div id="id3"style="height:500px"> 第三章內容 </div>
2、p標簽：
定義段落，不換行,段落段落之間有間距
<p> 段落標簽，不換行</p>
3、br標簽：
換行標簽
<p>段落標簽，不<br>換行</p>
4、h標簽：
標題標簽，從h1-h6表示字體從大到小，加粗顯示
<h1>中國人</h1>
<h2>中國人</h2>
<h3>中國人</h3>
<h4>中國人</h4>
<h5>中國人</h5>
<h6>中國人</h6>
5、span標簽
白板，行內標簽，段與段之間只有空格，不換行
<span>中國人</span>
<span>中國人</span>
<span>中國人</span>
6、div標簽
白板，塊級標簽
<div>中國人</div>
<div>中國人</div>
<div>中國人</div>
7、input標簽
標準輸入框
<input type="text" name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="註冊" >
<input type="submit" value="提交" >
<input type="reset" value="重置" >
<input type="checkbox" name="雙選" value="1" checked="checkted" >
<input type="radio" name="單選" value="1" checked="checkted" >
<input type="file" name="fname" enctype="multipart/form-data" >
8、form標簽
表單使用,get方式提交數據拼接顯示在url，post方式提交數據不拼接顯示在url上（更安全）
<form action="http://www.hao123.com" method="get">
<input type="text" name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="註冊" >
<input type="submit" value="提交" >
<input type="checkbox" name="雙選" value="1" >
<input type="radio" name="單選" value="1" >
</form>
9、textarea標簽
接受多行文本輸入，其中可以輸入多行數據
<textarea name="username" >默認值</textarea>
10、select標簽
下拉框標簽，通過option指定下拉框內容
<select name="city" >
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
<select name="city" size=10 mutiple="mutiple">
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
<select name="city">
<optgroup label="省分">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</optgroup>
</select>
11、img標簽
圖片標簽
<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" >
<img src="file:///C:/Users/Desktop/001.jpg">
<a href="http://www.hao123.com">
<img src="001.jpg" style="height: 200px;width: 200px" title="名稱" alt="描述">
</a>
12、ul標簽
無序列表，對應的li標簽標記列表行
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
13、ol標簽
有序列表，對應的li標簽標記列表
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
14、dl標簽
分層列表，用dt標簽表示標題，用dd標簽表示列表內容
<dl>
<dt>第一層</dt>
<dd>1.第一層列表</dd>
<dd>2.第一層列表</dd>
<dd>3.第一層列表</dd>
<dt>第二層</dt>
<dd>1.第二層列表</dd>
<dd>2.第二層列表</dd>
<dd>3.第二層列表</dd>
</dl>
15、table標簽
表格標簽，通過tr表示行，td表示單表格
（1）第一種table寫法
<table border="1.5">
<tr>
<td>第一個行第一個表格</td>
<td>第一個行第二個表格</td>
<td>第一個行第三個表格</td>
<td>第一個行第四個表格</td>
</tr>
<tr>
<td>第二個行第一個表格</td>
<td>第二個行第二個表格</td>
<td>第二個行第三個表格</td>
<td>第二個行第四個表格</td>
</tr>
</table>
（2）第二種table寫法
<table border="1.2">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<th>表頭4</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列數據</td>
<td>第二列數據</td>
<td>第三列數據</td>
<td>第四列數據</td>
</tr>
<tr>
<td>第一列數據</td>
<td>第二列數據</td>
<td>第三列數據</td>
<td>第四列數據</td>
</tr>
</tbody>
</table>
<td colspan="2">第一個行第二個表格</td> ##橫向合並合並單元格
<td rowspan="2">第一個行第四個表格</td> ##縱向合並單元格
16、lable標簽
用於標記文本輸入
<label for="username"> 用戶名: </label> <input id="username"type="text" >
17、fieldset標簽
用於文本框
<fieldset> <legend> 登陸 </legend> <label for="username"> 用戶名: </label> <input id="username"type="text" ><br> <label for="password"> 密 碼: </label> <input id="password"type="password" > </fieldset>
Web前端學習——HTML