亚洲一区日韩精品中文字幕,国产69精品久久久久久人妻精品

HTML 21 天入門：初識(shí) HTML

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月19日 22:10 本文熱度 1632

HTML 頁面構(gòu)成

還記得咱們前面運(yùn)行的 Hello World 頁面代碼嗎？咱們一起來看看它的結(jié)構(gòu)。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>我的第一個(gè)頁面</title>   </head>    <body>     Hello World, Updated   </body> </html>

除了第一行有一個(gè)全大寫的DOCTYPE，其它都是小寫。

DOCTYPE 指定此文件的格式為 html。

HTML 文件里出現(xiàn)的節(jié)點(diǎn)稱為 HTML 元素，它本身不區(qū)分大小寫。比如，最頂層的元素，寫成 HTML 或 html 都可以，但是約定俗成用小寫。

一個(gè) HTML 文件里不可或缺的元素，是 head 和 body?；窘Y(jié)構(gòu)如下：

<html>   <head></head>   <body></body> </html>

如果把一個(gè) HTML 頁面理解成一個(gè)人的話，頭(head)和身體(body)是必須的，但同時(shí)還有一些其它東西也是必須的。我們一個(gè)一個(gè)說。

head 元素

網(wǎng)頁的 head 元素就像人的頭一樣，包含了一些內(nèi)容。但要知道，這些內(nèi)容并不會(huì)真正體現(xiàn)在網(wǎng)頁顯示上，但它們也非常重要。

title 元素

網(wǎng)頁標(biāo)題元素，它不顯示在網(wǎng)頁中，而是顯示在瀏覽器最上面的。下面截圖里顯示的“我的第一個(gè)頁面”。

<title>我的第一個(gè)頁面</title>

除了 title 元素之外，可以添加在 head 里的重要元素還有: <link>, <style>, <script>, <meta>。

link 元素

字面意思是鏈接，理解為把要在這個(gè)網(wǎng)頁使用的資源鏈接過來，以便當(dāng)前網(wǎng)頁能找到并使用。

當(dāng)然，不是所有的資源都能鏈接到網(wǎng)頁使用，這里常用是樣式表(CSS)文件和網(wǎng)站圖標(biāo)(favicon)文件。

下面引用了外部一個(gè)路徑為 css/style.css 的文件。

<link rel="stylesheet" href="css/style.css" type="text/css" />
下面鏈接了一個(gè)網(wǎng)站圖標(biāo)。默認(rèn)情況下，把名稱為 favicon.ico 的圖片放到網(wǎng)站的根目錄，即可使用網(wǎng)站圖標(biāo)。但如果你有多個(gè)圖標(biāo)想在不同的設(shè)備上使用，那么可以通過如下的方式鏈接多個(gè)網(wǎng)站圖標(biāo)進(jìn)來。

<link rel="shortcut icon" href="/favicon.ico" />

style 元素

樣式元素，用于在當(dāng)前網(wǎng)頁編寫只被當(dāng)前網(wǎng)站使用的樣式。

<style>   body {     font-size: 12px;   } </style>

script 元素

腳本元素，用于引用 javascript 腳本，有兩種方式使用

引用外部腳本文件

<script   type="text/javascript"   src="js/jquery/jquery.min.js?ver=3.6.0" ></script>

引用外部的 jquery 腳本文件。

直接在當(dāng)前網(wǎng)頁編寫腳本代碼
```
<script>   alert("message from page"); </script> 
```
在當(dāng)前網(wǎng)頁里執(zhí)行的腳本代碼。

meta 元素

描述了一些基本的元數(shù)據(jù)，不會(huì)顯示在頁面上，但是會(huì)被瀏覽器解析。

通過使用 meta 元素對(duì)網(wǎng)頁所展示的內(nèi)容進(jìn)行描述，而這些信息會(huì)被搜索引擎識(shí)別并收錄，在其它用戶使用搜索引擎搜索時(shí)展現(xiàn)。

SEO（Search Engine Optimization）即搜索引擎優(yōu)化，可以通過對(duì) meta 元素里的描述信息進(jìn)行有針對(duì)性的改進(jìn)，以便獲得在搜索引擎里的高排名。這么做幫助我們的站點(diǎn)被正確收錄和展示，能提高站點(diǎn)的曝光，從而獲得更多的訪問。

<meta   name="keywords"   content="為搜索引擎定義關(guān)鍵詞，以逗號(hào)分割。比如：HTML, CSS" /> <meta name="description" content="為網(wǎng)頁定義描述內(nèi)容。比如：免費(fèi)的HTML教程。" /> <meta name="author" content="定義該網(wǎng)頁的作者。比如：北果子" />

body 元素

剛才說了那么多 head 元素，在 body 里，它能使用的元素更多，這些元素，都是用來在網(wǎng)頁上顯示內(nèi)容的。

比如說，用于顯示文章標(biāo)題的 h1,h2,h3,h4,h5,h6，用于顯示圖片的 img 元素，用于顯示表格的 table 元素等等。

這些元素本身都有著豐富的屬性，在接下來的章節(jié)里，會(huì)逐一講解每一個(gè)常用的元素，通過練習(xí)，熟悉這些元素的使用。

HTML 元素

以上說的都是 HTML 元素，元素有自己特定的寫法和要求。當(dāng)我們談?wù)撘婚T編程語言的時(shí)候，常常說到語法，如果說 HTML 也有語法的話，那它的語法就指的是元素的語法。

元素有起始標(biāo)簽和結(jié)束標(biāo)簽，比如:

<html>是起始標(biāo)簽，它的結(jié)束標(biāo)簽是</html>。
<p>是起始標(biāo)簽，它的結(jié)束標(biāo)簽是</p>。
<h1>是起始標(biāo)簽，它的結(jié)束標(biāo)簽是</h1>。

注意到了嗎，元素的結(jié)束標(biāo)簽，就是在起始標(biāo)簽字母前加上斜杠符號(hào) /。

顯示在網(wǎng)頁上的內(nèi)容，是元素起始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。
特殊的元素有空內(nèi)容，比如<hr>代表一條分割線，它不需要內(nèi)容。
空元素在開始標(biāo)簽中關(guān)閉。也就是說上面提到<hr>元素，不需要寫成<hr></hr>，而只需要寫<hr>即可，簡(jiǎn)單不啰嗦，對(duì)吧。
絕大多數(shù)的元素有屬性。屬性的具體下面講。
元素嵌套使用。從最簡(jiǎn)單的示例上就能看到 head 元素是出現(xiàn)在 html 元素里，這就是一種嵌套使用。

HTML 屬性

屬性為元素提供附加信息，它的形式也很簡(jiǎn)單，以 name="value"的方式出現(xiàn)在元素里。

<a href="http://www.baidu.com">這是一個(gè)鏈接示例</a>

這里的 href 就是屬性，它的值是 http://www.baidu.com，為鏈接這個(gè)元素提供了鏈接的地址信息。

不同的元素有著自己的一些屬性，而有些屬性則是元素之間都具有的，如下：

屬性	描述
class	定義元素的一個(gè)或多個(gè)樣式類名(class name)
id	定義元素的唯一身份標(biāo)識(shí)(id)
style	指定元素的內(nèi)聯(lián)樣式(inline style)
title	描述元素的信息，作為提示使用。

具體的使用示例：

<h1   id="header"   class="h1"   title="這是一個(gè)指定了id為header，樣式類為h1，指定了內(nèi)聯(lián)樣式（文字顏色為紅色）的h1元素。"   style="color: red" >   這是一個(gè)指定了id為header，樣式類為h1，指定了內(nèi)聯(lián)樣式（文字顏色為紅色）的h1元素。 </h1>

展示

咱們把本章節(jié)的示例合并在一個(gè)文件 2-1.html 里，展現(xiàn)運(yùn)行效果如下：

首先看到來自網(wǎng)頁的消息。

接著便看到了一排紅色的字，而且看到它下面顯示了一排小的和它一樣的文字，這便是來自于<title>的描述了，它只有當(dāng)鼠標(biāo)停留在內(nèi)容上一會(huì)兒的時(shí)候才會(huì)顯示。

總結(jié)

?? HTML 頁面由 HTML 元素構(gòu)成。
?? HTML 元素的根元素是 html，其次是 head 和 body。元素的使用是嵌套的。元素有起始和結(jié)束標(biāo)簽，也有不需要內(nèi)容的空標(biāo)簽。
?? head 元素內(nèi)的元素不體現(xiàn)在網(wǎng)頁內(nèi)容上。

該文章在 2024/10/22 12:37:49 編輯過

關(guān)鍵字查詢

html

相關(guān)文章

正在查詢...