一、Html的基本結構：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網頁的文本、圖片等信息；
</body>
</html>
二、Head部分：用於表示網頁的元數據即描述網頁的基本信息
其常用標簽及屬性有：
1、title標簽：瀏覽器標簽頁顯示的標題
2、meta標簽：其常用屬性
①
charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼：<meta charset="UTF-8">
常見的字符集編碼格式：
a.
GB-2312:國標碼，簡體中文
b.
GBK：擴展的國標碼
c.
UTF-8：萬國碼 Unicode 常用
②
http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執行，可選屬性值：
Content-Type(文檔類型)
refresh(網頁定時刷新)
set-cookie(設置瀏覽器cookie緩存) 需要配合
content屬性使用。（http-equiv屬性只是表明需要設置哪一部分，具體的設置內容，放到content屬性中）
③
name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值：
author（作者）
keywords（網頁關鍵字）
description（網頁描述） 這兩個屬性設置，網頁必不可少。
3、link標簽：鏈接網頁圖標（title前的小logo），其常用屬性有：
①
rel屬性：聲明鏈接文件的類型，此處選icon
②
type屬性：可以省略
③
href屬性：表示圖片的路徑地址
三、body部分：網頁的文本、圖片等信息
標簽的分類：
塊級標簽：顯示為塊，前后隔一行（自動換行）
行級標簽：按行從左往右逐一顯示。
1、 常見的塊級標簽：
①
<h1></h1>......<h6><h6>：標題標簽，自動加粗，h1最大，h6最小。
②
<hr/>：水平線標簽，添加一條水平線。
③
<p></p>:段落標簽，
④
<br/>:換行標簽，
⑤
<blockquote/></blockquote>:引用標簽，cite屬性，表明引用的來源，一般引用網址
瀏覽器默認首行縮進。
⑥
<pre></pre>:預格式標簽，用於重載代碼。瀏覽器默認顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補充】html 文件中空格的表示：
2、 基於布局的塊級標簽
列表：無序列表、有序列表、定義列表
①有序列表：
<ol></ol> 列表項：<li></li>
②無序列表：
<ul></ul> 列表項：<li></li>
③定義列表（實現圖文混排）:
<dl></dl>
列表標題：
<dt>一般只有一項</dt>
列表描述項：
<dd>可以有很多項</dd>
3、組合標簽：<figure></figure>用於顯示圖片及圖片標題
他有兩個子標簽：
<img />圖片
<figcaption></figcaption>圖片的標題
例如：<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/>
<figcaption>探險家 伊澤瑞爾</figcaption>
</figure>
4、分區標簽：<div></div>
5、常見的行級標簽
<1>span（文本）:無實際意義，用於包裹某部分文字，修改特定樣式，例如：
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img（圖片）：其常用屬性：①
src:表示引用圖片的地址。
路徑地址的寫法：相對路徑：以當前文件為最准，去尋找圖片地址
a、與文件處於同一層的圖片，直接寫圖片名
b、圖片在當前文件下一層：文件名/圖片名
c、圖片在當前文件上一層：../圖片名
絕對路徑:file:///盤符：/文件夾/圖片名，但 是嚴禁使用
圖片網址：網絡上的圖片鏈接，但是一般不用
②
height和width：圖片的高度和寬度。可以用CSS樣式代替
③
title：圖片標。當鼠標指上之后顯示的文字
④
alt:當圖片無法顯示的時候，顯示的文字
<2>em（傾斜強調）
<3>strong（加粗強調）
<4>b（加粗）
<5>i（傾斜）
Strong、em、b、i的區別
1、Strong、em都表示強調，Strong為粗體，em為斜體，而Strong的強調 程度逗比em高
2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現語義化。
<6>q（短引用）
<7>small/big（縮小/放大字體）：small和big分別是縮小和擴大字體，都可以多層嵌套直至上限或下限
<8>a（超鏈接）
1、href:超鏈接的路徑，可以是網絡鏈接，也可以是本地文件。
2、target:跳轉頁面打開的位置。_self自身頁面，_blank新頁面。
3、title:鼠標指在超鏈接上顯示的名稱。
4、Rel（被鏈接是當前的前/后一篇）:指定被鏈接文檔與當前文檔的關系,搜索引擎 會利用該屬性 獲取更多的有關鏈接的信息：
rel="prev"被鏈接文檔是當前文檔的前一篇文 檔，
rel="next"被鏈接文檔是當前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當前文檔的圖標
rel="stylesheet"被鏈接文檔是當前文檔的樣式表
5、Rev（當前是被鏈接的前/后一篇）
錨鏈接：
①本頁面錨鏈接:a、設置錨點：<a name="top"></a>
b、跳轉錨點：#name名
①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點
b、跳轉錨點：頁面地址.html#name名
<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接： mailto用於給指定郵箱發送郵件
file：///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發送息
<9>s標簽，有誤文本：刪除線
<s>這是S標簽中的文字</s><br />
<10>cite標簽：瀏覽器顯示為傾斜，常用於書、畫作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計算機代碼，不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體
請輸入“<kbd>Esc</kbd>”推遲系統<br />
<13>sup:上標文本，
sub:下標文本
x<sub>6</sub><br />
© © 空格
© © 空格 <br />
<14>u:下划線
<u>這是下划線</u><br />
mark:高亮或標記文本，瀏覽器顯示為黃色背景
<mark>mark</mark><br />
6、表格：表格的行：tr，每行中的列：td，表格的表頭：th
表格的常用屬性：
表格行列屬性：[tr和td的屬性]：
1、
width/heigh：單元格的寬高
2、
bgcolor:單元格的背景顏色
3、
align:left center right 單元格中的文字水平對齊方式
4、
valign:top center bottom 單元格中的文字垂直對其方式
5、
nowrap:單元格中文字不換行
【注意】當表格屬性與行列屬性沖突時，行列屬性優先級高
7、表單（form）
【兩個重要屬性】：action-表單提交的服務器地址 method-表單提交數據的方法（get/post）
get/post區別:
1>get使用URL傳參：http://服務器地址?name1=value1&name2=value2
（?表示傳遞參數，?后面采用name=value的形式傳遞，多個參數之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，並且別人可以很容易url注入，來 攻擊自己的數據庫。
② URL傳參數據量有限，只能傳遞少量數據。
2>post:使用http請求傳遞數據。URL地址看不到數據信息，安全且傳遞信息量沒有限制
綜上所述：大部分使用post傳參，但是get傳參比Post快
【
input標簽及屬性】
①
type：input輸入框的類型，可選值有：
②
name：input輸入框的別名，必填，因為傳參的時候采用name=value的形式傳遞。
③
value：input輸入框的默認值
④
placeholder:提示內容，當輸入框有value時，提示內容消失。
【input特殊屬性值】
①
checked="checked"默認選中
②
disabled="disabled"設置控制不能使用，按鈕上不能點擊，輸入框上不能修改，而且如果
輸入框時disabled，則輸入框信息不傳遞到后台
③
hidden=“hidden”隱藏。等同於<input type="hidden" name="username"value="1234" />
等同於配合disabled或根據其他需要，使用隱藏域傳遞信息.
【input-type屬性詳解】
①
text：文本輸入框
②
password：密碼輸入框，內容不對外顯示
③
radio：單選按鈕
checkbox:復選按鈕
a、單選按鈕，name和value屬性需同時存在，提交時，提交的是value中的屬性值
例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"
b、radio憑借name屬性區分是否為同一組，name相同為同組，且只能選擇一個
c、checked="checked"默認選中，（radio只可以選一個，checkbox可以選多個）
④
submit：提交按鈕，提交表單數據
⑤
reset：重置按鈕，重置為默認狀態
⑥
file：文件上傳按鈕
⑦
image：圖片提交按鈕，功能同submit，可以提交數據
⑧
button：普通按鈕，沒什么軟用
⑨其他常用屬性值：見下圖
【
select標簽】下拉選擇標簽
寫法：
<select name="=city">
<option>青島</option>
<option>煙台</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性：寫在select里，所有選項只有一個name
②multiple屬性：multiple="multiple"設置select為多選，一般不用
③option常用屬性：value=""屬性，當option沒有value屬性時，往后台傳遞的是<option></option>中間的文字，
當有value屬性時，傳遞的是value的屬性值。
title=""屬性,鼠標之上后現實的文字
select="select"默認屬性值
④optgroup屬性： 用於option屬性分組，用lable屬性表示分組名。
<optgroup label="中國">
<option>青島</option>
<option>煙台</option>
<option>北京</option>
</optgroup>
【textarea】:文本域，其常用屬性 ：
①設置寬度高度 style="width: 150px;height: 200px;
②readonly="readonly"：只讀模式，不允許修改編輯
③style="resize: none;"設置為寬度高度不允許修改
④style="overflow:;"設置文字超出區域時，如何處置，常用屬性值有：
hidden 超出區域的文字，隱藏無法顯示
scroll 無論文字多少，均顯示滾動
auto 自動，根據文字多少自動決定是否會顯示為滾動條
【fieldset 、legend】表單的邊框與標題
<fieldset> //邊框
<legend> //標題
</legend>
</fieldset>
如果想讓標題嵌入到邊框中，需將標題標簽寫到邊框標簽里面
一個表單可以有多組標題加邊框組合
【h5智能表單】
1、H5新增input的form屬性，用於指定特form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增屬性：
Autocomplete：自動完成功能，記錄用戶之前輸入的內容，並在用戶下次輸入時提示用戶輸入
》》》屬性值：on/off
》》》可以再form表單使用，對整個表單的所有控件進行自動完成的開關也可以在input上使用，
對特定輸入框進行修改
》》》絕大部分瀏覽器默認開啟
Autofocus：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點
Form：所屬表單，通過id確認屬於哪個表單
Required：必填,required="required",設置必填，否則停止提交
Pattern：使用正則表達式驗證input的模式
Placeholder：提示，當有value時取消提示。
【示例-表格】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>請假單</title> </head> <body > <!--<table width="500"> <caption><u><b>特別請假單</b></u></caption> <tr> <td>申請日期： 年 月 日</td> </tr> </table> <table border="1" style="border-collapse: collapse;" width="500"> <tr> <td>所屬單位</td> <td>卜祖班</td> <td>職稱</td> <td>111</td> <td>姓名</td> <td>111</td> <td>廠長</td> </tr> <tr> <td rowspan="2">期間</td> <td colspan="3">年月日</td> <td colspan="2" rowspan="2">天數</td> <td>111</td> </tr> <tr> <td colspan="3">年月日</td> <td>主管</td> </tr> <tr> <td colspan="2">職務代理人</td> <td colspan="4">蓋章</td> <td>111</td> </tr> <tr> <td colspan="1">到職日期</td> <td colspan="3">年月日</td> <td colspan="2">審核意見</td> <td colspan="1">組長</td> </tr> <tr> <td colspan="2">全年特別休假書</td> <td colspan="2" align="right">天</td> <td colspan="1">111</td> <td colspan="1">111</td> <td colspan="1">111</td> </tr> <tr> <td colspan="2">疫情家屬</td> <td colspan="2"align="right">天</td> <td >人事主任</td> <td >認識經辦</td> <td >班長</td> </tr> <tr> <td colspan="2">本次申請日期</td> <td colspan="2"align="right">天</td> <td rowspan="2">111</td> <td rowspan="2">111</td> <td rowspan="2">111</td> </tr> <tr> <td colspan="2">剩余請假日期</td> <td colspan="2"align="right">天</td> </table>--> <h2 style="text-decoration:underline ;text-align: center;"width="500px" >貼別休假申請單</h2> <p> 申請日期： 年 月 日</p> <table border="1" style="border-collapse: collapse;" width="500px" align="center"> <tr> <td>所屬單位</td> <td>卜祖班</td> <td>職稱</td> <td>111</td> <td>姓名</td> <td>111</td> <td>廠長</td> </tr> <tr> <td rowspan="2">期間</td> <td colspan="3">年月日</td> <td colspan="2" rowspan="2">天數</td> <td>111</td> </tr> <tr> <td colspan="3">年月日</td> <td>主管</td> </tr> <tr> <td colspan="2">職務代理人</td> <td colspan="4">蓋章</td> <td>111</td> </tr> <tr> <td colspan="1">到職日期</td> <td colspan="3">年月日</td> <td colspan="2">審核意見</td> <td colspan="1">組長</td> </tr> <tr> <td colspan="2">全年特別休假書</td> <td colspan="2" align="right">天</td> <td colspan="1">111</td> <td colspan="1">111</td> <td colspan="1">111</td> </tr> <tr> <td colspan="2">疫情家屬</td> <td colspan="2"align="right">天</td> <td >人事主任</td> <td >認識經辦</td> <td >班長</td> </tr> <tr> <td colspan="2">本次申請日期</td> <td colspan="2"align="right">天</td> <td rowspan="2">111</td> <td rowspan="2">111</td> <td rowspan="2">111</td> </tr> <tr> <td colspan="2">剩余請假日期</td> <td colspan="2"align="right">天</td> </table> </body> </html>
【示例-表單】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="04_form1.html" method=""> <table > <tr> <td>登錄名</td> <td> <input type="text" name="username" />（可包含a-z 0-9 和下划線） </td> <td><img src="../img/icon.png">閱讀貴美網服務協議</td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="password1" />（至少包含6個字符） </td> <td rowspan="8"> <textarea style="width: 150px;height: 200px; resize: none;overflow: auto;"readonly="readonly"> 1、房產：a夫妻雙方婚后購有坐落在×路×號×小區×棟×單元×號的樓房一套，登記在男方/女方(或雙方)名下，屬夫妻共有財產。離婚后，該套房屋歸男方/女方所有(注：包括房內裝修內附屬設施及相關配套設施)，雙方相互配合辦理產權變更登記手續。因辦理產權變更登記手續所應支付的一切稅費等均由男方/女方承擔。取得房屋所有權的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×日內付清。 b夫妻雙方婚后購有坐落在×路×號×小區×棟×單元×號的樓房一套，購房時以男方/女方為主貸人向×銀行按揭貸款購買，首付及按揭還款都來源於夫妻共有存款，該房屬夫妻共有財產。離婚后，該套房屋歸男方/女方所有(注：包括房內裝修內附屬設施及相關配套設施)，雙方相互配合辦理產權變更登記及辦理貸款主貸人變更手續。因辦理產權變更登記及辦理貸款主貸人變更手續所應支付的一切稅費等均由男方/女方承擔。取得房屋所有權的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×內付清。 夫妻共有房屋內的家用電器及家具等等(見清單)，雙方同意作價×××萬元，歸男方/女方所有，取得的一方給予另一方經濟補償人民幣×××元，在本協議簽訂之日起×內付清。 </textarea> </td> </tr> <tr> <td>再次輸入密碼</td> <td> <input type="password" name="password2" /> </td> </tr> <tr> <td>電子郵箱</td> <td> <input type="text" name="email" />（必須包含@字符） </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="男" checked="checked"/><img src="../img/male.gif" />男 <input type="radio" name="sex" value="女" /><img src="../img/female.gif" />女 </td> </tr> <tr> <td>頭像：</td> <td> <input type="file" name="files" "/> </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox" name="hobby" value="吃" checked="checked"/>吃 <input type="checkbox" name="hobby" value="喝"/>喝 <input type="checkbox" name="hobby" value="玩"/>玩 </td> </tr> <tr> <td>城市</td> <td> <select name="city" > <optgroup label="中國" title="中國地區"> <option title="山東青島">青島</option><!--可以有n多個--> <option title="山東煙台">煙台</option> <option title="首都北京">北京</option> </optgroup> <optgroup label="外國" title="外國地區"> <option title="美國紐約">紐約</option> <option title="意大利羅馬">羅馬</option> </optgroup> </select> </td> </tr> <tr> <td style="text-align: center;" colspan="2"> <input type="submit" name="登錄" value="登錄"/> <input type="reset" name="重置" value="重置"/> </td> </tr> </table> </form> </body> </html>
