溫馨提示×

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

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

HTML使用方法實(shí)例分析

發(fā)布時(shí)間：2022-03-02 17:14:59 來(lái)源：億速云 閱讀：154 作者：iii 欄目：web開發(fā)

本文小編為大家詳細(xì)介紹“HTML使用方法實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“HTML使用方法實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

首先使用 VSCode 編輯器新建一個(gè)文件，把這個(gè)文件的擴(kuò)展名保存為 .html 或者 .htm，比如 MyFirstHTML.html。然后，在文件里面輸入 HTML:5，根據(jù)提示框的內(nèi)容進(jìn)行選擇。

HTML使用方法實(shí)例分析

咱們就得到了 HTML5 這個(gè)版本的最基本的內(nèi)容啦！怎么樣？夠簡(jiǎn)單吧。

HTML使用方法實(shí)例分析

當(dāng)然了，現(xiàn)在咱們還不知道這里面到底都寫什么，不要急~ 接下來(lái)，咱們就一個(gè)一個(gè)的來(lái)了解了解吧！

首先，映入咱們眼簾的是 <!DOCTYPE html>。它叫做 HTML 聲明，主要就是告訴瀏覽器這個(gè) HTML 文檔的版本是什么，這樣的話瀏覽器就可以準(zhǔn)確地進(jìn)行解析和加載了。

但是，話說(shuō)回來(lái)，現(xiàn)在的瀏覽器都已經(jīng)很強(qiáng)大了。也就是說(shuō)，即使你在編寫 HTML 文檔時(shí)沒有寫 HTML 聲明，瀏覽器也可以很好地解析和加載的。不信的話，咱們來(lái)看個(gè)例子：

HTML使用方法實(shí)例分析

然后，咱們?cè)跒g覽器中運(yùn)行這個(gè) HTML 文檔，看看結(jié)果如何？

HTML使用方法實(shí)例分析

可以看到，運(yùn)行之后的 HTML 文檔，沒有任何的顯示問(wèn)題。但是，可但是，我還是想和你說(shuō)，盡量還是把 HTML 聲明加上吧！雖然 HTML 這妹子好說(shuō)話，但不等于你就可以為所欲為了不是？！

閑話少敘，咱們還是繼續(xù)介紹 HTML 聲明。在第一個(gè)示例里面的 <!DOCTYPE html> 聲明，是屬于 HTML5 版本的。也就是說(shuō) HTML4 版本，不對(duì)，是 HTML4.01 版本的聲明和 HTML5 版本的是不一樣的。

HTML4.01 版本一共有 3 個(gè)聲明，其中最常用的是下面這個(gè)：

在這個(gè)基本結(jié)構(gòu)里面，除了 HTML 聲明以外，剩下的所有內(nèi)容咱們都可以叫做元素。比如咱們之前完成的這個(gè)示例：

HTML使用方法實(shí)例分析

咱們可以很清晰地看到一個(gè)元素中包含標(biāo)簽和內(nèi)容，標(biāo)簽還可以分為開始標(biāo)簽和結(jié)束標(biāo)簽。當(dāng)然了，一個(gè)元素也不一定必須有開始標(biāo)簽和結(jié)束標(biāo)簽，有時(shí)候可能只有開始標(biāo)簽就行了。這是因?yàn)樵乜梢苑殖蓛深悾?/p>

上面咱們看到的 <h2> 元素就是一個(gè)閉合元素，因?yàn)樗虚_始標(biāo)簽和閉合標(biāo)簽。在 HTML 的基本結(jié)構(gòu)里面，咱們可以找到 <meta> 元素，這個(gè)元素就是一個(gè)空元素，因?yàn)樗挥虚_始標(biāo)簽，沒有結(jié)束標(biāo)簽。

標(biāo)簽名，你想用小寫、大寫還是大小寫混合在一起，都是可以的，例如 <meta>、<META> 或者 <Meta>。這是因?yàn)?HTML 大小不敏感，可是 W3C 的建議是小寫，而且現(xiàn)在的編輯器基本上提供的都是小寫。你也不用太糾結(jié)這個(gè)事兒，就想告訴你一聲而已。

一個(gè)元素除了標(biāo)簽和內(nèi)容之外，其實(shí)在開始標(biāo)簽里面還可以定義屬性。屬性是用來(lái)為某個(gè)元素定義一些額外的信息，比如名稱、樣式、ID等等。

說(shuō)到這兒，你可能會(huì)問(wèn)了，為啥屬性要定義在開始標(biāo)簽里面，不是在結(jié)束標(biāo)簽里面？前面咱們已經(jīng)說(shuō)了，元素分為兩種：閉合元素和空元素。無(wú)論是閉合元素還是空元素都有開始標(biāo)簽，但是空元素沒有結(jié)束標(biāo)簽啊。如果你把屬性定義在結(jié)束標(biāo)簽里面，明顯就是欺負(fù)人家空元素呢嘛！本來(lái)人家就是個(gè)單身狗，你還非要虐一虐，太不人道了！

HTML使用方法實(shí)例分析

元素的屬性也有兩個(gè)部分：屬性名稱和屬性值，這兩個(gè)就像一對(duì)情侶一樣，可不能給人家拆散了。當(dāng)然了，凡事都有例外，也存在那種屬性名和屬性值相同的，可以允許你只定義屬性名就行的。比如下面這種：

咱們可以看到 disabled 這個(gè)屬性就是可以只定義屬性名就行的，原因就是它的只也是 disabled。這種算是比較特殊的屬性，在 HTML 里面的數(shù)量不多。

再有，根據(jù)作用的不同，元素的屬性可以分為 4 類：

了解了 HTML 里面的元素和屬性之后，咱們?cè)倩仡^看看之前生成的 HTML 基本結(jié)構(gòu)，這時(shí)很多就能看的明白了。但還是有些內(nèi)容需要繼續(xù)介紹給你的。

比如咱們可以看到，除了 HTML 聲明之外，有一個(gè)叫做 <html> 的元素，這個(gè)元素一般叫做根元素，這是因?yàn)樗衅渌脑囟际窃谒锩娴?。而且在一個(gè) HTML 文檔中只能定義一個(gè) <html> 元素，即便你在一個(gè) HTML 文檔里面定義多個(gè) <html> 元素，瀏覽器也就解析其中一個(gè)而已。

再比如顯示在瀏覽器窗口的內(nèi)容都是定義在 <body> 這個(gè)元素中的。即使你在不寫 HTML 基本結(jié)構(gòu)，直接定義具體的元素時(shí)，運(yùn)行在瀏覽器之后，瀏覽器也會(huì)自動(dòng)把這個(gè)元素放在 <body> 元素中的。

HTML使用方法實(shí)例分析

接下來(lái)，還有一個(gè)很重要的元素，就是 <head>。這個(gè)元素是用來(lái)定義 HTML 文檔的信息的，比如 <title>第一個(gè) HTML</title> 定義了 HTML 文檔的標(biāo)題為第一個(gè) HTML。

讀到這里，這篇“HTML使用方法實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

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

AI
助
手