HTML 標(biāo)簽與布局

時(shí)間：2023-10-03 13:42:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-03 13:42:02 來源：網(wǎng)站運(yùn)營

HTML介紹

• HTML（HyperText Markup Language）簡稱超文本標(biāo)記語言。它和CSS、JavaScript組合完成一個(gè)網(wǎng)頁的設(shè)計(jì)。對于一個(gè)網(wǎng)頁，HTML定義網(wǎng)頁的結(jié)構(gòu)，CSS描述網(wǎng)頁的樣子，JavaScript則實(shí)現(xiàn)人機(jī)交互。

HTML語義化

• 說起HTML，最常提到的就是它的語義化。簡單來說，HTML語義化就是：頁面內(nèi)容的結(jié)構(gòu)化，即使用合乎語義的標(biāo)簽來表述內(nèi)容。舉個(gè)例子：文章標(biāo)題用header，章節(jié)用section,段落使用p，等等。語義化的好處在于：(1)提高可訪問性（幫助輔助技術(shù)更好的閱讀和轉(zhuǎn)譯你的網(wǎng)頁）。(2)提高可檢索性（便于搜索引擎解析）。(3)提高互用性（便于代碼的后期維護(hù)）。

HTML常用標(biāo)簽介紹

• 使用場景：定義文章的介紹信息，如標(biāo)題、Logo、搜索框、作者名稱等等。

• 使用場景：導(dǎo)航欄等
• 描繪一個(gè)含有多個(gè)超鏈接的區(qū)域，這個(gè)區(qū)域包含轉(zhuǎn)到其他頁面，或者頁面內(nèi)部其他部分的鏈接列表.。結(jié)構(gòu)一般是ul標(biāo)簽下 多個(gè)li標(biāo)簽。

• 使用場景：文檔的主要內(nèi)容。
• 它在文檔中是唯一存在的，不可定義多個(gè)。
• 它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、站點(diǎn)標(biāo)志或搜索表單。

• 使用場景：內(nèi)容專題、功能模塊。
• 表示文檔中的一個(gè)區(qū)域（或節(jié)） ，一般包含標(biāo)題，內(nèi)容。如果不含標(biāo)題，不建議使用。

• 使用場景：論壇帖子、雜志或新聞文章、博客、用戶提交的評論
• 它是一個(gè)獨(dú)立可復(fù)用的結(jié)構(gòu)。

• 使用場景：側(cè)邊欄、標(biāo)注框、廣告欄等。
• 作為側(cè)邊欄、廣告欄時(shí)（一般和article并列）；作為標(biāo)注框時(shí)（嵌套在article內(nèi)）

• 頁腳，通常包含作者、版權(quán)信息或者相關(guān)鏈接等

section和article的比較

• article和section最大的區(qū)別在于article具有很大的獨(dú)立性，也就是說如果拋開上下文，單獨(dú)拿出這個(gè)結(jié)構(gòu)出來，還能夠清晰的表達(dá)這個(gè)結(jié)構(gòu)的功能。舉個(gè)例子：一個(gè)新聞網(wǎng)站它包含很多板塊，比如科技、時(shí)事、娛樂等，這些模塊可以使用section。在這些模塊下有許多文章，這寫文章可以使用article。一篇文章，除了內(nèi)容可能還有下面的評論。我們可以使用section表示評論這一個(gè)模塊，在評論模塊下是一條條具體的評論，而這一條條評論可以使用article。
• 在上面的例子中，使用section將一篇文章劃分為：文章內(nèi)容和評論這兩部分。article則是一條條評論。這樣一對比，我們就能清晰的知道section相對于article來說模塊之間的聯(lián)系性要大的多。

• i和b標(biāo)簽都不具有語氣強(qiáng)調(diào)作用。i一般用來表示：專業(yè)術(shù)語、外語短語等，表現(xiàn)形式是斜體 。b一般用于：關(guān)鍵字、論文導(dǎo)語等等，表現(xiàn)形式是粗體

• em表示文本內(nèi)容的強(qiáng)調(diào)，強(qiáng)調(diào)位置的不同往往會影響語義。比如：<em>貓</em>是可愛的動物。這句話側(cè)重在表述貓這種動物。但是：貓<em>是</em>可愛的動物。這句話側(cè)重在是，表達(dá)了一種不可置于的語氣。strong表示醒目強(qiáng)調(diào)，意在表達(dá)內(nèi)容重要性、緊急性、嚴(yán)重性等。

• 表示嵌套的瀏覽上下文，有效地將另一個(gè)HTML頁面嵌入到當(dāng)前頁面中。
• 具體操作如下圖：

• iframe的作用是在頁面中嵌套一個(gè)外部頁面。
• iframe的默認(rèn)寬度是100px、高度是50px。我們可以通過<style>標(biāo)簽去設(shè)置寬度和高度，得注意的是iframe的寬度可以設(shè)置為100%，但是高度卻不可以設(shè)置100%。
• iframe標(biāo)簽內(nèi)的（src=""）鏈接可以是任何網(wǎng)站，但是如果為("#")的話則默認(rèn)是當(dāng)前頁面。frameborder=0屬性表示的是iframe邊框?yàn)?，如果不為0則iframe是有邊框的
• iframe可以通過name屬性和a標(biāo)簽鏈接在一起，即通過a標(biāo)簽的target和iframe相連，如上圖所示，當(dāng)我們點(diǎn)擊“我說一個(gè)a鏈接”時(shí)，是在iframe內(nèi)跳轉(zhuǎn)至新頁面。

• 超鏈接 <a href=""></a>
• a標(biāo)簽中的(href="")表示引用的鏈接地址，當(dāng)我們點(diǎn)擊鏈接時(shí)有兩種情況。
• 第一種是在標(biāo)簽內(nèi)添加download屬性，即<a href="" download >下載</a>，這種情況是點(diǎn)擊鏈接就可以下載(href="")內(nèi)容。注意：當(dāng)網(wǎng)頁聲明content type 'application/octet-stream' 時(shí)，默認(rèn)為自動下載東西。當(dāng)網(wǎng)頁聲明content type "text/html"時(shí)，則需要加上download。
• 第二種就是我們常見的鏈接跳轉(zhuǎn)，即點(diǎn)擊鏈接就可以訪問對應(yīng)的地址。在訪問時(shí)添加target屬性可以定義跳轉(zhuǎn)的方式。<a href="" target="" >打開網(wǎng)頁</a>。
• target有四種方式分別是：_blank、 self、parent、top。_blank 表示在新的頁面打開。_self 表示在本頁面打開。_parent 表示在父級頁面打開。_top即頂層頁面。

• 關(guān)于href="（）"，括號中的內(nèi)容可以有多種（假設(shè)現(xiàn)在的頁面是file:///C:/Users/Administrator/Desktop/1.html）:
• 如果href="http://qq.com" 則表示打開的是(Desktop中)http://qq.com文件。
• 如果href="//http://qq.com" 則表示打開的是file://http://qq.com文件(即當(dāng)前頁面的協(xié)議file://)。
• 如果href="xxx.html" 則表示打開的是Desktop/xxx.html。
• 如果href="#sss" 則表示不刷新網(wǎng)頁只是當(dāng)前頁面跳轉(zhuǎn)（#錨點(diǎn)）。
• 如果href=""?name=xxx" 打開的是file://index.html?name=xxx。
• 如果href="javascript:;" 則表示空連接，點(diǎn)擊后什么也不發(fā)生。

• 文檔中的一個(gè)區(qū)域，這個(gè)區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息。
• 具體操作如下圖：

• form和a標(biāo)簽都是請求標(biāo)簽，但是唯一不同的是form表示的是post請求，它是通過method="post"來設(shè)置請求的，默認(rèn)請況下是get請求。
• form標(biāo)簽發(fā)送請求是通過和input標(biāo)簽結(jié)合來使用，從圖中可以看到有三個(gè)提交按鈕，只有（提交1、提交3）可以提交請求，（提交2）不可以提交。即提交方式可以通過（input標(biāo)簽設(shè)置type="submit"）或者（直接使用button標(biāo)簽）。
• form標(biāo)簽的target請求方式和a標(biāo)簽相同。
• form標(biāo)簽在請求（action=""）時(shí)可以通過在網(wǎng)址后面添加(?name=xxx)來添加請求數(shù)據(jù)。

• CheckBox和radio都是選擇框，我們可以通過設(shè)置lable標(biāo)簽和它們結(jié)合實(shí)現(xiàn)點(diǎn)擊字體內(nèi)容也能夠?qū)崿F(xiàn)選擇。即通過<input id="xxx"><lable for="xxx">(內(nèi)容)</lable>實(shí)現(xiàn)
• CheckBox和radio都可以設(shè)置name值，name值表示請求時(shí)附帶的參數(shù)。但是二者唯一不同之處是當(dāng)radio的多個(gè)選擇的name值相同時(shí)，只能夠選擇一個(gè)選項(xiàng)。

• 表單控件，可以創(chuàng)建選項(xiàng)菜單

• select可以創(chuàng)建選擇菜單，通過option標(biāo)簽的value屬性可以添加所需要的內(nèi)容。
• 我們可以通過select標(biāo)簽內(nèi)的 multiple屬性設(shè)置菜單可以為多項(xiàng)選擇。
• 通過option標(biāo)簽的disable設(shè)置該選項(xiàng)不可以選擇。
• 通過option標(biāo)簽的selected設(shè)置默認(rèn)選擇。

• 表單控件，可以創(chuàng)建選項(xiàng)菜單

• table標(biāo)簽可以分成thead、tbody、tfoot、結(jié)構(gòu)。
• tr(table row)表示一行。
• th(table head)表示表頭。
• td(table data)表示數(shù)據(jù)。
• colgroup標(biāo)簽和col組合使用，可以對表格每一列進(jìn)行設(shè)置。