HTML5 添加網(wǎng)頁內(nèi)容
■知識點
除了基本結(jié)構(gòu)外,一般網(wǎng)頁都包括以下3部分內(nèi)容。
文本內(nèi)容:在頁面上讓訪問者了解頁面內(nèi)容的純文字,如關(guān)于產(chǎn)品資訊的內(nèi)容,以及其他任何內(nèi)容。
外部引用:使用這些引用來加載圖像、音頻、視頻文件,以及樣式表(控制頁面的顯示效果)和JavaScript文件(為頁面添加行為)。這些引用還可以指向其他的HTML頁面和資源。
標(biāo)記:對文本內(nèi)容進行描述,并確保瀏覽器能夠正確顯示。
每一個HTML頁面的開頭部分,還會包含一些信息,主要用于瀏覽器和搜索引擎(如百度、Google等)的解析。瀏覽器不會將這些信息呈現(xiàn)給訪問者。
網(wǎng)頁內(nèi)容都由文本構(gòu)成,因此網(wǎng)頁可以保存為純文本格式,可以在任何平臺上使用任何瀏覽器查看,無論是PC機、手機、平板電腦,還是其他平臺。這個特性也確保了用戶很容易創(chuàng)建HTML頁面。
■實例設(shè)計
以上節(jié)示例的結(jié)構(gòu)為基礎(chǔ),嘗試為頁面添加一些主體內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>從今天開始努力學(xué)習(xí) HTML5</title>
</head>
<body>
<article>
<h1>小白自語</h1>
<img src="images/xiaobai.jpg" width="50" alt="小白者,我也" />
<p>我是<em>小白</em>, 現(xiàn)在準(zhǔn)備學(xué)習(xí)<a href="https://www.w3.org/TR/html5/"rel="external" title="html5參考手冊">HTML5</a></p>
</article>
</body>
</html>
■演示說明
使用瀏覽器查看網(wǎng)頁時,不會顯示包圍文本內(nèi)容的標(biāo)記,不過這些標(biāo)記是非常有用的,我們使用它們來描述內(nèi)容,如<p>標(biāo)記用于表示段落的幵始。
整個頁面包含了 3部分:自我介紹的文本、外部文件的引用(圖像的src值和鏈接的href值)和標(biāo)記。HTML提供了很多元素,上面示例演示了 6種最為常見的元素:a、article、em、hi、img和p。每個元素都有各自的含義,例如,hi是標(biāo)題,a是鏈接,img是圖像。
點擊加載更多評論>>