標籤：推薦 targe 模式 對齊 list require value resize 背景
最近開始學習HTML5語言，以下是我對學習HTML的一些知識點的整理。
<!DOCTYPE HTML>
↑ 文件類型聲明： 讓瀏覽器，按照html5的標準對代碼進行解釋與執行。
↑ 文件類型聲明必不可少，而且，必須放在文檔最上方。
↑ 如果不寫文件類型聲明，瀏覽器會預設按照相容模式運行，可能會出現不明BUG。
<head></head>
head中，主要放一些關於網頁設定的相關語句。
<meta charset="utf-8" />
設定網頁的字元集編碼格式：
GB2312：國標碼。簡體中文的編碼格式。
GBK：擴充的國標碼。 比國標碼多了更多的編碼格式。
utf-8： 萬國碼。 可以相容絕大多數國家的語言。
HTML4.01之前，聲明字元集編碼的格式：
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="傑瑞教育,HTML5,Web開發" />
設定網頁關鍵字：
name="keywords" 表示當前語句用於設定網頁關鍵字
content="" 表示網頁的關鍵字內容。多個關鍵字之間用英文逗號分隔。
<meta name="description" content="這是我在傑瑞教育開發的第一個網頁。我怎麼這麼厲害啊~~~" />
設定網頁描述：
網頁的描述，在搜尋引擎中搜尋網站時，標題下面的一段文字，就是網頁的描述內容。
<title>傑瑞首頁1111</title>
title: 網頁的標題，也就是網頁選項卡上的文字。
<link rel="icon" href="img/icon.png" />
連結網頁小表徵圖：選項卡上的小圖片。
rel屬性： 選擇icon，表示連結的檔案，將作為網頁的icon表徵圖。
href屬性： 選擇圖片所在的路徑地址。
<body></body>
body中的內容，會顯示在瀏覽器的展示地區。
從功能上，HTML標籤，分為“塊級標籤”和“行級標籤”。
【塊級標籤和行級標籤的區別】
① 塊級標籤自動換行，前後隔一行；行級標籤不會自動換行，從左往右依次顯示；
② 塊級標籤的寬度預設是100%；行級標籤的寬度由文字內容撐開；
③ 塊級標籤可以設定寬度、高度、邊距等屬性；行級標籤不能設定上述屬性
從寫法上，HTML標籤分為“成對標籤”和“自閉合標籤(空標籤)”
① 成對標籤： 成對出現，有開始標籤，必須有結束標籤，內容包裹在兩個標籤之間。 例如： <h1></h1> <p></p> <title></title>
② 自閉合標籤/空標籤： 只有一個標籤，用/表示標籤的自動閉合（/可以省略）。例如： <hr/> <link /> <meta />
【常見的塊級標籤】
h標籤：標題標籤，預設加粗，h1最大，h6最小。
hr標籤： 水平線標籤。
<hr><hr />
p標籤： 段落標籤，表示網頁中的一段文字。
br標籤： 分行符號號，在代碼中敲斷行符號，在網頁中並沒有作用。必須使用<br>斷行
blockquote:引用標籤。表示標籤中的文字是引用自其他網站的內容。
瀏覽器預設顯示效果：整段向後縮排
cite屬性：表示引用內容的來源，常寫引用的網址URL
<blockquote cite="www.jredu100.com">薑浩是個帥哥！</blockquote>
pre標籤：預格式標籤。 與p標籤不同的是，pre標籤會保留代碼中的空格和斷行符號，在網頁直接顯示。
最常用的作用，是在網頁中顯示程式碼片段，保留程式碼片段格式。
<pre>
jsLoader({
name : ‘iplookup‘,
url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘
});
</pre>
<【基於布局的塊級標籤】
有序列表 ol order list
一個有序列表由多個li組成
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
無序列表 ul unorder list
<ul>
<li>第一項
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
定義列表 dl
定義列表包含兩部分：
<dt></dt>:定義列表的標題，標題頂格顯示，一般一個定義列表只有一個標題
<dd></dd>:定義列表的描述項，相對於標題向後縮排顯示，一個列表可以有多個描述項。
<dl>
<dt>定義列表的標題</dt>
<dd>定義列表的描述項1</dd>
<dd>定義列表的描述項2</dd>
<dd>定義列表的描述項3</dd>
</dl>
瞭解： 組合標籤 figure
包含兩部分：
img 一張圖片
figcaption： 圖片的標題，在圖片正下方顯示。
<figure>
<img src="img/icon.png" />
<figcaption>圖片的標題</figcaption>
</figure>
div 分區標籤，用於配合CSS使用。將網頁劃分為區塊，可以包裹各種標籤。
<div style="width:100%; height: 40px; background-color: red;">
這是div裡面的文字
</div>
【常用的行級標籤】span標籤：用於包裹行內的文字。 常配合CSS使用修改文字樣式。
薑浩真<span style="font-size: 48px; color: red;">帥</span>！！！
[em/strong/i/b 區別]
1、em和i都能傾斜，strong和b都能加粗。但是，em和strong多了一層強調的含義。（強調的作用：可以讓搜尋引擎快速的抓取網頁的重點部分。實現代碼的語義化。）
2、em和strong都有強調的作用，但是em是傾斜，strong是加粗。而且，strong的強調程度要比em更高。
<em>em標籤，傾斜+強調</em>
<strong><strong>strong標籤，加粗+強調</strong></strong>
<i>i標籤，傾斜</i>
<b>b標籤，加粗</b>
<u>u標籤，底線</u>
【常見引用標籤】
常見的引用標籤有：blockquote、q、cite
區別：
① 顯示效果上： blockquote整段縮排、q加引號、cite 傾斜
② 從功能上： blockquote用於引用一整段內容，是塊級標籤。 q用於引用一句話，是行級標籤。 cite常用於引用作品名、書畫名。
<blockquote cite="www.jredu100.com">區塊引述</blockquote>
<q cite="www.jredu100.com">q標籤，短引用</q>
<cite cite="www.jredu100.com">cite引用</cite>
字型大一號和小一號，但是已經被淘汰了，修改字型統一使用css
<small>小一號字型</small>
<big>大一號字型</big>
【img圖片標籤】
1. src屬性：表示圖片所在的路徑。
[路徑的表示方式]
① 網狀圖片地址。 並不建議使用。
http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
② 可以使用圖片的絕對路徑。但是，嚴禁使用絕對路徑。 因為，絕對路徑使用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 文字局底
<img src="img/sunyang.jpg" width="100" height="100" title="111" alt="222" align="center"/>
【a標籤 超連結】
1. href屬性： 超連結跳轉的地址。可以是網路連接，也可以是本地HTML檔案的相對路徑。
2. target屬性： 超連結新頁面開啟的位置。
_slef在當前頁面開啟(預設) _blank在新頁面開啟
3. title屬性：滑鼠指在超連結上顯示的文字。
【功能性超連結】
1. mailto： 給指定郵箱發送郵件。
<a href="mailto://[email protected]">點擊給帥哥發郵件！</a>
2. tencent: 與指定QQ聊天。
<a href="tencent://message/?uin=2831705549">與帥哥聊天</a>
3. 錨連結：點擊超連結，可以跳轉到頁面的指定位置(錨點)
① 在頁面的指定位置，定義一個錨點：
<a name="center"></a>
② 將超連結的href屬性，改為 “#錨點名稱”
<a href="#center">跳到div上方</a>
③ 跳轉到其他頁面指定錨點的方式：
<a href="其他頁面地址.html#center">哈哈哈</a>
<a name="center"></a>
<div style="width: 100%; height: 800px; background-color: red;">11111111111111</div>
<a href="#center">跳到div上方</a>
<a href="tencent://message/?uin=2831705549">這是一個超連結</a>
【W3C倡導的Web結構】
1、 內容與表現分離。 Html與CSS分離。
2、 內容與行為分離。 Html與JavaScript分離。
3、 Html代碼，必須要實現語義化。
【W3C的規範】
1.標籤名和屬性名稱必須小寫
2.HTML標籤必須關閉
3.屬性值必須用引號括起來
4.標籤必須正確嵌套
① 嵌套的標籤，不能發生交叉；
② 塊級標籤可以包裹行級，行級標籤不能包裹塊級； P標籤不能包裹P標籤等。。。。
其他的行級標籤（瞭解即可）
<u>u標籤帶底線</u>
<span style="text-decoration: underline;">css實現底線</span>
<s>s標籤帶刪除線</s>
<span style="text-decoration: line-through;">css實現刪除線</span>
定義專業術語
dfn 定義專業術語 abbr 專業術語縮寫詞
我們正在學習<dfn>HTML5</dfn>，簡稱為<abbr>H5</abbr>。
code標籤：提示搜尋引擎，當前為一段電腦代碼。
但是code不會保留代碼格式，需要配合pre標籤共同使用。
<pre>
<code>
jsLoader({
name : ‘iplookup‘,
url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘
});
</code>
</pre>
表示變數
<var>x</var>+<var>y</var>=1
bdo：定義文本的顯示方向
有一個重要屬性dir： ltr 從左往右顯示 、 rtl 從右往左顯示
<bdo dir="rtl">薑浩真帥</bdo>
表示需要使用者輸入的文字
請輸入“<kbd>Esc</kbd>”退出系統。
sub 下標 sup 上標
H<sub>2</sub>O X<sup>2</sup>
表示時間
現在是<time>16:10</time>
[表格table]
表格中一行，用tr表示；
一行中的每個儲存格，用td表示；
首行的表頭中每個儲存格，用th表示，th預設文字會加粗、置中。
【表格中的各種屬性】
1. border： 給表格的每個td和整個table加邊框。 如果border的值>1,則只有最外層邊框加粗，td上的邊框不變。
2. cellspacing:設定儲存格與儲存格之間的間距。
cellspacing="0" 可以設定邊框之間的間距為0，但是相鄰的邊框不會合并，而是顯示為兩條線的寬度。
[設定表格邊框合并]
可以使用CSS設定：style="border-collapse: collapse;"
設定邊框合并以後，cellspacing屬性將會失效。因為兩條線已經合并到一起了。
3. cellpadding: 儲存格內邊距，儲存格中文字與邊框之間的距離。
4. width/height: 表格的寬度、高度
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
【表格的跨行與跨列】
1. 跨列： colspan="n" 如果某個儲存格跨n列，則該儲存格右側n-1個td就不需要了；
2. 跨行： rowspan="n" 如果某個儲存格跨n行，則該儲存格下方n-1個td就不需要了；
【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.1:8020/0595.html?username=123
所以，input使用時，name屬性必不可少。缺少name，將導致該輸入框的資料不向後台傳遞。
2、 input的常用屬性：
① type ：表示當前輸入框是何種類型的輸入框；
② name ： 給輸入框起別名。向後台傳遞時，使用name=value的形式傳遞
③ value： 當前input的預設值；
④ placeholder: 輸入框的提示內容。當輸入框有value時，提示內容消失。
⑤ hidden： 隱藏當前輸入框。 可以寫為hidden="hidden",也可以省略屬性值，唯寫<input type="text" hidden />
隱藏的輸入框內容，依然可以向後台傳遞資料
⑥ disablod： 禁用當前輸入框。 可以顯示，不能使用。
被禁用的輸入框內容，將不能向後台傳遞資料。
⑦ checked="checked" 設定選項按鈕/多選按鈕，預設選中
3、input的type類型：
① text： 普通的文字框；
② password： 密碼框。 輸入的內容 ，顯示為小黑點。
③ radio： 選項按鈕。 選項按鈕的value不能省略，這個value需要傳到後台；
選項按鈕，憑藉name是否相同，區分按鈕是否為同一組。 同一組按鈕只能選中一個，name必須相同。
checked="checked" 設定選項按鈕，預設被選中。
④ checkbox： 多選按鈕。 其他與選項按鈕相同。
⑤ file: 檔案上傳框。
accept屬性，可以限制只能上傳何種類型的檔案。 "*"表示可以接受所有檔案，"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可以使用<optgroup></optgroup> 標籤對選項進行分組，用label屬性顯示分組名。
<select >
<optgroup label="沿海">
<option>青島</option>
<option>煙台</option>
</optgroup>
<optgroup label="內地">
<option>濟南</option>
<option>臨沂</option>
</optgroup>
</select>
5、 textarea 文本域
① 文本域大小控制：
可以用文本域屬性cols="20"(寬度多少字元) rows="10"(高度多少行)
可以使用CSS樣式style="width:100px; height:100px;"
② 設定文本域大小不能拖動：
style="resize: none;"
③ 設定文本域為唯讀模式，不能修改：
<textarea readonly="readonly"></textarea>
④ 文字超出地區處理：
使用style="overflow: xx;"可以設定文字超出地區的顯示的方式：
>>> overflow: hidden; 超出地區的文字隱藏不顯示；
>>> overflow: scroll; 無論文字多少，都會顯示水平垂直捲軸
>>> overflow: auto; 自動，預設效果。文字多顯示捲軸，文字少，不顯示捲軸。
>>> 可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
overflow-y: scroll; overflow-x: 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，控製表單所有輸入框的自動提示功能。
HTML基本標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
