html5常用基本標(biāo)簽

、Html的基本結(jié)構(gòu)：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

網(wǎng)頁(yè)的文本、圖片等信息；

</body>

</html>

二、Head部分：用于表示網(wǎng)頁(yè)的元數(shù)據(jù)即描述網(wǎng)頁(yè)的基本信息

其常用標(biāo)簽及屬性有：

1、title標(biāo)簽：瀏覽器標(biāo)簽頁(yè)顯示的標(biāo)題

2、meta標(biāo)簽：其常用屬性

①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：<meta charset="UTF-8">

常見(jiàn)的字符集編碼格式：

a.GB-2312:國(guó)標(biāo)碼，簡(jiǎn)體中文

b.GBK：擴(kuò)展的國(guó)標(biāo)碼

c.UTF-8：萬(wàn)國(guó)碼 Unicode 常用

②http-equiv屬性:將我們的信息寫(xiě)給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型) refresh(網(wǎng)頁(yè)定時(shí)刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）

③name屬性：使用方法同“http-equiv”。將我們的信息寫(xiě)給搜索引擎看

常用且需要掌握的屬性值：author（作者） keywords（網(wǎng)頁(yè)關(guān)鍵字） description（網(wǎng)頁(yè)描述）這兩個(gè)屬性設(shè)置，網(wǎng)頁(yè)必不可少。

3、link標(biāo)簽：鏈接網(wǎng)頁(yè)圖標(biāo)（title前的小logo），其常用屬性有：

①rel屬性：聲明鏈接文件的類型，此處選icon

②type屬性：可以省略

③href屬性：表示圖片的路徑地址

三、body部分：網(wǎng)頁(yè)的文本、圖片等信息

標(biāo)簽的分類：

塊級(jí)標(biāo)簽：顯示為塊，前后隔一行（自動(dòng)換行）

行級(jí)標(biāo)簽：按行從左往右逐一顯示。

1、常見(jiàn)的塊級(jí)標(biāo)簽：

①<h1></h1>......<h6><h6>：標(biāo)題標(biāo)簽，自動(dòng)加粗，h1最大，h6最小。

②<hr/>：水平線標(biāo)簽，添加一條水平線。

③<p></p>:段落標(biāo)簽，

④<br/>:換行標(biāo)簽，

⑤<blockquote/></blockquote>:引用標(biāo)簽，cite屬性，表明引用的來(lái)源，一般引用網(wǎng)址

瀏覽器默認(rèn)首行縮進(jìn)。

⑥<pre></pre>:預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、

空格等元素能在瀏覽器中顯示。

【補(bǔ)充】html 文件中空格的表示：

2、基于布局的塊級(jí)標(biāo)簽

列表：無(wú)序列表、有序列表、定義列表

①有序列表：<ol></ol> 列表項(xiàng)：<li></li>

②無(wú)序列表：<ul></ul> 列表項(xiàng)：<li></li>

③定義列表（實(shí)現(xiàn)圖文混排）:<dl></dl>

列表標(biāo)題：<dt>一般只有一項(xiàng)</dt>

列表描述項(xiàng)：<dd>可以有很多項(xiàng)</dd>

3、組合標(biāo)簽：<figure></figure>用于顯示圖片及圖片標(biāo)題

他有兩個(gè)子標(biāo)簽：<img />圖片

<figcaption></figcaption>圖片的標(biāo)題

例如：<figure>

<figcaption>探險(xiǎn)家伊澤瑞爾</figcaption>

</figure>

4、分區(qū)標(biāo)簽：<div></div>

5、常見(jiàn)的行級(jí)標(biāo)簽

<1>span（文本）:無(wú)實(shí)際意義，用于包裹某部分文字，修改特定樣式，例如：

這是<span style="color: red;font-size: 36px;">span</span>中的文字

img（圖片）：其常用屬性：①src:表示引用圖片的地址。

路徑地址的寫(xiě)法：相對(duì)路徑：以當(dāng)前文件為最準(zhǔn)，去尋找圖片地址

a、與文件處于同一層的圖片，直接寫(xiě)圖片名

b、圖片在當(dāng)前文件下一層：文件名/圖片名

c、圖片在當(dāng)前文件上一層：../圖片名

絕對(duì)路徑:file:///盤(pán)符：/文件夾/圖片名，但是嚴(yán)禁使用

圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用

②height和width：圖片的高度和寬度?？梢杂肅SS樣式代替

③title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字

④alt:當(dāng)圖片無(wú)法顯示的時(shí)候，顯示的文字

<2>em（傾斜強(qiáng)調(diào)）

<3>strong（加粗強(qiáng)調(diào)）

<4>b（加粗）

<5>i（傾斜）

Strong、em、b、i的區(qū)別

1、Strong、em都表示強(qiáng)調(diào)，Strong為粗體，em為斜體，而Strong的強(qiáng)調(diào) 程度逗比em高

2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強(qiáng)調(diào)的語(yǔ)義。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語(yǔ)義化。

<6>q（短引用）

<7>small/big（縮小/放大字體）：small和big分別是縮小和擴(kuò)大字體，都可以多層嵌套直至上限或下限

<8>a（超鏈接）

1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。

2、target:跳轉(zhuǎn)頁(yè)面打開(kāi)的位置。_self自身頁(yè)面，_blank新頁(yè)面。

3、title:鼠標(biāo)指在超鏈接上顯示的名稱。

4、Rel（被鏈接是當(dāng)前的前/后一篇）:指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎會(huì)利用該屬性獲取更多的有關(guān)鏈接的信息：

rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文檔，

rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,

rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)

rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表

5、Rev（當(dāng)前是被鏈接的前/后一篇）

錨鏈接：

①本頁(yè)面錨鏈接:a、設(shè)置錨點(diǎn)：<a name="top"></a>

b、跳轉(zhuǎn)錨點(diǎn)：#name名

①頁(yè)面間錨鏈接:a、在即將跳轉(zhuǎn)頁(yè)面的指定位置設(shè)置錨點(diǎn)

b、跳轉(zhuǎn)錨點(diǎn)：頁(yè)面地址.html#name名

<a href="02_常見(jiàn)的塊級(jí)標(biāo)簽.html#Hbuilder">頁(yè)面間錨鏈接</a><br/>

功能性鏈接： mailto用于給指定郵箱發(fā)送郵件

file：///e:/aaa.png打開(kāi)本地文件

tencent://message/?uin=1315618220 給指定QQ發(fā)送息

<9>s標(biāo)簽，有誤文本：刪除線

<s>這是S標(biāo)簽中的文字</s><br />

<10>cite標(biāo)簽：瀏覽器顯示為傾斜，常用于書(shū)、畫(huà)作、作品的引用

<cite>這是cite中的文本</cite><br />

<11>code:計(jì)算機(jī)代碼，不保留代碼格式

<pre>

</pre>

<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左

kbd:表示需要用戶用鍵盤(pán)輸入的內(nèi)容，瀏覽器顯示為等寬字體

請(qǐng)輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />

<13>sup:上標(biāo)文本，sub:下標(biāo)文本

x<sub>6</sub><br />

? ? 空格

? ? 空格 <br />

<14>u:下劃線

<u>這是下劃線</u><br />

mark:高亮或標(biāo)記文本，瀏覽器顯示為黃色背景

6、表格：表格的行：tr，每行中的列：td，表格的表頭：th

表格的常用屬性：

表格行列屬性：[tr和td的屬性]：

1、width/heigh：?jiǎn)卧竦膶捀?/p>

2、bgcolor:單元格的背景顏色

3、align:left center right 單元格中的文字水平對(duì)齊方式

4、valign:top center bottom 單元格中的文字垂直對(duì)其方式

5、nowrap:單元格中文字不換行

【注意】當(dāng)表格屬性與行列屬性沖突時(shí)，行列屬性優(yōu)先級(jí)高

7、表單（form）

【兩個(gè)重要屬性】：action-表單提交的服務(wù)器地址 method-表單提交數(shù)據(jù)的方法（get/post）

get/post區(qū)別:

1>get使用URL傳參：http://服務(wù)器地址?name1=value1&name2=value2

（?表示傳遞參數(shù)，?后面采用name=value的形式傳遞，多個(gè)參數(shù)之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，并且別人可以很容易u(yù)rl注入，來(lái) 攻擊自己的數(shù)據(jù)庫(kù)。

② URL傳參數(shù)據(jù)量有限，只能傳遞少量數(shù)據(jù)。

2>post:使用http請(qǐng)求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息，安全且傳遞信息量沒(méi)有限制

綜上所述：大部分使用post傳參，但是get傳參比Post快

【input標(biāo)簽及屬性】

①type：input輸入框的類型，可選值有：

②name：input輸入框的別名，必填，因?yàn)閭鲄⒌臅r(shí)候采用name=value的形式傳遞。

③value：input輸入框的默認(rèn)值

④placeholder:提示內(nèi)容，當(dāng)輸入框有value時(shí)，提示內(nèi)容消失。

【input特殊屬性值】

① checked="checked"默認(rèn)選中

② disabled="disabled"設(shè)置控制不能使用，按鈕上不能點(diǎn)擊，輸入框上不能修改，而且如果

輸入框時(shí)disabled，則輸入框信息不傳遞到后臺(tái)

③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根據(jù)其他需要，使用隱藏域傳遞信息.

【input-type屬性詳解】

①text：文本輸入框

②password：密碼輸入框，內(nèi)容不對(duì)外顯示

③radio：?jiǎn)芜x按鈕

checkbox:復(fù)選按鈕

a、單選按鈕，name和value屬性需同時(shí)存在，提交時(shí)，提交的是value中的屬性值

例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

b、radio憑借name屬性區(qū)分是否為同一組，name相同為同組，且只能選擇一個(gè)

c、checked="checked"默認(rèn)選中，（radio只可以選一個(gè)，checkbox可以選多個(gè)）

④submit：提交按鈕，提交表單數(shù)據(jù)

⑤reset：重置按鈕，重置為默認(rèn)狀態(tài)

⑥file：文件上傳按鈕

⑦image：圖片提交按鈕，功能同submit，可以提交數(shù)據(jù)

⑧button：普通按鈕，沒(méi)什么軟用

⑨其他常用屬性值：見(jiàn)下圖

【select標(biāo)簽】下拉選擇標(biāo)簽

寫(xiě)法：

</select>

常用屬性

①name屬性：寫(xiě)在select里，所有選項(xiàng)只有一個(gè)name

②multiple屬性：multiple="multiple"設(shè)置select為多選，一般不用

③option常用屬性：value=""屬性，當(dāng)option沒(méi)有value屬性時(shí)，往后臺(tái)傳遞的是<option></option>中間的文字，

當(dāng)有value屬性時(shí)，傳遞的是value的屬性值。

title=""屬性,鼠標(biāo)之上后現(xiàn)實(shí)的文字

select="select"默認(rèn)屬性值

④optgroup屬性：用于option屬性分組，用lable屬性表示分組名。

</optgroup>

【textarea】:文本域，其常用屬性：

①設(shè)置寬度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只讀模式，不允許修改編輯

③style="resize: none;"設(shè)置為寬度高度不允許修改

④style="overflow:;"設(shè)置文字超出區(qū)域時(shí)，如何處置，常用屬性值有：

hidden 超出區(qū)域的文字，隱藏?zé)o法顯示

scroll 無(wú)論文字多少，均顯示滾動(dòng)

auto 自動(dòng)，根據(jù)文字多少自動(dòng)決定是否會(huì)顯示為滾動(dòng)條

【fieldset 、legend】表單的邊框與標(biāo)題

<fieldset> //邊框

<legend> //標(biāo)題

</legend>

</fieldset>

如果想讓標(biāo)題嵌入到邊框中，需將標(biāo)題標(biāo)簽寫(xiě)到邊框標(biāo)簽里面

一個(gè)表單可以有多組標(biāo)題加邊框組合

【h5智能表單】

1、H5新增input的form屬性，用于指定特form表單的id，實(shí)現(xiàn)input無(wú)需放在form標(biāo)簽之中，即可通過(guò)表單進(jìn)行提交

……

</form>

2、 input元素的新增屬性：

Autocomplete：自動(dòng)完成功能，記錄用戶之前輸入的內(nèi)容，并在用戶下次輸入時(shí)提示用戶輸入

》》》屬性值：on/off

》》》可以再form表單使用，對(duì)整個(gè)表單的所有控件進(jìn)行自動(dòng)完成的開(kāi)關(guān)也可以在input上使用，

對(duì)特定輸入框進(jìn)行修改

》》》絕大部分瀏覽器默認(rèn)開(kāi)啟

Autofocus：自動(dòng)獲得焦點(diǎn)，autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)

Form：所屬表單，通過(guò)id確認(rèn)屬于哪個(gè)表單

Required：必填,required="required",設(shè)置必填，否則停止提交

Pattern：使用正則表達(dá)式驗(yàn)證input的模式

Placeholder：提示，當(dāng)有value時(shí)取消提示。

天再講一篇HTML5的文章，我們之后就開(kāi)始講CSS3了。在這里要告訴新來(lái)的童靴去小編的主頁(yè)，在菜單中找HTML+CSS的文章補(bǔ)習(xí)一下。

<hgroup></hgroup>

hgroup元素代表“網(wǎng)頁(yè)”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合。如果有兩個(gè)或以上標(biāo)題則可以使用<hgroup>標(biāo)簽，如果只有一個(gè)標(biāo)題就沒(méi)必要使用了。

<aside></aside>

aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）

<figure></figure>、<figcaption></figcaption>

<figure>標(biāo)簽用于對(duì)元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題。

<figcaption>標(biāo)簽定義 figure 元素的標(biāo)題?！眆igcaption” 元素應(yīng)該被置于 “figure” 元素的第一個(gè)或最后一個(gè)子元素的位置。

因?yàn)樗鼈兘?jīng)常在一起使用的，所以放在一起講，如下例子：

<canvas></canvas>

<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫(huà)布上。

canvas還是比較難得，童靴們暫時(shí)了解下就可以：

<canvas id="myCanvas" width="200" height="200"></canvas>

好了，HTML5標(biāo)簽先講到這里，之后要講CSS3了。

進(jìn)步，就是保持學(xué)習(xí)的心態(tài)。

關(guān)注小白前端，持續(xù)收到文章推送！

.列表標(biāo)簽 ul，ol, dl(掌握)

1.1ul無(wú)序列表標(biāo)簽

基本結(jié)構(gòu):

<ul>

</ul>

注意：

1.ul標(biāo)簽和li標(biāo)簽是組合使用。

2.li標(biāo)簽里面可以添加任何內(nèi)容，或者嵌套標(biāo)簽也可以

3.無(wú)序列表會(huì)自動(dòng)生成一個(gè)小圓點(diǎn)，一般在實(shí)際應(yīng)用中會(huì)去掉。

1.2有序列表ol

語(yǔ)法：定義子項(xiàng)順序的。一般有編號(hào)（數(shù)字或字母或希臘字母）

<ol>

</ol>

注意：

有序列表type屬性的幾個(gè)值：

A表示顯示的編號(hào)是大寫(xiě)字母

a表示編號(hào)是小寫(xiě)字母

I表示編號(hào)是羅馬數(shù)字

i表示編號(hào)是小寫(xiě)羅馬數(shù)字

默認(rèn)情況下顯示的是數(shù)字

實(shí)例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定義列表dl

什么是定義列表

dl標(biāo)簽定義了定義列表，通常用于名稱的解釋或者概念的定義。每個(gè)子項(xiàng)分為2個(gè)部分，一部分負(fù)責(zé)定義，另一部分負(fù)責(zé)解釋

<dl>

<dd>JavaScript</dd>

<dd>NodeJS入門(mén)到精通</dd>

</dl>

<!--

dl:定義了一個(gè)定義列表

dt:術(shù)語(yǔ)部分

dd:對(duì)術(shù)語(yǔ)或項(xiàng)目進(jìn)行解釋的部分

-->

2. 表格table

2.1表格的使用

（1）table標(biāo)簽

（2）表格行、列的合并

<table>：定義表格

<tr>:定義表格的行

<td>：定義表格的列

<th> ：定義表格表頭單元格

<thead>:定義表格中表頭的內(nèi)容

<tbody>:定義表格中的主體內(nèi)容

<tfoot>:定義表格中的腳注

<caption>:定義表格標(biāo)題

<!--

cellspacing:單元格與單元格之間的距離

cellpadding：內(nèi)容與單元格之間的距離

border：?jiǎn)卧襁吙驅(qū)挾?/p>

bgcolor:設(shè)置背景色

-->

</table>

在線咨詢

上一篇：JavaScript的值傳遞和引用傳遞
下一篇：HTML 表格

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html5常用基本標(biāo)簽

<hgroup></hgroup>

<aside></aside>

<figure></figure>、<figcaption></figcaption>

<canvas></canvas>

.列表標(biāo)簽 ul，ol, dl(掌握)

2. 表格table

您的項(xiàng)目需求

<figure></figure>、<figcaption></figcaption>

.列表標(biāo)簽 ul，ol, dl(掌握)