一、HTML基本標簽head部分
HTML文檔的基本結構
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
1、<!DOCTYPE html>文檔聲明
文檔類型聲明，讓瀏覽器按照HTML5的標准對代碼進行解釋與執行。
文檔類型聲明必不可少，而且，必須放在文檔最上方。
如果不寫文檔類型聲明，瀏覽器會默認按照兼容模式運行，可能會出現BUG。
2、頭部：<head></head>
head中，主要放一些關於網頁設置的相關語句。
mete標簽
（1）設置網頁的字符集編碼格式
GB2312（簡體中文的編碼格式）
GBK （擴展的國標碼。比國標碼多了更多的編碼格式。）
utf-8 (萬國碼。可以兼容絕大多數國家的語言。)
html4.0之前，聲明字符集編碼格式:
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
（2）設置網頁關鍵字
name=“keywords” 表示當前語句用於設置網頁關鍵字
content=表示網頁的關鍵字內容，多個關鍵字之間用英文逗號分開。
eg：
<meta name="keywords"content="傑瑞教育,HTML5,Web開發" />
（3）設置網頁描述
name="description"表示當前語句用於設置網頁描述
網頁的描述，在搜索引擎中搜索網站時，標題下面的一段文字，就是網頁描述的內容。
eg：
<meta name="description"content="這是我開發的第一個網頁。"/>
<title></title>標簽
網頁的標題:也就是網頁選項卡上的文字
eg：
<title>百度首頁</title>
<link>標簽
鏈接網頁小圖標：選項卡上的小圖片。
rel屬性：選擇icon，表示鏈接的文件，將作為網頁的icon圖標。
href屬性:選擇圖片所在的路徑地址。
eg：
<link rel="icon" href="img/icon.jpg">
二、常見的塊級標簽
1、HTML的標簽分類
分為“塊級標簽”和“行級標簽”
二者區別：
①.塊級標簽自動換行，前后隔一行.
行級標簽不會自動換行，從左向右依次顯示.
②.塊級標簽默認的寬帶是100%.
行級標簽的寬帶由文字內容撐開.
③.塊級標簽可以設置寬度、高度、邊距等屬性.
行級標簽不能設置上述屬性.
從寫法上，html標簽分為“成對標簽”和“自閉合標簽(空標簽)”
1.成對標簽：成對出現，有開始標簽，必須有結束標簽，內容包裹在兩個標簽之間。
例如：<h1></h1> <p></p> <title><title>
2.自閉合標簽/空標簽：只有一個標簽，用/表示標簽的自動閉合（/可以省略）。
例如<hr/><link/><meta/>
①標題標簽（默認加粗，h1最大，h6最小）
<h1>一級標題</h1>
<h2>一級標題</h2>
<h3>一級標題</h3>
<h4>一級標題</h4>
<h5>一級標題</h5>
<h6>一級標題</h6>
②水平線<hr/>
③段落<p><p/>
④換行<br />
eg：
<p>這是一個段落。這是一個段落。<br>這是一個段落。這是一個段落。</p>
⑤引用<blockquote></blockquote>
blockquote :引用標簽。表示標簽中的文字是引用自其他網站的內容。
瀏覽器默認顯示效果，整段向后縮進。
cite屬性，表明引用的來源，一般為引用的網址URL
eg：
<blockquote cite="www.jredu100.com">引用：你好帥哥！</blockquote>
⑥預格式標簽：<pre></pre>
與p標簽不同的是，pre標簽會保留代碼中的空格和回車。在網頁直接顯示。
最常用的作用，是在網頁中顯示代碼段，保留代碼段格式。
<pre>預格式 標簽</pre>
基於布局的塊級標簽
⑦有序列表ol (order list)
<ol>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ol>
⑧無序列表ul (unorder list)
<ul>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ul>
⑨定義描述列表
定義列表包含兩部分：
<dt></dt>:定義列表的標題，標題定格顯示，一般一個定義列表只有一個標題。
<dd></dd>:定義列表的描述項，相對於標題向后縮進顯示，一個列表可以有多個描述項。
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>
一般情況下，標題dt只有一項，描述項dd可以有N多項。
瀏覽器顯示時，標題格式會顯示，顯示縮進。
eg：
<dl>
<dt>定義列表的標題</dt>
<dd>定義列表的描述項1</dd>
<dd>定義列表的描述項2</dd>
<dd>定義列表的描述項3</dd>
</dl>
⑩圖片組合標簽figure
包含兩個部分：img 一張圖片
figcaption：圖片的標題，在圖片的下方顯示。
<figure>
<img src="img/3.jpg" />
<figcaption>這是圖片的標題。</figcaption>
</figure>
（11）分區標簽div
用於配合css使用，將網頁划分為區塊，可以包裹各種標簽。
eg：
<div style="width:100%; height:100px; ">
<h1>我是div里面的標題</h1> 這是div里面的文字。 </div>
三、常見的行級標簽
常見的行級標簽
span（文本）、img（圖片）、em（強調）、strong（強調）、q（短引用）、a（超鏈接）、
i（傾斜）、b（加粗）、small（縮小字體）
1、span（文本）：用於包裹行內的文字，常配合css使用修改文字樣式。
<span style="color: red;font-size: 40px;">真帥！</span>巔峰時代
2、傾斜/加粗
em：顯示傾斜
strong：顯示加粗
i：傾斜
b：加粗
em strong i b區別
①em和i都能傾斜，strong和b都能加粗，但是strong和em多了一層強調的語義。可以幫助收索引擎快速抓取網站重點,而且HTML5要求開發者盡可能實現代碼的語義化。
②em和strong都表示強調，而strong得強調程度要大於em，em和strong標簽均可多成嵌套，表示強調程度的遞增
eg：
<em>em標簽，</em>
<strong>strong標簽</strong>
<i>i標簽</i>
<b>b標簽</b>
<u>u標簽</u>
3、常見引用標簽
blockquote、q、cite
區別：
顯示效果上：blockquote整段縮進、q加引號、cite傾斜
從功能上：blockquote用於引用一整段內容，是塊級標簽。
q用於引用一句話是行級標簽。cite常用於引用書畫作品名。
eg：
<blockquote>塊引用</blockquote>
<q cite="www.jredu100.com">q標簽，短引用</q>
<cite>cite引用</cite>
small（縮小字體）：small標簽可以多層嵌套，表示字體小一號
直到字號小到最小號為止
big（放大字體）：同small可以多層嵌套，直到字號最大為止
但是，在最新規范中，small和big標簽，不能被提倡使用，提倡使用style="font-size:11px;"CSS樣式替代
eg：
<small>小一號字體</small>
<big>大一號字體</big>
4、img 圖片標簽
（1）src屬性表示圖片所在的路徑。
[路徑的表示方式]
①網絡圖片地址。並不建議使用。
②可以使用圖片的絕對路徑。但是嚴禁使用絕對路徑。（因為，絕對路徑使用file：//協議，網頁使用http：//協議，無法訪問file：//協議的文件。）
file：///C:sunyang.jpg 絕對路徑的寫法：file：///盤符：/文件路徑
③使用相對路徑。推薦使用的唯一方式。
a.圖片在當前文件的下一層，“文件夾名/圖片名”
b.圖片與當前文件夾在同一層，直接寫“圖片名”。
c.圖片在當前文件的上一層，“../圖片名”。
注意：圖片必須包含在項目里面，不能推出當前項目根目錄。
（2）width、height 寬度和高度屬性
（3）title:鼠標指上時顯示的文字
（4）alt：圖片無法加載時顯示的文字。省略alt，將默認顯示title內容
（5）align：圖片周圍的文字，相對於圖片的排列方式；
top文字居上 center居中 bottom文字居底
eg：
<img src="img/icon.jpg" width="100"height="100" title="鼠標指上時顯示"alt="圖片無法加載"align="bottom"/>
5、超鏈接<a></a>
（1）1.href屬性：找鏈接跳轉的地址。可以是網絡連接，也可以是本地html相對路徑。
（2）target屬性：超鏈接新頁面打開位置。
_slef在當前頁面打開（默認）_blank在新頁面打開
（3）title屬性：鼠標指在超鏈接上顯示的文字。
6、功能鏈接
（1）malito：給指定郵箱發送郵件。
<a href="malito://931497747@qq.com"target="_self"title="1230">超鏈接</a>
（2）tencent:與指定qq聊天
<a href="tencent://message/?uin=1677246256"target="_self"title="1230">聊天</a>
（3）錨鏈接：點擊超鏈接，可以跳轉頁面的指定位置(錨點)
①在頁面的指定位置，定義一個錨點：
<a name="top"></a>
②將超鏈接的href屬性改為“#錨點名稱”
<a herf="#top">調到div上方</a>
③跳轉到其他頁面的錨點方式：跳轉網頁位置#錨點名稱
7、其他標簽（了解）
①<s>：刪除線
eg：
<s>這是s標簽中的文字</s>
②code：只是表示計算機代碼。只會顯示等寬字體，不會保留代碼格式，需配合pre標簽使用
eg：
<pre>
<code> jsLoader({name : 'iplookup',url :'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'}); </code>
</pre>
③bdo：表示文本方向，dir="ltr" 從左往右 dir="rtl" 從右往左
eg：
<bdo dir="rtl">姜浩真帥</bdo>
④kbd:表示需要用戶用輸入的內容。
eg：
請輸入“<kbd>Esc</kbd>”退出系統。
⑤sup：上標文本 sub：下標文本
eg：
H<sub>2</sub>O X<sup>2</sup>
⑥var：表示變量
eg：
<var>x</var>+<var>y</var>=1
⑦u:下划線
eg：
<u>這是u標簽</u>
⑧mark:高亮或標記文本 瀏覽器顯示為黃色背景
eg：
<mark>哈哈哈哈哈</mark>
四、表格<table>
一、表格table
表格中一行，用tr表示；
一行中的每個單元格，用td表示；
首行的表頭中每個單元格，用th表示，th默認文字會加粗、居中。
二、表格中的各種屬性
1.border：給表格的每個td和整個table加邊框。如果boder的值>1，則只有最外層的加粗，tb的邊框不變。
border: hidden：隱藏邊框。
2.cellspacing：設置單元格與單元格之間的間距。
cellspacing="0"可以設置邊框之間的間距為0，但是相鄰的邊框不會合並，而且顯示為兩條線的寬度。
設置表格邊框合並
可以使用css設置：style="border-collapse: collapse;
設置邊框合並以后，cellspacing屬性將會消失。
3.cellpadding：單元格內邊距，單元格中文字與邊框之間的距離。
4.width/height：寬度和高度。0
5.align：設置表格在瀏覽器中，居左 居右。
6.bgcolor：表格的背景顏色
bordercolor：表格的邊框顏色
background：表格背景圖。優先級高於背景色。
三、表格的行列屬性
作用於tr或者td的屬性：
1.width 寬度、height 高度
2.bgcolor：背景色
當表格的屬性與行列的屬性發生沖突時，優先級采用 近者優先 的原則：table<tr<td。
3.align：設置單元格中的文字，水平對齊方式；left center right
valign：設置單元格中的文字，垂直對齊方式；top center bottom
四、表格的跨行與跨列
跨列：colspan="n"如果某個單元格n列，則單元格右側n-1個td就不需要了。
跨行：rowspan="n"如果某個單元格行，則單元格下方n-1個td就不需要了。
表格結構化
完整的表格結構，包括：
caption：表格的標題，無論<caption>標簽放在表格第幾行，表格標題永遠在表格正上方居中。
thead：表格的表頭部分。永遠在表格最上部。
tbody：表格的身體部分。在thead之下，tfoot上。
tfoot：表格的尾部永遠在最下部。
表格的直列化
表格有記列，就可以在表格的最上方寫幾個<col/>標簽，每個<col/>就對應這第幾列，可以<col/>標簽修改樣式、添加name等屬性，表示這一列的所有
tb同步修改;如果，需要對多列修改同樣式，可以使用<colgroup><colgroup/>標簽包裹多個<col/>.
五、form表單
1、form表單兩個重要屬性
action：表示，將表單提交給哪個服務器地址；
method：表單提交數據的方式，可選值get和post兩種。
get和post區別
① get使用URL傳遞數據。所有內容在地址欄可以看見，不安全。
post的數據無法在地址欄看到，比較安全。
② get傳遞的數據量有限，而且只能傳遞純文字內容；
post可以傳遞大量數據，而且可以傳遞圖片、視頻等文件。
③ get的傳輸速度比post快。
get傳遞數據的URL格式
http：//原來的地址。html?name1=value1&name2=value2
比如:http：//127.0.0.0：8020/0595.html?username=123
所以，input使用時，name屬性必不可少。缺少name，將導致該輸入框的數據比向后台傳遞。
2、input的常用屬性
① type：表示當前輸入框是何種類型的輸入框。
② name：給輸入框起別名。向后台傳遞時，使用name=value的形式傳遞。
③ value：當前input的默認值。
④ placholder：輸入框的提示內容。當輸入框有value時，提示內容消息。
⑤ hidden：隱藏當前輸入框。可以寫為hidden="hidden"，也可以省略屬性值，只寫<inout type="text" hidden/>
隱藏的輸入框內容依然可以向后台傳遞。（border: hidden 隱藏邊框）
⑥ disabled：禁用當前輸入框。可以顯示，不能使用。
被禁用的輸入框內容，將不能向后台傳遞數據。
⑦ checked：設置默認選中的選項，可以寫為checked="checked",也可以省略屬性值，只寫<inout type="text" checked/>
3、input的type類型
① text：普通的文本框。
② password：密碼框，輸入的內容，顯示為小黑點。
③ radio：單選按鈕。單選按鈕的value不能省略，這個value需要傳遞到后台
單選按鈕，憑借name是否相同，區分按鈕是否為一組，name必須相同。
checked="checked"設置單選按鈕，默認被選中。
④ checkbox：多選按鈕。其他與單選按鈕一樣。
⑤ file：文件上傳框。
acceot屬性，可以限制只能上傳何種類型的文件。“*”表示可以接受所有文件，"image/*"表示只能接受圖片。
multiple="multiple",設置可以上傳多個圖片。
⑥ submit：表單提交按鈕。
⑦ reset：表示重置按鈕，點擊將表單回復為初始狀態。
⑧ image：圖形提交按鈕。src屬性導入圖片，與submit都聚有提交表單的作用。
⑨ button：顯示為按鈕形狀，但是沒有任何作用。
⑩ hidden：隱藏的輸入框。與普通的輸入框+hidden="hidden"的作用相同。
4.select 下拉選擇區塊
① select 里面的每一項，<option></option>標簽表示。
② name屬性，需要寫到select標簽上。
③ option標簽如果有value屬性，則向后台傳遞的將是value屬性的值，如果沒有value屬性，則傳遞的是<option></option>標簽之間的文字。
④ option 添加屬性selected="selected",設置默認選中項。
⑤ select添加屬性multiple="multiple",設置當前下拉控件可以多選。
⑥ option 添加屬性title，表示鼠標指上后顯示的文字。
⑦ select 可以使用<optgrop></optgrop>標簽對選項進行分組，用label屬性顯示分組名。
5.textarea 文本域
① 文本域大小控制
可以用文本域屬性cols="20"（寬度多少字符)rows="10"(高多少行)可以使用css樣式style="width="100px"; height="100px";
可以使用css樣式
style="width="100px"; height="100px";
②設置文本域大小不能拖動。
style="resize:none"
③ 文字超出區域處理：
使用style="overflow:xx;"可以顯示文字超出區域的顯示的方式：
overflow:hidden；超出區域的文字隱藏不顯示
overflow:scroll；無論文字多少，都會顯示水平垂直滾動條。
overflow:auto；自動，默認效果，文字多顯示滾動條，文字少不顯示滾動條。
可以使用overflow-x和overflow-y單獨修改兩個方向的滾動條
overflow-x:scroll;overflow-y:hidden;
【HTML5智能表單】
1.H5給我們提供了將form外的input與表單的關聯方式。只需給form表單起一個id，然后給表單外面的input添加form屬性，指向這個id 就可以實現表單與input的綁定；
<form id="ff"></form>
input form="ff"/>
2.H5新增了很多input的新的type類型。
range color date email url
3.H5新增的input屬性：
① form屬性：關聯指定表單的id
② placeholder：輸入框的提示內容
③ required="required":必填。
④ autofocus="autofocus"：指定輸入框自動獲得焦點。
⑤ autocomplete：是否開啟自動提示完成功能，默認為開啟狀態，設置為off表示關閉，設置為on表示打開。
可以給form標簽設置autocomplete，控制表單所有輸入框的自動提示功能。