HTML基礎之HTML標籤
前端的三把利器
HTML：赤裸的一個人
CSS：華麗的衣服
JS/JavaScript：賦予這個人的行為，也就是動起來
HTML（超文字標記語言）
html程式碼實際上就是一套能夠被瀏覽器所識別的規則程式碼，由一個個標籤組成。html程式碼就是一大長串字串，而這種字串的格式正好能夠被瀏覽器所識別，也就有了我們的WEB頁面。
後端與前端互動方式
1、後端通過直接返回瀏覽器能夠識別的html程式碼
2、後端返回資料，前端替換html種的指定資料
HTML標籤
<!DOCTYPE html> <!--標準的html規則，類似於Python的直譯器-->
<html lang
html head
1、自閉和標籤
<meta charset="UTF-8">
只有開頭標籤，沒有結尾標籤
2、主動閉合標籤
<a></a>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定編碼 -->
<meta charset="UTF-8">
<!-- 每3秒中重新整理一次 -->
<meta http-equiv="refresh" content
<!-- 關鍵字檢索 -->
<meta name="keywords" content="塵世風">
<!-- 網站描述-->
<meta name="description" content="塵世風是名低調的測試工程師">
<!-- ie開啟時以最高的相容模式開啟 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在head中所寫的所有標籤全部都看不到，是內部的一些東西，除了一個標籤就是title-->
<title>塵世風的部落格</title>
<!-- 前方高能預警，***重要*** -->
<!-- title的圖示 -->
<link rel="shortcut icon" href="tubiao.ico">
<!-- 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- css樣式-->
<style></style>
<!-- 引入js和編寫js -->
<script src="tmp.js">
</script>
</head>
<body>
</body>
</html>
html body
符號
<a href="http://www.cnblogs.com/feng0815">塵 世 風</a>
<a href="http://www.cnblogs.com/feng0815"><a></a>
空格：  大於號：> 小於號 < 記住常用的這三個，其他的用時百度
塊級標籤：H標籤(加大加粗)，P標籤(段落間有間距)，DIV(白板)
行內標籤：SPAN標籤(白板)
p、br
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- p標籤稱之為段落標籤，佔滿一整行，段落之間有空行 想換行需要通過<br />標籤 自閉合標籤建議自己寫上/作為區分-->
<p>年輕,就是拿來折騰的。<br />讓自己具備獨立生活的能力，具備一技之長的資本，是需要無數個夜晚的靜思，無數寂寞時光的堆積而成的。</p>
<p>別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有每天進步，才能擁抱生命的無限可能！</p>
<p>你以為你給對方留了電話存了微信，應該彼此也能互相幫忙，卻忘記了一件很重要的事情，只有關係平等，才能互相幫助。</p>
<p>不要為了戶口丟掉生活，為了穩定丟掉青春，為了平淡丟掉夢想，因為你所謂的穩定，不過實在浪費生命。</p>
<p>真正的勇者不是狼狽的逃脫，而是用閒暇時間，磨練自己。</p>
<p>只有等現實的日子富足了，能力夠強了，才可以去追求那些美好的生活狀態，才該去追求那些偉大的夢。否則那些夢幻般的生活，都只是空中閣樓，不堪一擊。</p>
<p>生活是自己的，自己都不求進取，憑什麼讓別人給你美好的未來？</p>
</body>
</html>
h、form、div、span、input、label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 標題標籤 h1最大 h6最小 只需要記住先出生最大 自帶屬性 -->
<h1>塵世風</h1>
<h2>塵世風</h2>
<h3>塵世風</h3>
<h4>塵世風</h4>
<h5>塵世風</h5>
<h6>塵世風</h6>
<!-- 行內標籤的代表 什麼屬性都不帶-->
<span>塵世風</span>
<!-- 塊級標籤的代表 什麼屬性都不帶，html程式碼中出場率最高-->
<div>塵世風</div>
<!-- 登入頁面 -->
<!-- 表單標籤 可以理解為載體 紙 input 就是寫在紙上的文字-->
<form action="/login" method="post">
<!-- 文字輸入框 -->
<input type="text" name="username"/>
<!-- 密碼輸入框 -->
<input type="password" name="passwd"/>
<!-- 按鈕 點選什麼用也沒有 需要結合js繫結事件 -->
<input type="button" value="登入"/>
<!-- 提交 提交表單需要用submit -->
<input type="submit" value="提交"/>
</form>
<!-- get與post區別提交 -->
<form action="/login" method="get" enctype="multipart/form-data">
<!-- 文字輸入框 text-->
<input type="text" name="username" value="預設值"/>
<!-- 密碼輸入框 password-->
<input type="password" name="passwd"/>
<!-- 按鈕 點選什麼用也沒有 需要結合js繫結事件 -->
<input type="button" value="登入"/>
<!-- 多選框 checkbox {"name"：[1,2,3]} 預設值checked=checked-->
<p>女朋友的選擇標準</p>
<input type="checkbox" name="check" value="1" checked="checked"><span>大長腿</span>
<input type="checkbox" name="check" value="2"><span>長頭髮</span>
<input type="checkbox" name="check" value="3"><span>36C</span>
<!-- 單選框 radio name相同 勾選是互斥-->
<input type="radio" name="sax" value="1" checked="checked"><span>男</span>
<input type="radio" name="sax" value="2"><span>女</span>
<!-- 檔案類 file 如果上傳檔案一定要在form中新增特殊屬性 enctype="multipart/form-data" 意思是一點一點的發給伺服器-->
<p>上傳檔案</p>
<input type="file" name="file"/>
<!-- 提交 提交表單需要用submit -->
<input type="submit" value="提交"/>
<!-- reset 還原表單中填寫的資料到預設 -->
<input type="reset" value="重置">
</form>
<!-- label 標題標籤 與input聯合運用，增加input的點選範圍 可直接點選文字就輸入 for：對映到input的id-->
<label for="username">使用者名稱</label>
<input id="username" type="text"/>
</body>
</html>
textarea、select、option、optgroup、a、img、ul、li、ol、dl、dt、dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="t1">描述</p>
<!-- 多行文字 textarea 預設值在標籤之間-->
<textarea name="meno">預設值</textarea>
<p>省市</p>
<!-- select option 預設選擇在option上增加selected size屬性顯示多少個 多選屬性：multiple-->
<select name="city" size="3" multiple="multiple">
<option value="1">黑龍江</option>
<option value="2" selected="selected">遼寧</option>
<option value="3">北京</option>
<option value="4">四川</option>
</select>
<!-- optgroup 分組 label 組的名字 -->
<select name="city" size="3" multiple="multiple">
<optgroup label="黑龍江省">
<option value="1">哈爾濱</option>
<option value="2">牡丹江</option>
</optgroup>
<optgroup label="北京省">
<option value="3">北京</option>
</optgroup>
</select>
<!-- 超連結標籤 a href：跳轉的連結 target="_blank" 新tab開啟頁面 -->
<p>超連結</p>
<a href="http://www.baidu.com" target="_blank">塵世風</a>
<!-- a標籤 錨的連結 通過id進行對應關係的對映 例子回到頂部-->
<div style="height: 500px;">文章</div>
<a style="position: fixed;right: 0;bottom: 0" href="#t1">回到頂部</a>
<!-- img 圖片標籤 src：圖片的位置 圖片跳轉通過a標籤 alt：當圖片載入失敗時顯示alt的文案 title：滑鼠懸浮在圖片上顯示的文字-->
<a href="http://www.cnblogs.com/feng0815"><img src="1.png" style="height: 200px;width: 200px;" alt="html" title="塵世風html"></a>
<!-- 列表 ul li 點-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!-- 列表 ol li 數字 -->
<ol>
<li>第一列</li>
<li>第二列</li>
</ol>
<!-- 分層列表 dl dd內層 dt外層 -->
<dl>
<dt>黑龍江</dt>
<dd>哈爾濱</dd>
<dd>牡丹江</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>北京</dd>
</dl>
</body>
</html>
table、thead、tr、th、tbody、tr、td
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- table 表格標籤 thead：表頭 th：表頭行 tbody：內容 tr：行 td：列 boder：表格的邊框 coslpan：td佔幾列 rowspan：tr佔幾列-->
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>用例名稱</th>
<th>執行人</th>
<th>編輯</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>table表格測試</td>
<td>塵世風</td>
<td><a href="tmp.html">詳情</a> <a href="edit.html">編輯</a></td>
</tr>
<tr>
<td>1</td>
< !-- colspan等於幾就佔幾列-->
<td colspan="2">table表格測試</td>
<td><a href="tmp.html">詳情</a> <a href="edit.html">編輯</a></td>
</tr>
<tr >
<td>1</td>
<!-- rowspan等於幾就佔幾行-->
<td rowspan="2">table表格測試</td>
<td>塵世風</td>
<td><a href="tmp.html">詳情</a> <a href="edit.html">編輯</a></td>
</tr>
<tr>
<td>1</td>
<td>塵世風</td>
<td><a href="tmp.html">詳情</a> <a href="edit.html">編輯</a></td>
</tr>
</tbody>
</table>
</body>
</html>