「Web前端開發」-13-CSS盒模型應用之樣式重置

節課介紹CSS為大家列舉盒模型的應用中的樣式重置(CSS Reset)。

.html5的新特性

文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
新的解析順序：不再基于SGML。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
語意化更好的內容元素:article、footer、header、nav、section;
表單控件:calendar、date、time、email、url、search;
input元素的新類型：date, email, url等。
新的技術: webworker, websocket, Geolocation;
新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。
全域屬性：id, tabindex, repeat。
新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新應用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，naframes；

2.什么是Retina 顯示屏，帶來了什么問題？

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍
那么，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數，并使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那么寫法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px

.css{font-size:20px}

3.ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉？

ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}

4.部分android系統中元素被點擊時產生的邊框怎么去掉

android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

 a,button,input,textarea{ 
                  -webkit-tap-highlight-color: rgba(0,0,0,0;) 
                  -webkit-user-modify:read-write-plaintext-only; 
            }

-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
另外，有些機型去除不了，如小米2
對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽

5.webkit表單元素的默認外觀怎么重置

通用

.css{-webkit-appearance:none;}

偽元素改變number類型input框的默認樣式

input[type=number]::-webkit-textfield-decoration-container { 
    background-color: transparent;    
} 
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
}                      
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
}

6.webkit表單輸入框placeholder的顏色值能改變么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

7.禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

8.禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

9.打電話發短信寫郵件怎么實現

打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發短信，winphone系統無效 <a href="sms:10086">發短信給: 10086</a>
寫郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

10.audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

11.閃屏怎么解決

通過transform的3d屬性改去硬件加速可以解決閃屏問題
開啟硬件加速
1）解決頁面閃白
2）保證動畫流暢

.css { 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
}

12.取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

13.android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

14.設計高性能CSS3動畫的幾個要素

盡可能地使用合成屬性transform和opacity來設計CSS3動畫
不使用position的left和top來定位
利用translate3D開啟GPU加速

15.fixed bug

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案
可用isroll.js，暫無完美方案

16.移動H5前端性能優化指南

1）PC優化手段在Mobile側同樣適用
2）在Mobile側我們提出三秒種渲染完成首屏指標
3）基于第二點，首屏加載3秒完成或使用Loading
4）基于聯通3G網絡平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB
5）Mobile側因手機配置原因，除加載外渲染速度也是優化重點
6）基于第五點，要合理處理代碼減少渲染損耗
7）基于第二、第五點，所有影響首屏加載和渲染的代碼應在處理邏輯中后置
8）加載完成后用戶交互使用時也需注意性能

優化指南

[加載優化]

加載過程是最為耗時的過程，可能會占到總耗時的80%時間，因此是優化的重點

減少HTTP請求

因為手機瀏覽器同時響應請求為4個請求（Android支持4個，iOS 5后可支持6個），所以要盡量減少頁面的請求數，首次加載同時請求數不能超過4個
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖

緩存

使用緩存可以減少向服務器的請求數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）
a) 緩存一切可緩存的資源
b) 使用長Cache（使用時間戳更新Cache）
c) 使用外聯式引用CSS、JavaScript

壓縮HTML、CSS、JavaScript

減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，并在服務器端設置GZip
a) 壓縮（例如，多余的空格、換行符和縮進）
b) 啟用GZip

無阻塞

寫在HTML頭部的JavaScript（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，避免在HTML標簽中寫Style，JavaScript放在頁面尾
部或使用異步方式加載

使用首屏加載

首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化

按需加載

將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會導致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載

預加載

大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面。但Loading時間過長，會造成用戶流失
對用戶行為分析，可以在當前頁加載下一頁資源，提升速度
a) 可感知Loading(如進入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁）

壓縮圖片

圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示
PS：過度壓縮圖片大小影響圖片顯示效果
a) 使用智圖（ http://zhitu.isux.us/ ）
b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優于JPG 2. PNG8優于GIF)
e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機屏幕一般寬度））

減少Cookie

Cookie會影響加載速度，所以靜態資源域名不使用Cookie

避免重定向

重定向會影響加載速度，所以在服務器正確設置避免重定向

異步加載第三方資源

第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源

[腳本執行優化]

處理不當會阻塞頁面加載、渲染，因此在使用時需當注意
CSS寫在頭部，JavaScript寫在尾部或異步
避免圖片和iFrame等的空Src
空Src會重新加載當前頁面，影響速度和效率

盡量避免重設圖片大小

重設圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能

圖片盡量避免使用DataURL

DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長

[CSS優化]

* 盡量避免寫在HTML標簽中寫Style屬性
* 避免CSS表達式
CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式
* 移除空的CSS規則
空的CSS規則增加了CSS文件的大小，且影響CSS樹的執行，所以需移除空的CSS規則
* 正確使用Display的屬性
Display屬性會影響頁面的渲染，因此請合理使用
a) display:inline后不應該再使用width、height、margin、padding以及float
b) display:inline-block后不應該再使用float
c) display:block后不應該再使用vertical-align
d) display:table-*后不應該再使用margin或者float
* 不濫用Float
Float在渲染時計算量比較大，盡量減少使用
* 不濫用Web字體
Web字體需要下載，解析，重繪當前頁面，盡量減少使用
* 不聲明過多的Font-size
過多的Font-size引發CSS樹的效率
* 值為0時不需要任何單位
為了瀏覽器的兼容性和性能，值為0時不要帶單位
* 標準化各種瀏覽器前綴
a) 無前綴應放在最后
b) CSS動畫只用（-webkit- 無前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無前綴四種，（-o-Opera瀏覽器改用blink內核，所以淘汰）
* 避免讓選擇符看起來像正則表達式高級選擇器執行耗時長且不易讀懂，避免使用

[JavaScript執行優化]

* 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage
* 緩存Dom選擇與計算
每次Dom選擇都要計算，緩存他
* 緩存列表.length
每次.length都要計算，用一個變量保存這個值
* 盡量使用事件代理，避免批量綁定事件
* 盡量使用ID選擇器
ID選擇器是最快的
* TOUCH事件優化
使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作

[渲染優化]

* HTML使用Viewport
Viewport可以加速頁面的渲染，請使用以下代碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
* 減少Dom節點
Dom節點太多影響頁面的渲染，應盡量減少Dom節點
* 動畫優化
a) 盡量使用CSS3動畫
b) 合理使用requestAnimationFrame動畫代替setTimeout
c) 適當使用Canvas動畫 5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）

* 高頻事件優化
Touchmove、Scroll 事件可導致多次渲染
a) 使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染
b) 增加響應變化的時間間隔，減少重繪次數

* GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用（PS：過渡使用會引發手機過耗電增加）

17.CSS動畫與Canvas動畫性能優劣分析

a、CSS動畫更為流暢、但內存占用過高，動畫元素在5個以內更為推薦；
b、Canvas動畫存在丟幀現象，這一現象在android中低端手機中表現更為明顯；
c、5個以內動畫元素，選用CSS動畫，80%的設備幀頻可達80以上。

18.移動端怎么自適應？

移動自適應的話一般我用的話就是rem，通過rem單位配合媒體查詢來完成幾個屏幕的適配，以iphone6位標準，向上適配plus，向下適配5，不做過多的適配，有時候有要求的話也用js來控制rem的大小達到適配效果，rem是相對單位，相對html元素的font-size值的屬性，比如font-size:100px; 的話1rem就得100px，這樣我子需要通過改變html的font-size就可以達到適配效果

19.如何開啟gpu加速？

為動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個屬性都會開啟GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU

通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速之后，有些時候可能會導致瀏覽器頻繁閃爍或抖動，可以嘗試以下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速的適用范圍：
使用很多大尺寸圖片(尤其是PNG24圖)進行動畫的頁面。
頁面有很多大尺寸圖片并且進行了css縮放處理，頁面可以滾動時。
使用background-size:cover設置大尺寸背景圖，并且頁面可以滾動時
編寫大量DOM元素進行CSS3動畫時(transition/transform/keyframes/absTop&Left)
使用很多PNG圖片拼接成CSS Sprite時

20.物理1像素怎么實現

可以使用after插入的形式將寬度設置為200%，然后通過css transfrom 的scale 縮放0.5倍；

21.響應式布局的原理

Meta標簽定義

使用 viewport meta 標簽在手機瀏覽器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通過快捷方式打開時全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態欄

常用于布局的CSS Media Queries有以下幾種：

設備類型(media type):

all所有設備；
screen 電腦顯示器；
print打印用紙或打印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文打印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。

設備特性(media feature):

width瀏覽器寬度；
height瀏覽器高度；
device-width設備屏幕分辨率的寬度值；
device-height設備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。

設置多種視圖寬度

@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}

百分比布局

寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

響應式圖片

#wrap img{
  max-width:100%;
  height:auto;
}

字體設置

一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。em是相對于根元素的，需重置根元素字體大小：

html{font-size:100%;}

完成后，可以定義響應式字體：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}

22.常見dpr

ip6 2、ip6+ 3、nexus5 3

23.移動端適配

1) 自適應方式
2) viewport方式
3) rem方式
4) scale()方式縮放

24.常用meta

IE相關

避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
為不支持viewport的IE Mobile設定寬度 <meta name="MobileOptimized" content="320" />
是否對手持設備友好 <meta name="HandheldFriendly" content="true" />

UC瀏覽器

強制豎屏 <meta name="screen-orientation" content="portrait" />
強制全屏 <meta name="full-screen" content="yes" />
應用模式 <meta name="browsermode" content="application" />

X5瀏覽器

強制豎屏 <meta name="x5-orientation" content="portrait" />
強制全屏 <meta name="x5-fullscreen" content="yes" />
應用模式 <meta name="x5-page-mode" content="app" />

360

開啟極速模式 <meta name="renderer" content="webkit" />

iphone相關

啟動webapp功能刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
控制狀態欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
開啟號碼或郵箱檢測 <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png”>

25.html5的新api

重力感應 DeviceOrientation
手機加速傳感器 DeviceMotion

history 詳細

以Pjax方式實現SPA history.pushState history.replaceState 解決ajax不能后退前進問題
儲存
客戶端儲存：localStorage sessionStorage>只存在一個會話周期內
跨域
postMessage

26.你們怎么嵌套h5頁面的

一般都是我前端這邊開發好h5頁面給安卓和ios一個地址，然后告訴他們我有哪些方法，然后在做一些安卓ios的接口調用，安卓和ios會吧他們的方法提供一個接口給我，我直接調用就好，一般都是調用一些分享，跳轉之類的方法

27.webapp你主要做的是哪個模塊，是頁面布局做的多還是交互做的多

webapp部分基本都是我自己負責開發，頁面交互都做，因為當時剛去公司的時候公司也剛往這個方向發展，讓我也一直就負責移動業務這塊的內容

28.bootstrap用嗎？

用，bootstrap組要就是用一些他的樣式組件，還有最強大的就是他的刪格化系統了，做響應式的網站，我們公司的官網就是用的bootstrap做的，后臺管理系統也是，當時也是我負責給我們公司的后臺分享如何使用bootstrap的

章學習目標

了解HTML語法的發展歷史
了解HTML語義化
掌握HTML常用標簽的基本使用

第一章已經介紹過HTML是一門超文本標記語言，通過HTML標記對網頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網頁中的信息進行控制，沒有介紹，本章就將從HTML的歷史、語義化、常用標簽三個方面詳細講解HTML。

2.1 HTML歷史

俗話說“了解歷史，才能明白當下，進而展望未來”。所以了解HTML的歷史，有利于更好的掌握HTML這門語言。

2.1.1 HTML歷史版本

像大多數軟件、硬件一樣，HTML發展至今，經歷了幾個版本，新增了許多HTML標記，同時也淘汰了一些標記，接下來介紹HTML在不同時期所對應的一些重要版本，具體如下：

超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準）
HTML 2.0——1995年11月，IETF推薦標準。
HTML 3.2——1997年1月14日，W3C推薦標準。
HTML 4.0——1997年12月18日，W3C推薦標準。
HTML 4.01——1999年12月24日，W3C推薦標準。
HTML 5——2014年10月28日，W3C推薦標準。

HTML沒有1.0版本，最早的HTML官方規范，是由IETF（Internet Engineering Task Force，因特網工程任務組）發布的HTML 2.0。之后W3C成為HTML語言標準的制定者，發布了3.2、4.0、4.01和5等多個后續重要版本。通常所說的HTML5指的就是5這個最新的版本。

本教材涉及的所有規范及語法，都是嚴格按照HTML5標準進行講解的，在后面的章節中還會詳細的介紹HTML5及相關內容。

2.1.2 HTML與XHTML關系

在HTML語法上很寬松，如標簽和屬性可以是大寫、小寫，或者任意大小寫字母的組合，標簽可以不閉合等。有些設備很難兼容這些松散的語法，如手機、打印機等，這并不符合標準的發展趨勢，因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作組。轉而開發XHTML，2000年1月26日發布XHTML1.0。

XHTML是更嚴謹純凈的HTML版本，XHTML比HTML語法更加規范和嚴謹，目的是為了實現HMTL向XML過渡，讓作者按照統一的風格來編寫標簽，HTML中標簽和屬性不區分大小寫，而有效的XHTML 文檔則要求所有標簽和屬性必須一律小寫，當然還有一些其他的規范和要求，這里不再贅述。XML雖然數據轉換能力強，完全可以替代HTML，但是面對互聯網上大量基于HTML編寫的網站，直接采用XML還為時過早，因此在HTML4.0的基礎上，用XML的語法規則對其進行擴展，得到了XHTML。

注：XML指可擴展標記語言（EXtensible Markup Language），用來傳輸和存儲數據。XML語言也可以做為很多語言的基礎語言，例如：XHTML、SVG等。

HTML的不同版本對<!DOCTYPE>寫法也有不同，具體如下：

HTML4.01中<!DOCTYPE>寫法：

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.01中<!DOCTYPE>寫法

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5中<!DOCTYPE>寫法

	<!DOCTYPE HTML>

因為 HTML 4.01和XHTML1.0 基于 SGML，所以 DOCTYPE 需要對 DTD 進行引用。而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，因此HTML5的DOCTYPE寫法相當簡單。這里建議讀者都采用最新的HTML5版本<!DOCTYPE>寫法，第一章已經介紹過在DW工具中默認設置不同類型的文檔聲明。

2.2 什么是HTML語義化

所謂HTML語義化指的是，根據網頁中內容的結構，選擇適合的HTML標簽進行編寫。HTML語義化的意義主要有以下幾點：

在沒有CSS的情況下，頁面也能呈現出很好的內容結構、代碼結構。
有利于SEO，讓搜索引擎爬蟲更好的理解網頁，從而獲取更多的有效信息，提升網頁的權重。
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
便于團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。

HTML標簽都具備語義化，根據網頁展示的內容結構，選擇正確的HTML標簽進行解析與編碼。

注： SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目的。

2.3 HTML常用標簽

HTML標簽非常多，有些由于歷史問題已經廢棄，有些屬于HTML5中新添加的，這部分H5新標簽會在H5章節中給讀者講解，本章主要講解一些HTML中常用標簽的使用。

2.3.1 標題標簽

瀏覽新聞類網頁時，經常能看見文章的標題，如圖2.1所示。

圖2.1 千鋒教育新聞標題

圖2.1的標題就是用HTML中的標題標簽來實現的，HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標簽來定義標題部分，其語法格式如下：

	<hn 屬性=“屬性值”>標題文本</hn>

接下來通過案例來演示標題標簽，如例2-1所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>定義標題</title>
 6 </head>
 7 <body>
 8 <h1>這是一級標題</h1>
 9 <h2>這是二級標題</h2>
 10 <h3>這是三級標題</h3>
 11 <h4>這是四級標題</h4>
 12 <h5>這是五級標題</h5>
 13 <h6>這是六級標題</h6>
 14 </body>
 15 </html>

運行結果如圖2.2所示。

圖2.2 標題標簽顯示效果

從上例運行結果可以看出，默認情況下標題文字的顯示方式是加粗左對齊，并且從<h1>到<h6>字號遞減，如果想改變標題的對齊方式，需要用到align屬性，其取值如表2.1。

接下來通過案例來演示標題標簽對齊方式的設置及效果，如例2-2所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>定義標題對齊方式</title>
 6 </head>
 7 <body>
 8 <h1>這是一級標題</h1>
 9 <h2 align="left">這是二級標題</h2>
 10 <h3 align="center">這是三級標題</h3>
 11 <h4 align="right">這是四級標題</h4>
 12 </body>
 13 </html>

運行結果如圖2.3所示。

圖2.3標題對齊方式顯示效果

標題很重要，它有利于網頁搜索引擎的優化，其中<h1>標題的重要性最高，<h6>標題的重要性最低，一般一個頁面只能有一個<h1>，而<h2>~<h6>可以有多個。

2.3.2 段落標簽

瀏覽新聞類網頁時，經常能看見文章的段落，如圖2.4所示。

圖2.4 千鋒教育新聞段落

圖2.4中的段落在HTML中使用<p>標簽實現，用于在網頁中把文字有條理地顯示出來，其語法格式如下：

	<p 屬性=“屬性值”>段落文本</p>

接下來通過案例來演示段落標簽，如例2-3所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>段落標簽</title>
 6 </head>
 7 <body>
 8 <h1 align="center" >扣丁學堂</h1></h1>
 9 <p align="left">扣丁學堂是中國IT培訓教育品牌領導者,擁有最新最全的IT培訓視頻課
 10 程,專注于發布和更新iOS培訓、Android培訓、HTML5培訓、UI培訓、PHP培訓視頻教程,
 11 著力于培養移動互聯網人才。</p>
 12 <p align="ri">遇到IT技術難題，就上扣丁學堂學堂。</p>
 13 </body>
 14 </html>

運行結果如圖2.5所示。

圖2.5 段落標簽顯示效果

2.3.3 文本格式化標簽

文本格式化標簽就是針對文本進行各種格式化的標簽，例如加粗、斜體、上標、下標等。如表2.2所示。

表2.2中列出了對文本格式化的幾種標簽，下面將詳細介紹這幾種標簽的使用和效果。

1. <strong>標簽

<strong>標簽將文本定義為語氣更強的強調內容，展示效果為加粗。接下來通過案例演示<strong>標簽，如例2-4所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本格式化</title>
 6 </head>
 7 <body>
 8 <strong>用良心做教育！</strong>
 9 </body>
 10 </html>

運行結果如圖2.6所示。

圖2.6 strong標簽顯示效果

注意：<b>標簽的展示效果跟<strong>完全相同，但是<b>標簽不具備語義化強調的作用，只是顯示加粗效果。

2. <em>標簽

<em>標簽也是將文本定義為強調的內容，只不過比<strong>標簽強調的稍弱些，展示效果為斜體，接下來通過案例來演示<em>標簽，如例2-5所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本格式化</title>
 6 </head>
 7 <body>
 8 <em>用良心做教育！</em>
 9 </body>
 10 </html>

運行結果如圖2.7所示。

圖2.7 em標簽顯示效果

注意：<i>標簽的展示效果跟<em>完全相同，但是<i>標簽不具備語義化強調的作用，只是顯示斜體效果。

3. <sup>和<sub>標簽

<sup>標簽用于將文本定義為上標文本，<sub>標簽用于將文本定義為下標文本，接下來通過案例來演示<sup>和<sub>標簽，如例2-6所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本格式化</title>
 6 </head>
 7 <body>
 8 <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
 9 <p>H<sub>2</sub>O</p>
 10 </body>
 11 </html>

運行結果如圖2.8所示。

圖2.8 sup、sub標簽顯示效果

4. <del>和<ins>標簽

<del>標簽可用于定義已被刪除的文本， <ins>標簽可用于定義已經被插入的文本，<del>標簽與<ins>標簽配合使用，來描述文檔中的更新和修正。接下來通過案例來演示<del>和<ins>標簽，如例2-7所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本格式化</title>
 6 </head>
 7 <body>
 8 <p><del>刪除文本加刪除線</del></p>
 9 <p><ins>插入文本加下畫線</ins></p>
 10 </body>
 11 </html>

運行結果如圖2.9所示。

圖2.9 del、ins標簽顯示效果

文本格式化標簽，一定要根據它們的語義來記憶，至于它們的默認樣式，后續可以通過CSS方式進行修改。

2.3.4 引用標簽

引用標簽就是針對文本進行各種引用的標簽，例如縮略詞、短語解釋、著作、地址等。主要劃分成幾大類，如表2.3所示。

表2.3中列出了引用標簽的幾種分類，下面進行詳細介紹。

1. <blockquote>和<q>標簽

<blockquote>和<q>標簽都是對文本的解釋引用，<blockquote>標簽引用是用大段的段落進行解釋，而<q>標簽引用是小段的短語進行解釋，接下來通過案例來演示<blockquote>和<q>標簽，如例2-8所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本格式化</title>
 6 </head>
 7 <body>
 8 <p>"死而后已"一語出自諸葛亮《出師表》：<blockquote>“凡事如是，難可逆見，
 9 臣鞠躬盡瘁，死而后已，至于成敗利鈍，非臣之明所能逆睹也。"</blockquote></p>
 10 <p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>
 11 </body>
 12 </html>

運行結果如圖2.10所示。

圖2.10 <blockquote>、<q>標簽顯示效果

由例2-8中可以看出，<blockquote>標簽左右會空出一些距離，<q>標簽會自動加上引號。

2. <abbr>標簽

<abbr>標簽用來引用縮寫或首字母縮略語，接下來通過案例來演示<abbr>標簽，如例2-9所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>引用標簽</title>
 6 </head>
 7 <body>
 8 <p><abbr title="World Health Organization">WHO</abbr> 
 9 成立于 1948 年。</p>
 10 </body>
 11 </html>

運行結果如圖2.11所示。

圖2.11 <abbr>標簽顯示效果

例2-9中可以看到一個title屬性，當鼠標移入到設置title的區域時，就會顯示提示信息。

3. <address>和<cite>標簽

<address>標簽用來引用地址信息，<cite>標簽用來引用著作的標題，展示效果為斜體，接下來通過一個案例來演示<address>和<cite>標簽，如例2-10所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>引用標簽</title>
 6 </head>
 7 <body>
 8 <address>
 9 <p>網易北京公司</p>
 10 <p>地址:北京市海淀區西北旺東路10號院</p>
 11 <p>郵編:100084</p>
 12 </address>
 13 <p><cite>資治通鑒</cite>由北宋司馬光主編的一部多卷本編年體史書</p> 
 14 </body>
 15 </html>

運行結果如圖2.12所示。

圖2.12 <address>、<cite>標簽顯示效果

2.3.5 水平線標簽

有時為了使文檔結構清晰、層次分明，常常需要在網頁中添加一些水平線將段落與段落之間分隔開，HTML中使用<hr>標簽來創建橫跨網頁的水平線。另外<hr>屬于單標簽，在網頁中輸入一個<hr/>標簽，就添加了一條默認樣式的水平線，<hr>標簽的常用屬性如表2.4所示。

接下來通過案例來演示水平線標簽，如例2-11所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>水平線標簽</title>
 6 </head>
 7 <body>
 8 <p align="center">扣丁學堂</p>
 9 <hr color="#003399" width="100" size="5">a
 10 <p align="left">遇到IT難題，就上扣丁學堂。</p>
 11 <hr>
 12 <p>遇到問題，在線解答。</p>
 13 </body>
 14 </html>

運行結果如圖2.13所示。

圖2.13 <hr>標簽顯示效果

例2-11中，第9行定義水平線標簽，并設置了color、width、size屬性，并沒有設置align屬性，可以發現align屬性默認居中對齊，第11行定義水平線標簽，其屬性都是默認值，可發現width屬性默認的是瀏覽器窗口的100%。

2.3.6 特殊符號

在編寫一些文本時，經常會遇到輸入法無法輸入的字符，如?（注冊商標）、?（版權符）等，還有往一段文字中加入多個空格時，頁面并不會解析出多個空格。這些無法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準備了專門的代碼，如表2.5。

接下來通過案例來演示這些特殊字符表示代碼，如例2-12所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>特殊符號</title>
 6 </head>
 7 <body>
 8 <p>?注冊商標 ?版權 空格 < 小于號 >大于號</p>
 9 <p>&和號 ￥人民幣 °攝氏度 ±正負號 ×乘號</p>
 10 <p> ÷除號 1上標1 2上標2 3上標3</p>
 11 </body>
 12 </html>

運行結果如圖2.14所示。

圖2.14 難輸入符號顯示效果

在DW中，只要輸入一個&符號，就可以看到相關特殊符號的提示信息。如圖2.15所示。

圖2.15 DW中特殊符號提示功能

2.3.7 圖像標簽

每一張網頁都離不開圖片元素，在網頁中添加圖片是非常重要的操作，如圖2.16所示。

圖2.16 圖片效果展示

HTML中使用<img>標簽來添加圖片，<img>屬于單標簽，其語法格式如下

	<img src=”圖像URL”/>

其中src是用于指定圖像文件的路徑和文件名的屬性，是img標簽的必需屬性。接下來用案例來簡單演示img標簽的使用。如例2-13所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>圖像標簽</title>
 6 </head>
 7 <body>
 8 <img src="qianfeng.jpg"/>
 9 </body>
 10 </html

運行結果如圖2.17所示。

圖2.17 圖像標簽顯示效果

src屬性引用的是當前圖片的地址，圖片的名為qianfeng，圖片的格式為.png，接下來針對圖片的地址和圖片的格式進行詳細講解。

1. 圖片的地址

src屬性引用的是當前圖片的地址，所謂地址就是一個文件的路徑。讀者在網頁中通過地址來找到相應位置的元素。那么地址分為相對地址與絕對地址，相對地址即被引入的文件相對與當前頁面的地址。絕對地址即文件在網絡或本地的絕對位置。

相對地址有以下三種寫法，具體如下。

	<img src=”qianfeng.jpg”/>
	<img src=”img/qianfeng.jpg”/>
	<img src=”../img/qianfeng.jpg”/>

第一個相對地址說明當前頁面和圖片在同一個目錄下。第二個相對地址說明圖片在頁面同級的img文件夾中。第三個相對地址說明圖片在頁面上一級的img文件夾中。

絕對地址有以下兩種寫法，具體如下。

	<img src="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012080430754.jpg"/>
	<img src=http://www.jungjaehyung.com/uploadfile/2024/1012/20241012080432911.jpg”/>

第一個絕對地址在本地D盤的相應文件夾下。第二個絕對地址在網絡中的相應文件夾下。

當前網頁和圖片文件如果同時移動到其他位置時，相對地址是不會出問題的，因為兩個文件的相對位置并沒有發生變化。而絕對地址則會有問題，因為地址是唯一的路徑。所以在開發網頁的時候建議讀者盡量采用相對地址。

2. 圖片格式

網頁中加載圖像如果太大會造成網頁加載速度慢，太小圖片會顯示不清晰，在網頁中選擇合適的圖片格式加載顯得尤為重要，常用的圖片格式主要有jpg、png和gif三種格式，接下將分別進行詳細講解。

（1）jpg格式

jpg格式的圖片是一種有損壓縮的圖像格式，即每次修改圖片都會造成一些圖像數據的丟失。jpg是特別為照片圖像設計的文件格式，可以很好地處理大面積色調的圖像，一般在網頁中用來展示色彩豐富的圖像。如圖2.18所示。

圖2.18 jpg格式圖片顯示效果

（2）png格式

png格式的圖片相對于jpg、gif格式最大的優點是體積小，支持alpha透明（全透明、半透明、全不透明），可以很好地理透明方式的圖片，比如網頁中的logo圖片可以在不同的背景底色下完美展現。如圖2.19所示，但png不支持動畫。另外需要注意，IE6,可以支持png-8，但是在處理png-24的透明時會顯示為灰色。通常，圖片保存為png-8會在同等質量下獲得比gif更小的體積，而半透明的圖片只能使用png-24。

圖2.19 png格式圖片顯示效果

（3）gif格式

gif格式圖片最重要的特點是支持動畫，可以很好地處理動畫效果的圖片，如網頁中的廣告圖片。如圖2.20所示。同時gif是一種無損的圖像格式，修改圖片幾乎不會造成圖像數據的丟失。而且gif也支持透明（全透明和全不透明），因此很適合在網頁中使用。但gif只能處理256種顏色，在網頁制作中，常用于logo、小圖標及其他色彩相對單一的圖像。

圖2.20 gif格式圖片顯示效果

<img>標簽除了src屬性外，還包括一些其他屬性，如表2.6所示。

表2.6中簡單描述了img標簽中常用的屬性，為了使初學者更好地理解和應用這些屬性，接下來進行詳細講解。

1. alt屬性

alt屬性是圖片顯示不出來時的提示文字。當設置了alt屬性后，如果圖片正常顯示的話，是看不到任何效果的，只有當圖片地址出問題導致圖片不顯示時，才可以看到alt的提示信息。接下來通過案例來演示alt屬性，如例2-14所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>圖像標簽</title>
 6 </head>
 7 <body>
 8 <img src="qianfeng.jpg">
 9 <img src="qianfengError.jpg" alt="千鋒教育">
 10 </body>
 11 </html>

運行結果如圖2.21所示。

圖2.21 alt屬性顯示效果

2. title屬性

title屬性是鼠標移到圖片上的提示文字。當設置了title屬性后，如果鼠標移入到圖片上時，就會顯示title的提示信息。接下來通過案例來演示title屬性，如例2-15所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>圖像標簽</title>
 6 </head>
 7 <body>
 8 <img src="qianfeng.jpg" title="千鋒教育">
 9 </body>
 10 </html>

運行結果如圖2.22所示。

圖2.22 title屬性顯示效果

alt屬性和title屬性都是有利于SEO搜索引擎的優化和用戶體驗的提升，只是它們展示的方式不一樣。

2.3.8 鏈接標簽

單個網頁不能容納網站需要的所有信息，需要多個網頁構成，這時就點擊鏈接可以從一張網頁跳轉到另一張網頁，如圖2.23所示。

圖2.23鏈接效果展示

HTML中使用<a></a>標簽來定義鏈接部分實現網頁的跳轉，其語法格式如下。

接下來通過案例來演示鏈接標簽，如例2-16所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>鏈接標簽</title>
 6 </head>
 7 <body>
 8 <a href="2-15.html">打開一個新的網頁</a>
 9 <a >千鋒官網</a>
 10 <a href="../照片.rar">下載壓縮包文件</a>
 11 </body>
 12 </html>

運行結果如圖2.24所示。

圖2.24 鏈接標簽顯示效果

鏈接和圖像一樣，地址可以是相對地址或絕對地址。鏈接除了可以鏈接地址外，還可以鏈接其他的元素（壓縮包，word文檔，PPT文檔等）。例2-16中第一個鏈接打開的是一個本地中的相對地址，第二個鏈接打開的是一個網絡上的絕對地址，第三個鏈接點擊后會下載一個壓縮包文件。

鏈接可以針對文字，也可以針對圖片，當點擊圖片時會打開一個新的網頁，接下來通過案例來演示，如例2-17所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>鏈接標簽</title>
 6 </head>
 7 <body>
 8 <a href="2-15.html">
 9 <img src="qianfeng.jpg">
 10 </a>
 11 </body>
 12 </html>

運行結果如圖2.25所示。

圖2.25 鏈接圖片的顯示效果

例2-16、2-17中<a>標簽只定義了href屬性，<a>標簽除了href屬性外還包含target和name兩個重要屬性，下面就來分別介紹<a>標簽的這三個屬性。

1. href屬性

herf屬性就是來指定鏈接目標的url地址，為<a>標簽定義herf屬性后，它就有了鏈接的功能。

2.name屬性

有些網頁的內容較多，頁面過長，如百度百科千鋒教育，只能不斷的拖動滾動條來瀏覽網頁，查看所需要的內容，效率較低，而且很不方便，這時可以通過<a>標簽的name屬性實現站內跳轉，這種站內的跳轉的方式也稱錨點操作，接下來通過案來演示name屬性的作用，如例2-18所示。

1 <!doctype html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>鏈接標簽</title>

6 </head>

7 <body>

8 <a href="#h5Pos">HTML5</a>

9 <a href="#phpPos">PHP</a>

10 <p>點擊上面的鏈接可跳轉到指定的位置</p>

11 <a name="h5Pos">HTML5的內容</a>

12 <p>HTML5</p>

13 <p>HTML5</p>

14 <p>HTML5</p>

15 <p>HTML5</p>

16 <p>HTML5</p>

17 <a name="phpPos">PHP的內容</a>

18 <p>PHP</p>

19 <p>PHP</p>

20 <p>PHP</p>

21 <p>PHP</p>

22 <p>PHP</p>

23 </body>

24 </html>

運行結果如圖2.26所示。

3.target屬性

target屬性用于指定鏈接頁面的打開方式，其取值如表2.7所示

目前常用的取值有_self和_blank兩種，接下來通過案例來演示這兩種取值的功能，如例2-19所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>鏈接標簽</title>
 6 </head>
 7 <body>
 8 <a href="2-3.html" target="_self">當前窗口打開鏈接</a>
 9 <a href="2-3.html" target="_blank">新窗口打開鏈接</a>
 10 </body>
 11 </html>

運行結果如圖2.27所示。

圖2.27 target屬性的顯示效果

一般情況下，target只用到“_self”和“_blank”這兩個屬性值，其他兩個不需要深究，因為幾乎用不到。

2.3.9 列表標簽

列表是網頁中一種常用的數據排列方式，在網頁中到處都可以看到列表的身影，如圖2.28、圖2.29，都是網頁中常見的列表。

HTML中列表分為有序列表、無序列表和定義列表三種，下面將分別介紹這三種列表。

1. 有序列表

在HTML中用<ol>標簽表示有序列表，列表項目用<li>標簽表示，列表項目有先后順序之分，因此稱為有序列表。接下來通過案例來了解有序列表，如例2-20所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>鏈接標簽</title>
 6 </head>
 7 <body>
 8 <ol>
 9 <li>HTML</li>
 10 <li>CSS</li>
 11 <li>JavaScript</li>
 12 <li>PHP</li>
 13 <li>JAVA</li>
 14 </ol>
 15 </body></html>

運行結果如題2.30所示。

圖2.30 有序列表展示效果

圖2.31中可以看到前面的阿拉伯數字是默認效果，可以通過有序列表的type屬性來設置不同的顯示效果，其取值如表2.8所示。

接下來通過案例來演示type屬性的用法，如例2-21所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>列表標簽</title>
 6 </head>
 7 <body>
 8 <ol type="a">
 9 <li>HTML</li>
 10 <li>CSS</li>
 11 <li>JavaScript</li>
 12 <li>PHP</li>
 13 <li>Java</li>
 14 </ol>
 15 </body>
 16 </html>

運行結果如圖2.31所示。

圖2.31 有序列表展示效果

在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性用于規定項目符號的起始值，為<li>定義value屬性用來規定項目符號的數字。

以上的效果都是HTML自帶效果，如果效果上有更多的需求，可以配合CSS來完成，例如圖2.32的效果，讀者可以在學習完CSS時再來實現。

圖2.32 CSS美化有序列表

2. 無序列表

在HTML中用<ul>標簽表示無序列表，列表項目用<li>標簽表示，列表項目沒有先后順序之分，因此稱為無序列表。接下來通過案例來演示無序列表，如例2-22所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset=”utf-8”>
 5 <title>列表標簽</title>
 6 </head>
 7 <body>
 8 <ul>
 9 <li>HTML</li>
 10 <li>CSS</li>
 11 <li>JavaScript</li>
 12 <li>PHP</li>
 13 <li>JAVA</li>
 14 </ul>
 15 </body>
 16 </html>

運行結果如圖2.33所示。

圖2.33 無序列表展示效果

跟有序列表類似，讀者可以看到默認情況下無序列表前面會有一個黑色的小圓點，同樣可以通過type屬性修改其顯示效果，type屬性取值如表2.9。

接下來通過案例來演示無序列表type屬性取值，如例2-23所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset=”utf-8”>
 5 <title>列表標簽</title>
 6 </head>
 7 <body>
 8 <ul type=”circle”>
 9 <li>HTML</li>
 10 <li>CSS</li>
 11 <li>JavaScript</li>
 12 <li>PHP</li>
 13 <li>JAVA</li>
 14 </ul>
 15 </body>
 16 </html>

運行結果如圖2.34所示。

圖2.34 無序列表展示效果

<li></li>之間相當于一個容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允許直接在<ul></ul>標記中輸入文字。

3. 定義列表

定義列表通常用于對專業術語或名詞進行解釋和描述，與有序列表和無序列表不同，定義列表項目前沒有任何項目符號。其語法如下。

	<dl>
	<dt>定義名詞</dt>
	<dd>名詞解釋和描述</dd>
	……
	</dl>

上面的語法中，<dl></dl>標簽用于定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中<dt></dt>標簽用于定義專業術語或名詞，<dd></dd>標簽用于對名詞進行解釋和描述。一對<dt></dt>可以對應多對<dd></dd>，即一個名詞可以有多個解釋和描述。接下來通過案例來演示定義列表，如例2-24所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>列表標簽</title>
 6 </head>
 7 <body>
 8 <dl>
 9 	 <dt>HTML</dt>
 10 <dd>超文本標記語言</dd>
 11 <dt>CSS</dt>
 12 <dd>層疊樣式表</dd>
 13 <dt>JavaScript</dt>
 14 <dd>網頁腳本語言</dd>
 15 </dl>
 16 </body>
 17 </html>

運行結果如圖2.35所示。

圖2.35 定義列表展示效果

定義列表在實際開發中不常用，大多數情況還是使用有序列表和無序列表，后面章節中還會詳細講解HTML標簽使用規范。

2.3.10 <div>與<span>

div全稱為division，“分割、分區”的意思，<div>標簽用來劃分一個區域，相當于一塊區域容器，可以容納段落、標題、表格、圖像等各種網頁元素。即HTML中大多數的標簽都可以嵌套在<div>標簽中，<div>中還可以嵌套多層<div>，用來將網頁分割成獨立的、不同的部分，來實現網頁的規劃和布局。如圖2.36為阿里汽車和潮電影網站的布局。都是使用<div>標簽來實現的。

圖2.36 淘寶網區塊展示效果

接下來通過案例來簡單演示<div>標簽的使用，如例2-25所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>div/span</title>
 6 </head>
 7 <body>
 8 <div>區域1
 9 <p>這是一個段落</p>
 10 </div>
 11 <div>區域2
 12 <h6>這是一個段落</h6>
 13 </div>
 14 <div>區域3
 15 <hr align="left" width="50" color="#00FF66">
 16 </div>
 17 </body>
 18 </html>

運行結果如圖2.37所示。

圖2.37 div標簽展示效果

<span>標簽是用來修飾文字的，也叫做內聯標簽，如圖2.38。

圖2.38 千鋒教育文字修飾效果

接下來通過案例來演示<span>標簽，如例2-26所示。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>div/span</title>
 6 </head>
 7 <body>
 8 <span>文字修飾1</span>
 9 <span>文字修飾2</span>
 10 <span>文字修飾3</span>
 11 </body>
 12 </html>

運行結果如圖2.39所示。

圖2.39 span標簽展示效果

<div>標簽和<span>標簽，多數情況下需要配合CSS樣式，在后續的章節中，再詳細的講解<div>標簽和<span>標簽的用法。

2.4 本章小結

通過本章的學習，首先介紹HTML語法的發展歷史和HTML語義化的含義。然后對HTML常用標簽進行了講解，如標題、段落、列表等。通過本章的學習，能掌握HTML常用標簽，能初步編寫基本的HTML網頁。

2.5 習題

1. 填空題

(1) 網頁加載時常用圖片的格式為、、。

(2) 圖像標簽的屬性src用于指定圖像和的屬性。

(3) 文件的路徑可以分為和兩種。

(4) <strong>標簽強調文本。

(5) 是為了實現HMTL向XML過渡，讓作者按照統一的風格來編寫標簽。

2.選擇題

(1) 在一個網頁中，只能出現一次的標題標簽是（）。

A．<h1> B．<h2>

C．<h3> D．<h4>

(2) a標簽的target屬性中哪一個值是在一個全新的空白窗口中打開鏈接（）。

A．_self B．_blank

C．_top D．_parent

(3) 定義列表不包括下面哪個標簽（）。

A．<dl> B．<dt>

C．<dd> D．<ol>

(4) 強調字體是斜體的標簽是（）。

A．<sup> B．<del>

C．<em> D．<strong>

(5) 設置水平線對齊方式的屬性是（）。

A．size B．align

C．width D．color

3.思考題

(1) 請簡述什么是HTML語義化？

(2) 請簡述有序列表與無序列表之間的區別？

內容來源書籍：《HTML5從入門到精通》，一本Web前端實用性綜合技術圖書。

簡介：《HTML5從入門到精通》倡導“快樂學習，實戰就業”的理念，作為初學者高品質的入門教材之一，免費提供一站式教學服務包，附贈配套PPT、教學視頻、教學大綱、考試系統、測試題等資源。且書本內容覆蓋全面、講解詳細，其中包括標簽語義化、標簽使用規范、選擇器類型、盒模型、標簽分類、樣式重置、CSS優化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時，本教材通過總結、歸納HTML、CSS、CSS3動畫與3D及移動端布局與響應式開發等核心知識點，并從項目開發的實際需求入手，將理論知識與實際應用相結合，以此幫助初學者全面、系統、深入、透徹地理解HTML5的基礎知識和技術，使他們快速地成長為初級程序員，并擁有一定的項目開發經驗，從而在職場中擁有一個較高的起點。

在線咨詢

上一篇：國有銀行校招正式啟動，2020郵儲先行，廣東有22個
下一篇：3、Jenkins持續集成之基礎配置

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商