柚子快報(bào)激活碼778899分享：前端 HTML5網(wǎng)頁(yè)標(biāo)簽介紹

http://yzkb.51969.com/

一、語(yǔ)義化標(biāo)簽

????1、在網(wǎng)頁(yè)中HTML是專(zhuān)門(mén)用來(lái)負(fù)責(zé)網(wǎng)頁(yè)結(jié)構(gòu)，所以在使用HTML標(biāo)簽時(shí)，應(yīng)該關(guān)注的是標(biāo)簽的語(yǔ)義而不是它的樣式。

??? 2、標(biāo)題標(biāo)簽：h1~h6，一共六級(jí)標(biāo)題。

????????????????????????? 從h1到h6重要性遞減，h1最重要，h6最不重要。

????????????????????????? h1在網(wǎng)頁(yè)中的重要性僅次于title標(biāo)簽，一般情況下一個(gè)頁(yè)面中只會(huì)有一個(gè)h1。

????????????????????????? 一般情況下標(biāo)題標(biāo)簽只會(huì)使用h1~h3，h4~h6很少用。

??? 3、Ctrl+回車(chē)?? 換行不會(huì)連著后面一塊換行。

??? 4、在頁(yè)面中獨(dú)占一行的元素稱(chēng)為塊元素（block element）。標(biāo)題標(biāo)簽都是塊元素。

????????? 在網(wǎng)頁(yè)中一般通過(guò)塊元素來(lái)對(duì)頁(yè)面進(jìn)行布局（宏觀布局）。

????????? 一般情況下會(huì)在塊元素中放行內(nèi)元素，而不會(huì)在行內(nèi)元素中放塊元素。

???????? p元素中不能放任何塊元素。塊元素中基本什么都能放。

??? 5、p標(biāo)簽表示頁(yè)面中的一個(gè)段落。p也是一個(gè)塊元素。

??? 6、hgroup標(biāo)簽用來(lái)為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup。

??? 7、em標(biāo)簽表示語(yǔ)音語(yǔ)調(diào)加重。語(yǔ)法： ??????? 屬于行內(nèi)元素。

??? 8、在頁(yè)面張不會(huì)獨(dú)占一行的元素稱(chēng)為行內(nèi)元素（inline element）。

????????? 行內(nèi)元素主要用來(lái)包裹文字?

??? 9、strong表示強(qiáng)調(diào)重要內(nèi)容。語(yǔ)法： ?????? 屬于行內(nèi)元素。

?? 10、blockquote表示一個(gè)長(zhǎng)引用，會(huì)獨(dú)占一行，屬于塊元素。語(yǔ)法：

?? 11、q表示一個(gè)短引用，屬于行內(nèi)元素，不會(huì)獨(dú)占一行。語(yǔ)法：

?? 12、br表示換行。語(yǔ)法：
內(nèi)容

?? 13、瀏覽器在解析網(wǎng)頁(yè)時(shí)會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)中不符合規(guī)范的內(nèi)容進(jìn)行修正。例如：標(biāo)簽卸載了根元素的外部、p元素中嵌套了塊元素、根元素中出現(xiàn)了除head和body以外的元素 等。

???

? ?二、布局標(biāo)簽（結(jié)構(gòu)化語(yǔ)義標(biāo)簽）

????????? ①? header 表示網(wǎng)頁(yè)的頭部。? 語(yǔ)法：

????????? ②? main? 表示網(wǎng)頁(yè)的主體部分。 （一個(gè)頁(yè)面中只會(huì)有一個(gè)main）??? 語(yǔ)法：

????????? ③? footer? 表示網(wǎng)頁(yè)的底部。? 語(yǔ)法：

????????? ④? nav? 表示網(wǎng)頁(yè)中的導(dǎo)航。? 語(yǔ)法：

????????? ⑤? aside? 表示和主體相關(guān)的其他類(lèi)（側(cè)邊欄）。? 語(yǔ)法：

????????? ⑥? article? 表示一個(gè)獨(dú)立的文章。?? 語(yǔ)法：

????????? ⑦? section? 表示一個(gè)獨(dú)立的區(qū)塊，上邊的標(biāo)簽都不能表示時(shí)使用section。?? 語(yǔ)法：

????????? ⑧? div? 沒(méi)有語(yǔ)義，就用來(lái)表示一個(gè)區(qū)塊，目前來(lái)講div還是我們主要的布局元素。?? 語(yǔ)法：

????????? ⑨? span?? 行內(nèi)元素，沒(méi)有語(yǔ)義，一般用于在網(wǎng)頁(yè)中選中文字。?? 語(yǔ)法：

三、列表（list）

??? 1、HTML列表一共有三種：有序列表、無(wú)序列表、定義列表。

??? 2、有序列表：使用ol標(biāo)簽創(chuàng)建有序列表，使用li表示列表項(xiàng)。

??? 3、無(wú)序列表：使用ul標(biāo)簽創(chuàng)建無(wú)序列表，使用li表示列表項(xiàng)。

??? 4、定義列表：使用dl標(biāo)簽創(chuàng)建定義列表，使用dt表示定義的內(nèi)容，dd表示對(duì)內(nèi)容進(jìn)行解釋說(shuō)明。

??? 5、列表之間可以互相嵌套。

四、超鏈接

??? 1、超鏈接可以從一個(gè)界面跳轉(zhuǎn)到另一個(gè)頁(yè)面，或者是當(dāng)前頁(yè)面的其他位置。

??? 2、使用a標(biāo)簽定義超鏈接。語(yǔ)法：

????????? 屬性：href 指定跳轉(zhuǎn)的目標(biāo)路徑，其值可以是一個(gè)外部網(wǎng)站的一個(gè)地址。也可以寫(xiě)一個(gè)內(nèi)部頁(yè)面的地址。

??? 3、超鏈接也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素。

??? 4、換行用
。

? 5、HTML 鏈接 - target 屬性：使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

??? 6、HTML 鏈接- id 屬性：id 屬性可用于創(chuàng)建一個(gè) HTML 文檔書(shū)簽。

?????????????? 提示: 書(shū)簽不會(huì)以任何特殊方式顯示，即在 HTML 頁(yè)面中是不顯示的，所以對(duì)于讀者來(lái)說(shuō)是隱藏的。

實(shí)例

在HTML文檔中插入ID:??? 有用的提示部分

在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：??? 訪問(wèn)有用的提示部分

或者，從另一個(gè)頁(yè)面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：?? 訪問(wèn)有用的提示部分

??? 7、圖片鏈接：

??? 8、在當(dāng)前頁(yè)面鏈接到指定位置：? 查看章節(jié) 4

??? 9、跳出框架：

?? 10、創(chuàng)建電子郵件鏈接：

五、其他補(bǔ)充

? ① target 屬性：用來(lái)指定超鏈接打開(kāi)的位置。

??????????????????????????????? 可選值： _self? 默認(rèn)值，在當(dāng)前頁(yè)面打開(kāi)超鏈接

????????????????????????????????????????????? _blank 在一個(gè)新的頁(yè)面中打開(kāi)超鏈接

?????? ②? 回到頂部：可以直接將超鏈接的href屬性設(shè)置為#，這樣點(diǎn)擊超鏈接以后頁(yè)面不發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁(yè)面的頂部的位置。

?????? ③? 去到底部：利用id屬性（唯一不重復(fù)的）。?? id屬性是元素的唯一標(biāo)識(shí)，同一個(gè)頁(yè)面中不能出現(xiàn)重復(fù)的id屬性，每一個(gè)標(biāo)簽都可以添加一個(gè)id屬性。

????????????????????????????? id屬性區(qū)分大小寫(xiě)字母，一定字母開(kāi)頭。

?????? ④? 跳轉(zhuǎn)頁(yè)面指定位置：只需將href屬性設(shè)置? #目標(biāo)元素的id屬性值。

?????? ⑤? 在開(kāi)發(fā)中可以將#作為超鏈接的路徑的展位符使用。

?????? ⑥? 可以使用javascript：；來(lái)作為href的屬性，此時(shí)點(diǎn)擊這個(gè)超鏈接什么也不會(huì)發(fā)生。

六、相對(duì)路徑和絕對(duì)路徑

??? 1、路徑屬性：href

??? 2、絕對(duì)路徑：具體的網(wǎng)址。如：https://www.baidu.com

??? 3、相對(duì)路徑：當(dāng)我們需要跳轉(zhuǎn)到服務(wù)器內(nèi)部的頁(yè)面時(shí)，一般使用相對(duì)路徑（相對(duì)于當(dāng)前頁(yè)面）。相對(duì)路徑都會(huì)使用 . 或者? ..? 或者? ./? 或者? ../? 開(kāi)頭。./可以省略不寫(xiě)，如果不寫(xiě)./則就相當(dāng)于寫(xiě)了./。

????????????????????????? ./表示當(dāng)前文件所在的目錄。????? ../ 表示當(dāng)前所在目錄的上一級(jí)目錄

?? 例如：

七、圖片標(biāo)簽

??? 1、圖片標(biāo)簽：用于向當(dāng)前頁(yè)面中引入一個(gè)外部圖片。

????????????????????????? 使用img標(biāo)簽來(lái)引入外部圖片。? img標(biāo)簽是一個(gè)自由結(jié)束標(biāo)簽。 img這種元素屬于替換元素（基于塊和行內(nèi)元素之間，具有兩種元素特點(diǎn)）

????????????????????????? 屬性：src:? 指定的是外部圖片的路徑（路徑規(guī)則和超鏈接一樣），可選值可以是圖片的路徑或者是圖片地址。

??????????????????????????????????? alt：圖片的描述，這個(gè)描述默認(rèn)情況下不會(huì)顯示，有些瀏覽器圖片無(wú)法加載時(shí)顯示。?搜索引擎會(huì)根據(jù)alt中的內(nèi)容來(lái)識(shí)別圖片。如果不寫(xiě)alt屬性則圖片不會(huì)被搜索引擎所收錄。

?????????????????????????????????? width:? 圖片的寬度（單位是像素）

????????????????????????????????? height： 圖片的高度。?

????????????????????????????????? 寬度和高度中如果只修改了一個(gè)，則另一個(gè)會(huì)等比例縮放。

???????注意：一般情況下在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大，但是在移動(dòng)端經(jīng)常需要對(duì)圖片進(jìn)行縮放（大圖縮?。?。

??? 2、圖片的格式

????????? ① jpeg（jpg）：支持的顏色比較豐富，不支持透明效果，不支持動(dòng)圖。一般用來(lái)顯示照片。

????????? ② gif ：支持的顏色比較少，支持簡(jiǎn)單透明，支持動(dòng)圖。適用于顏色單一的圖片或者動(dòng)圖。

????????? ③ png ：支持的顏色豐富，支持復(fù)雜透明，不支持動(dòng)圖。用于顏色豐富，復(fù)雜透明的圖片（專(zhuān)為網(wǎng)頁(yè)而生）。

????????? ④ webp： 這種格式是谷歌新推出的專(zhuān)門(mén)用來(lái)表示網(wǎng)頁(yè)中的圖片的一種格式，具備其他圖片格式的所有優(yōu)點(diǎn)，而且文件還特別小。但是兼容性不好。

????????? ⑤ base64： 將圖片使用base64進(jìn)行編碼，這樣可以將圖片轉(zhuǎn)換為字符通過(guò)字符形式引入圖片，一般都是一些需要和網(wǎng)頁(yè)一起加載的圖片才使用 base64。圖片加載速度快。

????????效果一樣的用內(nèi)存小的；效果不一樣的用效果好的，同時(shí)也要考慮內(nèi)存大小。

八、內(nèi)聯(lián)框架

??? 1、內(nèi)聯(lián)框架：用于向當(dāng)前頁(yè)面中引入一個(gè)其他頁(yè)面。

??? 2、屬性：src ：指定要引入的網(wǎng)頁(yè)的路徑。

?????????????????? frameborder ： 指定內(nèi)聯(lián)框架的邊框。一般選值0。

?????????????????? width ： 邊框的寬度。

?????????????????? height ： 邊框的高度。

九、音視頻播放

??? 1、audio 標(biāo)簽：用來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件，音頻文件引入時(shí)，默認(rèn)情況下不允許用戶自己控制播放停止。

??????????????????? 屬性：controls? 允許用戶控制播放，沒(méi)有屬性值。

????????????????????????????? autoplay 音頻文件自動(dòng)播放，沒(méi)有屬性值。如果設(shè)置了autoplay，則音樂(lè)在打開(kāi)頁(yè)面時(shí)會(huì)自動(dòng)播放，但是目前大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂(lè)進(jìn)行播放。

????????????????????????????? loop? 循環(huán)播放，沒(méi)有屬性值。

??? 2、除了通過(guò)src來(lái)指定外部文件的路徑以外，還可以通過(guò)source來(lái)指定文件的路徑。當(dāng)瀏覽器不支持播放時(shí)則會(huì)忽略source標(biāo)簽但是不會(huì)忽略文字，支持播放時(shí)則不會(huì)顯示文字。source可以同時(shí)指定多種文件

??? 3、embed 標(biāo)簽：基本適用于所有瀏覽器，但是會(huì)自動(dòng)播放音頻。

?4、video 標(biāo)簽：使用方式與audio基本一樣。

十、表格

??? 1、在現(xiàn)實(shí)生活中，我們經(jīng)常需要使用表格來(lái)表示一些格式化數(shù)據(jù)，例如：課程表、人名單、成績(jī)單······ 同樣在網(wǎng)頁(yè)中我們也需要用表格，我們通過(guò)table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格。

??? 2、在table中使用tr表示表格中的一行，有幾個(gè)tr就有幾行；在tr中使用td表示一個(gè)單元格，有幾個(gè)td就有幾個(gè)單元格。

??? 3、colspan? 橫向合并單元格

????????? rowspan 縱向合并單元格

??? 4、可以將一個(gè)表格分成三部分：

???????????????????????????????????????????????????? 頭部?? thead

???????????????????????????????????????????????????? 主體?? tbody

???????????????????????????????????????????????????? 底部?? tfoot

??? 5、th? 表示頭部的單元格

??? 6、表格的樣式

（1） border-spacing?? 指定邊框之間的距離

（2）border-collapse??? 設(shè)置邊框的合并

目前關(guān)于HTML5的學(xué)習(xí)分享到這里，這是本人學(xué)習(xí)HTML5過(guò)程中的筆記分享，希望大家一起探討，下一篇文章將開(kāi)啟前端學(xué)習(xí)的下一個(gè)內(nèi)容學(xué)習(xí)：CSS，這是渲染網(wǎng)頁(yè)一個(gè)很重要的基礎(chǔ)知識(shí)儲(chǔ)備。

柚子快報(bào)激活碼778899分享：前端 HTML5網(wǎng)頁(yè)標(biāo)簽介紹

http://yzkb.51969.com/

參考閱讀