正文

HTML5的結(jié)構(gòu)標(biāo)簽（html5的結(jié)構(gòu)標(biāo)簽sidebar）

發(fā)布時(shí)間：2023-04-13 14:24:14 稿源：創(chuàng)意嶺閱讀： 94

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于HTML5的結(jié)構(gòu)標(biāo)簽的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請(qǐng)撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、介紹幾個(gè)常用的HTML5標(biāo)簽
2、html5常用標(biāo)記及用法？
3、isindex是html5中新增的標(biāo)簽嗎
4、html5的語(yǔ)義化標(biāo)簽有哪些及其作用?

HTML5的結(jié)構(gòu)標(biāo)簽（html5的結(jié)構(gòu)標(biāo)簽sidebar）

一、介紹幾個(gè)常用的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屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(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>......<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:表示引用圖片的地址。

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

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

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

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

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

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

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

③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:表示需要用戶用鍵盤輸入的內(nèi)容，瀏覽器顯示為等寬字體

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

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

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

<14>u:下劃線

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

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

二、html5常用標(biāo)記及用法？

HTML5 新增結(jié)構(gòu)元素分為主體結(jié)構(gòu)元素和非主體結(jié)構(gòu)元素

1.主體結(jié)構(gòu)元素包括 article、section、nav、aside、time

2.非主體結(jié)構(gòu)元素包括 header、hgroup、footer、address

一、主體結(jié)構(gòu)元素

article

article 標(biāo)簽，從語(yǔ)義化上看為文檔、頁(yè)面，其用法如下：

通常是一篇文章、一個(gè)頁(yè)面、一個(gè)獨(dú)立完整的內(nèi)容模塊

一般會(huì)帶個(gè)標(biāo)題，并放在 header 標(biāo)簽中

article 元素可以互相嵌套

使用頻率極高，強(qiáng)調(diào)獨(dú)立性，多注意下與 header 標(biāo)簽的使用。

代碼如下:

</header>

</article>

section

section 標(biāo)簽，從語(yǔ)義化上看為部分，其用法如下：

用于頁(yè)面內(nèi)容的獨(dú)立分塊，往往是文章的一段

通常由內(nèi)容和標(biāo)題組成，沒(méi)有標(biāo)題的內(nèi)容不推薦使用 section

使用頻率低，強(qiáng)調(diào)分段分塊。

注：《HTML5與CSS3權(quán)威指南》這本書(shū)中說(shuō)明：一個(gè)容器需要被定義樣式或者腳本定義行為時(shí)，推薦用div而非section，不要將section用作設(shè)置樣式的容器。

代碼如下:

</article>

</article>

</section>

<p>猛將猛將猛將猛將</p>

</section>

<p>猛將猛將猛將猛將</p>

</section>

</article>

nav

nav 標(biāo)簽，從語(yǔ)義化上看為導(dǎo)航，其用法如下：

通常作為頁(yè)面導(dǎo)航的鏈接組

側(cè)邊欄導(dǎo)航

使用頻率高。

代碼如下:

<nav>

<ul>

</ul>

</nav>

aside

aside 標(biāo)簽，從語(yǔ)義化上看為在旁邊、側(cè)邊，其用法如下：

在 article 標(biāo)簽中使用時(shí)，作為主要內(nèi)容的附屬信息部分，如有關(guān)的參考資料、名詞解釋等。

在 article 標(biāo)簽外使用時(shí)，作為頁(yè)面或者站點(diǎn)全局的附屬信息部分，如側(cè)邊欄、博客的友情鏈接部分、廣告區(qū)域等。

使用頻率低。

代碼如下:

<p>馬云，男，1964年10月15日出生于浙江省杭州市，中國(guó)著名企業(yè)家，阿里巴巴集團(tuán)、淘寶網(wǎng)、支付寶創(chuàng)始人..........</p>

<aside>

</aside>

</article></p> <p>

<aside>

<nav>

<ul>

<li><a href="">老趙的博客</a></li>

<li><a href="">鬼哥的博客</a></li>

<li><a href="">彪叔的博客</a></li>

</ul>

</nav>

</aside>

time

time 標(biāo)簽，從語(yǔ)義化上看為時(shí)間，其用法如下：

代表 24 小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期

表示時(shí)刻時(shí)允許帶時(shí)間差

可定義很多格式的日期和時(shí)間

使用頻率低。

代碼如下:

二、非主體結(jié)構(gòu)元素

header

header 標(biāo)簽，從語(yǔ)義化上看為文檔的頁(yè)眉，其用法如下：

一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素

通常放置在整個(gè)頁(yè)面或者頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題

一個(gè)網(wǎng)頁(yè)內(nèi)并沒(méi)有限制 header 標(biāo)簽的個(gè)數(shù)

使用頻率極高，比較容易理解。

代碼如下:

</header>

</header>

</article>

hgroup

hgroup 標(biāo)簽，從語(yǔ)義化上看為標(biāo)題組，其用法如下：

作為 header 標(biāo)簽的子元素

一個(gè)內(nèi)容模塊中包括了主標(biāo)題和至少一個(gè)子標(biāo)題才使用 hgroup

通常會(huì)將 h1~h6 元素進(jìn)行分組

使用頻率高。

代碼如下:

</hgrounp>

</header>

<p>呂布驚呆了</p>

</article>

footer

footer 標(biāo)簽，從語(yǔ)義化上看為文檔的腳注，其用法如下：

一個(gè)內(nèi)容塊區(qū)的腳注

通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等

使用頻率高，比較容易理解。

代碼如下:

<p>呂布驚呆了</p>

<ul>

</ul>

</footer>

</article>

address

address 標(biāo)簽，從語(yǔ)義化上看為地址，其用法如下：

用于文檔中呈現(xiàn)的聯(lián)系信息

通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話號(hào)碼等

使用頻率低。

代碼如下:

</address>

三、isindex是html5中新增的標(biāo)簽嗎

不是。

經(jīng)博客園網(wǎng)查詢isindex不是html5中新增的標(biāo)簽，HTML5為了SEO將div語(yǔ)義化了，新增加結(jié)構(gòu)標(biāo)簽如下：section元素、article元素、aside元素等，新增標(biāo)簽中沒(méi)有isindex。

HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式．被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。

四、html5的語(yǔ)義化標(biāo)簽有哪些及其作用?

<header>元素描述了文檔的頭部區(qū)域

<nav>

標(biāo)簽定義導(dǎo)航鏈接的部分。

<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。

<article> 標(biāo)簽定義獨(dú)立的內(nèi)容。

<aside>

<aside> 標(biāo)簽定義頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）。

<figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題.

<figcaption>元素應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置。

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