記錄一點(diǎn)覺(jué)得很有道理的話

第2章
HTML5 語(yǔ)法和基礎(chǔ)標(biāo)簽
本章將詳細(xì)講解HTML的語(yǔ)法和常用的HTML元素询筏。經(jīng)過(guò)本章的學(xué)習(xí)，讀者將學(xué)會(huì)怎樣在網(wǎng)頁(yè)上顯示圖片、鏈接以及不同類型的文本罢荡。
本章所有的案例都需要讀者動(dòng)手練習(xí)憨募，僅靠閱讀是絕對(duì)沒(méi)辦法學(xué)會(huì)如何制作頁(yè)面的紧索，學(xué)習(xí)過(guò)程中切勿只當(dāng)一個(gè)旁觀者。只有切實(shí)地把案例中的代碼都敲出來(lái)并在瀏覽器上得到正確的效果菜谣，才能確保學(xué)會(huì)正確使用HTML元素和它們的屬性珠漂，并在本章學(xué)習(xí)結(jié)束后沒(méi)有阻礙地完成本章任務(wù)。

    本章任務(wù)
    學(xué)習(xí)HTML中最基礎(chǔ)的元素尾膊，完成案例中的咖啡館介紹頁(yè)面媳危。
    要求：
 （1）單擊圖2-1咖啡館介紹頁(yè)面中的“查看菜單”，頁(yè)面會(huì)滾動(dòng)到圖2-2的狀態(tài)眯停。
 （2）按照?qǐng)D2-2所示的順序?qū)Х瑞^菜單進(jìn)行百分百還原济舆。
 （3）使用兩種瀏覽器打開(kāi)咖啡館介紹頁(yè)面，檢查不同瀏覽器渲染的頁(yè)面是否一致莺债。
 （4）創(chuàng)建一個(gè)img文件夾滋觉，把所有的圖片資料放在一起。

    需要注意的是齐邦，HTML的主要功能是使網(wǎng)頁(yè)結(jié)構(gòu)化椎侠，但其無(wú)法控制網(wǎng)頁(yè)的樣式，所以本章案例大多不夠美觀措拇，但別急我纪，在之后的章節(jié)中會(huì)使用CSS來(lái)解決這個(gè)問(wèn)題。
image.png

圖2-1 咖啡館介紹


image.png

圖2-2 咖啡館菜單
2.1 HTML基礎(chǔ)語(yǔ)法
HTML頁(yè)面由不同元素經(jīng)過(guò)嵌套組成丐吓，本小節(jié)講解HTML頁(yè)面所遵循的語(yǔ)法規(guī)則浅悉。
2.1.1 HTML語(yǔ)法規(guī)則
簡(jiǎn)單來(lái)說(shuō)，HTML的語(yǔ)法就是給文本加上表明文本含義的標(biāo)簽(Tag)券犁，讓人和瀏覽器能夠更好地理解文本术健。本小節(jié)主要講解HTML的相關(guān)概念，建立語(yǔ)法體系粘衬，案例較少荞估。如果你在閱讀本小節(jié)時(shí)感到困惑，可以先快速瀏覽這一部分內(nèi)容稚新，之后遇到問(wèn)題時(shí)再返回查看勘伺。
1.HTML文檔
HTML文檔以.html或.htm為文件后綴，告知瀏覽器該文件的類型褂删。
HTML文檔的打開(kāi)方式：雙擊.html文件即可在瀏覽器中打開(kāi)飞醉，如圖2-3所示。


image.png

圖2-3 打開(kāi)HTML文件的方法
選擇打開(kāi)HTML文檔的瀏覽器：在.html文件上單擊右鍵屯阀，彈出菜單冒掌，在【打開(kāi)方式】中選擇想要使用的瀏覽器噪裕，如圖2-4所示。
image.png

圖2-4 選擇瀏覽器
2.元素語(yǔ)法
標(biāo)簽：HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞股毫，如p是一個(gè)表明段落的關(guān)鍵詞膳音，給p加上標(biāo)簽，就成為<p>標(biāo)簽铃诬。
元素：一個(gè)元素通常是由一個(gè)開(kāi)始標(biāo)簽祭陷、內(nèi)容以及一個(gè)結(jié)束標(biāo)簽組成的。結(jié)束標(biāo)簽中要用“/”表示元素結(jié)束趣席，如圖2-5所示兵志。


image.png

圖2-5 元素結(jié)構(gòu) 
    3.屬性
    屬性用來(lái)指定元素的附加信息，使元素個(gè)性化宣肚。如圖2-6和圖2-7所示想罕，屬性添加在開(kāi)始標(biāo)簽中，屬性由屬性名和雙引號(hào)括起來(lái)的屬性值組成霉涨，它們之間使用等號(hào)連接按价，語(yǔ)法如下。
   <元素名 屬性名1="值1" 屬性名2="值2"></元素名>
    ![image.png](https://upload-images.jianshu.io/upload_images/6443335-6ff02a9fbcd0eb67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                                    圖2-6  id屬性
image.png

圖2-7 href屬性

表2-1列出了適用于大部分元素的屬性笙瑟。
表2-1 適用于大部分元素的屬性

屬性 值 描述
class classname 規(guī)定元素的類名（classname）
id id 規(guī)定元素的唯一id
style style_definition 規(guī)定元素的行內(nèi)樣式
title text 規(guī)定元素的額外信息（可在工具提示中顯示）

    元素名和屬性名都不區(qū)分大小寫楼镐，一般采用小寫。當(dāng)元素?fù)碛胁恢挂粋€(gè)屬性的時(shí)候往枷，屬性之間用空格隔開(kāi)框产，代碼如下。
    <div class="btn" id="start">Start</div>

2.1.2 HTML文檔的基礎(chǔ)結(jié)構(gòu)
以一個(gè)最簡(jiǎn)單的HTML文檔為例错洁，來(lái)展示HTML文檔的基礎(chǔ)結(jié)構(gòu)秉宿，代碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是HTML文檔</p>
</body>
</html>
下面分別解釋這段代碼中每個(gè)元素的含義屯碴。
<!DOCTYPE html>聲明位于HTML文檔的第一行描睦，為瀏覽器提供HTML的版本信息。
<html>元素是頁(yè)面的根元素窿锉，所有的HTML文檔都應(yīng)該有一個(gè)<html>元素。<html>元素可以包 含<head>和<body>兩部分膝舅。
<head>元素包含整個(gè)網(wǎng)頁(yè)的信息嗡载。
<title>元素用于文檔的名字，通常出現(xiàn)在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄中仍稀。
<meta>元素通常用于指定網(wǎng)頁(yè)的描述及其他元數(shù)據(jù)洼滚。<meta>元素的charset屬性告知瀏覽器此頁(yè)面的字符編碼格式，如charset=“UTF-8”表示此頁(yè)面遵循unicode(萬(wàn)國(guó)碼)的編碼標(biāo)準(zhǔn)技潘。
<body>元素用來(lái)存放文檔的具體內(nèi)容遥巴。
<p>元素表示一個(gè)段落千康。

2.1.3 元素的嵌套

    1.什么是嵌套
    把一個(gè)元素放入另一個(gè)元素中稱為元素的嵌套，嵌套構(gòu)建HTML頁(yè)面的方式铲掐∈捌可以將<head>元素嵌套在<html>元素中，<p>元素嵌套在<body>元素中摆霉，代碼如下豪椿。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>一起進(jìn)入<em>HTML樂(lè)園</em></p>
</body>
</html>
2.樹形圖表示嵌套關(guān)系
為了更好地理解這段代碼，將代碼轉(zhuǎn)換為樹形圖的形式携栋，如圖2-8所示搭盾。


image.png

圖2-8 元素的嵌套樹形圖

    3.使用元素的嵌套保證標(biāo)簽的正確匹配
     嵌套的一個(gè)重要作用就是保證標(biāo)簽的正確匹配。正確的標(biāo)簽匹配情況是婉支，一個(gè)元素完全包含于另一個(gè)元素鸯隅，如圖2-9所示，代碼如下向挖。

<p>一起進(jìn)入<em>HTML樂(lè)園</em></p>


image.png

圖2-9 em元素完全嵌套在p元素中

提示：<em>標(biāo)簽的作用是強(qiáng)調(diào)內(nèi)容蝌以。

     當(dāng)兩個(gè)元素互相交叉的時(shí)候，標(biāo)簽的匹配會(huì)出現(xiàn)錯(cuò)誤户誓，如圖2-10所示饼灿，代碼如下。

     <p>一起進(jìn)入<em>HTML樂(lè)園</p></em>

image.png

圖2-10 em元素從p元素中漏出帝美，嵌套錯(cuò)誤
錯(cuò)誤的嵌套可能導(dǎo)致網(wǎng)頁(yè)無(wú)法在瀏覽器上使用碍彭，正確的嵌套可以避免標(biāo)簽不匹配。

2.2 文本元素
平時(shí)經(jīng)常用到的標(biāo)題悼潭、段落庇忌、超鏈接、文本換行舰褪、被CSS取代的文本格式化等都是HTML中的文本元素皆疹，使用正確的文本元素對(duì)網(wǎng)頁(yè)的可讀性有重要意義，請(qǐng)務(wù)必認(rèn)真學(xué)習(xí)占拍。
2.2.1.標(biāo)題
HTML標(biāo)題是通過(guò)<h1>到<h6>標(biāo)簽定義的略就，<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題晃酒，瀏覽器顯示效果如圖2-11所示表牢，代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>This is a h1</h1>
<h2>This is a h2</h2>
<h3>This is a h3</h3>
<h4>This is a h4</h4>
<h5>This is a h5</h5>
<h6>This is a h6</h6>
</body>
</html>


image.png

圖2-11 HTML標(biāo)題
用戶可以通過(guò)標(biāo)題快速瀏覽網(wǎng)頁(yè)贝次，所以用標(biāo)題呈現(xiàn)文檔結(jié)構(gòu)是很重要的崔兴。應(yīng)該按照標(biāo)題的級(jí)別，將<h1>用作最重要的主標(biāo)題，將<h2>用作次重要的標(biāo)題敲茄，依此類推至<h6>位谋。這和一本書的結(jié)構(gòu)是一樣的，有章堰燎、節(jié)掏父、小節(jié)等。請(qǐng)確保將<h1>到<h6>只用于標(biāo)題爽待，不要僅僅為了生成粗體或大號(hào)的文本而使用標(biāo)題標(biāo)簽损同。
2.2.2 段落——<p>標(biāo)簽
在一篇文章中，作者一般會(huì)使用分段的形式劃分不同的內(nèi)容鸟款，使文章易于閱讀膏燃。<p>可以在網(wǎng)頁(yè)中實(shí)現(xiàn)分段的效果，使每個(gè)段落都另起一行并且段落之間會(huì)有間距何什。接下來(lái)通過(guò)一首古詩(shī)來(lái)了解<p>的樣式组哩，瀏覽器顯示效果如圖2-12所示，代碼如下处渣。
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>竹里館</h1>
<p>獨(dú)坐幽篁里伶贰，
彈琴?gòu)?fù)長(zhǎng)嘯。</p>
<p>
深林人不知罐栈，
明月來(lái)相照黍衙。</p>
</body>
</html>

image.png

圖2-12 <p>標(biāo)簽的應(yīng)用
由圖2-12可以看出，瀏覽器會(huì)自動(dòng)忽略標(biāo)簽內(nèi)部的換行荠诬。請(qǐng)記住琅翻，瀏覽器不會(huì)介意換行、回車和大多數(shù)的空格柑贞，標(biāo)簽中的內(nèi)容可以在任意一行開(kāi)始方椎，在任意一行結(jié)束。因此钧嘶，只需要確認(rèn)元素是以開(kāi)始標(biāo)簽開(kāi)始棠众、以結(jié)束標(biāo)簽結(jié)束就夠了。
2.2.3 HTML折行——
標(biāo)簽
如果需要在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行有决，請(qǐng)使用
闸拿，瀏覽器顯示效果如圖2-13所示，代碼如下书幕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>竹里館</h1>
<p>獨(dú)坐幽篁里新荤，

彈琴?gòu)?fù)長(zhǎng)嘯。</p>
<p>
深林人不知按咒，

明月來(lái)相照迟隅。</p>
</body>
</html>
image.png

圖2-13 換行符效果

元素只代表?yè)Q行，所以它沒(méi)有元素內(nèi)容励七，也沒(méi)有結(jié)束標(biāo)簽智袭。這類沒(méi)有標(biāo)記文本和結(jié)束標(biāo)簽的元素稱為空元素。
提示：一般來(lái)說(shuō)掠抬，HTML元素都需要開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽吼野。但是空元素例外，這一類HTML元素沒(méi)有內(nèi)容两波，所以不需要閉合瞳步。

    常見(jiàn)空元素：

（1）
：表示換行。
（2）

：表示分隔線腰奋。
（3）<input>：表示文本框等单起。
（4）<img>：表示圖片。
（5）<meta> ：常用于指定網(wǎng)頁(yè)的描述劣坊、關(guān)鍵詞嘀倒、文件的最后修改時(shí)間、作者及其他元數(shù)據(jù)局冰。

    讀者在閱讀一本書的時(shí)候测蘑，通常會(huì)寫批注幫助理解。代碼的世界同樣如此康二，開(kāi)發(fā)人員利用注釋標(biāo)注某一部分代碼的功能碳胳，使代碼易于閱讀。
    如果用“<!--”和“-->”把注釋內(nèi)容括起來(lái)沫勿，瀏覽器就會(huì)把注釋內(nèi)容通通忽略掉挨约。
    在古詩(shī)最前面加入注釋“這是一首王維的古詩(shī)”，且不顯示在瀏覽器的頁(yè)面中藕帜，瀏覽器顯示效果如圖2-14所示烫罩，代碼如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<h1>竹里館</h1>
<p>獨(dú)坐幽篁里洽故，

彈琴?gòu)?fù)長(zhǎng)嘯贝攒。</p>
<p>
深林人不知，

明月來(lái)相照时甚。</p>
</body>
</html>

image.png

圖2-14 瀏覽器沒(méi)有識(shí)別注釋內(nèi)容
2.2.4 文本格式化
文本格式化標(biāo)簽可以實(shí)現(xiàn)文本的不同樣式和意義隘弊，如<em>標(biāo)簽表示強(qiáng)調(diào)，<i>標(biāo)簽表示斜體荒适，<strong>標(biāo)簽表示加粗等梨熙。格式化文本的效果現(xiàn)在已經(jīng)被CSS樣式所取代，只要簡(jiǎn)單了解即可刀诬。文本格式化的相關(guān)標(biāo)簽如表2-2所示咽扇。
表2-2 文本格式化的相關(guān)標(biāo)簽
標(biāo)簽 描述
<b> 定義粗體文本
<big> 定義大號(hào)字
<em> 定義著重文字
<i> 定義斜體字
<small> 定義小號(hào)字
<strong> 定義加重語(yǔ)氣
定義下標(biāo)字
定義上標(biāo)字
<ins> 定義插入字
<del> 定義刪除字
文本格式化在瀏覽器上的顯示效果如圖2-15所示，代碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
subscript
<br />
This text contains
superscript
</body>
</html>
image.png

圖2-15 文本格式化在瀏覽器上的顯示效果

2.3 HTML超鏈接——<a>標(biāo)簽

2.3.1 初識(shí)超鏈接
超鏈接由<a>標(biāo)簽定義质欲，幾乎在所有網(wǎng)頁(yè)中都可以找到超鏈接的存在树埠。超鏈接主要實(shí)現(xiàn)兩個(gè)功能：①頁(yè)面之間的跳轉(zhuǎn)；②書簽嘶伟。
大家通過(guò)常用的搜索引擎“百度”就能體會(huì)超鏈接的功能怎憋。在瀏覽器的地址欄中輸入www.baidu.com進(jìn)入百度首頁(yè)，在搜索欄中輸入關(guān)鍵詞“超鏈接”九昧，如圖2-16所示绊袋。

image.png

圖2-16 超鏈接案例
單擊第一個(gè)詞條“超鏈接 百度百科”，會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面铸鹰，如圖2-17所示癌别。這一步操作中的跳轉(zhuǎn)功能就是通過(guò)超鏈接<a>元素來(lái)實(shí)現(xiàn)的。超鏈接在本質(zhì)上屬于網(wǎng)頁(yè)的一部分蹋笼，它是一種允許頁(yè)面之間進(jìn)行鏈接的元素规个。各個(gè)網(wǎng)頁(yè)鏈接在一起才能真正構(gòu)成一個(gè)網(wǎng)站。
image.png

圖2-17 跳轉(zhuǎn)結(jié)果
在圖2-18頁(yè)面的“目錄”中姓建，單擊最后一條“動(dòng)態(tài)靜態(tài)”诞仓，可以看到頁(yè)面跳轉(zhuǎn)到了同一頁(yè)面的最下部，即圖2-19所示的“動(dòng)態(tài)靜態(tài)”位置速兔，這是運(yùn)用了超鏈接的錨點(diǎn)功能墅拭，也可以理解為書簽功能。
image.png

圖2-18 單擊“動(dòng)態(tài)靜態(tài)”
image.png

圖2-19 同一頁(yè)面跳轉(zhuǎn)
提示：所謂超鏈接涣狗，是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系谍婉。這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置镀钓，還可以是一個(gè)圖片穗熬，一個(gè)電子郵件地址，一個(gè)文件丁溅，甚至是一個(gè)應(yīng)用程序唤蔗。
2.3.2 超鏈接語(yǔ)法
超鏈接語(yǔ)法如下。
<a href="url">Link text</a>
<a>標(biāo)簽的常用屬性如表2-3所示窟赏。
表2-3 <a>標(biāo)簽的常用屬性
屬性 值 描述
href URL 規(guī)定鏈接指向的頁(yè)面的URL妓柜，可以是任何有效文檔的相對(duì)或絕對(duì)路徑
target _blank
_parent
_self
_top 規(guī)定在何處打開(kāi)鏈接文檔
2.3.3 href屬性——絕對(duì)路徑和相對(duì)路徑
1.絕對(duì)路徑
要找到需要的文件就必須知道文件位置，而表示文件位置的方式就是路徑涯穷。例如棍掐，一張圖片的路徑是C:/website/img/photo.jpg，只要看到這個(gè)路徑拷况，不需要其他信息作煌，就知道photo.jpg文件是在計(jì)算機(jī)C盤的website目錄下的img子目錄中掘殴，類似這樣完整的描述文件位置的路徑就是絕對(duì)路徑。
在文件上單擊右鍵粟誓，選擇屬性即可查看該文件的路徑信息杯巨，如圖2-20所示。
image.png

圖2-20 查看文件的絕對(duì)路徑
2.相對(duì)路徑
相對(duì)路徑努酸，顧名思義就是自己相對(duì)于目標(biāo)位置的路徑。如圖2-21所示杜恰，將文件夾1視為根目錄获诈，文件1.html通過(guò)<a>元素鏈接到文件2.html。此時(shí)心褐，文件2.html的絕對(duì)路徑是：文件夾1/網(wǎng)頁(yè)文件/文件2.html舔涎；文件2.html的相對(duì)路徑是：文件2.html。
image.png

圖2-21 查看文件的相對(duì)路徑
將圖2-21中的文件夾網(wǎng)頁(yè)文件從文件夾1移動(dòng)到文件夾2逗爹，結(jié)果如圖2-22所示亡嫌。此時(shí)，文件2.html的絕對(duì)路徑是：文件夾1/文件夾2/網(wǎng)頁(yè)文件/文件2.html掘而；文件2.html的相對(duì)路徑是：文件2.html挟冠。
image.png

圖2-22 查看文件的相對(duì)路徑
在寫一個(gè)網(wǎng)站的時(shí)候，一般把多個(gè)頁(yè)面放在一個(gè)文件夾下袍睡。當(dāng)移動(dòng)項(xiàng)目文件夾時(shí)知染，文件的絕對(duì)路徑發(fā)生變化，相對(duì)路徑不變斑胜。所以控淡，如果一個(gè)文件夾里面有多個(gè)頁(yè)面互相跳轉(zhuǎn)的時(shí)候，請(qǐng)使用相對(duì)路徑止潘，避免因文件夾的移動(dòng)等因素造成的路徑變化掺炭。
提示：URL的寫法
每使用一次“..”，就上溯一層父目錄凭戴，如果你想上溯兩層父目錄涧狮，可以寫成“../..”
請(qǐng)嚴(yán)格地使用HTML語(yǔ)言中的符號(hào)，所有字符應(yīng)該是英文字符么夫，不可以用“\”來(lái)代替“/”

    練習(xí)
    （1）以文件夾1為根目錄勋篓，請(qǐng)寫出圖2-23中所有文件的路徑。
    （2）在文件1.html中魏割，寫出文件3.html的絕對(duì)路徑和相對(duì)路徑譬嚣。
    （3）在文件5.html中，寫出文件3.html的絕對(duì)路徑和相對(duì)路徑钞它。
image.png

圖2-23 文件路徑示意圖
2.3.4 target屬性
<a>標(biāo)簽的target屬性規(guī)定在何處打開(kāi)鏈接文檔拜银。默認(rèn)值為_(kāi)self殊鞭，在當(dāng)前窗口中打開(kāi)被鏈接文檔。
表2-4 terget屬性值
值 描述
_blank 在新窗口中打開(kāi)被鏈接文檔
_self 默認(rèn)尼桶。在相同的窗口中打開(kāi)被鏈接文檔
_parent 在父框架集中打開(kāi)被鏈接文檔
_top 在整個(gè)窗口中打開(kāi)被鏈接文檔
framename 在指定的框架中打開(kāi)被鏈接文檔
2.3.4 <a>元素的應(yīng)用
【應(yīng)用2-1】頁(yè)面跳轉(zhuǎn)
使用<a>標(biāo)簽操灿，實(shí)現(xiàn)從“超鏈接.html”跳轉(zhuǎn)到“目標(biāo).html”。
首先泵督，準(zhǔn)備好兩個(gè)頁(yè)面作為素材趾盐。新建文件夾“超鏈接”，在文件夾內(nèi)新建兩個(gè)文件夾小腊，分別命名為“超鏈接.html”和“目標(biāo).html”救鲤，如圖2-24所示。


image.png

圖2-24 超鏈接文件夾
其次秩冈，使用之前學(xué)過(guò)的元素本缠，在目標(biāo)頁(yè)面中寫任意內(nèi)容，在瀏覽器運(yùn)行測(cè)試頁(yè)面是否能正常顯示入问，瀏覽器顯示效果如圖2-25所示丹锹，代碼如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目標(biāo)頁(yè)面</title>
</head>
<body>
<h1>目標(biāo)頁(yè)面</h1>
<h3>第一小節(jié)</h3>
<p>所謂超鏈接芬失，是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系楣黍。這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同頁(yè)面上的不同位置棱烂，還可以是一個(gè)圖片锡凝，一個(gè)電子郵箱地址，一個(gè)文件垢啼，甚至是一個(gè)應(yīng)用程序窜锯。
</p>
</body>
</html>

image.png

圖2-25 在瀏覽器中打開(kāi)目標(biāo)文件
最后，在“超鏈接.html”中寫入一個(gè)<a>元素芭析，在標(biāo)簽內(nèi)寫入文本“跳轉(zhuǎn)到目標(biāo)頁(yè)面”并且指定<a>元素的href屬性為目標(biāo)鏈接的地址锚扎，瀏覽器顯示效果如圖2-26所示，代碼如下馁启。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目標(biāo)頁(yè)面</title>
</head>
<body>
<a href="目標(biāo).html">跳轉(zhuǎn)到目標(biāo)頁(yè)面</a>
</body>
</html>
image.png

圖2-26 在瀏覽器打開(kāi)超鏈接文件
這樣驾孔，就在頁(yè)面上成功寫入了一個(gè)超鏈接，單擊“跳轉(zhuǎn)到目標(biāo)頁(yè)面”惯疙，頁(yè)面跳轉(zhuǎn)到“目標(biāo).html”翠勉。

【應(yīng)用2】設(shè)置錨點(diǎn)
準(zhǔn)備如圖2-27所示的素材頁(yè)面，實(shí)現(xiàn)點(diǎn)擊頁(yè)面最頂部的“書簽：第六小節(jié)”霉颠，使頁(yè)面滾動(dòng)到第六小節(jié)所在位置对碌，代碼如下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>目標(biāo)頁(yè)面</title>
</head>
<body>
<a href="">書簽：第六小節(jié)</a>
<h3>第一小節(jié)</h3>








<h3>第二小節(jié)</h3>








<h3>第三小節(jié)</h3>








<h3>第四小節(jié)</h3>








<h3>第五小節(jié)</h3>








<h3>第六小節(jié)</h3>
<p>所謂超鏈接蒿偎，是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系朽们。這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)怀读，也可以是
相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片骑脱，一個(gè)電子郵件地址菜枷，一個(gè)文件，甚至是一個(gè)應(yīng)用程序叁丧。
</p>
<h3>第七小節(jié)</h3>








<h3>第八小節(jié)</h3>








<h3>第九小節(jié)</h3>








<h3>第十小節(jié)</h3>








<h3>第十一小節(jié)</h3>








<h3>第十二小節(jié)</h3>








</body>
</html>

image.png

圖2-27 素材頁(yè)面
用id屬性為第六小節(jié)的位置設(shè)置錨點(diǎn)啤誊，代碼如下。
<h3 id="mark">第六小節(jié)</h3>
id屬性會(huì)在文檔中放置一個(gè)標(biāo)志拥娄，id名是獨(dú)一無(wú)二的蚊锹。在一個(gè)HTML文檔中，一個(gè)id不可以出現(xiàn)多次条舔。
提示：在HTML4之前，需要使用name屬性來(lái)建立錨點(diǎn)乏矾，后被id屬性代替孟抗。HTML5已經(jīng)不再支持name屬性。
在超鏈接中添加標(biāo)記钻心，使用“#”+id名稱的方式來(lái)尋找id標(biāo)志凄硼，代碼如下。
<a href="#mark">書簽：第六小節(jié)</a>
此時(shí)捷沸，單擊超鏈接摊沉，頁(yè)面就會(huì)跳轉(zhuǎn)到用id標(biāo)記過(guò)的位置，如圖2-28所示痒给。
image.png

圖2-28 跳轉(zhuǎn)到被標(biāo)記的位置
2.4 HTML圖像——<img>標(biāo)簽
在HTML中说墨，圖像由<img>標(biāo)簽定義。<img>是空標(biāo)簽苍柏，它只包含屬性尼斧，并且沒(méi)有閉合標(biāo)簽，語(yǔ)法如下试吁。
<img src="url" alt="text">
表2-5 <img>標(biāo)簽的必選屬性

屬性 值 描述
alt text 規(guī)定圖像的替代文本
src URL 規(guī)定顯示圖像的URL
1.src屬性
src是<img>標(biāo)簽的必選屬性棺棵，它的值是圖像文件的URL，也就是引用該圖像文件的絕對(duì)路徑或相對(duì)路徑熄捍。
提示：為了方便整理文檔烛恤，創(chuàng)作者通常會(huì)把圖像文件存放在一個(gè)單獨(dú)的文件夾中，命名為pics余耽、images等谣膳。

    width控制圖片的寬度许溅，height控制圖片的高度。如果沒(méi)有設(shè)置寬高的話入热，瀏覽器上會(huì)顯示圖片原本的尺寸。

    2.alt屬性
    alt屬性指定了替代文本错森，當(dāng)圖片地址有誤時(shí)，顯示alt里面的文字內(nèi)容。
    設(shè)置圖片的寬度和高度疙挺，并且在圖片地址出錯(cuò)的時(shí)候用文字標(biāo)注圖片信息，瀏覽器顯示效果如圖2-29怜浅、圖2-30所示铐然，代碼如下。

<img src="img/lemon.jpg" alt="檸檬" width="400px" height="300px"/>


image.png

圖2-29 當(dāng)圖片地址正確的時(shí)候


image.png

圖2-30 當(dāng)圖片地址出錯(cuò)的時(shí)候
【案例2-1】一個(gè)超鏈接圖片

把圖片標(biāo)簽嵌套在超鏈接標(biāo)簽里面恶座，得到一個(gè)超鏈接圖片搀暑，如圖2-31所示。單擊圖片跨琳，可以跳轉(zhuǎn)到鏈接的地址自点，如圖2-32所示。代碼如下脉让。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目標(biāo)頁(yè)面</title>
</head>
<body>
<a ><img src="img/bee.png"/></a>
</body>
</html>


image.png

圖2-31 超鏈接圖片在瀏覽器上的顯示效果
image.png

圖2-32 單擊圖片跳轉(zhuǎn)到鏈接中的地址
2.4 列表
列表是一種常用的將內(nèi)容分類的方法桂敛。
表2-6 列表相關(guān)的元素
標(biāo)簽 描述

<ol> 定義有序列表。
<ul> 定義無(wú)序列表溅潜。
<li> 定義列表項(xiàng)术唬。
<dl> 定義定義列表。
<dt> 定義定義項(xiàng)目滚澜。
<dd> 定義定義的描述粗仓。
2.4.1 無(wú)序列表
當(dāng)列表中的順序不重要并且更改次序不影響表達(dá)的時(shí)候，通常使用無(wú)序列表<ul>元素设捐。無(wú)序列表的子項(xiàng)是且只能是<li>元素借浊，不可以在<ul>元素中嵌套其他元素。
不規(guī)定樣式的時(shí)候萝招，無(wú)序列表使用粗體圓點(diǎn)標(biāo)識(shí)它的每一個(gè)子項(xiàng)巴碗，如圖2-33所示，代碼如下即寒。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>grape</li>
</ul>
</body>
</html>


image.png

圖2-33 無(wú)序列表在瀏覽器上的顯示效果
2.4.2 有序列表
當(dāng)列表的順序有意義并且不能隨意更改的時(shí)候橡淆，要使用有序列表<ol>。有序列表的子項(xiàng)同樣只能是<li>標(biāo)簽母赵。
不規(guī)定樣式的時(shí)候逸爵，有序列表使用阿拉伯?dāng)?shù)字標(biāo)識(shí)它的每一個(gè)子項(xiàng)，如圖2-34所示凹嘲，代碼如下师倔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>grape</li>
</ol>
</body>
</html>
image.png

圖2-34 有序列表在瀏覽器上的顯示效果
2.4.3 自定義列表
自定義列表不僅僅是一個(gè)項(xiàng)目，而是項(xiàng)目及其注釋的組合周蹭。
自定義列表以<dl>標(biāo)簽開(kāi)始趋艘，自定義列表項(xiàng)以<dt>開(kāi)始疲恢，自定義列表項(xiàng)的定義以<dd>開(kāi)始，如圖2-35所示瓷胧，代碼如下显拳。
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>apple</dt>
<dd>a red fruit</dd>
<dt>banana</dt>
<dd>a yellow fruit</dd>
<dt>orange</dt>
<dd>an orange fruit</dd>
<dt>grape</dt>
<dd>a purple fruit</dd>
</dl>
</body>
</html>

image.png

圖2-35 自定義列表在瀏覽器上的顯示效果
2.4.4 列表的嵌套
列表之間可以相互嵌套，如圖2-36所示搓萧，代碼如下杂数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>咖啡</li>
<li>奶茶</li>
<li>果汁
<ul>
<li>蘋果汁</li>
<li>橙汁</li>
<li>檸檬汁</li>
<li>西瓜汁</li>
</ul>
</li>
</ol>
</body>
</html>


image.png

圖2-36 有序列表內(nèi)部嵌套了一個(gè)無(wú)序列表
列表嵌套需要注意哪些事項(xiàng)呢？先來(lái)觀察A同學(xué)提交的練習(xí)結(jié)果是否有問(wèn)題瘸洛，如圖2-37所示揍移，代碼如下。
<body>
<h1>列表嵌套</h1>
<ul>
<li>咖啡</li>
<ol>
<li>意式濃縮</li>
<li>拿鐵</li>
<li>卡布奇諾</li>
</ol>
<li>茶</li>
<ol>
<li>紅茶</li>
<li>綠茶</li>
<li>果茶</li>
</ol>
<li>果汁</li>
<li>可樂(lè)</li>
<li>雪碧</li>
</ul>
</body>


image.png

圖2-37 A同學(xué)練習(xí)結(jié)果的渲染結(jié)構(gòu)
從A同學(xué)練習(xí)結(jié)果的渲染結(jié)構(gòu)上看反肋，并不能發(fā)現(xiàn)問(wèn)題所在那伐。但是，HTML使用不同標(biāo)簽的目的并不是為了表現(xiàn)外觀石蔗，而是構(gòu)建合理的結(jié)構(gòu)罕邀。從結(jié)構(gòu)上分析，很容易找到A同學(xué)的錯(cuò)誤抓督，如圖2-38所示燃少。
image.png

圖2-38 A同學(xué)練習(xí)結(jié)果的結(jié)構(gòu)
列表是一種表示順序的文本形式束亏，嵌套可以表現(xiàn)內(nèi)容之前的包含關(guān)系铃在。
分析上述案例的語(yǔ)義，可以得知這是一個(gè)對(duì)飲料的分類碍遍，即飲料分為咖啡定铜、茶、果汁怕敬、雪碧揣炕、可樂(lè)5種類型。其中东跪，咖啡又包括意式濃縮畸陡、拿鐵、卡布奇諾3種類型虽填，茶包括紅茶丁恭、綠茶、果茶3種類型斋日。因此牲览，該案例中存在兩個(gè)問(wèn)題：①?zèng)]有將咖啡種類放在咖啡目錄下，沒(méi)有將茶的種類放在茶目錄下恶守，結(jié)構(gòu)上違背了列表原先要表達(dá)的實(shí)際含義第献；②違反了<ul>元素只能有<li>這一種元素作為子項(xiàng)贡必。
修改之后正確的代碼如下。
<body>
<h1>列表嵌套</h1>
<ul>
<li>咖啡
<ol>
<li>意式濃縮</li>
<li>拿鐵</li>
<li>卡布奇諾</li>
</ol>
</li> 
        <li>茶

<ol>
<li>紅茶</li>
<li>綠茶</li>
<li>果茶</li>
</ol>
</li>
<li>果汁</li>
<li>可樂(lè)</li>
<li>雪碧</li>
</ul>
</body>

思考與練習(xí)
一庸毫、填空題
1.（ ）標(biāo)簽必須直接嵌套于ul仔拟、ol中。

二岔绸、單選題

  1. 選出你認(rèn)為最合理的定義標(biāo)題的方法理逊。（ ）
    A.<span class=”heading”>文章標(biāo)題</span>
    B.<p><b>文章標(biāo)題</b></p>
    C.<h1>文章標(biāo)題</h1>
    D.<strong>文章標(biāo)題</strong>

2.
標(biāo)簽在HTML中的語(yǔ)義為（ ）。
A.換行
B.B.強(qiáng)調(diào)
C.C.段落
D.D.標(biāo)題

3.以下哪個(gè)是無(wú)序列表盒揉？（ ）
A.<UL>
B.<OL>
C.<DIR>
D. <DL>

  1. 下面哪一個(gè)標(biāo)符可以用來(lái)?yè)Q行晋被？（ ）
    A.<HR>
    B.<BR>
    C.<TR>
    D.<T1>

三、多選題
1.一份標(biāo)準(zhǔn)的HTML文檔有哪幾個(gè)必須的HTML標(biāo)簽刚盈？（ ）
A.<html>
B.<head>
C.<title>
D.<body>
四羡洛、判斷題
1.在不涉及樣式情況下，頁(yè)面元素的優(yōu)先顯示與結(jié)構(gòu)擺放順序無(wú)關(guān)藕漱。（ ）
2.在不涉及樣式情況下欲侮，頁(yè)面元素的優(yōu)先顯示與標(biāo)簽選用無(wú)關(guān)。（ ）

五肋联、簡(jiǎn)答題

  1. img的alt和title有哪些不同點(diǎn)威蕉？
  2. 寫出ul、ol橄仍、dl三種列表的HTML結(jié)構(gòu)韧涨。

實(shí)踐題
請(qǐng)完成本章開(kāi)頭的“本章任務(wù)”,如圖2-39所示。


image.png

圖2-39 咖啡館介紹

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末侮繁，一起剝皮案震驚了整個(gè)濱河市虑粥，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌宪哩，老刑警劉巖娩贷，帶你破解...
    沈念sama閱讀 218,036評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異锁孟，居然都是意外死亡彬祖，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門品抽，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)储笑，“玉大人，你說(shuō)我怎么就攤上這事桑包∧吓睿” “怎么了？”我有些...
    開(kāi)封第一講書人閱讀 164,411評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)赘方。 經(jīng)常有香客問(wèn)我烧颖，道長(zhǎng)，這世上最難降的妖魔是什么窄陡？ 我笑而不...
    開(kāi)封第一講書人閱讀 58,622評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任炕淮，我火速辦了婚禮，結(jié)果婚禮上跳夭，老公的妹妹穿的比我還像新娘涂圆。我一直安慰自己，他們只是感情好币叹，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布润歉。 她就那樣靜靜地躺著，像睡著了一般颈抚。 火紅的嫁衣襯著肌膚如雪踩衩。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 51,521評(píng)論 1贊 304
  • 城市分裂傳說(shuō)
    那天贩汉，我揣著相機(jī)與錄音驱富，去河邊找鬼。 笑死匹舞，一個(gè)胖子當(dāng)著我的面吹牛褐鸥，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赐稽，決...
    沈念sama閱讀 40,288評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼叫榕，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了又憨？” 一聲冷哼從身側(cè)響起翠霍，我...
    開(kāi)封第一講書人閱讀 39,200評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤锭吨，失蹤者是張志新（化名）和其女友劉穎蠢莺，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體零如，經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡躏将，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了考蕾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祸憋。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖肖卧，靈堂內(nèi)的尸體忽然破棺而出蚯窥，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 35,673評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布拦赠，位于F島的核電站巍沙，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏荷鼠。R本人自食惡果不足惜句携，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3贊 329
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望允乐。 院中可真熱鬧矮嫉，春花似錦、人聲如沸牍疏。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,889評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鳞陨。三九已至挺尿，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間炊邦，已是汗流浹背编矾。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,011評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留馁害，地道東北人窄俏。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像碘菜，于是被迫代替她去往敵國(guó)和親凹蜈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶的忍啸，因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體仰坦。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 3,888評(píng)論 0贊 0
  • ??DOM（文檔對(duì)象模型）是針對(duì) HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）悄晃。 ??DOM 描繪...
    霜天曉閱讀 3,644評(píng)論 0贊 7
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,127評(píng)論 0贊 17
  • --- 學(xué)習(xí)目標(biāo): - 了解常用瀏覽器 - 掌握WEB標(biāo)準(zhǔn) - 理解標(biāo)簽語(yǔ)義化 - 掌握常用的排版標(biāo)簽 ...
    紅豆丁244閱讀 1,375評(píng)論 0贊 2
  • 瀏覽器與服務(wù)器的基本概念 瀏覽器（安裝在電腦里面的一個(gè)軟件） 作用： ①將網(wǎng)頁(yè)內(nèi)容渲染呈現(xiàn)給用戶查看凿滤。 ②讓用戶通...
    云還灬閱讀 1,118評(píng)論 0贊 0