溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析

發(fā)布時(shí)間：2022-03-15 16:21:37 來源：億速云 閱讀：117 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析”吧!

HTML標(biāo)簽通常是成對(duì)出現(xiàn)的（雙邊標(biāo)記），比如 <div> 和 </div>，也有單獨(dú)呈現(xiàn)的標(biāo)簽（單邊標(biāo)記），如：<br />、<hr />和<img src=“images/1.jpg” />等。

屬性與標(biāo)記之間、各屬性之間需要以空格隔開。屬性值以雙引號(hào)括起來。

使用Emmet插件快速生成html的骨架

在Sublime Text中安裝Emmet插件。

新建html文件，輸入html:xt，按Tab鍵后（或者按Ctrl+E），自動(dòng)生成的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html>

新建html，輸入html:5后，按 Tab鍵后，自動(dòng)生成的代碼如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

1、文檔聲明頭

任何一個(gè)標(biāo)準(zhǔn)的HTML頁面，第一行一定是一個(gè)以

<!DOCTYPE &hellip;&hellip;

開頭的語句。
這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

HTML4.01有哪些規(guī)范呢？

首先我們先確定一件事兒，我們現(xiàn)在學(xué)習(xí)的是HTML4.01這個(gè)版本，這個(gè)版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰，所以這幾年網(wǎng)頁還是應(yīng)該用HTML4.01來制作。如今，手機(jī)、移動(dòng)端的網(wǎng)頁，就可以使用HTML5了，因?yàn)槠浼嫒菪愿摺?/p>

說個(gè)題外話，html1 至 html3 是美國軍方以及高等研究所用的，并未對(duì)外公開。

HTML4.01里面有兩大種規(guī)范，每大種規(guī)范里面又各有3種小規(guī)范。所以一共6種規(guī)范（見下面）：

HTML4.01里面規(guī)定了普通和XHTML兩大種規(guī)范。

HTML覺得自己有一些規(guī)定不嚴(yán)謹(jǐn)，比如，標(biāo)簽是否可以用大寫字母呢？<H1></H1>

所以，HTML就覺得，把一些規(guī)范嚴(yán)格的標(biāo)準(zhǔn)，又制定了一個(gè)XHTML1.0。在XHTML中的字母X，表示“嚴(yán)格的”。

總結(jié)一下，HTML4.01一共有6種DTD，說白了，HTML第一行語句一共有6種：

HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析

下面對(duì)上圖中的三種小規(guī)范進(jìn)行解釋：

  • strict：表示“嚴(yán)格的”，這種模式里面的要求更為嚴(yán)格。這種嚴(yán)格體現(xiàn)在哪里？有一些標(biāo)簽不能使用。
    比如，u標(biāo)簽，就是給一個(gè)本文加下劃線，但是這和HTML的本質(zhì)有沖突，因?yàn)镠TML只能負(fù)責(zé)語義，不能負(fù)責(zé)樣式，而u這個(gè)下劃線是樣式。所以，在strict中是不能使用u標(biāo)簽的。
    那怎么給文本增加下劃線呢？今后的css將使用css屬性來解決。
    那么，XHTML1.0更為嚴(yán)格，因?yàn)檫@個(gè)體系本身規(guī)定比如標(biāo)簽必須是小寫字母、必須嚴(yán)格閉合標(biāo)簽、必須使用引號(hào)引起屬性等等。

  • Transitional：表示“普通的”，這種模式就是沒有一些別的規(guī)范。

  • Frameset：表示“框架”，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。
HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C自己打臉了）：

<!DOCTYPE html>

2、頭標(biāo)簽

頭標(biāo)簽都放在頭部分之間。包括：<title>、<base>、<meta>、<link>

  • <title>：指定整個(gè)網(wǎng)頁的標(biāo)題，在瀏覽器最上方顯示。

  • <base>：為頁面上的所有鏈接規(guī)標(biāo)題欄顯示的內(nèi)容定默認(rèn)地址或默認(rèn)目標(biāo)。

  • <meta>：提供有關(guān)頁面的基本信息

  • <body>：用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)簽。我們所寫的代碼必須放在此標(biāo)簽內(nèi)。

  • <link>：定義文檔與外部資源的關(guān)系。

我們打開EditPlus軟件，新建一個(gè)html文件，自動(dòng)生成的代碼如下：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus&reg;"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> </body> </html>

上面的<meta>標(biāo)簽都不用記，但是另外還有一個(gè)<meta>標(biāo)簽是需要記住的：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

上面這個(gè)標(biāo)簽的意思是說，3秒之后，自動(dòng)跳轉(zhuǎn)到百度頁面。

我們接下來對(duì)各個(gè)頭標(biāo)簽進(jìn)行介紹。

（1）字符集 charset

我們發(fā)現(xiàn)，在頭標(biāo)簽中，有下面這種標(biāo)簽：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta標(biāo)簽中的charset定義，meta表示“元”?！霸迸渲?，就是表示基本的配置項(xiàng)目。

charset就是charactor set（即“字符集”），這里采用的是。這個(gè)meta不用背，用sublime生成就行。

瀏覽器就是通過meta來看網(wǎng)頁是什么字符集的。比如你保存的時(shí)候，meta寫的和聲明的不匹配，那么瀏覽器就是亂碼。

（2）定義“關(guān)鍵詞”

舉例如下：

<meta name="Keywords" content="網(wǎng)易,郵箱,游戲,新聞,體育,娛樂,女性,亞運(yùn),論壇,短信" />

這些關(guān)鍵詞，就是告訴搜索引擎，這個(gè)網(wǎng)頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。

（3）定義“頁面描述”

meta除了可以設(shè)置字符集，還可以設(shè)置關(guān)鍵字和頁面描述。

我們把含有meta標(biāo)簽的這一行代碼抽象一下：

<meta name=" " content=" ">

name即“名字”，content即“內(nèi)容”。

只要設(shè)置Description頁面描述，那么百度搜索結(jié)果，就能夠顯示這些語句，這個(gè)技術(shù)叫做SEO（search engine optimization，搜索引擎優(yōu)化）。

設(shè)置頁面描述的舉例：

<meta name="Description" content="網(wǎng)易是中國領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費(fèi)郵箱、游戲、搜索引擎服務(wù)，開設(shè)新聞、娛樂、體育等30多個(gè)內(nèi)容頻道，及博客、視頻、論壇等互動(dòng)交流，網(wǎng)聚人的力量。" />

效果如下：

HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析

（4）title標(biāo)簽
<title>網(wǎng)頁的標(biāo)題</title>

title也是有助于SEO搜索引擎優(yōu)化的。

html的完整骨架：

綜上所述，html的比較完整的骨架是這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Keywords" content="牛逼，很牛逼，特別牛逼" /> <meta name="Description" content="網(wǎng)易是中國領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費(fèi)郵箱、游戲、搜索引擎服務(wù)，開設(shè)新聞、娛樂、體育等30多個(gè)內(nèi)容頻道，及博客、視頻、論壇等互動(dòng)交流，網(wǎng)聚人的力量。" /> <title>Document</title> </head> <body> </body> </html>

面試題：

  • 問：網(wǎng)頁的head標(biāo)簽里面，表示的是頁面的配置，有什么配置？

  • 答：字符集、關(guān)鍵詞、頁面描述、頁面標(biāo)題。（今后我們還能看見一些其他的配置：IE適配、視口、iPhone小圖標(biāo)等等）

3、<body>標(biāo)簽的屬性

其屬性有：

  • bgcolor：設(shè)置整個(gè)網(wǎng)頁的背景顏色。

  • background：設(shè)置整個(gè)網(wǎng)頁的背景圖片。

  • text：設(shè)置網(wǎng)頁中的文本顏色。

  • leftmargin：網(wǎng)頁的左邊距。IE瀏覽器默認(rèn)是8個(gè)像素。

  • topmargin：網(wǎng)頁的上邊距。

  • rightmargin：網(wǎng)頁的右邊距。

  • bottommargin：網(wǎng)頁的下邊距。

<body>標(biāo)簽另外還有一些屬性，這里用個(gè)例子來解釋：

HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析

上方代碼中，當(dāng)我們對(duì)點(diǎn)我點(diǎn)我這幾個(gè)字使用超鏈時(shí)，link屬性表示默認(rèn)顯示的顏色、alink屬性表示鼠標(biāo)點(diǎn)擊但是還沒有松開時(shí)的顏色、vlink屬性表示點(diǎn)擊完成之后顯示的顏色。效果如下：

HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析

到此，相信大家對(duì)“HTML基礎(chǔ)結(jié)構(gòu)實(shí)例分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手