html5基礎(chǔ)標(biāo)簽有哪些

article 定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域。

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)、做網(wǎng)站，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需策劃設(shè)計(jì)，網(wǎng)站開(kāi)發(fā)公司，公司2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專業(yè)建議和思路。

aside 定義頁(yè)面的側(cè)邊欄內(nèi)容。

bdi 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。

command 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕

details 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)

dialog 定義對(duì)話框，比如提示框

summary 標(biāo)簽包含 details 元素的標(biāo)題

figure 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

figcaption 定義 figure 元素的標(biāo)題

footer 定義 section 或 document 的頁(yè)腳。

header 定義了文檔的頭部區(qū)域

mark 定義帶有記號(hào)的文本。

Html5新增的標(biāo)簽有哪些？

新增的結(jié)構(gòu)標(biāo)簽：

1、header元素

表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或真?zhèn)€頁(yè)面的標(biāo)題。

2、hgroup元素

表示對(duì)真?zhèn)€頁(yè)面或頁(yè)面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

3、article元素?

表示頁(yè)面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。

4、aside元素

表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。

5、footer元素

表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。

HTML5新規(guī)則：

新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。 減少對(duì)外部插件的需求（比如 Flash），更優(yōu)秀的錯(cuò)誤處理，更多取代腳本的標(biāo)記，HTML5 應(yīng)該獨(dú)立于設(shè)備開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明 ;

HTML5?新特性：

新的特殊內(nèi)容元素，比如 article、footer等，新的表單控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于繪畫的 canvas 元素?

對(duì)本地離線存儲(chǔ)的更好的支持。

html5常用標(biāo)記總結(jié)

一、文本標(biāo)簽

1.1 標(biāo)題標(biāo)記：hn align=”對(duì)齊方式”標(biāo)題文本/hn

注意：

1.標(biāo)題準(zhǔn)備了h1----h6的標(biāo)題，按照字號(hào)依次遞減(塊級(jí)元素)

2.align表示對(duì)齊方式，其值為left,center,right

1.2 字體標(biāo)記：font face=”字體名稱” size=”字號(hào)” color=”字體顏色” 文字/font

注意：中文網(wǎng)頁(yè)以黑體，宋體，3號(hào)字的效果顯示

1.3 段落標(biāo)記：p align=”對(duì)齊方式” 段落內(nèi)容/p

注意：p可以作為單標(biāo)記或雙標(biāo)記：

單標(biāo)記：段落與上文產(chǎn)生一個(gè)空行的間距。

雙標(biāo)記：段落與上下文之間產(chǎn)生一個(gè)空行的間距

1.4 換行標(biāo)記：

注意：br /表示換行，多次換行多次使用br /

1.5 預(yù)格式化標(biāo)記：pre...../pre

注意：預(yù)格式化標(biāo)記可將空格、制表符、回車符等忽略

1.6 轉(zhuǎn)義字符：轉(zhuǎn)義字符讓特殊字符顯示出來(lái)。

語(yǔ)法：實(shí)體名稱;

二、列表標(biāo)記

2.1 無(wú)序列表

ul type=”列表項(xiàng)的標(biāo)簽符”

li項(xiàng)目一/li

li項(xiàng)目二/li

li項(xiàng)目三/li

......

/ul

注意： type表示了項(xiàng)目符號(hào)：

disc(默認(rèn)) 實(shí)心圓

circle：空心圓

square：實(shí)心方塊

2.2 有序列表：

ol type=”列表項(xiàng)的標(biāo)記符” start=”起始值”

li項(xiàng)目一/li

li項(xiàng)目二/li

li項(xiàng)目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,從第幾個(gè)數(shù)開(kāi)始計(jì)算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割線標(biāo)記：hr align=”對(duì)齊方式” size=”水平線高度” width=”水平線寬度”

color=”水平線顏色”

三、超鏈接標(biāo)記

3.1 文本鏈接：a href=”目標(biāo)URL” target=”目標(biāo)窗口”指針文本/a

注意： 1.href表示文本鏈接的目標(biāo)資源的URL

絕對(duì)地址和相對(duì)地址

絕對(duì)地址：在任何情況下都可以找到的地址（例如：網(wǎng)址）

相對(duì)地址：必須知道當(dāng)前所在，才能找到（../表示上一級(jí)目錄，/表示下級(jí)目錄）例子：../img/baidu.jpg 表示在當(dāng)前位置的上一層目錄下的img文件夾中的baidu.jpg 文件。

3.2 圖片標(biāo)記：img src=”圖片文件路徑” alt=”提示文本” height=”圖片高度” width=”圖片寬度”/

3.3 多媒體標(biāo)記

3.3.1 滾動(dòng)字幕標(biāo)記：marquee可以實(shí)現(xiàn)文字或圖片的跑馬燈效果

marquee..../marquee

marquee的屬性：

behavior 指定了跑馬燈的效果：scroll(滾動(dòng))、slide(滑動(dòng))、alternate(交替)

bgcolor:跑馬燈的背景顏色

direction:跑馬燈的移動(dòng)方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移動(dòng)的延遲時(shí)間，單位毫秒

loop:跑馬燈運(yùn)行次數(shù)，-1表示無(wú)限循環(huán)

height、width

hspace:左右空白寬度

vspace:上下空白寬度

3.3.2 嵌入音樂(lè)文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入視頻文件

video src=”視頻文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本語(yǔ)法：

table

tr

......

td單元格內(nèi)容/td

......

/tr

/table

注意：

table:聲明一個(gè)表格對(duì)象

tr:聲明一行

td:聲明一個(gè)單元格

4.2 表格的基本屬性

1.align 對(duì)齊方式：left、center、right

2.border:表格邊框

3.bordercolor:邊框顏色

4.bgcolor:表格背景顏色

5.background:背景圖片

6.height、width

4.3 單元格合并

1.rowspan:所跨的行數(shù)

2.colspan:所跨的列數(shù)

五、表單

5.1 表單標(biāo)簽：form action=”URL” method=”get|post” target=”...”/form

注意：form：該標(biāo)記中包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件中

action:指定服務(wù)器端處理提交表單信息的程序是什么。URL地址或電子郵件地址

method:get/post:數(shù)據(jù)傳輸?shù)椒?wù)器的傳遞方法

target:服務(wù)器返回文檔結(jié)果的顯示位置：_blank:在新的瀏覽器窗口中打開(kāi)

_self:在當(dāng)前瀏覽器中顯示

5.2 表單標(biāo)記

5.2.1 input標(biāo)簽：input type=”類型” name=”服務(wù)器 獲取用戶輸入信息的名字” value=”初始值”

注意：1.type類型（輸入類型）:

1. text:單行文本框

2. password:密碼輸入框

3. radio:單選按鈕 checked表示默認(rèn)

4. checkbox:復(fù)選框 checked表示默認(rèn)

5. submit:提交按鈕

6. reset:重置按鈕

7. button:普通按鈕

2.maxlength：輸入的最大長(zhǎng)度

5.2.2 select標(biāo)簽

select name=”” size=”” multiple

option value=”選項(xiàng)1” 選項(xiàng)1

.......

option value=”選項(xiàng)n” 選項(xiàng)n

/select

注意：name:服務(wù)器 獲取用戶輸入信息的名字

value ：初始值

option：下拉框的內(nèi)容

multiple:多選，若沒(méi)有multiple則是單選

selected:表示默認(rèn)選項(xiàng)

size:表示長(zhǎng)度

5.2.3 textarea 標(biāo)簽：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名稱

cols：一行可容納的字符數(shù)

rows：表示可顯示額的行數(shù)

wrap:virtual和phycal控制自動(dòng)換行

介紹幾個(gè)常用的HTML5標(biāo)簽

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

!DOCTYPE html

html

head

meta ?charset=utf-8"

title/title

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

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

常用且需要掌握的屬性值：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......h6h6：標(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 文件中空格的表示：nbsp;

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

img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/

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

/figure

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

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

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

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

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

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

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

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

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

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

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

②height和width：圖片的高度和寬度。可以用CSS樣式代替

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

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

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

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

4b（加粗）

5i（傾斜）

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ǔ)義化。

6q（短引用）

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

8a（超鏈接）

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è)面間錨鏈接/abr/

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

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

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

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

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

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

cite這是cite中的文本/citebr /

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

pre

code/code

/pre

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

bdo dir="rtl"1234567/bdobr /

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

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

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

xsub6/subbr /

? copy; 空格 nbsp;

? copy; 空格 nbsp;br /

14u:下劃線

u這是下劃線/ubr /

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

markmark/markbr /

html5新增標(biāo)簽都有哪些

html5新增標(biāo)簽大致如下：

canvas 新元素

canvas ? ?標(biāo)簽定義圖形，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API?

新多媒體元素

audio ? ?定義音頻內(nèi)容 ?

video ? ?定義視頻（video 或者 movie） ?

source ? ?定義多媒體資源 video 和 audio ?

embed ? ?定義嵌入的內(nèi)容，比如插件。 ?

track ? ?為諸如 video 和 audio 元素之類的媒介規(guī)定外部文本軌道。?

新表單元素

datalist ? ?定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來(lái)定義 input 可能的值。 ?

keygen ? ?規(guī)定用于表單的密鑰對(duì)生成器字段。 ?

output ? ?定義不同類型的輸出，比如腳本的輸出。?

新的語(yǔ)義和結(jié)構(gòu)元素

HTML5提供了新的元素來(lái)創(chuàng)建更好的頁(yè)面結(jié)構(gòu)：

article ? ?定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域。 ?

aside ? ?定義頁(yè)面的側(cè)邊欄內(nèi)容。 ?

bdi ? ?允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。 ?

command ? ?定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕 ?

details ? ?用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) ?

dialog ? ?定義對(duì)話框，比如提示框 ?

summary ? ?標(biāo)簽包含 details 元素的標(biāo)題 ?

figure ? ?規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。 ?

figcaption ? ?定義 figure 元素的標(biāo)題 ?

footer ? ?定義 section 或 document 的頁(yè)腳。 ?

header ? ?定義了文檔的頭部區(qū)域 ?

mark ? ?定義帶有記號(hào)的文本。 ?

meter ? ?定義度量衡。僅用于已知最大和最小值的度量。 ?

nav ? ?定義導(dǎo)航鏈接的部分。 ?

progress ? ?定義任何類型的任務(wù)的進(jìn)度。 ?

ruby ? ?定義 ruby 注釋（中文注音或字符）。 ?

rt ? ?定義字符（中文注音或字符）的解釋或發(fā)音。 ?

rp ? ?在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。 ?

section ? ?定義文檔中的節(jié)（section、區(qū)段）。 ?

time ? ?定義日期或時(shí)間。 ?

wbr ? ?規(guī)定在文本中的何處適合添加換行符。 ?

初學(xué)者建議多訪問(wèn)下菜鳥(niǎo)教程：網(wǎng)頁(yè)鏈接，都是比較全面的基礎(chǔ)知識(shí)，可以看做編程詞典，即使老司機(jī)也經(jīng)常去查一些資料。

分享標(biāo)題：html5的標(biāo)簽大全,html5有哪些標(biāo)簽
文章轉(zhuǎn)載：http://chinadenli.net/article15/dseohgi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、App開(kāi)發(fā)、建站公司、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)