詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)
來(lái)源:易賢網(wǎng) 閱讀:652 次 日期:2016-06-15 14:44:35
溫馨提示:易賢網(wǎng)小編為您整理了“詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)”,方便廣大網(wǎng)友查閱!

用HTML標(biāo)記內(nèi)容的目的是為了賦予網(wǎng)頁(yè)語(yǔ)義(semantic)。換句話說(shuō),就是要給你的網(wǎng)頁(yè)內(nèi)容賦予某些用戶(hù)代理(user agent)能夠理解的含義。

HTML 規(guī)定了一組標(biāo)簽,用來(lái)給內(nèi)容打上不同的標(biāo)記。每個(gè)標(biāo)簽都是對(duì)它所包含內(nèi)容的一種描述。最常用的HTML描述的是標(biāo)題、段落、鏈接和圖片。目前,HTML一共有114個(gè)標(biāo)簽,但按照 80/20 原則,使用其中25個(gè)左右的標(biāo)簽就可以滿(mǎn)足80%的標(biāo)記需要。

HTML 最新的版本 HTML5,又新規(guī)定了一批結(jié)構(gòu)化標(biāo)簽,用于對(duì)相關(guān)內(nèi)容的標(biāo)簽進(jìn)行分組,從而更好地規(guī)范網(wǎng)頁(yè)的整體結(jié)構(gòu)。這些新標(biāo)簽包括<header>、<nav>(即 navigation,導(dǎo)航)、<article>、<section>、<aside>和<footer>。

1.標(biāo)簽的閉合

對(duì)于每個(gè)包含內(nèi)容的元素(比如標(biāo)題、段落和圖片),根據(jù)它所包含的內(nèi)容是不是文本,有兩種不同的方式給它們加標(biāo)簽,一種是使用閉合標(biāo)簽,另一種是使用非閉合標(biāo)簽。

1.1 文本用閉合標(biāo)簽

示例:<h1>Hello, CSS!</h1>

1.2 引用內(nèi)容用自閉合標(biāo)簽

示例:<img src="images/dog.jpg" alt="This is my dog." >

提示:

對(duì)于自閉合標(biāo)簽,XHTML 要求必須這樣寫(xiě):

XML/HTML Code1.<img src="images/dog.jpg" alt="This is my dog." />  

而在 HTML5 中,可以省略最后那個(gè)表示關(guān)閉的斜杠,寫(xiě)成:

XML/HTML Code1.<img src="images/dog.jpg" alt="This is my dog." >  

2.屬性

提示:視障用戶(hù)使用的屏幕閱讀器會(huì)大聲讀出 alt 屬性的內(nèi)容,因此一定要給標(biāo)簽的這個(gè) alt 屬性添加讓人一聽(tīng)(或一看)就能明白的內(nèi)容。

3.標(biāo)題與段落

4.復(fù)合元素

HTML 不僅規(guī)定了標(biāo)題、圖片和段落等基本的內(nèi)容標(biāo)記,還規(guī)定了用于創(chuàng)建列表、表格和表單等復(fù)雜用戶(hù)界面組件的標(biāo)記,這些就是所謂的復(fù)合元素,即它們是由多個(gè)標(biāo)簽共同構(gòu)成的。

5.嵌套標(biāo)簽

簡(jiǎn)單地說(shuō),就是把一個(gè)標(biāo)簽嵌套在另一個(gè)標(biāo)簽里面。

6.HTML5 模板

XML/HTML Code

1.<!DOCTYPE html>  

2.<html>  

3. <head>  

4. <meta charset="utf-8" />  

5. <title>An HTML Template</title>  

6. </head>  

7. <body>  

8. <!-- 這里是網(wǎng)頁(yè)內(nèi)容 -->  

9. </body>  

10.</html>  

7.塊級(jí)元素和行內(nèi)元素

文檔流效果:HTML 元素會(huì)按照它們各自在標(biāo)記中出現(xiàn)的先后順序,依次從頁(yè)面上方流向下方。

幾乎所有HTML 元素的 display 屬性要么為 block,要么為 inline。最明顯的一個(gè)例外是 table 元素,它有自己特俗的 display 值。

塊級(jí)元素(比如標(biāo)題和段落)會(huì)相互堆疊在一起沿頁(yè)面向下排列,每個(gè)元素分別占一行。而行內(nèi)元素(比如鏈接和圖片)則會(huì)相互并列,只有在空間不足以并列的情況下才會(huì)折到下一行顯示。

無(wú)論你想了解哪個(gè) HTML 元素,第一個(gè)要問(wèn)的問(wèn)題都應(yīng)該是:它是塊級(jí)元素,還是行內(nèi)元素?知道了這一點(diǎn)之后,就可以在編寫(xiě)標(biāo)記的時(shí)候,預(yù)想到某個(gè)元素在初始狀態(tài)下是如何定位的,這樣才能進(jìn)一步想好將來(lái)怎么用 CSS 重新定位它。

有兩點(diǎn)要知道的:

塊級(jí)元素盒子會(huì)擴(kuò)展到與父元素同寬。

行內(nèi)元素盒子會(huì) 收縮包裹 其內(nèi)容,并且會(huì)盡可能包緊。

名單

7.嵌套的元素

在標(biāo)記中嵌套的是HTML標(biāo)簽,而在屏幕上嵌套的則是一個(gè)個(gè)的盒子。

8.文檔對(duì)象模型

文檔對(duì)象模型(簡(jiǎn)稱(chēng) DOM)是從瀏覽器的視角來(lái)觀察頁(yè)面中的元素以及每個(gè)元素的屬性,由此得出這些元素的一個(gè)家族樹(shù)。通過(guò)DOM,可以確定元素之間的相互關(guān)系。在 CSS 中引用 DOM中特定的位置,就可以選中相應(yīng)的 HTML 元素,并修改其樣式屬性。

CSS 操作 DOM 的過(guò)程是先選擇一個(gè)或一組元素,然后再修改這些元素的屬性。通過(guò) CSS 修改了元素后,比如修改了寬度或者在標(biāo)記里插入了一個(gè)偽元素,這些變化會(huì)立即在 DOM 中發(fā)生,并體現(xiàn)在頁(yè)面上。

簡(jiǎn)而言之,就是通過(guò) HTML 標(biāo)記來(lái)構(gòu)建 DOM,然后在頁(yè)面初次加載和用戶(hù)與頁(yè)面交互時(shí),使用 CSS 來(lái)修改 DOM。

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)