四虎永久在线观看免费网站网址,成人福利免费观看体验区,午夜尤物

HTML 21 天入門：初識 HTML

admin

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

HTML 頁面構成

還記得咱們前面運行的 Hello World 頁面代碼嗎？咱們一起來看看它的結構。

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

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

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

HTML 文件里出現的節點稱為 HTML 元素，它本身不區分大小寫。比如，最頂層的元素，寫成 HTML 或 html 都可以，但是約定俗成用小寫。

一個 HTML 文件里不可或缺的元素，是 head 和 body。基本結構如下：

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

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

head 元素

網頁的 head 元素就像人的頭一樣，包含了一些內容。但要知道，這些內容并不會真正體現在網頁顯示上，但它們也非常重要。

title 元素

網頁標題元素，它不顯示在網頁中，而是顯示在瀏覽器最上面的。下面截圖里顯示的“我的第一個頁面”。

<title>我的第一個頁面</title>

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

link 元素

字面意思是鏈接，理解為把要在這個網頁使用的資源鏈接過來，以便當前網頁能找到并使用。

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

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

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

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

style 元素

樣式元素，用于在當前網頁編寫只被當前網站使用的樣式。

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

script 元素

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

引用外部腳本文件

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

引用外部的 jquery 腳本文件。

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

meta 元素

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

通過使用 meta 元素對網頁所展示的內容進行描述，而這些信息會被搜索引擎識別并收錄，在其它用戶使用搜索引擎搜索時展現。

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

<meta   name="keywords"   content="為搜索引擎定義關鍵詞，以逗號分割。比如：HTML, CSS" /> <meta name="description" content="為網頁定義描述內容。比如：免費的HTML教程。" /> <meta name="author" content="定義該網頁的作者。比如：北果子" />

body 元素

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

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

這些元素本身都有著豐富的屬性，在接下來的章節里，會逐一講解每一個常用的元素，通過練習，熟悉這些元素的使用。

HTML 元素

以上說的都是 HTML 元素，元素有自己特定的寫法和要求。當我們談論一門編程語言的時候，常常說到語法，如果說 HTML 也有語法的話，那它的語法就指的是元素的語法。

元素有起始標簽和結束標簽，比如:

<html>是起始標簽，它的結束標簽是</html>。
<p>是起始標簽，它的結束標簽是</p>。
<h1>是起始標簽，它的結束標簽是</h1>。

注意到了嗎，元素的結束標簽，就是在起始標簽字母前加上斜杠符號 /。

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

HTML 屬性

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

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

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

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

屬性	描述
class	定義元素的一個或多個樣式類名(class name)
id	定義元素的唯一身份標識(id)
style	指定元素的內聯樣式(inline style)
title	描述元素的信息，作為提示使用。

具體的使用示例：

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