成 | 語言 | 描述 |
結構 | HTML | 網頁元素和內容 |
表現 | CSS | 網頁元素頁面樣式 |
行為 | JavaScript | 網頁交互 |
HTML,超文本標記語言(Hyper Text Markup Language),是一門描述性語言。標記,標簽,元素,叫法不同,意思相同。HTML超文本標記語言主要通過標簽的方式,對網頁頁面的文本、圖片、音頻、視頻等內容進行描述。學習HTML,就是學習各種標簽,來搭建網頁的結構。
結構:!DOCTYPE
說明:作用是告訴瀏覽器用哪個文檔規范來解析文檔
標簽:html
說明:用于搭建HTML網頁文檔結構和網頁布局
?標簽:head
說明:用于定義HTML網頁文檔的頭部,它是所有頭部元素的容器?
?標簽:body
說明:用來定義HTML網頁文檔的主體區域?
?標簽:meta
說明:用來描述HTML網頁文檔的屬性?
?標簽:title
說明:用來放到HTML網頁文檔的頭部,是搜索引擎首要抓取的目標代碼?
標簽,也叫作標記,是由一對尖括號<>,里面包含單詞組成
<html></html>
<br>
嵌套關系
<html>
<head>
</head>
</html>
并列關系
<head>
</head>
<body>
</body>
注釋用來幫助程序員記錄程序設計方法,輔助程序閱讀
雙標簽,定義網頁的標題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度一下,你就知道了</title>
</head>
<body>
</body>
</html>
是單標簽,用來描述HTML網頁文檔的屬性
屬性值 | 說明 |
keywords | 網頁關鍵字,多個逗號隔開 |
description | 網頁描述 |
author | 作者 |
copyright | 版權信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 網頁關鍵字 -->
<meta name="keywords" content="html,css,javascript">
<!-- 網頁描述 -->
<meta name="description" content="基礎前端知識">
<!-- 網頁作者 -->
<meta name="author" content="buddha">
<!-- 網頁版權信息 -->
<meta name="copyright" content="版權所有,翻版必究">
</head>
<body>
</body>
</html>
標簽屬性:
1、標簽的屬性寫在開始標簽內部
2、標簽名與屬性之間要有空格隔開
3、一個標簽可以同時存在多個屬性
4、屬性之間以空格隔開
5、屬性沒有先后順序之分
屬性值 | 說明 |
Content-Type | 定義網頁所使用編碼 |
refresh | 定義網頁自動刷新跳轉 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 設置網頁編碼完整寫法 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 設置網頁編碼簡寫寫法 -->
<meta charset="UTF-8">
<!-- 網頁打開3秒后跳去百度 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>
</body>
</html>
是雙標簽,用來定義標簽的css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* css內聯樣式寫這里 */
</style>
</head>
<body>
</body>
</html>
是單標簽,是用來引入外部css樣式文件
<link rel="stylesheet" href="css/index.css" type="text/css">
是雙標簽,是用來寫JavaScript代碼的地方
<!DOCTYPE html>
<html lang="en">
<head>
<script>
/* 這里寫JavaScript代碼 */
</script>
</head>
<body>
</body>
</html>
是單標簽,是用來設置整個網頁的基礎路徑。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://pic.rmb.bdstatic.com">
</head>
<body>
<img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>
開發中很少用到,有人使用知道就行
上面所述標簽是放在head標簽里的,接下來接觸的標簽都是放在body標簽內的
是雙標簽,h是header的縮寫
<h1>h1標簽:一級標題</h1>
<h2>h2標簽:二級標題</h2>
<h3>h3標簽:三級標題</h3>
<h4>h4標簽:四級標題</h4>
<h5>h5標簽:五級標題</h5>
<h6>h6標簽:六級標題</h6>
特點:
1、字體加粗
2、獨占一行
3、從h1到h6,字體逐漸減小
4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題
5、<h1>在一個頁面最多只能有一個,不要用多個
是雙標簽,p是paragraph的縮寫
<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>
特點:
1、獨占一行
2、段落與段落之間,存在間隙
是單標簽,br是break的縮寫
<p>這是一段<br>文字</p>
特點:
1、強制換行
2、單標簽
是單標簽,hr是horizon地平線的縮寫
<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>
特點:
1、在頁面中顯示一條水平線
2、單標簽
標簽1 | 標簽2 | 說明 |
b | strong | 加粗 |
u | ins | 下劃線 |
i | em | 傾斜 |
s | del | 刪除線 |
<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>
特點:
1、不會獨占一行
2、推薦使用標簽2所在列標簽
sup是superscripted這個單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
a<sup>2</sup>
</body>
</html>
sub是subscripted這個單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
H<sub>2</sub>O
</body>
</html>
在網頁中展示特殊符號效果時,需要使用字符實體替代
顯示結果 | 描述 | 實體名稱 |
空格 |
| |
< | 小于號 | < |
> | 大于號 | > |
& | 與 | & |
" | 雙引號 | " |
x | 乘號 | × |
÷ | 除號 | ÷ |
- | 長破折號 | — |
| | 豎線 | | |
‘ | 左單引號 | ‘ |
‘ | 右單引號 | ’ |
? | 版權符 | © |
? | 注冊商標 | ® |
? | 商標 | ™ |
° | 度 | ° |
<img src="./001.jpg" alt="">
img標簽常見屬性:
屬性名 | 說明 |
src | 圖片路徑(絕對路徑、相對路徑) |
alt | 圖片加載失敗時,顯示的文字 |
title | 鼠標懸停時,顯示的文字 |
width | 圖片寬度 |
height | 圖片高度 |
只設置寬或高,會自動等比縮放,寬高只需要數字,不需要'px'
<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">
絕對路徑:指目錄下的絕對位置,比如從根目錄開始的路徑,或完整的網絡地址
相對路徑:從當前文件開始出發找目標文件的過程
<audio src="music.mp3" controls autoplay loop></audio>
audio標簽常見屬性:
屬性名 | 說明 |
src | 音頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動播放 |
loop | 循環播放 |
支持mp3、wav、ogg三種音頻格式
<video src="video.mp4" controls loop autoplay></video>
屬性名 | 說明 |
src | 視頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動播放 |
loop | 循環播放 |
支持mp4、webm、ogg三種視頻格式
超鏈接,是雙標簽,實現各個獨立頁面之間進行跳轉,可以跳去站外也可以在站內之間跳轉
<a href="鏈接地址">文本或圖片</a>
站外跳轉,采用絕對路徑
<a href="http://www.baidu.com" target="_blank">百度</a>
站內跳轉,采用相對路徑
<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>
<!-- b頁面 -->
<p>b頁面</p>
頁面內跳轉
<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>
屬性名 | 說明 |
href | 跳轉鏈接 |
target | 鏈接打開方式 |
target屬性值
屬性值 | 說明 |
_self | 默認,原窗口打開鏈接 |
_blank | 在新窗口打開鏈接 |
_parent | 在父窗口打開鏈接 |
_top | 在頂層窗口打開超鏈接 |
target屬性值一般使用_self(默認)和_blank
<ul type="屬性值">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
解釋:
1、ul,unordered lists,無序列表,li,list item,列表項
2、ul標簽子標簽只允許是li標簽
3、li標簽可以包含任意內容
type屬性值
屬性值 | 說明 |
disc | 默認,實心圓 |
circle | 空心圓 |
square | 實心方型 |
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
<ol type="屬性值">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
解釋:
1、ol,ordered lists,有序列表,li,list item,列表項
2、ol標簽子標簽只允許是li標簽
3、li標簽可以包含任意內容
type屬性值
屬性值 | 說明 |
1 | 默認,阿拉伯數字,1,2,3...... |
a | 小寫英文字母,a,b,c...... |
A | 大寫英文字母,A,B,C...... |
i | 小寫羅馬數字,i,ii,iii...... |
I | 大寫羅馬數字,I,II,III...... |
<ol>
<li>你</li>
<li>我</li>
<li>他</li>
</ol>
<dl>
<dt>名詞</dt>
<dd>描述</dd>
……
</dl>
解釋:
1、dl,definition lists,自定義列表;dt,definition term,自定義列表組;dd,definition description,自定義列表描述
<dl>
<dt>稱呼</dt>
<dd>你</dd>
<dd>我</dd>
<dd>他</dd>
</dl>
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
解釋:
1、tr,table row,表格行;td,table data cell,表行單元格
<table>
<tr>
<td>1</td>
</tr>
</table>
屬性名 | 屬性值 | 描述 |
border | 數字 | 邊框寬度 |
width | 數字 | 表格寬度 |
height | 數字 | 表格高度 |
<table border="1" width="200" height="50">
<tr>
<td>1</td>
</tr>
</table>
<caption>標題內容</caption>,位于表格內第一行
<table border="1" width="200" height="50">
<caption>數字</caption>
<tr>
<td>1</td>
</tr>
</table>
<th></th>,th,table header cell,表頭單元格
<table border="1" width="200" height="50">
<caption>數字</caption>
<tr>
<th>序號</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
thead、tbody、tfoot
<table border="1" width="200" height="50">
<caption>數字</caption>
<thead>
<tr>
<th>序號</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
</tr>
</tfoot>
</table>
屬性名 | 屬性值 | 說明 |
rowspan | 合并單元格個數 | 合并行,單元格垂直合并 |
colspan | 合并單元格個數 | 合并列,單元格水平合并 |
<td rowspan="跨越的行數"></td>
<td colspan="跨越的列數"></td>
<table border="1" width="200" height="50">
<caption>數字</caption>
<thead>
<tr>
<th>序號</th>
<th>金額</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">20</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
<td colspan="2">40</td>
</tr>
</tfoot>
</table>
雙標簽,包裹其它表單標簽
<form>
// 表單
</form>
form標簽的常用屬性
屬性 | 說明 |
name | 表單名稱 |
method | 提交方式 |
action | 提交地址 |
target | 打開方式 |
enctype | 編碼方式 |
name屬性
一個頁面中,表單可能不止一個。name屬性,用來區分不同的表單
<form name="myForm"></form>
method屬性
用來指定表單數據使用哪種提交方式給后端
屬性值 | 說明 |
get | get方式 |
post | post方式 |
<form method="get"></form>
action屬性
用來指定表單數據提交到哪個地址
<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>
target屬性
該屬性跟a標簽的target屬性一樣,其屬性值也是四個,一般情況只用到_blank屬性值,默認也是這個值
<form target="_blank"></form>
enctype屬性
屬性值 | 說明 |
application/x-www-form-urlencoded | 在發送前編碼所有字符(默認) |
multipart/form-data | 不對字符編碼,在使用包含文件上傳控件的表單時,必須使用該值 |
text/plain | 空格轉換為 "+" 加號,但不對特殊字符編碼 |
<form enctype="multipart/form-data"></form>
input是單標簽
<input type="表單類型">
屬性值 | 說明 |
text | 單行文本框 |
password | 密碼文本框 |
radio | 單選框 |
checkbox | 多選框 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
file | 文件上傳 |
單行文本框常用屬性
屬性 | 說明 |
value | 設置文本框的默認值 |
size | 設置文本框的長度 |
maxlength | 設置最多可輸入字符 |
<form>
<input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>
<form>
<label>姓名:<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>
密碼文本框常用屬性
密碼文本框常用屬性和單行文本框常用屬性相同
<input type="password" value="默認值" size="長度" maxlength="可輸入字符">
<form>
<label>密碼:<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>
單選框
屬性 | 說明 |
name | 組名,同組單選框,組名要相同,必要屬性 |
value | 單選框選項取值,必要屬性 |
checked | 默認選中項,同組單選框,可以有一個默認選中項 |
<input type="radio" name="組名" value="取值" checked="checked">
<form>
性別:
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</form>
復選框
復選框和單選框的屬性都相同,區別復選框可以多選
<form>
愛好:
<input type="checkbox" name="hobby" value="籃球" checked>籃球
<input type="checkbox" name="hobby" value="足球" checked>足球
<input type="checkbox" name="hobby" value="臺球">臺球
</form>
普通按鈕
<input type="button" value="取值">
<form>
<input type="button" value="普通按鈕">
</form>
<button>普通按鈕</button>
區別:
1、input是單標簽,button是雙標簽
2、button標簽的信息除了文本,還可以是圖像、其它標簽等
3、button有type屬性,屬性值可以是button、submit、reset等
提交按鈕
<input type="submit" value="取值">
<form>
<input type="submit" value="提交">
</form>
把對應表單數據提交給后端服務器
重置按鈕
<input type="reset" value="取值">
<form>
<input type="reset" value="重置">
</form>
點擊重置后,所在form表單里所有內容被清空了
文件上傳
<input type="file">
<form>
<input type="file">
</form>
<textarea name="文本名稱" cols="列數" rows="行數"></textarea>
<form>
<textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>
<select>
<option>選項內容</option>
<option>選項內容</option>
</select>
下拉列表標簽是為了節省頁面空間
select標簽屬性
屬性名 | 說明 |
name | 數據提交后端所需字段 |
size | 下拉選項顯示個數 |
multiple | 默認只允許選一個,選多個得加這個屬性 |
disabled | 所有下拉選項禁止選中 |
<form>
<select name="age" size="4" multiple="multiple" disabled="disabled">
<option>18歲以下</option>
<option>18-28歲</option>
<option>28-38歲</option>
<option>38歲以上</option>
</select>
</form>
option標簽屬性
屬性名 | 說明 |
selected | 默認選中 |
value | 被選中,數據提交后端的值 |
disabled | 該下拉選項禁止選中 |
<form>
<select name="age" size="5">
<option value="1">18歲以下</option>
<option value="2" disabled="disabled">18-28歲</option>
<option value="3" selected="selected">28-38歲</option>
<option value="4">38歲以上</option>
</select>
</form>
<iframe src="URL" width="數值" height="數值"></iframe>
框架標簽常用屬性
屬性名 | 說明 |
src | 嵌入的文檔地址 |
width | 標簽寬度 |
height | 標簽高度 |
<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>
有些文檔禁止被嵌入
HTML標簽分為三種,行內標簽、塊級標簽和行內塊級標簽。
特點:
1、在頁面內只占據剛好能包裹自己內容的空間
2、沒有寬高,內容多大就多大,行內標簽不能嵌套塊級標簽(a標簽除外)
3、行內標簽設置寬高無效,可以對行高line-height進行設置
4、可以設置外邊距margin和內邊距padding,但只對左右邊距有效果,上下無效
5、常見行內標簽span、a、strong、ins、del、br等
span標簽
雙標簽,行內標簽,本身沒有固定樣式
<p>我是<span>中國人</span></p>
特點:
1、獨占一行
2、高度、寬度、外邊距、內邊距都可以設置生效
3、寬度默認是父級寬度的100%
4、是一個容器盒子,可以嵌套多層子級行內標簽、塊級標簽,文本類塊級標簽除外
5、常見塊級標簽div、p、h1~h6、ol、ul、li等
div標簽
雙標簽,塊級標簽,本身沒有固定樣式
<!-- 頭部區域 -->
<div></div>
<!-- 內容區域 -->
<div></div>
特點
1、在頁面內只占據剛好能包裹自己內容的空間
2、高度、寬度、外邊距、內邊距都可以設置生效
3、常見塊級標簽img、input、td
通過css樣式display屬性轉換,這是css的內容
上面我們知道一個html中是有各種元素用來呈現不同的元素的,今天我們就來整理一下常用的元素!
html中的元素分為塊級元素和內聯元素,其中塊級元素單獨占一行,而多個內聯元素是在同一行的,如果放不下就會自動換行,div就是我們常用的塊級元素,span是我們常見的內聯元素,比如:
<html>
<head>
<title>網站名稱</title>
</head>
<body>
<div>我是塊級元素1</div>
<div>我是塊級元素2</div>
<span>我是內聯元素1</span>
<span>我是內聯元素2</span>
</body>
</html>
我們可以把大段文字分不同的段落,如下:
<html>
<head>
<title>網站名稱</title>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
</body>
</html>
注:雖然效果和div差不多,但是,最好見詞知意!
在網站中,我們點一個文字就會跳轉到別的網站,這就是超鏈接的功能,下面我們添加一個跳轉到百度的超鏈接:
<html>
<head>
<title>網站名稱</title>
</head>
<body>
<a href="http://www.baidu.com">我是超鏈接跳轉</a>
</body>
</html>
我們點擊文字就會跳轉到新的界面
網站中的標題使用h1至h6來進行設置,越來越小,如下:
章學習目標
第一章已經介紹過HTML是一門超文本標記語言,通過HTML標記對網頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網頁中的信息進行控制,沒有介紹,本章就將從HTML的歷史、語義化、常用標簽三個方面詳細講解HTML。
2.1 HTML歷史
俗話說“了解歷史,才能明白當下,進而展望未來”。所以了解HTML的歷史,有利于更好的掌握HTML這門語言。
2.1.1 HTML歷史版本
像大多數軟件、硬件一樣,HTML發展至今,經歷了幾個版本,新增了許多HTML標記,同時也淘汰了一些標記,接下來介紹HTML在不同時期所對應的一些重要版本,具體如下:
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語義化的意義主要有以下幾點:
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://m.jungjaehyung.com/uploadfile/2024/0807/20240807031924327.jpg"/> <img src=http://m.jungjaehyung.com/uploadfile/2024/0807/20240807031925181.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>標簽來定義鏈接部分實現網頁的跳轉,其語法格式如下。
<a href=“鏈接頁面地址” target=“鏈接打開的方式”>鏈接對象</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的基礎知識和技術,使他們快速地成長為初級程序員,并擁有一定的項目開發經驗,從而在職場中擁有一個較高的起點。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。