WEB入門一網頁設計基礎

本章簡介

視頻課：https://edu.csdn.net/course/play/7621

在當今社會，網頁是網絡信息共享和發佈的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本標記語言，是創建網頁基礎。本章將學習HTML文檔的基本結構、組成HTML文檔的各類常見標籤。HTML 標籤可以說明文字、圖形、動畫、聲音、表格和鏈接等。本章重點是各種標籤的基本語法和用法。

核心技能部分

1.1 HTML文檔基本結構

首先我們來了解下什麼是HTML以及它和瀏覽器之間的關係。

1. 什麼是HTML

HTML稱爲超文本標籤語言，它包括很多標籤 (例如：<p>段落、<h1>~<h6>標題標籤)，這些標籤用來告訴瀏覽器(例如微軟公司的InternetExplorer，簡稱IE) 如何顯示頁面，它是網頁製作的基礎。

它有如下特點：

Ø 簡單性：各類HTML標籤簡單易學，方便開發者學習、使用。

Ø 平臺無關性：這是HTML語言的最大優點，也是Internet網絡盛行的原因之一。它包括“硬件”平臺無關性和“軟件”平臺無關性，不管你的計算機是普通的個人電腦，還是服務器或其它計算機（比如：蘋果機），也不管你的操作系統是常見的Windows，還是高端Unix或Linux，HTML都可以得到良好的支持

2. HTML和瀏覽器的關係

和Java需要JRE運行時環境一樣，有了HTML文檔，還需要一個“解釋和執行”的工具，而瀏覽器就是用來解釋並執行HTML文檔的工具。想運行HTML文檔就要有一個瀏覽器：比如微軟公司的IE、Mozilla公司的Firefox（火狐）。

1.1.1 HTML文檔結構

一個完整的HTML文檔至少包含 html、head、title、body 4個標籤，它們成對出現，即以<標籤名>開始，以</標籤名>結束，例如：

1. <html>標籤

<html>標籤是HTML文檔的根標籤，頁面中的所有內容都必須包含在<html>與</html>之間。

2. <head>標籤

一個網頁文檔從總體上可分爲頭和主體兩部分。<head>和</head>定義了 HTML文檔的頭部分，它包含頁面的標題、文件MIME類型、樣式表、腳本等。就像平時寫的書信，書信一般由稱謂、問候語、正文、結尾、署名、日期所構成；書信的頭部就是稱謂和問候語。譬如：尊敬的老師：您好，現在工作忙嗎？下面就是書信的主體部分了。

其中，標題在下面的介紹，文件MIME類型就是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用於指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。例如，假設你要傳送一個MicrosoftExcel文件到客戶端。那麼這時的MIME類型就應該設置爲下面的格式“application/vnd.ms-excel”。樣式表是用來美化HTML標籤的，具體的用法在第三章會介紹；而腳本就是javascript腳本程序，主要功能是用來做頁面的輸入驗證的，以及一些頁面特效；javascript會在二期課程中重點學習。

3. <title>標籤

<title>標籤用於設置HTML文檔的標題。當使用瀏覽器查看頁面時，在瀏覽器的標題欄中將顯示<title>標籤中的內容，如圖1.1.1所示，百度首頁的標題“百度一下，你就知道”。

圖1.1.1 HTML標題

4. <body>標籤

<body>和</body>標籤定義了 HTML文檔的主體部分，用於設置頁面實際需要呈現給用戶的內容，如文字、圖片、視頻等。

5. <meta>標籤

使用該標籤描述網頁的具體摘要信息，包括文檔內容類型、字符編碼信息、搜索關鍵字、網站提供的功能和服務的相信描述等。<meta>標籤描述的內容並不顯示在瀏覽器的窗口中，其目的是方便瀏覽器解析或利用搜索引擎搜索，它採用“名/值”對的方式進行設置。

(1) name屬性和 content屬性

name屬性用於描述設置內容的名稱，其值所描述的內容通過content屬性表示，便於搜索引擎查找、分類。其中最重要的屬性值包括description、keywords和robots。

示例1.1

(2) http-equiv屬性和 content屬性

http-equiv屬性用於提供 HTTP協議的響應頭報文 (小文檔頭)，它以名稱/ 值形式進行設置。http-equiv屬性的值所描述的內容通過content屬性表示，通常是在網頁加載前提供給瀏覽器等設備使用。其中最重要的屬性值有content-type (提供編碼信息)、refresh (刷新與跳轉頁面)、no-cache (頁面緩存)以及 expires (網頁緩存過期時間)。

示例1.2

<metahttp-equiv="content-type"content="text/html;charset=gbk">

1.1.2 HTML註釋和特殊字符

1. HTML註釋

在 HTML 網頁文檔中可以使用“”加入頁面註釋，註釋內容將被瀏覽器忽略。HTML註釋可以用於解釋文檔中某些內容的作用或功能。除此之外，還可以屏蔽部分暫不需要的HTML語句。

示例1.3

<html>

<head>

<title>註釋的用法</title>

</head>

<body>

這是網頁的主體部分

</body>

</html>

示例1.3在瀏覽器的運行效果如圖1.1.2所示，可見註釋裏面的內容“這裏是HTML註釋，將不會顯示在瀏覽器的窗口中”並不會顯示。

圖1.1.2 HTML註釋

2. 特殊字符

當需要在網頁上顯示用作HTML標籤的特殊字符 (如“<”、“>”等)以及被瀏覽器忽略的空格字符時，如果直接使用字符，瀏覽器將以標籤的形式進行解釋或忽略。例如在頁面中顯示<html>，若直接在HTML文檔中輸入<html>時將被瀏覽器忽略，即頁面中不顯示任何內容。此時，需要使用HTML編碼來顯示特殊字符。

HTML文檔中的特殊字符通常用字符序列來表示，此序列以字符“&”開頭，以分號 (;)結束。如在頁面中顯示大於 (>)號時，可用連續字符序列“>”表示，HTML 中常用的特殊字符編碼見表1-1-1所示。

表1-1-1 常用特殊字符 HTML編碼

特殊字符	HTML編碼
<	<
>	>
©	©
®	®
空格

1.2 編輯HTML文檔

瞭解了HTML文檔的基本結構，下面學習如何編輯HTML文檔。

1. 記事本

記事本是Windows自帶的文本編輯工具，使用簡單方便，實際項目開發中常用來編輯代碼較少的文檔，使用記事本編輯HTML文檔的步驟如下：

(1) 在Windows操作系統中打開記事本程序。

(2) 在記事本中輸入HTML代碼，如圖1.1.3所示。

圖1.1.3 記事本編輯HTML文檔

(3) 點擊菜單“文件”-->“保存”，彈出“另存爲”對話框，如圖1.1.4所示，將文件保存爲*.htm或*.html文件，如first.html。

圖1.1.4 文件“另存爲”對話框

(4) 雙擊保存的HTML文檔，系統將自動調用瀏覽器（如：IE）打開HTML文檔。結果如圖1.1.5所示。

圖1.1.5 我的第一個網頁

2. 使用 EditPlus創建第一個 HTML文檔

使用任意一款文本編輯器都可以編寫HTML文檔，本書將介紹使用小巧但功能強大的EditPlus文本編輯器。當然，也可以使用記事本、UltraEdit等其他文本編輯工具來編寫HTML文檔。

(1) 首先，打開 EditPlus編輯器，單擊“文件”-“新建”+“其他”菜單，在彈出的“選擇文件類型”對話框中選擇“HTML”，如圖1.1.6所示。

圖1.1.6 EditPlus選擇文件類型

(2) 文件創建完畢後，在編輯器中輸入如下代碼，如圖1.1.7所示：

圖1.1.7 使用EditPlus編寫網頁

(3) 單擊“文件”-“保存”，在彈出的對話框中選擇要存盤的路徑以及文件名。需要注意的是，HTML文檔的擴展名是“.html”或“.htm”。使用瀏覽器中查看該文件的輸出效果，如圖 1.1.8所示

圖1.1.8 使用EditPlus編輯的HTML文檔

1.3 HTML常用標籤

HTML標籤是HTML語言中最基本的單位，也是HTML語言最重要的組成部分，HTML標籤具有以下 3個特點：

1. 標籤通常使用“<”和“>”兩個尖括號括起來。

2. 標籤都是閉合的。閉合是指標籤的結尾必須以“/”標識結束，例如在<html>和</html>標籤中，<html>是開始標籤，</html>是結束標籤，但並不是所有的標籤都必須成對出現，例如<br/>標籤就是單獨出現的標籤。

3. 標籤名不區分大小寫，但是推薦都使用小寫，因爲在新的HTML標準中全部使用小寫標籤名。例如，<body>與<BODY>表示完全相同的意思。HTML基本標籤有很多，本章主要列舉一些常用的 HTML標籤，如格式標籤、文本、圖像和超鏈接等。

1.3.1 最常用的幾個標籤

1. <h1>~<h6>標題標籤

<hl>~<h6>標籤用於設置網頁中的標題文字，被設置的文字將以黑體或粗體的方式顯示在網頁中。標題標籤是成對出現的，標題標籤共分爲 6級。在<hl>和</hl>之間的文字是一級標題，即最大最粗的標題。<h6>和</h6>之間的文字是最後一級標題，即最小最細的標題。示例1.4

<head>

</head>

<body>

<h1>衛生部部長陳竺迴應鉻含量超標膠囊事件</h1>

<h5>2012年04月18日20:02 來源：中國廣播網</h5>

...........

<h3>本文相關推薦</h3>

</body>

</html>

在瀏覽器中運行，結果如圖1.1.9所示

圖1.1.9 標題標籤的運行效果

2. <p>段落標籤

<p>標籤是HTML的段落標籤，表示以段落的形式組織內容。<p>與</p>之間可以加入文字表、表格等。一個段落可以包含多行文字，文字將隨瀏覽器的大小自動換行。

示例1.5

<html>

<head>

<title>段落標籤的應用</title>

</head>

<body>

<h1>Android 系統發展狀況</h1>

<p>IDC：2015年Android市場份額將達到45%。</p>

<p>IDC：2011年智能手機出貨量將超過4.5億部。</p>

<p>2010年移動開發人才需求20萬，未來人才需求缺口將達百萬。</p>

<p>51job：有1年開發經驗的Android工程師月薪在8000元左右。</p>

</body>

</html>

示例1.5在瀏覽器中的運行結果如圖1.1.10所示。

圖1.1.10 段落標籤的使用

3. <br/>換行標籤

<br/>標籤表示強制換行顯示，這個標籤沒有結束標籤。在HTML源碼中的換行並不能讓網頁運行顯示時換行，如果要想在制定的地方換行就要使用<br/>標籤。

示例1.6

<html>

<head>

<title>換行標籤的用法</title>

</head>

<body>

<p>

HTML 指超文本標籤語言。<br/>

HTML 文件是包含一些標籤的文本文件。<br/>

這些標籤告訴 WEB 瀏覽器如何顯示頁面。<br/>

HTML 文件必須使用 htm 或者 html 作爲文件擴展名。<br/>

HTML 文件可以通過簡單的文本編輯器來創建。

</p>

</body>

</html>

示例1.6在瀏覽器中的運行結果如圖1.1.11所示。

圖1.1.11 換行標籤的使用

1.3.2 格式化標籤

1. <center>居中標籤

<center>標籤用於將頁面元素在所處的父標籤中居中。可以使文字、圖片等元素居中。

2. 有序列表標籤<ol>

有序列表標籤表示多個並列的列表項，它們之間有明顯的先後順序，<ol>表示有序列表，<li>表示列表項。

3. 無序列表標籤<ul>

無序列表和有序列表類似，但多個列表項之間沒有先後順序。<ul>表示無序列表，也是使用<li>表示列表項。無序列表主要用來做頁面導航菜單或新聞列表等等。

示例1.7

<html>

<head>

<title>列表的用法</title>

</head>

<body>

</center>

<hr/>

<ol>

<li>HTML 指超文本標籤語言。</li>

<li>HTML 文件是包含一些標籤的文本文件。</li>

<li>這些標籤告訴 WEB 瀏覽器如何顯示頁面。</li>

</ol>

</center>

<hr/>

<ul>

<li>HTML 指超文本標籤語言。</li>

<li>HTML 文件是包含一些標籤的文本文件。</li>

<li>這些標籤告訴 WEB 瀏覽器如何顯示頁面。</li>

</ul>

</body>

</html>

示例1.7在瀏覽器中的運行結果如圖1.1.12所示。

圖1.1.12 列表標籤的使用

4. 自定義列表標籤<dl>

自定義列表標籤可用來描述某個術語或產品的定義或解釋。可以替代表格的功能。<dl> (自定義列表)標籤可以容納整個數據結構，<dt>(自定義標題)標籤和<dd> (自定義描述)標籤能夠分別容納數據中的標題和內容。

示例1.8

<html>

<head>

<title>自定義列表的用法</title>

</head>

<body>

<dl>

</dl>

</body>

</html>

示例1.8在瀏覽器中的運行結果如圖1.1.13所示。

圖1.1.13 自定義列表的使用

5. 預定義格式標籤<pre>

編寫HTML文檔代碼時，有時我們想在代碼裏編寫的什麼格式在瀏覽器裏查看的時候也是什麼格式；但是瀏覽器在解析代碼的時候會忽略多餘的空格和換行。這時可以使用<pre>標籤設置某種自定義格式，例如使用回車將內容換行顯示、使用空格將兩句話隔開等。

示例1.9

<html>

<head>

<title>pre標籤的用法</title>

</head>

<body>

<pre>

春曉

春眠不覺曉，處處聞啼鳥。

　　夜來風雨聲，花落知多少。

</pre>

</body>

</html>

示例1.9在瀏覽器中的運行結果如圖1.1.14所示。

圖1.1.14<pre>標籤的使用

1.3.3 文本標籤

1. 字體形狀標籤

字體形狀包括字體加粗、傾斜、下劃線、下標、上標等。<b>和</b>用於將文本加粗；<i>和</i>用於設置斜體；<u>和</u>用於爲文本添加下劃線；<sub>用於將文字作爲下標顯示，<sup>用於將文字作爲上標顯示。

示例1.10

<html>

<head>

<title>字體格式標籤的用法</title>

</head>

<body>

<p>

<u>"春眠不覺曉"</u>，春日酣夢不知不覺到了早晨。這首詩之所以深受人們喜愛，除了語言

<i>明白曉暢、音調琅琅上口</i>之外，還在於它貼近生活，情景交融，意味雋永。<sup>[2]</sup>

</p>

<p></p>

</body>

</html>

示例1.10在瀏覽器中的運行結果如圖1.1.15所示。

圖1.1.15 字體形狀標籤的使用

2. 字體標籤<font>

<font>和</font>用於設置文本的字體、字號、顏色等。

語法：

其中，size用於設置字體的大小，取值爲l~7，默認爲 3。face用於設置文本需要使用的字體，使用某種特定的字體完全取決於用戶機器上該字體是否可用，該屬性不指示任何字體下載。因此，強烈推薦使用一個通用字體名作爲補充，如字體Arial。color用於設置文本的顏色，可以使用顏色名稱，如 red表示紅色、green表示綠色、blue表示藍色等，還可以使用十六進制的 RGB顏色值，如 #FFOOOO表示紅色、#OOFFOO表示綠色、#OOOOFF表示藍色。

RGB色彩模式（也翻譯爲“紅綠藍”，比較少用）是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

示例1.11

<html>

<head>

<title>font標籤的用法</title>

</head>

<body>

<font face="隸書">是一種規範,一種<u>標準</u></font>

</body>

</html>

示例1.11在瀏覽器中的運行結果如圖1.1.16所示。

圖1.1.16 <font>標籤的使用

1.3.4 圖像標籤<img>

如果一個網頁中只有文字沒有圖像，就會顯得過於簡單、呆板，不能達到生動活潑的效果。HTML語言提供了<img>標籤用於顯示網頁中的圖像。使用<img>標籤能夠顯示多種格式的圖片，如下所述。

1. 圖片格式

(1) BMP格式

BMP 是（Windows 位圖） Windows 位圖，可以用任何顏色深度（從黑白到 24 位顏色）存儲單個光柵圖像。Windows 位圖文件格式與其他 Microsoft Windows 程序兼容。它不支持文件壓縮，也不適用於 Web 頁。從總體上看，Windows 位圖文件格式的缺點超過了它的優點。爲了保證照片圖像的質量，請使用 PNG、JPEG、TIFF 文件。BMP 文件適用於 Windows 中的牆紙。

(2) GIF格式

GIF(GraphicsInterchange Format)的原義是"圖像互換格式"，是CompuServe公司在 1987年開發的圖像文件格式。GIF文件的數據，是一種基於LZW算法的連續色調的無損壓縮格式。其壓縮率一般在50%左右，它不屬於任何應用程序。目前幾乎所有相關軟件都支持它，公共領域有大量的軟件在使用GIF圖像文件。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存於一個文件中的多幅圖像數據逐幅讀出並顯示到屏幕上，就可構成一種最簡單的動畫。

(3) JPEG格式

JPEG是Joint Photographic Experts Group(聯合圖像專家組)的縮寫，文件後輟名爲"．jpg"或"．jpeg"，是最常用的圖像文件格式，由一個軟件開發聯合會組織制定，是一種有損壓縮格式，能夠將圖像壓縮在很小的儲存空間，圖像中重複或不重要的資料會被丟失，因此容易造成圖像數據的損傷。

JPEG格式的應用非常廣泛，特別是在網絡和光盤讀物上，都能找到它的身影。目前各類瀏覽器均支持JPEG這種圖像格式，因爲JPEG格式的文件尺寸較小，下載速度快。

(4) PNG格式

PNG(PortableNetwork Graphics)的原名稱爲"可移植性網絡圖像"，是網上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供 24位和48位真彩色圖像支持以及其他諸多技術性支持。由於PNG非常新，所以目前並不是所有的程序都可以用它來存儲圖像文件，但Photoshop可以處理PNG圖像文件，也可以用PNG圖像文件格式存儲。

2. <img>標籤

<img>標籤用於在頁面中插入圖像，它使用 src屬性指定插入圖像源文件所在的路徑。

語法：

示例1.12

<html>

<head>

<title>img標籤用法</title>

</head>

<body>

中文名：劉翔<br/>

別名：翔飛人<br/>

運動項目：田徑110米欄運動員<br/>

劉翔(Liu Xiang)是中國田徑(110米跨欄)一級運動員。<br/>

2004年雅典奧運會上以12.91秒的成績平了保持11年之久的世界紀錄；<br/>

東亞運動會田徑男子110米欄決賽中，成就“三冠王”。<br/>

2011年劉翔成爲中國人民政治協商會議第十一屆全國委員會委員。<br/>

2011年4月初，教練孫海平表示劉翔的起跑技術已經從原先的八步改爲七步上欄，<br/>

劉翔首試七步上欄技術，以13秒07的成績力壓美國名將大衛¡¤奧利弗獲得冠軍<br/>

</body>

</html>

示例1.12在瀏覽器中的運行結果如圖1.1.17示：

圖1.1.17 img標籤的使用

1.3.5 超鏈接標籤<a>

超鏈接是網頁中相對醒目的一段文本或一個圖標，只要用鼠標單擊超鏈接，瀏覽器就會打開超鏈接所指向的網頁，從一個網頁跳轉到另一個網頁。如圖1.1.18

圖1.1.18 超鏈接頁面

1. 超鏈接

<a>標籤用於創建超鏈接，超鏈接標籤提供 href屬性來設置頁面鏈接的地址。

示例1.13

<html>

<head>

<title>超鏈接標籤用法</title>

</head>

<body>

<a href="http://www.baidu.com">百度</a>||

<a href="http://www.google.com">谷歌</a>||

<a href="http://www.sina.com">新浪</a>||

</body>

</html>

示例1.13 在瀏覽器中的運行結果如圖1.1.19所示：

圖1.1.19 超鏈接的使用

2. 文件路徑

怎樣在一個HTML頁面中引用另一個HTML頁面作爲超鏈接？怎樣在一個網頁中插入一張圖片？在下面將一一解決這些問題。如果在引用文件時 (如添加超鏈接或插入圖片等)，使用了錯誤的文件路徑，將會導致引用失效，無法瀏覽鏈接文件或無法顯示插入的圖片等。

HTML有兩種路徑寫法：絕對路徑和相對路徑。

(1) 絕對路徑

絕對路徑是指帶域名或盤符的完整路徑。如需要訪問百度網站的logo，徑爲http://www.baidu.com/img/baidu_sylogo1.gif，http：//www.baidu.com是Web應用程序的根目錄，在根目錄下擁有一個img目錄，baidu_sylogo1.gif文件就存放在img目錄下。

(2) 相對路徑

相對路徑就是指由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關係。使用相對路徑可以爲我們帶來非常多的便利。

如果源文件和引用文件在同一個目錄裏，直接寫引用文件名即可。例如：我們現在建一個源文件info.html，在info.html裏要引用index.html文件作爲超鏈接。

如果info.html和index.html在同一個目錄下，則可以如下方式鏈接

如果index.html在info.html文件的上級路徑，則可以使用../代表一級上級目錄(間隔一個目錄)，../../代表二級上級目錄(間隔兩個目錄)。則可以使用如下方式鏈接

3. 錨點

使用錨點可以在文檔中設置標籤，這些標籤通常放在文檔的特定主題處或頂部。然後創建指向錨點的鏈接，通過鏈接可以快速定位到指定位置。

(1) 創建錨點

<aname="">標籤用於在HTML文檔中創建一個錨點，屬性name爲命名錨點的名稱

(2) 鏈接到命名錨點

鏈接到錨點需要使用<a hrer="">標籤分爲兩種情況：鏈接到當前文檔中的錨點、鏈接到其他文檔中的錨點。

鏈接到當前文檔中的錨點：<a href=”#錨點名稱”>鏈接文本</a>

鏈接到其他文檔中的錨點：<a href=”文件名稱#錨點名稱”>鏈接文本</a>

示例1.13

<html>

<head>

<title>錨點超鏈接標籤用法</title>

</head>

<body>

<p><a href="#C4">查看 Chapter 4。</a></p>

<h2>Chapter 1</h2>

<h2>Chapter 2</h2>

<h2>Chapter 3</h2>

<h2><a name="C4">Chapter 4</a></h2>

<h2>Chapter 5</h2>

</body>

</html>

示例1.13在瀏覽器中運行結果如圖1.1.20所示。因爲在超鏈接“查看 Chapter 4。”處設置了鏈接到錨點C4，所以當點擊該超鏈接時，頁面自動滾動到錨點C4處。

圖1.1.20 錨點超鏈接用法

錨點連接用的比較多的是一些電子商務網站，由於商品比較多，用戶拉滾動條一直向下瀏覽商品；到網頁的最底部的時候怎麼直接跳轉到頁面頂端呢？這時用錨點是一個省時省力的方法。

本章總結

Ø HTML文檔基本結構

n <html>標籤

n <head>標籤

n <title>標籤

n <body>標籤

Ø HTML常用標籤

n <h1>~<h6>標題標籤

n <p>段落標籤

n 格式化標籤

u <center>居中標籤

u <ol>有序列表

u <ul>無序列表

u <dl> 自定義列表

u <pre>與格式化標籤

n 文本標籤

u <b>文本加粗

u <i>設置斜體

u <u>文本下劃線

u <sub>下標

u <sup>上標

n 圖像標籤<img>

n 超鏈接標籤<a>

任務實訓部分

實訓任務1：製作唐詩三百首介紹頁面

訓練技能點

Ø HTML文檔的基本結構

Ø <h1>~<h6>標題標籤的用法

Ø 換行標籤<br/>、水平線標籤<hr/>

需求說明

使用EditPlus工具編寫代碼，實現如圖1.2.1所示的頁面效果

實現思路

使用<h1>標籤顯示大標題，<h2>標籤顯示小標題。使用<hr/>做分割線,<p/>標籤組織段文字，<br/>標籤進行換行顯示

實現步驟

(1) 使用EditPlus創建HTML文件，命名爲exercise1.html

<html>

<head>

<title>唐詩三百首</title>

</head>

<body>

</body>

</html>

(2) 使用<h1>標籤插入“唐詩三百首”，使用<hr/>標籤插入水平分割線，使用<h2>標籤插入“目錄”，使用<p>標籤插入目錄列表，使用<h3>標籤插入“夜靜思”，關鍵代碼如下所示。

<html>

<head>

<title>唐詩三百首</title>

</head>

<body>

<h1>唐詩三百首</h1>

<hr />

<hr />

<p>牀前明月光,疑是地上霜。舉頭望明月，低頭思故鄉。</p>

<hr />

</body>

</html>

圖1.2.1 唐山三百首

實訓任務2：製作購物網站商品分類頁面

訓練技能點

無序列表<ul>-<li>標籤

需求說明

製作購物網站商品分類列表，如圖1.2.2所示。

圖1.2.2 商品分類

實現思路

使用EditPlus創建HTML文件，使用<h2>標籤插入標題，使用<ul>-<li>無序列表實現商品分類。

實現步驟

(1) 使用EditPlus創建HTML文件

(2) 使用<ul>-<li>無序列表顯示商品分類，關鍵代碼如下。

<html>

<head>

</head>

<body>

<hr/>

<ul>

</ul>

</body>

</html>

實訓任務3：製作購物流程頁面

訓練技能點

<ol>-<li>有序列表的使用

需求說明

製作購物流程頁面，效果如圖1.2.3所示。

圖1.2.3 購物流程頁面

實訓任務4：製作商品介紹頁面

訓練技能點

Ø 使用<dl>-<dt>-<dd>自定義列表

Ø 使用<img>標籤插入圖片

Ø 使用<font>標籤設置字體顏色

需求說明

製作商品介紹頁面，效果如圖1.2.4所示。

圖1.2.4 商品顯示頁面

實現思路

使用<dl>-<dt>-<dd>自定義列表，在<dt>標籤中使用<img>標籤插入圖片，使用<dd>標籤插入產品介紹文字。代碼如下所示。

<html>

<head>

</head>

<body>

<dl>

<dd>拍賣上網本</dd>

<dd>跳樓瘋搶價<font color="#FF0000">1</font>元起</dd>

</dl>

</body>

</html>

實訓任務5：製作網站超鏈接

訓練技能點

超鏈接<a>標籤的使用

需求說明

製作網站超鏈接，效果如圖1.2.5所示

圖1.2.5 網站超鏈接

鞏固練習

一、選擇題

1. 在下列的 HTML 中，哪個是最大的標題？( )

A. <h6>

B. <head>

C. <heading>

D. <h1>

2. 在下列的 HTML 中，哪個可以插入換行？( )

A. <br/>

B. <lb>

C. <break>

D. <p>

3. 在下列的 HTML 中，哪個可以添加背景顏色？( )

A. <bodycolor="yellow">

B. <background>yellow</background>

C. <bodybgcolor="yellow">

4. 請選擇產生粗體字的 HTML 標籤 ( )

A. <bold>

B. <bb>

C. <b>

D. <bld>

5. 請選擇產生斜體字的 HTML 標籤 ( )

A. <i>

B. <italics>

C. <ii>

6. 在下列的 HTML 中，哪個可以產生超鏈接？ ( )

A. <aurl="http://www.w3school.com.cn">W3School.com.cn</a>

B. <ahref="http://www.w3school.com.cn">W3School</a>

C. <a>http://www.w3school.com.cn</a>

D. <aname="http://www.w3school.com.cn">W3School.com.cn</a>

二、上機練習

1. 使用<img/>和<br/>標籤實現如圖1.3.1所示效果。

圖1.3.1圖文混排效果

2. 使用自定義列表實現圖1.3.1所示效果。

3. 製作如圖1.3.2所示的圖片滾動效果。提示：使用<marquee></marquee>標籤可以實現圖片的滾動

WEB入門一網頁設計基礎

1.1 HTML文檔基本結構

1.1.1 HTML文檔結構

1.1.2 HTML註釋和特殊字符

1.2 編輯HTML文檔

1.3 HTML常用標籤

1.3.1 最常用的幾個標籤

1.3.2 格式化標籤

1.3.3 文本標籤

1.3.4 圖像標籤<img>

1.3.5 超鏈接標籤<a>

實訓任務1：製作唐詩三百首介紹頁面

實訓任務2：製作購物網站商品分類頁面

實訓任務3：製作購物流程頁面

實訓任務4：製作商品介紹頁面

實訓任務5：製作網站超鏈接

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

刷臉支付手機沒電等情況下都可以完成支付

ES6之-優雅的Promise

GIMP 2018 年回顧：2.10 版及其後

成功的把樹莓派3B+的 docker-compose 升級到 1.28

Harmony OS 打包

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

WEB入門一 網頁設計基礎

1.1 HTML文檔基本結構

1.1.1 HTML文檔結構

1.1.2 HTML註釋和特殊字符

1.2 編輯HTML文檔

1.3 HTML常用標籤

1.3.1 最常用的幾個標籤

1.3.2 格式化標籤

1.3.3 文本標籤

1.3.4 圖像標籤<img>

1.3.5 超鏈接標籤<a>

實訓任務1：製作唐詩三百首介紹頁面

實訓任務2：製作購物網站商品分類頁面

實訓任務3：製作購物流程頁面

實訓任務4：製作商品介紹頁面

實訓任務5：製作網站超鏈接

WEB入門一網頁設計基礎