第一章 HTML基礎(chǔ)
本章目標(biāo)
會使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁【重點】
會使用文本相關(guān)標(biāo)簽排版文本信息【重點】
一、 HTML的基本概念
(一) 網(wǎng)頁設(shè)計概述
網(wǎng)頁是用HTML語言編寫的一種文件，將這種文件放在Web服務(wù)器上可以讓在互聯(lián)網(wǎng)上的其他用戶瀏覽。比如說訪問百度網(wǎng)站，看到的就是百度網(wǎng)站所編寫的網(wǎng)頁。網(wǎng)頁也是通過HTTP協(xié)議來傳遞給瀏覽者的。網(wǎng)站是網(wǎng)頁的集合，多個網(wǎng)頁可以共同組成一個網(wǎng)站。網(wǎng)站的第一個網(wǎng)頁稱為首頁。
(二) HTML簡介
HTML英文是HyperText Marked Language，即超文本標(biāo)記語言，是一種用來制作超文本文件的簡單標(biāo)記語言。用HTML編寫的超文本文件稱為HTML文件，它能獨立于各種操作系統(tǒng)平臺。自1990年以來，HTML就被全球廣域網(wǎng)用作其信息表示語言。
[圖片上傳失敗...(image-11bc28-1550711950247)]
(三) HTML的基本結(jié)構(gòu)
HTML文件包括文件頭和文件體兩部分。在文件頭里，主要是對這個HTML文件進行一些必要的定義，在文件體中的內(nèi)容才是真正要顯示的各種文件信息。一般情況下，HTML文件的結(jié)構(gòu)如下所示
<HTML>
<HEAD>
頭部信息
</HEAD>
<BODY>
文件主體，正文部分
</BODY>
</HTML>
注：
一個HTML文件，必須是<HTML>…</HTML>標(biāo)簽標(biāo)記著 HTML 文檔的開始和結(jié)束
網(wǎng)頁頭部以<head>開始，以</head>結(jié)束
網(wǎng)頁主體部分以<body>開始，以</body>結(jié)束
(四) 一個簡單的HTML實例
1. 網(wǎng)頁編輯工具
HTML文件對其編寫工具的要求并不高，可以在Dreamweaver中實現(xiàn)，也可以在最簡單的文本編輯工具中實現(xiàn)。常用的編輯工具有
記事本
UltraEdit
Dreamweaver
Webstorm
Sublime
2. 實例效果
[[圖片上傳失敗...(image-5f2553-1550711950244)]第一章 HTML基礎(chǔ)
本章目標(biāo)
會使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁【重點】
會使用文本相關(guān)標(biāo)簽排版文本信息【重點】
一、 HTML的基本概念
(一) 網(wǎng)頁設(shè)計概述
網(wǎng)頁是用HTML語言編寫的一種文件，將這種文件放在Web服務(wù)器上可以讓在互聯(lián)網(wǎng)上的其他用戶瀏覽。比如說訪問百度網(wǎng)站，看到的就是百度網(wǎng)站所編寫的網(wǎng)頁。網(wǎng)頁也是通過HTTP協(xié)議來傳遞給瀏覽者的。網(wǎng)站是網(wǎng)頁的集合，多個網(wǎng)頁可以共同組成一個網(wǎng)站。網(wǎng)站的第一個網(wǎng)頁稱為首頁。
(二) HTML簡介
HTML英文是HyperText Marked Language，即超文本標(biāo)記語言，是一種用來制作超文本文件的簡單標(biāo)記語言。用HTML編寫的超文本文件稱為HTML文件，它能獨立于各種操作系統(tǒng)平臺。自1990年以來，HTML就被全球廣域網(wǎng)用作其信息表示語言。
[圖片上傳失敗...(image-98ff8f-1550711956533)]
(三) HTML的基本結(jié)構(gòu)
HTML文件包括文件頭和文件體兩部分。在文件頭里，主要是對這個HTML文件進行一些必要的定義，在文件體中的內(nèi)容才是真正要顯示的各種文件信息。一般情況下，HTML文件的結(jié)構(gòu)如下所示
<HTML>
<HEAD>
頭部信息
</HEAD>
<BODY>
文件主體，正文部分
</BODY>
</HTML>
注：
一個HTML文件，必須是<HTML>…</HTML>標(biāo)簽標(biāo)記著 HTML 文檔的開始和結(jié)束
網(wǎng)頁頭部以<head>開始，以</head>結(jié)束
網(wǎng)頁主體部分以<body>開始，以</body>結(jié)束
(四) 一個簡單的HTML實例
1. 網(wǎng)頁編輯工具
HTML文件對其編寫工具的要求并不高，可以在Dreamweaver中實現(xiàn)，也可以在最簡單的文本編輯工具中實現(xiàn)。常用的編輯工具有
記事本
UltraEdit
Dreamweaver
Webstorm
Sublime
2. 實例效果
[圖片上傳失敗...(image-492a3d-1550711956531)]
3. 參考代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>一個簡單的HTML實例</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">第一個HTML文件</H2>
<HR WIDTH="70%">
<P>下面跟我進入HTML的領(lǐng)域</P>
<P>來領(lǐng)略這個奇妙而多彩的世界??！</P>
</BODY>
</HTML>
(五) HTML基本標(biāo)記
學(xué)習(xí)HTML的標(biāo)記要從最基本的標(biāo)記開始，一個HTML文件所包含的基本標(biāo)記主要包括文件類型標(biāo)記（也稱為HTML標(biāo)記）、HTML頭標(biāo)記、頁面標(biāo)題以及HTML主體標(biāo)記。
1. 文件類型標(biāo)記 DOCTYPE聲明
[圖片上傳失敗...(image-d7dc52-1550711956533)]
l Strict(嚴(yán)格類型)：這種聲明完全符合W3C標(biāo)準(zhǔn)，但要求比較嚴(yán)格。對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
l Transitional(過渡類型)：也稱松散（loose）聲明。相比strict而言，要求相對寬松一些。對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
l Frameset(框架類型)：strict聲明中不允許使用框架，當(dāng)前頁面中需要使用框架時，則使用該聲明?？蚣茼摢勗诤罄m(xù)章節(jié)講解，對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
說明：
Strict語法較為嚴(yán)格，對代碼的編寫要求較高；Frameset在一些瀏覽器中不支持，因此在使用時受到瀏覽器的限制，所以并不常用；因此使用最多的是Transitional.
2. <title>標(biāo)簽
打開網(wǎng)頁后，將在瀏覽器窗口的標(biāo)題欄顯示網(wǎng)頁標(biāo)題。
<TITLE>一個簡單的HTML實例</TITLE>
[圖片上傳失敗...(image-3ded69-1550711956533)]
(六) HTML頁面的元信息 META
META元素提供的信息對于瀏覽用戶是不可見的，一般用于定義頁面信息的名稱、關(guān)鍵字、作者等。
在HTML文件中，有多個META元素。
1. 頁面的關(guān)鍵字
用于說明網(wǎng)頁包含的關(guān)鍵字等信息，提高被搜索引擎搜索到的概率。
語法
<meta name="keywords" content="關(guān)鍵字"/>
Content屬性的值為用戶設(shè)置的具體關(guān)鍵字。
2. 頁面的對外說明
用于描述網(wǎng)頁的主要內(nèi)容、主題等，合理設(shè)置也可以提高被搜索引擎搜索到的概率。
<meta name="description" content="對頁面的描述"/>
Content屬性的值最多可以包括1024個字符，但因為搜索引擎一般只顯示大約前175個字符，所以描述內(nèi)容還是短小、簡潔為好。
3. 網(wǎng)頁的作者信息
用于設(shè)置網(wǎng)站作者的名稱，在比較專業(yè)的網(wǎng)站頁面上經(jīng)常用到。其語法格式如下：
<meta name="author" content="作者名稱"/>
Content屬性的值為用戶設(shè)置的作者名稱
4. 網(wǎng)頁的開發(fā)語言
用于設(shè)置頁面的類別和語言字符集。其語法格式如下：
<meta http-equiv="content-type" content="text/html;charset=GB2312"/>
建議charset值采用UTF-8.
5. 網(wǎng)頁的定時跳轉(zhuǎn)
用于設(shè)置多長的時間網(wǎng)頁自已刷新一次，或者經(jīng)過一段時間自動跳轉(zhuǎn)到其他頁面
自動刷新
<meta http-equiv="refresh" content="5"/>
Content屬性的值頁面自動刷新的時間間隔為5s
跳轉(zhuǎn)
<meta http-equiv="refresh" content="6;URL=www.baidu.com"/>
(七) 練習(xí)
1. 練習(xí)1
練習(xí)內(nèi)容
使用記事本或者其他文本編輯工具，手動輸入一個簡單的網(wǎng)頁，編寫一個包含頭、標(biāo)題、主體三部分的網(wǎng)頁的HTML代碼。
參考代碼
<html>
<head>
<title>這里標(biāo)題</title>
</head>
<body>
文件主體，正文部分
</body>
</html>
二、 網(wǎng)頁基本標(biāo)簽
任何一個網(wǎng)頁基本上都是由一個個標(biāo)簽構(gòu)成的，網(wǎng)頁的基本標(biāo)簽包括標(biāo)題標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽、水平標(biāo)簽等，下面我們進行詳細介紹。
(一) 標(biāo)題標(biāo)簽
1. 描述
標(biāo)題標(biāo)簽一般表示一段文字的標(biāo)題或主題，并且支持多層次的內(nèi)容結(jié)構(gòu)。
2. 語法
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
3. 示例
[圖片上傳失敗...(image-a56b1b-1550711956533)]
4. 核心代碼
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
(二) 段落標(biāo)簽
1. 描述
表示一段文字
2. 語法
<p>…</p>
3. 示例
[圖片上傳失敗...(image-4fe2ed-1550711956533)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>北京歡迎你，有夢想誰都了不起！</p>
<p>有勇氣就會有奇跡。</p>
(三) 換行標(biāo)簽
1. 描述
換行標(biāo)簽表示強制換行，該標(biāo)簽比較特殊，沒有結(jié)束標(biāo)簽。
2. 語法
3. 示例
[圖片上傳失敗...(image-80c904-1550711956533)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇跡。<br />
北京歡迎你，為你開天辟地<br />
……
</p>
(四) 水平標(biāo)簽
1. 描述
網(wǎng)頁上顯示的就是一條水平線，沒有結(jié)束標(biāo)簽。
2. 語法
<HR ALIGN="對齊方式" WIDTH="寬度" SIZE="高度" COLOR="顏色" NOSHADE>
3. 示例
[圖片上傳失敗...(image-5fe880-1550711956533)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇跡。<br />
北京歡迎你，為你開天辟地<br />
……
</p>
(五) 字體樣式標(biāo)簽
1. 描述
加粗：<strong>…</strong>
斜體：<em>…</em>
2. 示例
[圖片上傳失敗...(image-fff21e-1550711956533)]
3. 核心代碼
<strong>徐志摩人物簡介</strong>
<p>
<em>1910</em>年入杭州學(xué)堂
<em>1918</em>年赴美國克拉大學(xué)學(xué)習(xí)銀行學(xué)
……
</p>
(六) 注釋
1. 注釋
(七) 特殊符號
1. 描述
在HTML中常用的特殊符號及對應(yīng)的字符實體如下表所示，這些實體符號都以”&”開頭，以“;”結(jié)束。
|
特殊符號
|
字符實體
|
示例
|
|
空格
|
?
|
<a href="#">****百度</a>?|?<a href="#">****新浪</a>
|
|
大于號(>)
|
>
|
如果時間>****晚上6****點，就坐車回家
|
|
小于號(<)
|
<
|
如果時間<****早上7****點，就走路去上學(xué)
|
|
引號(")
|
"
|
W3C****規(guī)范中，HTML****的屬性值必須用成對的"****引起來
|
|
版權(quán)符號@
|
?
|
? 2010-2019 寧波教育學(xué)院
|
2. 示例：特殊符號
利用學(xué)習(xí)的特殊符號制作寧波廣播電視大學(xué)官方網(wǎng)站的版權(quán)部分
效果圖
[圖片上傳失敗...(image-5680bb-1550711956533)]
核心代碼
<body>
Copyright ?2014-2018 ?寧波廣播電視大學(xué)? 版本所有
浙ICP備05015663號-1??
寧波廣播電視大學(xué)信息中心制作維護 ?? 地址：寧波市文教路1號（315016）
</body>
(八) 練習(xí)
1. 練習(xí)一：制作《清平樂》
訓(xùn)練要點
標(biāo)簽的嵌套使用
網(wǎng)頁中基本標(biāo)簽的使用
需求說明
- 標(biāo)題用<h2>標(biāo)簽，文字用<p>標(biāo)簽，標(biāo)題與正文之間的分隔線使用
標(biāo)簽，詞結(jié)束后使用
標(biāo)簽換行
實現(xiàn)思路
詩詞內(nèi)容均放在一個<p>…</p>標(biāo)簽中，詩詞中需要換行時使用
換行，使用標(biāo)簽的嵌套
效果圖
[圖片上傳失敗...(image-43448b-1550711956533)]
三、 作業(yè)
(一) 作業(yè)一：制作李清照簡介
1. 需求說明
標(biāo)題用標(biāo)題標(biāo)簽，人名加粗顯示，時間斜體顯示，并制作頁面版權(quán)部分.
2. 效果圖
[圖片上傳失敗...(image-7fa12a-1550711956533)]
](第一節(jié)/教學(xué)演示案例/示例1-myfirstpage.html)
3. 參考代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>一個簡單的HTML實例</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center">第一個HTML文件</H2>
<HR WIDTH="70%">
<P>下面跟我進入HTML的領(lǐng)域</P>
<P>來領(lǐng)略這個奇妙而多彩的世界?。?lt;/P>
</BODY>
</HTML>
(五) HTML基本標(biāo)記
學(xué)習(xí)HTML的標(biāo)記要從最基本的標(biāo)記開始，一個HTML文件所包含的基本標(biāo)記主要包括文件類型標(biāo)記（也稱為HTML標(biāo)記）、HTML頭標(biāo)記、頁面標(biāo)題以及HTML主體標(biāo)記。
1. 文件類型標(biāo)記 DOCTYPE聲明
[圖片上傳失敗...(image-780c8-1550711950246)]
l Strict(嚴(yán)格類型)：這種聲明完全符合W3C標(biāo)準(zhǔn)，但要求比較嚴(yán)格。對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
l Transitional(過渡類型)：也稱松散（loose）聲明。相比strict而言，要求相對寬松一些。對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
l Frameset(框架類型)：strict聲明中不允許使用框架，當(dāng)前頁面中需要使用框架時，則使用該聲明?？蚣茼摢勗诤罄m(xù)章節(jié)講解，對應(yīng)的聲明為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
說明：
Strict語法較為嚴(yán)格，對代碼的編寫要求較高；Frameset在一些瀏覽器中不支持，因此在使用時受到瀏覽器的限制，所以并不常用；因此使用最多的是Transitional.
2. <title>標(biāo)簽
打開網(wǎng)頁后，將在瀏覽器窗口的標(biāo)題欄顯示網(wǎng)頁標(biāo)題。
<TITLE>一個簡單的HTML實例</TITLE>
[圖片上傳失敗...(image-e172fd-1550711950246)]
(六) HTML頁面的元信息 META
META元素提供的信息對于瀏覽用戶是不可見的，一般用于定義頁面信息的名稱、關(guān)鍵字、作者等。
在HTML文件中，有多個META元素。
1. 頁面的關(guān)鍵字
用于說明網(wǎng)頁包含的關(guān)鍵字等信息，提高被搜索引擎搜索到的概率。
語法
<meta name="keywords" content="關(guān)鍵字"/>
Content屬性的值為用戶設(shè)置的具體關(guān)鍵字。
2. 頁面的對外說明
用于描述網(wǎng)頁的主要內(nèi)容、主題等，合理設(shè)置也可以提高被搜索引擎搜索到的概率。
<meta name="description" content="對頁面的描述"/>
Content屬性的值最多可以包括1024個字符，但因為搜索引擎一般只顯示大約前175個字符，所以描述內(nèi)容還是短小、簡潔為好。
3. 網(wǎng)頁的作者信息
用于設(shè)置網(wǎng)站作者的名稱，在比較專業(yè)的網(wǎng)站頁面上經(jīng)常用到。其語法格式如下：
<meta name="author" content="作者名稱"/>
Content屬性的值為用戶設(shè)置的作者名稱
4. 網(wǎng)頁的開發(fā)語言
用于設(shè)置頁面的類別和語言字符集。其語法格式如下：
<meta http-equiv="content-type" content="text/html;charset=GB2312"/>
建議charset值采用UTF-8.
5. 網(wǎng)頁的定時跳轉(zhuǎn)
用于設(shè)置多長的時間網(wǎng)頁自已刷新一次，或者經(jīng)過一段時間自動跳轉(zhuǎn)到其他頁面
自動刷新
<meta http-equiv="refresh" content="5"/>
Content屬性的值頁面自動刷新的時間間隔為5s
跳轉(zhuǎn)
<meta http-equiv="refresh" content="6;URL=www.baidu.com"/>
(七) 練習(xí)
1. 練習(xí)1
練習(xí)內(nèi)容
使用記事本或者其他文本編輯工具，手動輸入一個簡單的網(wǎng)頁，編寫一個包含頭、標(biāo)題、主體三部分的網(wǎng)頁的HTML代碼。
參考代碼
<html>
<head>
<title>這里標(biāo)題</title>
</head>
<body>
文件主體，正文部分
</body>
</html>
二、 網(wǎng)頁基本標(biāo)簽
任何一個網(wǎng)頁基本上都是由一個個標(biāo)簽構(gòu)成的，網(wǎng)頁的基本標(biāo)簽包括標(biāo)題標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽、水平標(biāo)簽等，下面我們進行詳細介紹。
(一) 標(biāo)題標(biāo)簽
1. 描述
標(biāo)題標(biāo)簽一般表示一段文字的標(biāo)題或主題，并且支持多層次的內(nèi)容結(jié)構(gòu)。
2. 語法
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
3. 示例
[圖片上傳失敗...(image-b27438-1550711950245)]
4. 核心代碼
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
(二) 段落標(biāo)簽
1. 描述
表示一段文字
2. 語法
<p>…</p>
3. 示例
[圖片上傳失敗...(image-807f2f-1550711950245)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>北京歡迎你，有夢想誰都了不起！</p>
<p>有勇氣就會有奇跡。</p>
(三) 換行標(biāo)簽
1. 描述
換行標(biāo)簽表示強制換行，該標(biāo)簽比較特殊，沒有結(jié)束標(biāo)簽。
2. 語法
3. 示例
[圖片上傳失敗...(image-a5a613-1550711950245)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇跡。<br />
北京歡迎你，為你開天辟地<br />
……
</p>
(四) 水平標(biāo)簽
1. 描述
網(wǎng)頁上顯示的就是一條水平線，沒有結(jié)束標(biāo)簽。
2. 語法
<HR ALIGN="對齊方式" WIDTH="寬度" SIZE="高度" COLOR="顏色" NOSHADE>
3. 示例
[圖片上傳失敗...(image-bd2c89-1550711950245)]
4. 核心代碼
<h1>北京歡迎你</h1>
<p>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇跡。<br />
北京歡迎你，為你開天辟地<br />
……
</p>
(五) 字體樣式標(biāo)簽
1. 描述
加粗：<strong>…</strong>
斜體：<em>…</em>
2. 示例
[圖片上傳失敗...(image-ae8db6-1550711950245)]
3. 核心代碼
<strong>徐志摩人物簡介</strong>
<p>
<em>1910</em>年入杭州學(xué)堂
<em>1918</em>年赴美國克拉大學(xué)學(xué)習(xí)銀行學(xué)
……
</p>
(六) 注釋
1. 注釋
(七) 特殊符號
1. 描述
在HTML中常用的特殊符號及對應(yīng)的字符實體如下表所示，這些實體符號都以”&”開頭，以“;”結(jié)束。
|
特殊符號
|
字符實體
|
示例
|
|
空格
|
?
|
<a href="#">****百度</a>?|?<a href="#">****新浪</a>
|
|
大于號(>)
|
>
|
如果時間>****晚上6****點，就坐車回家
|
|
小于號(<)
|
<
|
如果時間<****早上7****點，就走路去上學(xué)
|
|
引號(")
|
"
|
W3C****規(guī)范中，HTML****的屬性值必須用成對的"****引起來
|
|
版權(quán)符號@
|
?
|
? 2010-2019 寧波教育學(xué)院
|
2. 示例：特殊符號
利用學(xué)習(xí)的特殊符號制作寧波廣播電視大學(xué)官方網(wǎng)站的版權(quán)部分
效果圖
[圖片上傳失敗...(image-7adb24-1550711950245)]
核心代碼
<body>
Copyright ?2014-2018 ?寧波廣播電視大學(xué)? 版本所有
浙ICP備05015663號-1??
寧波廣播電視大學(xué)信息中心制作維護 ?? 地址：寧波市文教路1號（315016）
</body>
(八) 練習(xí)
1. 練習(xí)一：制作《清平樂》
訓(xùn)練要點
標(biāo)簽的嵌套使用
網(wǎng)頁中基本標(biāo)簽的使用
需求說明
- 標(biāo)題用<h2>標(biāo)簽，文字用<p>標(biāo)簽，標(biāo)題與正文之間的分隔線使用
標(biāo)簽，詞結(jié)束后使用
標(biāo)簽換行
實現(xiàn)思路
詩詞內(nèi)容均放在一個<p>…</p>標(biāo)簽中，詩詞中需要換行時使用
換行，使用標(biāo)簽的嵌套
效果圖
[圖片上傳失敗...(image-c1e32d-1550711950245)]
三、 作業(yè)
(一) 作業(yè)一：制作李清照簡介
1. 需求說明
標(biāo)題用標(biāo)題標(biāo)簽，人名加粗顯示，時間斜體顯示，并制作頁面版權(quán)部分.
2. 效果圖
[圖片上傳失敗...(image-6e16d0-1550711950245)]
