第一章 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文件良蒸，它能獨(dú)立于各種操作系統(tǒng)平臺。自1990年以來伍玖，HTML就被全球廣域網(wǎng)用作其信息表示語言嫩痰。
[圖片上傳失敗...(image-11bc28-1550711950247)]
(三) HTML的基本結(jié)構(gòu)
HTML文件包括文件頭和文件體兩部分。在文件頭里窍箍，主要是對這個HTML文件進(jìn)行一些必要的定義串纺，在文件體中的內(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文件，它能獨(dú)立于各種操作系統(tǒng)平臺急黎。自1990年以來扎狱，HTML就被全球廣域網(wǎng)用作其信息表示語言侧到。
[圖片上傳失敗...(image-98ff8f-1550711956533)]
(三) HTML的基本結(jié)構(gòu)
HTML文件包括文件頭和文件體兩部分。在文件頭里淤击，主要是對這個HTML文件進(jìn)行一些必要的定義匠抗，在文件體中的內(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>下面跟我進(jìn)入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)前頁面中需要使用框架時甸箱，則使用該聲明育叁。框架頁獎在后續(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)簽等，下面我們進(jìn)行詳細(xì)介紹抽碌。
(一) 標(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)簽表示強(qiáng)制換行痴颊，該標(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é)信息中心制作維護(hù) ?? 地址：寧波市文教路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>下面跟我進(jìn)入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-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)前頁面中需要使用框架時病毡，則使用該聲明∑ò兀框架頁獎在后續(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)簽等京革，下面我們進(jìn)行詳細(xì)介紹奇唤。
(一) 標(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)簽表示強(qiáng)制換行懈贺，該標(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é)信息中心制作維護(hù) ?? 地址：寧波市文教路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)]
