第01章-HTML5基礎(chǔ)

2022-05-18 23:31 更新

第01章-前端核心技術(shù)-HTML5基礎(chǔ)

項(xiàng)目經(jīng)理(作者):張明星

學(xué)習(xí)目標(biāo)

  1. 了解什么是HTML

  1. 掌握HTML標(biāo)簽、元素的概念 重點(diǎn)

  1. 掌握HTML常用頭部元素的使用 重點(diǎn)

  1. 掌握HTML標(biāo)題、段落、文本、圖片等排版 重點(diǎn) 難點(diǎn)

  1. 掌握HTML超鏈接的使用 重點(diǎn)

HTML 是什么

HTML就是超文本標(biāo)記語(yǔ)言(英語(yǔ):HyperText Markup Language,簡(jiǎn)稱:HTML),是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言,主要功能就是控制網(wǎng)頁(yè)顯示的內(nèi)容,而不關(guān)注內(nèi)容樣式的展示,樣式的展示效果有css技術(shù)來(lái)實(shí)現(xiàn)

HTML 特點(diǎn)

  1. HTML 不是一種編程語(yǔ)言,而是一種簡(jiǎn)單的標(biāo)記語(yǔ)言
  2. HTML的文檔也叫做 web頁(yè)面(網(wǎng)頁(yè))
  3. HTML文檔只是一種簡(jiǎn)單的ASCII碼[文本],通過(guò)瀏覽器直接解釋執(zhí)行

一個(gè)網(wǎng)頁(yè)的默認(rèn)文件名是index.html,也就是說(shuō)如果一個(gè)頁(yè)面名叫index.html就可以在訪問這個(gè)頁(yè)面的時(shí)候忽略不寫,如:

  1. http://127.0.0.1:8888/demo/index.html -> http://127.0.0.1:8888/demo/

案例01

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. </head>
  7. <body>
  8. <h1>超文本標(biāo)記語(yǔ)言</h1>
  9. <p>歡迎來(lái)到HTML的世界</p>
  10. </body>
  11. </html>

效果展示

案例解析

  1. <!DOCTYPE html>?聲明為 HTML第5版本的文檔
  2. <html>?元素是 HTML 頁(yè)面的根元素,所以內(nèi)容都應(yīng)該寫在其內(nèi)部
  3. <head>?元素包含了文檔的元(meta)數(shù)據(jù),用來(lái)設(shè)置頁(yè)面參數(shù)
  4. <title>?元素設(shè)置整個(gè)頁(yè)面的在瀏覽器中的標(biāo)題
  5. <body>?元素包含整個(gè)頁(yè)面的可見區(qū)域顯示的內(nèi)容
  6. <h1>?元素顯示一個(gè)一級(jí)標(biāo)題
  7. <p>?元素顯示普通文字的段落

HTML 網(wǎng)頁(yè)結(jié)構(gòu)

下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu):

說(shuō)明

  1. <head> 元素包含了文檔的元(meta)數(shù)據(jù),用來(lái)設(shè)置頁(yè)面參數(shù)
  2. <body> 元素包含整個(gè)頁(yè)面的可見區(qū)域顯示的內(nèi)容
  3. 注意:只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示

HTML 標(biāo)簽(標(biāo)記)

HTML標(biāo)記通常被稱為HTML標(biāo)簽 (HTML tag)。把由<>括起來(lái)的部分統(tǒng)稱為標(biāo)簽

HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如<p></p>標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽(開放標(biāo)簽),第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽(閉合標(biāo)簽)

也有特殊的標(biāo)簽,只有開頭沒有結(jié)尾,在開頭后面加上/表示結(jié)尾,這種表簽叫做單標(biāo)簽或者空標(biāo)簽,如:<br>

標(biāo)簽格式

  1. <標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素

開始標(biāo)簽標(biāo)簽中的內(nèi)容結(jié)束標(biāo)簽共同組成的整體,叫做一個(gè)元素。

如:

  1. <body>
  2. <h1>超文本標(biāo)記語(yǔ)言</h1>
  3. <p>歡迎來(lái)到HTML的世界</p>
  4. </body>

HTML 屬性

把寫在開始標(biāo)簽鍵值對(duì)(名稱/值對(duì))稱之為屬性。

HTML 元素可以設(shè)置屬性,就像長(zhǎng)方形的長(zhǎng)寬屬性一樣。屬性必須寫在開始標(biāo)簽中,比如:<p align="center">段落</p>,屬性總是以名稱/值對(duì)的形式出現(xiàn),比如:name="value"。

HTML屬性作用

  1. 給元素中添加附加信息(僅僅添加數(shù)據(jù))
  2. 控制元素顯示的風(fēng)格(改變?cè)啬J(rèn)顯示樣式)

案例02

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文檔標(biāo)題</title>
  6. </head>
  7. <body>
  8. <h1 align="center">居中對(duì)齊</h1>
  9. <p align="left">左對(duì)齊默認(rèn)</p>
  10. <p align="center">居中對(duì)齊</p>
  11. <p align="right">右對(duì)齊</p>
  12. </body>
  13. </html>

效果展示

HTML 標(biāo)題

頁(yè)面中文本標(biāo)題(Heading)是通過(guò) <h1> - <h6>標(biāo)簽進(jìn)行定義的,從大到小:<h1> - <h6>。

標(biāo)簽 描述 案例
<h1> 一級(jí)標(biāo)題 <h1>標(biāo)題H1</h1>
<h2> 二級(jí)標(biāo)題 <h2>標(biāo)題H2</h2>
<h3> 三級(jí)標(biāo)題 <h3>標(biāo)題H3</h3>
<h4> 四級(jí)標(biāo)題 <h4>標(biāo)題H4</h4>
<h5> 五級(jí)標(biāo)題 <h5>標(biāo)題H5</h5>
<h6> 六級(jí)標(biāo)題 <h6>標(biāo)題H6</h6>

案例03

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>文檔標(biāo)題</title>
  6. </head>
  7. <body>
  8. <h1>標(biāo)題H1</h1>
  9. <h2>標(biāo)題H2</h2>
  10. <h3>標(biāo)題H3</h3>
  11. <h4>標(biāo)題H4</h4>
  12. <h5>標(biāo)題H5</h5>
  13. <h6>標(biāo)題H6</h6>
  14. </body>
  15. </html>

效果展示

HTML 段落&換行

HTML中文字一般都是寫在標(biāo)簽里面的,普通文字用的標(biāo)簽就是段落P標(biāo)簽。

在HTML中空格和換行標(biāo)記都會(huì)被自動(dòng)忽略,不會(huì)顯示,因此需要使用換行標(biāo)簽<br>來(lái)手動(dòng)換行。

標(biāo)簽 描述 案例
<p> 普通文字標(biāo)簽(段落標(biāo)簽) <p>這是一個(gè)段落</p>

換行 <br/>

案例04

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文檔標(biāo)題</title>
  6. </head>
  7. <body>
  8. <p>這是一個(gè)段落,從第一行開始</p>
  9. <p>這是第二個(gè)段落,會(huì)自動(dòng)換行,另起一行開始</p>
  10. <br/>
  11. <p>這是第三個(gè)段落,在這之前使用了br標(biāo)簽來(lái)?yè)Q行,所以間隔變大</p>
  12. <p>這是第四個(gè)段落,一個(gè)br標(biāo)簽只能換一行,換幾行需要幾個(gè)br標(biāo)簽</p>
  13. </body>
  14. </html>

效果展示

HTML 頭部

頁(yè)面標(biāo)題元素

<title>標(biāo)簽定義了不同文檔的標(biāo)題。

案例05

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>當(dāng)前網(wǎng)頁(yè)在瀏覽器的標(biāo)簽頁(yè)中的標(biāo)題</title>
  6. </head>
  7. <body>
  8. <h1>超文本標(biāo)記語(yǔ)言</h1>
  9. <p>歡迎來(lái)到HTML的世界</p>
  10. </body>
  11. </html>

網(wǎng)頁(yè)參數(shù)設(shè)置元素

meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。

  1. <meta>標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁(yè)面上,但會(huì)被瀏覽器解析。

  1. <meta> 元素通常用于指定網(wǎng)頁(yè)的描述,關(guān)鍵詞,文件的修改時(shí)間,作者,和其他元數(shù)據(jù)。

  1. <meta>可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面),搜索引擎(關(guān)鍵詞),或其他Web服務(wù)。

案例06

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>文檔標(biāo)題</title>
  6. <!--為搜索引擎定義關(guān)鍵詞-->
  7. <meta name="keywords" content="HTML超文本標(biāo)記語(yǔ)言">
  8. <!--為網(wǎng)頁(yè)定義描述內(nèi)容-->
  9. <meta name="description" content="前端必備的基礎(chǔ)技能">
  10. <!--定義網(wǎng)頁(yè)作者-->
  11. <meta name="author" content="star">
  12. <!--每5秒鐘刷新當(dāng)前頁(yè)面-->
  13. <meta http-equiv="refresh" content="5">
  14. <!--每5秒鐘后自動(dòng)給跳轉(zhuǎn)-->
  15. <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
  16. </head>
  17. <body>
  18. <h1>超文本標(biāo)記語(yǔ)言</h1>
  19. <p>歡迎來(lái)到HTML的世界</p>
  20. </body>
  21. </html>

HTML 水平分割線

實(shí)現(xiàn)水平分割線使用<hr>標(biāo)簽,<hr>標(biāo)簽屬性如下:

屬性 描述
align left、centerright 規(guī)定 hr 元素的對(duì)齊方式
color 顏色單詞 規(guī)定 hr 元素的顏色
size 像素 規(guī)定 hr 元素的高度。
width 像素百分比 規(guī)定 hr 元素的寬度。

案例07

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文檔標(biāo)題</title>
  6. </head>
  7. <body>
  8. <h4 align="center">分割線的屬性</h4>
  9. <p align="center">分割線寬度屬性(width="200")</p>
  10. <hr width="200">
  11. <p align="center">分割線厚度屬性(size="20")</p>
  12. <hr width="200" size="20">
  13. <p align="center">分割線顏色屬性(color="blue")</p>
  14. <hr width="200" size="20" color="blue">
  15. <p align="center">分割線對(duì)齊屬性(color="blue")</p>
  16. <hr width="200" size="20" color="blue" align="left">
  17. </body>
  18. </html>

效果展示

HTML 文本格式化

常用的文本格式化標(biāo)簽

標(biāo)簽 描述 案例
<b> <b>粗體文字</b> <b>加粗</b>
<i> <i>斜體字</i> <i>斜體</i>
<small> <small>小號(hào)字</small> <small>小號(hào)</small>
<sub> <sub>下標(biāo)字</sub> <sub>下標(biāo)</sub>
<sup> <sup>上標(biāo)字</sup> <sup>上標(biāo)</sup>
<ins> <ins>插入字(下劃線)</ins> <ins>下劃線</ins>
<del> <del>刪除字(中劃線)</del> <del>中劃線</del>
<em> <em>著重字,和 i相似</em> <em>著重字</em>
strong <strong>加重語(yǔ)氣,和b相似</strong> <strong>加重語(yǔ)氣</strong>
font <font size="3" color="red">自定義字體</font>(不推薦使用) <font size="3" color="red">自定義字體</font>

案例08

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML 文本格式化</title>
  6. </head>
  7. <body>
  8. <h3 align="center">靜夜思<small><i><sub>(李白<del>詩(shī)作</del></sub></i></small></h3>
  9. <hr align="center" width="160">
  10. <p align="center"><ins>床前明月<b></b></ins><sup>(1)</sup>,</p>
  11. <p align="center"><ins>疑是地上<b></b></ins><sup>(2)</sup></p>
  12. <p align="center">舉頭<b></b>明月<sup>(3)</sup>,</p>
  13. <p align="center">低頭<b></b>故鄉(xiāng)<sup>(4)</sup></p>
  14. <hr width="160">
  15. </body>
  16. </html>

效果展示

HTML 字符實(shí)體

HTML 中的預(yù)留字符必須被替換為字符實(shí)體。

一些在鍵盤上找不到的字符也可以使用字符實(shí)體來(lái)替換。

如:在 HTML 中不能使用小于號(hào)<和大于號(hào)>,這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。

顯示結(jié)果 描述 實(shí)體名稱
空格  
< 小于號(hào) <
> 大于號(hào) >
? 版權(quán) ©
? 注冊(cè)商標(biāo) ®
? 商標(biāo) &trade

案例09

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <p align="center">
  9. 軟件開發(fā)培訓(xùn)      2222年©版權(quán)歸屬創(chuàng)作人:張明星™
  10. </p>
  11. </body>
  12. </html>

效果展示

HTML 超鏈接

HTML使用標(biāo)簽<a>來(lái)設(shè)置超文本鏈接。

超鏈接可以是一個(gè)字,一個(gè)詞,或者一組詞,也可以是一幅圖像,可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

  1. 當(dāng)把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí),箭頭會(huì)變?yōu)橐恢恍∈帧?/li>

  1. 在標(biāo)簽<a> 中使用href屬性來(lái)描述鏈接的地址。

  1. 在標(biāo)簽<a> 中使用target="_blank"屬性來(lái)設(shè)置在瀏覽器新標(biāo)簽頁(yè)中打開頁(yè)面。

默認(rèn)情況下,鏈接將以以下形式出現(xiàn)在瀏覽器中:

  1. 一個(gè)未訪問過(guò)的鏈接顯示為藍(lán)色字體并帶有下劃線。

  1. 訪問過(guò)的鏈接顯示為紫色并帶有下劃線。

  1. 點(diǎn)擊鏈接時(shí),鏈接顯示為紅色并帶有下劃線。

超鏈接屬性

屬性 描述
href URL 規(guī)定鏈接的目標(biāo) URL。
target _blank 規(guī)定在瀏覽器新標(biāo)簽頁(yè)中打開目標(biāo)網(wǎng)頁(yè) URL。僅在 href 屬性存在時(shí)使用。

超鏈接語(yǔ)法

  1. <a rel="external nofollow" target="_blank" target="_blank">這是一個(gè)超鏈接</a>

超鏈接錨點(diǎn)(書簽)

超鏈接錨點(diǎn)類似淘寶點(diǎn)擊菜單跳轉(zhuǎn)到某一分類產(chǎn)品。

鏈接的錨點(diǎn)通過(guò)ID屬性來(lái)指定。ID屬性是每個(gè)元素都有的屬性,為某元素指定ID編碼

元素具有ID屬性后,就可以通過(guò)超鏈接a標(biāo)簽的href屬性來(lái)跳轉(zhuǎn)到指定的元素。但是需要加上#前綴。如

  1. <h1 id="aaa">頂部</h1>
  2. <a href="#aaa">回到頂部</a>

案例10

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <hr >
  9. <h1 id="aaa">頂部</h1>
  10. <a href="#bbb">回到中部</a>
  11. <a href="#ccc">回到底部</a>
  12. <hr >
  13. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  14. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  15. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  16. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  17. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  18. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  19. <hr >
  20. <h2 id="bbb">頁(yè)面中部</h2>
  21. <a href="#aaa">回到頂部</a>
  22. <a href="#ccc">回到底部</a>
  23. <hr >
  24. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  25. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  26. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  27. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  28. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  29. 往下看↓<br><br><br><br><br><br><br><br><br><br>
  30. <hr >
  31. <h2 id="ccc">頁(yè)面底部</h2>
  32. <a href="#aaa">回到頂部</a>
  33. <a href="#bbb">回到中部</a>
  34. <hr >
  35. </body>
  36. </html>

HTML 圖片

HTML 中,圖像由<img> 標(biāo)簽定義。<img> 是空標(biāo)簽,意思是說(shuō),它只包含屬性,并且沒有閉合標(biāo)簽

要在頁(yè)面上顯示圖像,你需要使用源屬性src。srcsource。源屬性的值是圖像的 URL 地址

圖片標(biāo)簽屬性

顯示結(jié)果 實(shí)體名稱
src URL 規(guī)定圖片的目標(biāo) URL。
width %|值 規(guī)定圖片的寬度。
height %|值 規(guī)定圖片的高度。

定義圖像的語(yǔ)法

  1. <img src="logo.png" width="200" height="200" />

URL統(tǒng)一資源定位符

圖片鏈接

HTML標(biāo)簽可以相互嵌套。當(dāng)在超鏈接a標(biāo)簽中嵌套圖片后,圖片和超鏈接就合二為一,也就是說(shuō)點(diǎn)擊圖片可以實(shí)現(xiàn)a標(biāo)簽的跳轉(zhuǎn)功能。

案例11

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>圖像鏈接</title>
  6. </head>
  7. <body>
  8. <a href="www.baidu.com" target="_blank">
  9. <img src="img/timg.jpg" alt="提示文字" width="200" height="200" />
  10. </a>
  11. </body>
  12. </html>

圖片對(duì)齊模式

圖片的對(duì)齊使用<img>標(biāo)簽的align屬性控制

  1. <img align="middle|top|bottom">

屬性值

描述
middle center 把圖像與周圍文字的中央對(duì)齊。
top 把圖像與周圍文字的頂部對(duì)齊。
bottom 把圖像與周圍文字的底部對(duì)齊。

案例12

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>圖片對(duì)齊模式</title>
  6. </head>
  7. <body>
  8. <img src="img/avatar.jpg" height="50"/>默認(rèn):底對(duì)齊
  9. <br>
  10. <img src="img/avatar.jpg" height="50" align="center"/>居中對(duì)齊align="center"
  11. <br>
  12. <img src="img/avatar.jpg" height="50" align="texttop"/>頂對(duì)齊align="texttop"
  13. <br>
  14. <img src="img/avatar.jpg" height="50" align="texttop"/>
  15. <img src="img/avatar.jpg" height="50" align="right"/>右對(duì)齊align="right"
  16. </body>
  17. </html>

效果展示

圖片整體居中

圖片通過(guò)align屬性只能控制顯示在左邊或者右邊,卻不能控制顯示在中間。

HTML的標(biāo)簽可以嵌套,嵌套的時(shí)候往往外層標(biāo)簽的屬性會(huì)作用于內(nèi)層標(biāo)簽,利用此特性可以使用具有居中排版的標(biāo)簽來(lái)控制其內(nèi)部的標(biāo)簽居中顯示。

如使用<p></p>來(lái)包裹<img>標(biāo)簽來(lái)控制<img>標(biāo)簽居中顯示。

案例13

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>圖片整體居中</title>
  6. </head>
  7. <body>
  8. <h4 align="center">圖片整體居中</h4>
  9. <p align="center"><img src="img/timg.jpg" height="150" /></p>
  10. </body>
  11. </html>

效果展示

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)