【Web前端技術】第二節—HTML標簽（上）

hello！好久不見——

做出一個屬于自己的網站！

云邊有個稻草人-個人主頁

Web前端技術—本篇文章所屬專欄

一、HTML 語法規范

1.1 基本語法概述

1.2?標簽關系

二、HTML 基本結構標簽

2.1?第一個 HTML 網頁

2.2?基本結構標簽總結

三、網頁開發工具

3.1 VSCode的使用

3.2 VSCode 工具生成骨架標簽新增代碼

3.2.1 文檔類型聲明標簽

3.2.2?lang 語言種類

3.2.3 字符集

3.2.4 總結?

四、常用標簽

4.1 標簽語義

4.2?標題標簽

4.3 段落和換行標簽

4.4 練練手

4.5?文本格式化標簽

4.6?<div>和<span>標簽

4.7 圖像標簽和路徑

4.7.1 圖像標簽

4.7.2 路徑

4.8 超鏈接標簽（重點）

4.8.1 鏈接的語法格式

4.8.2 鏈接分類：

五、HTML 中的注釋和特殊字符

5.1 注釋

5.2 特殊字符

正文開始——

一、HTML 語法規范

1.1 基本語法概述

1. HTML 標簽是由尖括號包圍的關鍵詞，例如 <html> 。

2. HTML 標簽通常是成對出現的，例如 <html> 和 </html> ，我們稱為 雙標簽。 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。

3. 有些特殊的標簽必須是單個標簽（極少情況），例如 <br />，我們稱為 單標簽。

1.2?標簽關系

雙標簽關系可以分為兩類：包含關系和并列關系。

包含關系

<head> <title> </title> 
</head>

并列關系

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

二、HTML 基本結構標簽

2.1?第一個 HTML 網頁

每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。HTML頁面也稱為 HTML 文檔。

<html> <head> <title>我的第一個頁面</title></head><body>好好學習，天天向上</body>
</html>

<html></html>，HTML標簽—頁面中最大的標簽，我們稱之為根標簽。
<head></head>，文檔的頭部—注意在head標簽中我們必須要設置的標簽是title。
<title></title>，文檔的標題—讓頁面擁有一個屬于自己的網頁標題。
<body></body>，文檔的主體—元素包含文檔的所有內容，頁面的內容基本都是放到body里面的。

HTML 文檔的的后綴名必須是 .html 或 .htm ，瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。此時，用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個 HTML 文件了。

2.2?基本結構標簽總結

三、網頁開發工具

我是用的是VSCode，后續就用這個軟件來進行學習了

3.1 VSCode的使用

雙擊打開軟件。
新建文件（Ctrl + N ）。
保存（Ctrl + S ）, 注意移動要保存為 .html 文件
Ctrl + 加號鍵，Ctrl + 減號鍵可以放大縮小視圖
生成頁面骨架結構。輸入! 按下 Tab 鍵。（見下圖）
利用插件在瀏覽器中預覽頁面：單擊鼠標右鍵，在彈出窗口中點擊“Open In Default Browser”。

3.2 VSCode 工具生成骨架標簽新增代碼

<!DOCTYPE> 標簽
lang 語言
charset 字符集

3.2.1 文檔類型聲明標簽

<!DOCTYPE> 文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。

<!DOCTYPE html>

這句代碼的意思是: 當前頁面采取的是 HTML5 版本來顯示網頁.。

注意:

<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。
<!DOCTYPE>不是一個 HTML 標簽，它就是文檔類型聲明標簽。

3.2.2?lang 語言種類

用來定義當前文檔顯示的語言。

1. en定義語言為英語

2. zh-CN定義語言為中文

簡單來說,定義為 en 就是英文網頁, 定義為 zh-CN 就是中文網頁，其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文，這個屬性對瀏覽器和搜索引擎(百度.谷歌等)還是有作用的。

3.2.3 字符集

字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。

在<head>標簽內，可以通過 <meta> 標簽的 charset 屬性來規定 HTML 文檔應該使用哪種字符編碼。

 <meta charset="UTF-8">

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符.

注意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，盡量統一寫成標準的 "UTF-8"，不要寫成 "utf8" 或 "UTF8"。

3.2.4 總結?

?以上三個代碼 vscode 自動生成,基本不需要我們重寫.
<!DOCTYPE html> 文檔類型聲明標簽,告訴瀏覽器這個頁面采取html5版本來顯示頁面.
<html lang=“en”> 告訴瀏覽器或者搜索引擎這是一個英文網站. 本頁面采取英文來顯示.
<meta charset=“ UTF-8” /> 必須寫. 采取 UTF-8來保存文字. 如果不寫就會亂碼.具體原理后面分析.

四、常用標簽

4.1 標簽語義

學習標簽是有技巧的，重點是記住每個標簽的語義。簡單理解就是指標簽的含義，即這個標簽是用來干嘛的。

根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。

4.2?標題標簽 <h1> - <h6>

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽。HTML 提供了 6 個等級的網頁標題，即<h1> - <h6> 。

<h1> 一級標題 </h1>

單詞 head 的縮寫，意為頭部、標題。標簽語義：作為標題使用，并且依據重要性遞減。

特點：

加了標題的文字會變的加粗，字號也會依次變大。
?一個標題獨占一行。

4.3 段落和換行標簽

4.3.1 <p>標簽

在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在 HTML 標簽中， <p> 標簽用于定義段落，它可以將整個網頁分為若干個段落。

<p> 一個段落標簽 </p>

單詞 paragraph [ ? p?r ? gr?f] 的縮寫，意為段落。標簽語義：可以把 HTML 文檔分割為若干段落。

特點：

文本在一個段落中會根據瀏覽器窗口的大小自動換行。
段落和段落之間保有空隙。

4.3.2 <br />標簽

在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽 <br /> 。

<br />

單詞 break 的縮寫，意為打斷、換行。標簽語義：強制換行。

特點：

<br /> 是個單標簽。
<br /> 標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

4.4 練練手

素材

水花61分伊戈達拉制勝搶斷西決勇士再勝開拓者總分2-0數據統計：水花兄弟合砍61分庫里22投11中，三分14投4中，罰球11罰全中得到37分8籃板8助攻，職業生涯季后賽得分30+次數來到35次，超過哈登排名現役第3位，僅次于詹姆斯和杜蘭特。湯普森22投8中，三分8投4中得到24分3籃板2助攻，德拉蒙德-格林得到16分10籃板7助攻5蓋帽，凱文-魯尼得到14分7籃板2助攻，今天勇士有7名替補出場。兄弟對決升級：小庫里給哥哥造成壓力庫里兄弟是NBA歷史上第一對在分區決賽相遇的兄弟。在西決第1場中，小庫里沒有給哥哥造成壓力，他出場19分鐘，7投1中只得到3分3籃板2助攻，在場期間輸掉10分。但在西決第2場中，小庫里攻防兩端都打出杰出的表現，全場送出4次搶斷，包括直接搶斷自己的哥哥庫里，在防守端給庫里造成了極大的困擾。作者: 云邊有個稻草人2025-4-16

效果展示

代碼

注意，最后的頁面效果并不會因為代碼里面的文字有換行就會有換行效果，頁面里面所有的效果都要通過標簽來實現

<!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><h1>水花61分伊戈達拉制勝搶斷 西決勇士再勝開拓者總分2-0</h1><h3>數據統計：水花兄弟合砍61分</h3><p>庫里22投11中，三分14投4中，罰球11罰全中得到37分8籃板8助攻，職業生涯季后賽得分30+次數來到35次，超過哈登排名現役第3位，僅次于詹姆斯和杜蘭特。</p><p>湯普森22投8中，三分8投4中得到24分3籃板2助攻，德拉蒙德-格林得到16分10籃板7助攻5蓋帽，凱文-魯尼得到14分7籃板2助攻，今天勇士有7名替補出場。</p><h3>兄弟對決升級：小庫里給哥哥造成壓力</h3><p>庫里兄弟是NBA歷史上第一對在分區決賽相遇的兄弟。在西決第1場中，小庫里沒有給哥哥造成壓力，他出場19分鐘，7投1中只得到3分3籃板2助攻，在場期間輸掉10分。</p><p>但在西決第2場中，小庫里攻防兩端都打出杰出的表現，全場送出4次搶斷，包括直接搶斷自己的哥哥庫里，在防守端給庫里造成了極大的困擾。</p><p>作者: 云邊有個稻草人<br />2025-4-16</p></body></html>

4.5?文本格式化標簽

在網頁中，有時需要為文字設置粗體、斜體或下劃線等效果，這時就需要用到 HTML 中的文本格式化標簽，使文字以特殊的方式顯示。

標簽語義: 突出重要性, 比普通文字更重要。

重點記住加粗和傾斜。

<!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><p><strong>加粗</strong></p><p><em>傾斜</em></p><p><del>刪除線</del></p><p><ins>下劃線</ins></p>
</body>
</html>

4.6?<div> 和<span>標簽

<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。

<div> 這是頭部 </div> 
<span> 今日價格 </span>

div 是 division 的縮寫，表示分割、分區。span 意為跨度、跨距。

特點：

<div> 標簽用來布局，但是現在一行只能放一個<div>。大盒子
<span> 標簽用來布局，一行上可以多個 <span>。小盒子

4.7 圖像標簽和路徑

4.7.1 圖像標簽

在 HTML 標簽中，<img> 標簽用于定義 HTML 頁面中的圖像。

<img src="圖像URL" />

單詞 image 的縮寫，意為圖像。 src 是<img>標簽的必須屬性，它用于指定圖像文件的路徑和文件名。所謂屬性：簡單理解就是屬于這個圖像標簽的特性。

圖像標簽的其他屬性：

【src】?

簡單介紹之后我們來實踐一下如何在網頁里面插入圖片

（1） 首先將圖片和我們創建的網頁文件放在一起，方便插入到網頁文件里面

【alt】

【title】

效果不錯哦

<h4>title 提示文本 鼠標放到圖片上，顯示的文字</h4>
<img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" />

【width】+【height】+【border】

    <h4>width 給圖片設置寬度</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" width="500" /><h4>height 給圖片設置高度</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" width="500" height="100" />

border一般是在CSS進行修改的，我們后面會詳細講解，我們在這先記住border的簡單用法

圖像標簽屬性注意點：

① 圖像標簽可以擁有多個屬性，必須寫在標簽名的后面。
② 屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
③ 屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。

重點掌握：

圖像標簽中那個屬性是必須要寫的？
圖像標簽中 alt 和 title 的區別是什么？

<!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><h4>圖像標簽的使用</h4><img src="chaochao.jpg" /><h4>alt 替換文本 當圖片顯示不出來的時候用文字替換</h4><img src="chaochao1.jpg" alt="鄧超 分手大師" /><h4>title 提示文本 鼠標放到圖片上，顯示的文字</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" /><h4>width 給圖片設置寬度</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" width="500" /><h4>height 給圖片設置高度</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" height="100" /><h4>border 給圖片設置邊框粗細</h4><img src="chaochao.jpg" alt="鄧超 分手大師" title="亞比囧囧囧" width="500" border="15" /></body></html>

4.7.2 路徑

實際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個文件夾來管理他們。

目錄文件夾： 就是普通文件夾，里面只不過存放了我們做頁面所需要的相關素材，比如 html 文件、圖片等。

根目錄： 打開目錄文件夾的第一層就是根目錄

(2) VSCode打開目錄文件夾:

文件---- 打開文件夾 . 選擇目錄文件夾. 后期非常方便管理文件.

頁面中的圖片會非常多，通常我們會新建一個文件夾來存放這些圖像文件（images），這時再查找圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為： 1. 相對路徑 2. 絕對路徑

【相對路徑】（重點）

相對路徑： 以引用文件所在位置為參考基礎，而建立出的目錄路徑。這里簡單來說，圖片相對于 HTML 頁面的位置

相對路徑是從代碼所在的這個文件出發，去尋找目標文件的，而我們這里所說的上一級、下一級和同一級就是圖片相對于 HTML 頁面的位置。

【絕對路徑】

是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。

例如，“D:\web\img\logo.gif”或完整的網絡地址“http://www.itcast.cn/images/logo.gif”。

【自己電腦】

但是絕對路徑是針對自己的電腦找到里面的文件而言的，電腦不同這個絕對路徑就有差異，平時很少使用，了解一下就OK

【網絡路徑】

還有一種情況，是在網絡中的一種絕對路徑。我隨便打開一個網站在里面找到一個圖片，并復制圖片的鏈接

相對路徑是重點掌握的。。。

4.8 超鏈接標簽（重點）

在 HTML 標簽中，<a> 標簽用于定義超鏈接，作用是從一個頁面鏈接到另一個頁面。

4.8.1 鏈接的語法格式

<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>

單詞 anchor [ ? ??k ? (r)] 的縮寫，意為：錨。兩個屬性的作用如下：

4.8.2 鏈接分類：

外部鏈接: 例如 < a href="http:// www.baidu.com ">百度</a >。
內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如 < a href="index.html"> 首頁 </a >。
空鏈接: 如果當時沒有確定鏈接目標時，< a href="#"> 首頁 </a > 。
下載鏈接: 如果 href 里面地址是一個文件或者壓縮包，會下載這個文件。
網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接。
錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置。

在鏈接文本的 href 屬性中，設置屬性值為 #名字的形式，如<a href="#two"> 第2集 </a>
找到目標位置標簽，里面添加一個 id 屬性 = 剛才的名字，如：<h3 id="two">第2集介紹</h3>

【演示1-外部鏈接+target】

【演示2-內部鏈接】

【演示3-空鏈接】

【演示4-下載鏈接】

    <h4>6.下載鏈接:地址鏈接的是 文件.exe 或者 .zip等壓縮包形式#</h4><a href="chaochao.zip" target="_blank">下載文件</a>

【演示5-網頁元素鏈接】

【前面案例所用代碼合集】?

<!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><h4>1.外部鏈接</h4><a href="https://www.csdn.net/">CSDN博客網站</a><h4>2.外部鏈接，在替換掉原先的頁面</h4><a href="https://www.csdn.net/" target="_self">CSDN博客網站</a><h4>3.外部鏈接，在空白頁面重新打開該鏈接網頁</h4><a href="https://www.csdn.net/" target="_blank">CSDN博客網站</a><h4>4.內部鏈接</h4><a href="體育新聞.html" target="_blank">體育新聞</a><!-- 當某些地址還沒有考慮好就可以用這種 --><h4>5.空鏈接：#</h4><a href="#" target="_blank">首頁</a><h4>6.下載鏈接:地址鏈接的是 文件.exe 或者 .zip等壓縮包形式#</h4><a href="chaochao.zip" target="_blank">下載文件</a><h4>7.網頁元素鏈接</h4><a href="http://qq.com" target="_blank"><img src="chaochao.jpg" /></a></body></html>

【演示6-錨點鏈接】

字數多占得不止一個頁面的時候效果會更明顯，字數太少移動不到位看不到效果，所以建議多來點文字。同時我們可以活學活用，當想要回到頂部的時候我們可以寫“回到頂部”，在這里添加一個錨點鏈接回到頂部，就不用再滑動鼠標慢慢回到頂部了

<!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><h2 id="mulu">目錄</h2><a href="#jingli">1 早年經歷</a><br /><a href="#yanyi">2 演藝經歷</a><br /><a href="#live">3 個人生活</a><br /><h2 id="jingli">1 早年經歷</h2>劉德華出生于香港新界，在家中排行老四，幼時隨家人搬到了九龍鉆石山的木屋區居住，并和姐弟一起幫助家里打理賣稀飯的生意[17] 。1973年，劉德華隨家人搬入香港藍田邨第15座14樓[18]。劉德華從黃大仙天主教小學畢業后升讀可立中學[19]。在可立中學讀書期間，劉德華積極參加校內學校劇社的表演，在老師杜國威的指導下學習戲劇方面的知識。此外，他還參與包括編劇在內的幕后制作。劉德華在中五會考獲得1B3D2E（中文讀本A）的成績。中六上學期后，他到香港電視廣播有限公司的藝員訓練班受訓，從而開始了演藝之路[20]。<h2 id="yanyi">2 演藝經歷</h2>1981年，劉德華考進第10期無線電視藝員訓練班[21] ；同年，出演個人首部電視劇《江湖再見》，在劇中飾演以販賣婦女為生的小混混阿龍[22] ；該劇獲得美國電視節電視劇特別獎[23] 。1982年，劉德華以甲級成績從藝員訓練班畢業后正式簽約TVB[24] ；同年在 劉德華早期照片 劉德華早期照片(2張)喜劇《花艇小英雄》中飾演敗家仔錢日添；12月，與葉德嫻搭檔主演時裝警匪劇《獵鷹》，憑借臥底警察江大偉一角獲得關注[25]。 1983年，主演金庸武俠劇《神雕俠侶》，在劇中飾演外貌俊俏、倜儻不羈的楊過[26] ；該劇在香港播出后取得62點的收視紀錄；同年，與黃日華、梁朝偉、苗僑偉、湯鎮業組成“無線五虎將”[27] 。1984年，與趙雅芝合作主演古裝武俠劇《魔域桃源》，在劇中飾演資質出眾、武功高強的傅青云[28] ；同年，與梁朝偉共同主演金庸武俠劇《鹿鼎記》，在劇中飾演英明果斷的康熙[29] 。1985年，在古裝武俠劇《楊家將》中飾演饒勇善戰的楊六郎[30] ；同年，TVB向劉德華提出加簽五年的合約，劉德華因拒絕而被TVB雪藏400天[31-32]。1986年，在邵逸夫的調解下，劉德華與TVB和解并簽下合約；同年，主演古裝劇《真命天子》。1988年，在出演了武俠劇《天狼劫》后，劉德華將演藝事業的重心轉向影壇[32] 。 劉德華 劉德華 電影時代1981年，劉德華出演電影處女作《彩云曲》，在片中扮演一個音樂班 劉德華電視劇劇照 劉德華電視劇劇照(9張) 的學員[33]。1982年，在劇情片《投奔怒海》中飾演美軍翻譯官祖名，并憑借該片獲得第2屆香港電影金像獎最佳新演員提名[33]。 1983年，與張曼玉搭檔主演劇情片《家在香港》，在片中飾演急功近利的青年人亞倫[34] ；同年，主演動作片《毀滅號地車》，在片中與一個越南少女演繹了一段愛情故事[35]。1984年，在愛情片《停不了的愛》中飾演富家公子Eric[36]1981年，劉德華考進第10期無線電視藝員訓練班[21] ；同年，出演個人首部電視劇《江湖再見》，在劇中飾演以販賣婦女為生的小混混阿龍[22]；該劇獲得美國電視節電視劇特別獎[23] 。1982年，劉德華以甲級成績從藝員訓練班畢業后正式簽約TVB[24] ；同年在 劉德華早期照片 劉德華早期照片(2張)喜劇《花艇小英雄》中飾演敗家仔錢日添；12月，與葉德嫻搭檔主演時裝警匪劇《獵鷹》，憑借臥底警察江大偉一角獲得關注[25]。 1983年，主演金庸武俠劇《神雕俠侶》，在劇中飾演外貌俊俏、倜儻不羈的楊過[26] ；該劇在香港播出后取得62點的收視紀錄；同年，與黃日華、梁朝偉、苗僑偉、湯鎮業組成“無線五虎將”[27] 。1984年，與趙雅芝合作主演古裝武俠劇《魔域桃源》，在劇中飾演資質出眾、武功高強的傅青云[28] ；同年，與梁朝偉共同主演金庸武俠劇《鹿鼎記》，在劇中飾演英明果斷的康熙[29] 。1985年，在古裝武俠劇《楊家將》中飾演饒勇善戰的楊六郎[30] ；同年，TVB向劉德華提出加簽五年的合約，劉德華因拒絕而被TVB雪藏400天[31-32]。1986年，在邵逸夫的調解下，劉德華與TVB和解并簽下合約；同年，主演古裝劇《真命天子》。1988年，在出演了武俠劇《天狼劫》后，劉德華將演藝事業的重心轉向影壇[32] 。 劉德華 劉德華 電影時代1981年，劉德華出演電影處女作《彩云曲》，在片中扮演一個音樂班 劉德華電視劇劇照 劉德華電視劇劇照(9張) 的學員[33]。1982年，在劇情片《投奔怒海》中飾演美軍翻譯官祖名，并憑借該片獲得第2屆香港電影金像獎最佳新演員提名[33]。 1983年，與張曼玉搭檔主演劇情片《家在香港》，在片中飾演急功近利的青年人亞倫[34] ；同年，主演動作片《毀滅號地車》，在片中與一個越南少女演繹了一段愛情故事[35]。1984年，在愛情片《停不了的愛》中飾演富家公子Eric[36]1981年，劉德華考進第10期無線電視藝員訓練班[21] ；同年，出演個人首部電視劇《江湖再見》，在劇中飾演以販賣婦女為生的小混混阿龍[22] ；該劇獲得美國電視節電視劇特別獎[23] 。1982年，劉德華以甲級成績從藝員訓練班畢業后正式簽約TVB[24] ；同年在 劉德華早期照片 劉德華早期照片(2張)喜劇《花艇小英雄》中飾演敗家仔錢日添；12月，與葉德嫻搭檔主演時裝警匪劇《獵鷹》，憑借臥底警察江大偉一角獲得關注[25]。 1983年，主演金庸武俠劇《神雕俠侶》，在劇中飾演外貌俊俏、倜儻不羈的楊過[26] ；該劇在香港播出后取得62點的收視紀錄；同年，與黃日華、梁朝偉、苗僑偉、湯鎮業組成“無線五虎將”[27] 。1984年，與趙雅芝合作主演古裝武俠劇《魔域桃源》，在劇中飾演資質出眾、武功高強的傅青云[28] ；同年，與梁朝偉共同主演金庸武俠劇《鹿鼎記》，在劇中飾演英明果斷的康熙[29] 。1985年，在古裝武俠劇《楊家將》中飾演饒勇善戰的楊六郎[30] ；同年，TVB向劉德華提出加簽五年的合約，劉德華因拒絕而被TVB雪藏400天[31-32]。1986年，在邵逸夫的調解下，劉德華與TVB和解并簽下合約；同年，主演古裝劇《真命天子》。1988年，在出演了武俠劇《天狼劫》后，劉德華將演藝事業的重心轉向影壇[32] 。 劉德華 劉德華 電影時代1981年，劉德華出演電影處女作《彩云曲》，在片中扮演一個音樂班 劉德華電視劇劇照 劉德華電視劇劇照(9張) 的學員[33]。1982年，在劇情片《投奔怒海》中飾演美軍翻譯官祖名，并憑借該片獲得第2屆香港電影金像獎最佳新演員提名[33]。 1983年，與張曼玉搭檔主演劇情片《家在香港》，在片中飾演急功近利的青年人亞倫[34] ；同年，主演動作片《毀滅號地車》，在片中與一個越南少女演繹了一段愛情故事[35]。1984年，在愛情片《停不了的愛》中飾演富家公子Eric[36]1981年，劉德華考進第10期無線電視藝員訓練班[21] ；同年，出演個人首部電視劇《江湖再見》，在劇中飾演以販賣婦女為生的小混混阿龍[22] ；該劇獲得美國電視節電視劇特別獎[23] 。1982年，劉德華以甲級成績從藝員訓練班畢業后正式簽約TVB[24] ；同年在 劉德華早期照片 劉德華早期照片(2張)喜劇《花艇小英雄》中飾演敗家仔錢日添；12月，與葉德嫻搭檔主演時裝警匪劇《獵鷹》，憑借臥底警察江大偉一角獲得關注[25]。 1983年，主演金庸武俠劇《神雕俠侶》，在劇中飾演外貌俊俏、倜儻不羈的楊過[26] ；該劇在香港播出后取得62點的收視紀錄；同年，與黃日華、梁朝偉、苗僑偉、湯鎮業組成“無線五虎將”[27] 。1984年，與趙雅芝合作主演古裝武俠劇《魔域桃源》，在劇中飾演資質出眾、武功高強的傅青云[28] ；同年，與梁朝偉共同主演金庸武俠劇《鹿鼎記》，在劇中飾演英明果斷的康熙[29] 。1985年，在古裝武俠劇《楊家將》中飾演饒勇善戰的楊六郎[30] ；同年，TVB向劉德華提出加簽五年的合約，劉德華因拒絕而被TVB雪藏400天[31-32]。1986年，在邵逸夫的調解下，劉德華與TVB和解并簽下合約；同年，主演古裝劇《真命天子》。1988年，在出演了武俠劇《天狼劫》后，劉德華將演藝事業的重心轉向影壇[32] 。 劉德華 劉德華 電影時代1981年，劉德華出演電影處女作《彩云曲》，在片中扮演一個音樂班 劉德華電視劇劇照 劉德華電視劇劇照(9張) 的學員[33]。1982年，在劇情片《投奔怒海》中飾演美軍翻譯官祖名，并憑借該片獲得第2屆香港電影金像獎最佳新演員提名[33]。 1983年，與張曼玉搭檔主演劇情片《家在香港》，在片中飾演急功近利的青年人亞倫[34] ；同年，主演動作片《毀滅號地車》，在片中與一個越南少女演繹了一段愛情故事[35]。1984年，在愛情片《停不了的愛》中飾演富家公子Eric[36]<br /><a href="#mulu">返回頂部目錄</a>。<h2 id="live">3 個人生活</h2>劉德華的父親劉禮在啟德機場做過消防員的工作。20世紀60年代，劉禮開了一間小吃雜貨店以賺錢維持家用。劉德華在家中還有三位姐姐，一位妹妹以及一位弟弟（劉德盛）[158] 。 感情1986年，劉德華隨香港明星足球隊赴吉隆坡時，結識了朱麗倩。2008年6月23日，劉德華與朱麗倩在美國拉斯維加斯注冊結婚[159] 。2012年5月9日，劉德華的妻子朱麗倩生下一個女兒。[160-161]2016年3月，劉德華的妻子朱麗倩懷上第2胎。[162]</body></html>

五、HTML 中的注釋和特殊字符

5.1 注釋

如果需要在 HTML 文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。

HTML中的注釋以“”結束。

<!-- 注釋語句 --> 快捷鍵: ctrl + /

一句話: 注釋標簽里面的內容是給程序猿看的, 這個代碼是不執行不顯示到頁面中的。添加注釋是為了更好地解釋代碼的功能，便于相關開發人員理解和閱讀代碼，程序是不會執行注釋內容的。

5.2 特殊字符

在 HTML 頁面中，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下面的字符來替代。

重點記住：空格、大于號、小于號這三個，其余的使用很少，如果需要回頭查閱即可。

演示一下：

<!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><!-- 在文件里面手動添加多個空格最終都只會顯示出一個空格，所以我們可以使用特殊字符來添加多個空格 -->云邊有個稻草人      好好學習<br />云邊有個稻草人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好好學習<br /><!-- 左右括號的顯示 --><p>是一個段落標簽，這樣不會顯示出左右括號，必須使用特殊字符才行<br />&lt;p&gt;</body></html>