目錄
1.HTML--簡介
2.HTML--編譯器
步驟一:啟動記事本
步驟二:用記事本來編輯 HTML
步驟三:保存 HTML
步驟四:在瀏覽器中運行?HTML?
3.HTML--基礎
3.1.HTML聲明--!DOCTYPE
3.2.HTML 標題--h1
3.3.HTML 段落--p
3.3.1. 水平線--hr
3.3.2.換行符--br
3.3.3.固定格式--pre
3.4.HTML 鏈接--a
3.5.HTML 圖像--img
3.6.如何查看 HTML 源代碼?
4.HTML元素
5.HTML?屬性
5.1.鏈接--href?
5.2.src 屬性
5.3.width和height屬性
5.4.alt 屬性
5.4.樣式--style
5.4.1.背景色
5.4.2.文本顏色
5.4.3.字體尺寸
5.5.lang 屬性
5.6.title 屬性
5.7.文本格式
建議: 屬性要常用屬性值
6.HTML 引文、引用和定義元素
7.HTML注釋
1.HTML--簡介
HTML 是創建網頁的標準標記語言。
什么是 HTML?
- HTML 代表超文本標記語言
- HTML 是創建網頁的標準標記語言
- HTML 描述網頁的結構
- HTML 由一系列元素組成
- HTML 元素告訴瀏覽器如何顯示內容
- HTML 元素標記內容片段,如 "這是一個標題", "this is a paragraph", "this is a link"等。
HTML 實例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>頁面標題</title>
</head>
<body><h1>我的第一個標題</h1><p>我的第一個段落。</p>
</body>
</html>
注釋:在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啟調試模式,就可以看到組成標簽。?
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag),由開始標記、內容和結束標記組成。
<tagname>內容...</tagname>
<h1>我的第一個標題</h1>
<p>我的第一個段落</p>
開始標簽 | 元素內容 | 結束標簽 |
---|---|---|
<h1> | 我的第一個標題 | </h1> |
<p> | 我的第一個段落。 | </p> |
<br> | none | none |
注釋:?有些HTML元素沒有內容(比如元素)。這些元素稱為空元素。空元素沒有結束標記!!
注釋:?只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。
2.HTML--編譯器
使用 Notepad(記事本) 或 TextEdit 來編寫 HTML
可以使用專業的 HTML 編輯器來編輯 HTML:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不過,我們同時推薦使用文本編輯器來學習 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我們相信,使用一款簡單的文本編輯器是學習 HTML 的好方法。
通過記事本,依照以下四步來創建您的第一張網頁。
步驟一:啟動記事本
如何啟動記事本:
開始
????所有程序
????????附件
????????????記事本
步驟二:用記事本來編輯 HTML
在記事本中鍵入 HTML 代碼:
<!DOCTYPE?html>
<html>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
步驟三:保存 HTML
在記事本的文件菜單選擇"另存為"。
當您保存 HTML 文件時,既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別,完全根據您的喜好。
比如:文件名為?"index.htm"?并將編碼設置為 UTF-8(這是 HTML 文件的首選編碼)。
步驟四:在瀏覽器中運行?HTML?
3.HTML--基礎
- 所有 HTML 文檔都必須以文檔類型聲明開頭:?
<!DOCTYPE html>
。 - HTML 文檔以?
<html>
?開始,以?</html>
?結束。 - HTML 文檔的可見部分位于?
<body>
?和?</body>
?之間。
3.1.HTML聲明--!DOCTYPE
<!DOCTYPE>
?聲明表示文檔類型,并幫助瀏覽器正確顯示網頁。
它只出現一次,在頁面頂部(在任何HTML標記之前)。
<!DOCTYPE>
?聲明不區分大小寫。
<!DOCTYPE>
?聲明是 HTML5 網頁
3.2.HTML 標題--h1
HTML 標題(Heading)是通過?<h1>
?到?<h6>
?等標簽進行定義的。
<h1>
?定義最重要的標題。?<h6>
?定義不重要的標題:
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
注釋:?瀏覽器會自動地在標題的前后添加空行。
注釋:?默認情況下,HTML 會自動地在塊級元素前后添加一個額外的空行,比如段落、標題元素前后。
?每個HTML標題都有一個默認大小。可以使用?style
?的?font-size
?屬性指定標題文字的大小:
<h1 style="font-size:60px;">標題 1</h1>
3.3.HTML 段落--p
HTML 段落是通過?<p>
?標簽來定義的。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
3.3.1. 水平線--hr
<hr>
?標簽定義 HTML 頁面中的主題變化(比如話題的轉移),并顯示為一條水平線。
<hr>
?元素被用來分隔 HTML 頁面中的內容(或者定義一個變化):
<h1>這是標題 1</h1>
<p>這是一些文字。</p>
<hr>
<h2>這是標題 2</h2>
<p>這是一些其他的文本。</p>
<hr>
3.3.2.換行符--br
HTML?<br>
?元素定義換行符。
如果您希望在不產生一個新段落的情況下進行換行(新行),請使用?<br>
?標簽:
<p>這是一個<br>段落<br>有換行符。</p>
<br>
?標記是空標記,這意味著它沒有結束標記。
3.3.3.固定格式--pre
<!DOCTYPE html>
<html>
<body><p>在 HTML 中,空格和新行被忽略:</p><p>白日依山盡,黃河入海流。欲窮千里目,更上一層樓。</p></body>
</html>
解決方案 - HTML <pre> 元素
HTML?<pre>
?元素定義預先格式化的文本。
<pre>
?元素中的文本以固定寬度字體顯示(通常為 Courier),并保留空格和換行符:
<!DOCTYPE html>
<html>
<body><p>pre 標簽保留空格和換行符:</p><pre>白日依山盡,黃河入海流。欲窮千里目,更上一層樓。
</pre></body>
</html>
?
3.4.HTML 鏈接--a
HTML 鏈接是通過?<a>
?標簽來定義的。
<a?href="https://www.w3ccoo.com">這是一個鏈接</a>
在?href
?屬性中指定鏈接的地址。
3.5.HTML 圖像--img
HTML 圖像是通過?<img>
?標簽進行定義的。
圖像的名稱和尺寸是以屬性的形式提供的: (src
), (alt
),?width
, and?height
<img?src="w3schools.jpg"?alt="W3Schools.com"?width="104"?height="142">
3.6.如何查看 HTML 源代碼?
查看 HTML 源代碼:
在 HTML 頁面中單擊鼠標右鍵,然后在其他瀏覽器中選擇"查看頁面源"(在 Chrome 中)或"查看源"(在 Edge 中)或類似選項。這將打開一個包含頁面的 HTML 源代碼的窗口。
檢查 HTML 元素:
右鍵單擊一個元素(或空白區域),選擇"Inspect"或"Inspect element"查看元素的組成(您將看到 HTML 和 CSS)。您還可以在打開的"元素或樣式"面板中動態編輯 HTML 或 CSS。
4.HTML元素
HTML 文檔是由 HTML 元素定義的。
HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。
<tagname>內容在這里...</tagname><h1>我的第一個標題</h1><p>我的第一個段落。</p>
開始標簽 | 元素內容 | 結束標簽 |
---|---|---|
<h1> | 我的第一個標題 | </h1> |
<p> | 我的第一個段落。 | </p> |
<br> | none | none |
注釋:?某些HTML元素沒有內容 (如 <br> )。這些元素稱為空元素。空元素沒有結束標記!
HTML 元素語法
- HTML 元素以開始標簽起始
- HTML 元素以結束標簽終止
- 元素的內容是開始標簽與結束標簽之間的內容
- 某些 HTML 元素具有空內容(empty content)
- 空元素在開始標簽中進行關閉(以開始標簽的結束而結束)
- 大多數 HTML 元素可擁有屬性
注釋:?您將在本教程的下一章中學習更多有關屬性的內容。
嵌套的 HTML 元素
大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文檔由嵌套的 HTML 元素構成。
下面的示例包含四個HTML元素 (<html>
,?<body>
,?<h1>
?,?<p>
):
<!DOCTYPE?html>
<html>
<body><h1>我的第一個標題</h1>
<p>我的第一個段落。</p></body>
</html>
不要忘記結束標簽
即使您忘記了使用結束標簽,大多數瀏覽器也會正確地顯示 HTML:
<html>
<body><p>這是一個段落。
<p>這是一個段落。</body>
</html>
但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
HTML 標簽對大小寫不敏感
HTML 標簽不區分大小寫:?<P>
?等同?<p>
。
在 HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫。
5.HTML?屬性
屬性是 HTML 元素提供的附加信息。
- HTML 元素可以設置?屬性
- 屬性可以在元素中添加?附加信息
- 屬性一般描述于?開始標簽
- 屬性總是以名稱/值對的形式出現,比如:name="value"
5.1.鏈接--href?
<a>
?標簽用于定義HTML 鏈接。 鏈接的地址在?href
?屬性中指定:
<a?href="https://www.w3ccoo.com">訪問 W3Schools</a>
?最最重要的是?<a>
?標簽的? href
?屬性,表示鏈接的目標。
<!DOCTYPE html>
<html>
<body><h1>HTML 鏈接</h1><p><a href="https://www.w3schools.cn/">訪問 w3schools.cn!</a></p></body>
</html>
?
默認情況下,鏈接將在所有瀏覽器中顯示如下:
- 未訪問的鏈接帶有下劃線和藍色
- 訪問的鏈接帶有下劃線和紫色
- 活動鏈接帶有下劃線和紅色
屬性/用法 | 描述 | 示例代碼 | 備注 |
---|---|---|---|
??target 屬性?? | 指定鏈接打開方式 | <a href="url" target="_value"> | |
-?_self | 默認值,當前窗口打開 | <a href="url" target="_self"> | 可省略不寫 |
-?_blank | 新窗口/標簽頁打開 | <a href="url" target="_blank"> | 最常用 |
-?_parent | 父框架中打開 | <a href="url" target="_parent"> | 用于框架頁 |
-?_top | 整個窗口打開 | <a href="url" target="_top"> | 用于框架頁 |
??URL類型?? | |||
- 絕對URL | 完整網址 | <a href="https://www.example.com"> | 包含協議和域名 |
- 相對URL | 相對路徑 | <a href="/pages/about.html"> | 基于當前路徑 |
??特殊鏈接?? | |||
圖片鏈接 | 用圖片作為鏈接 | <a href="url"><img src="image.gif"></a> | |
郵件鏈接 | 打開郵件客戶端 | <a href="mailto:email@example.com"> | 自動添加mailto: |
按鈕鏈接 | 按鈕形式鏈接 | <button onclick="location.href='url'"> | 需要JavaScript |
??其他屬性?? | |||
title | 鼠標懸停提示 | <a href="url" title="提示文字"> | 提升可訪問性 |
href | 鏈接地址 | <a href="url"> | 必需屬性 |
5.2.src 屬性
<img>
?標簽用于在HTML頁面中嵌入圖像。?src
?屬性指定要顯示的圖像的路徑:
<img?src="img_girl.jpg">
有兩種方法可以在src
屬性中指定URL:
1. 絕對URL?- 鏈接到另一個網站上的一個圖像。 比如: src="https://www.w3ccoo.com/images/img_girl.jpg".
注意:?外部圖像可能受版權保護。如果你沒有得到使用它的許可,你可能違反了版權法。此外,您無法控制外部圖像;它可能會突然被刪除或更改。
2. 相對URL?- 鏈接到網站中托管的圖像。在這里,URL不包括域名。如果URL開頭沒有斜杠,它將相對于當前頁面。 比如: src="img_girl.jpg". 如果URL以斜杠開頭,它將是相對于當前域名的。 Example: src="/images/img_girl.jpg".
注意:?使用相對URL幾乎總是最好的。如果您更改域,它們將不會中斷。
5.3.width和height屬性
<img>
?標簽還應包含?width
?和? height
?屬性,該屬性指定圖像的寬度和高度(以像素為單位):
<img?src="img_girl.jpg"?width="500"?height="600">
5.4.alt 屬性
如果由于某種原因無法顯示圖像,則<img>
?標簽的?alt
?屬性指定圖像的備用文本。 這可能是由于連接速度慢,或者src屬性中的錯誤,或者如果用戶瀏覽器異常。
<img?src="img_girl.jpg"?alt="穿夾克的女孩">
看看如果試圖顯示一個不存在的圖像會發生什么:
5.4.樣式--style
style
?屬性用于設置樣式,如顏色、字體、大小等。
<p?style="color:red;">這是一個紅色的段落。</p>
嘗試一下 ?
?簡單介紹幾種:
5.4.1.背景色
CSS?background-color
?屬性定義HTML元素背景色。
<body style="background-color:powderblue;"><h1>這是一個標題</h1>
<p>這是一個段落。</p></body>
5.4.2.文本顏色
文本顏色?color
?屬性定義 HTML 元素的文本顏色:
<h1?style="color:blue;">這是一個標題</h1>
<p?style="color:red;">這是一個段落。</p>
5.4.3.字體尺寸
CSS?font-size
?屬性定義 HTML 元素的文本字體大小:
<h1 style="font-size:300%;">這是一個標題</h1>
<p style="font-size:160%;">這是一個段落。</p>
?
5.5.lang 屬性
在<html>
標記中包含lang
屬性,以聲明網頁的語言。這是為了幫助搜索引擎和瀏覽器。
以下示例指定國家代碼為英語:
<!DOCTYPE?html>
<html?lang="en">
<body>
...
</body>
</html>
國家代碼也可以添加到lang
?屬性中。前兩個字符定義HTML頁面的語言,后兩個字符定義國家。
以下示例指定英語為語言,國家為美國:
<!DOCTYPE?html>
<html?lang="en-US">
<body>
...
</body>
</html>
了解更多有關信息:?HTML 語言代碼參考
5.6.title 屬性
title
?屬性 定義有關元素的一些額外信息。
當您將鼠標移到元素上時,title屬性的值將顯示提示:
<p?title="我是一個工具提示">這是一個段落。</p>
嘗試一下 ?
5.7.文本格式
標簽 | 描述 |
---|---|
<b> | 定義粗體文本 |
<em> | 定義強調的文本 |
<i> | 以交替的聲音或語氣定義文本的一部分 |
<small> | 定義較小的文本 |
<strong> | 定義重要文本 |
<sub> | 定義下標文本 |
<sup> | 定義上標文本 |
<ins> | 定義插入的文本 |
<del> | 定義刪除的文本 |
<mark> | 定義標記/突出顯示的文本 |
建議: 屬性要常用屬性值
屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。
但是,W3C建議在HTML中使用引號,并對XHTML要求更嚴格的文檔類型中使用引號。
正確:
<a?href="https://www.w3ccoo.com/html/">訪問我們的 HTML 教程</a>
錯誤:
<a?href=https://www.w3ccoo.com/html/>訪問我們的 HTML 教程</a>
以下實例必須使用引號。否則無法正確顯示"title"屬性,因為它包含空格:
6.HTML 引文、引用和定義元素
標簽 | 描述 |
---|---|
<abbr> | 定義縮寫或首字母縮略語。 |
<address> | 定義文檔作者或擁有者的聯系信息。 |
<bdo> | 定義文本方向。 |
<blockquote> | 定義從其他來源引用的節。 |
<cite> | 定義著作的標題。 |
<q> | 定義短的行內引用。 |
<!DOCTYPE html>
<html>
<body><p>瀏覽器通常縮進 blockquote 元素。</p><blockquote cite="http://www.worldwildlife.org/who/index.html">
近 60 年來,WWF 一直在保護自然的未來。 WWF 是世界領先的保護組織,在 100 個國家/地區開展工作,并得到美國超過 100 萬會員和全球近 500 萬會員的支持。
</blockquote></body>
</html>
7.HTML注釋
?HTML 注釋不會顯示在瀏覽器中,但它們可以幫助記錄 HTML 源代碼。
您能夠通過如下語法向 HTML 源代碼添加注釋:
<!DOCTYPE html>
<html>
<body><!-- 這是注釋 -->
<p>這是一個段落。</p>
<!-- 注釋不顯示在瀏覽器中 --></body>
</html>
在開始標簽中有一個驚嘆號,但是結束標簽中沒有。
注釋:?瀏覽器不會顯示注釋,但它們可以幫助記錄HTML源代碼。