第01章前端核心技術-HTML基礎
第01章前端核心技術-HTML基礎
學習目標
瞭解什麼是HTML
掌握HTML標籤、元素的概念重點
掌握HTML常用頭部元素的使用重點
掌握HTML標題、段落、文字、圖片等排版重點難點
掌握HTML超連結的使用重點
HTML 是什麼
HTML就是**超文字標記語言**（英語：HyperText Markup Language，簡稱：HTML），是一種用於建立網頁的標準標記語言，主要功能就是控制網頁顯示的內容，而不關注內容樣式的展示，樣式的展示效果有css技術來實現
HTML 特點：
HTML 不是一種程式語言，而是一種簡單的標記語言
HTML的文件也叫做 web頁面（網頁）
HTML文件只是一種簡單的ASCII碼[文字]，通過瀏覽器直接解釋執行
一個網頁的預設檔名是index.html，也就是說如果一個頁面名叫index.html就可以在訪問這個頁面的時候忽略不寫，如：
http://127.0.0.1:8888/demo/index.html -> http://127.0.0.1:8888/demo/
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>超文字標記語言</h1>
<p>歡迎來到HTML的世界</p>
</body>
</html>
效果展示
案例解析
<!DOCTYPE html> 宣告為 HTML第5版本的文件
<html> 元素是 HTML 頁面的根元素，所以內容都應該寫在其內部
<head> 元素包含了文件的元（meta）資料，用來設定頁面引數
<title> 元素設定整個頁面的在瀏覽器中的標題
<body> 元素包含整個頁面的可見區域顯示的內容
<h1> 元素顯示一個一級標題
<p> 元素顯示普通文字的段落
HTML 網頁結構
下面是一個視覺化的HTML頁面結構：
說明
<head> 元素包含了文件的元（meta）資料，用來設定頁面引數
<body> 元素包含整個頁面的可見區域顯示的內容
注意：只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示
HTML 標籤（標記）
HTML**標記**通常被稱為HTML**標籤** (HTML tag)。把由<>括起來的部分統稱為**標籤**
HTML標籤通常是**成對出現**的，比如<p>和</p>標籤對中的第一個標籤是**開始標籤**（開放標籤），第二個標籤是**結束標籤**（閉合標籤）
也有特殊的標籤，只有開頭沒有結尾，在開頭後面加上/表示結尾，這種表籤叫做**單標籤**或者**空標籤**，如：<br>
標籤格式
<標籤>內容</標籤>
HTML 元素
由**開始標籤**和**標籤中的內容**和**結束標籤**共同組成的**整體**，叫做一個元素。
如：
<body>
<h1>超文字標記語言</h1>
<p>歡迎來到HTML的世界</p>
</body>
HTML 屬性
把寫在**開始標籤**中**鍵值對（名稱/值對）**稱之為屬性。
HTML 元素可以設定屬性，就像長方形的長寬屬性一樣。屬性必須寫在**開始標籤**中，比如：<p align="center">段落</p>，屬性總是以**名稱/值**對的形式出現，比如：name="value"。
HTML屬性作用
給元素中新增附加資訊（僅僅新增資料）
控制元素顯示的風格（改變元素預設顯示樣式）
案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件標題</title>
</head>
<body>
<h1 align="center">居中對齊</h1>
<p align="left">左對齊預設</p>
<p align="center">居中對齊</p>
<p align="right">右對齊</p>
</body>
</html>
效果展示
HTML 標題
頁面中文字標題（Heading）是通過<h1>-<h6>標籤進行定義的，從大到小:<h1>-<h6>。
標籤描述案例<h1>一級標題<h1>標題H1</h1><h2>二級標題<h2>標題H2</h2><h3>三級標題<h3>標題H3</h3><h4>四級標題<h4>標題H4</h4><h5>五級標題<h5>標題H5</h5><h6>六級標題<h6>標題H6</h6>
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文件標題</title>
</head>
<body>
<h1>標題H1</h1>
<h2>標題H2</h2>
<h3>標題H3</h3>
<h4>標題H4</h4>
<h5>標題H5</h5>
<h6>標題H6</h6>
</body>
</html>
效果展示
HTML 段落&換行
HTML中文字一般都是寫在標籤裡面的，普通文字用的標籤就是段落P標籤。
在HTML中空格和換行標記都會被自動忽略，不會顯示，因此需要使用換行標籤<br>來手動換行。
標籤描述案例<p>普通文字標籤（段落標籤）<p>這是一個段落</p><br>換行<br/>
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件標題</title>
</head>
<body>
<p>這是一個段落，從第一行開始</p>
<p>這是第二個段落，會自動換行，另起一行開始</p>
<br/>
<p>這是第三個段落，在這之前使用了br標籤來換行，所以間隔變大</p>
<p>這是第四個段落，一個br標籤只能換一行，換幾行需要幾個br標籤</p>
</body>
</html>
效果展示
HTML 頭部
頁面標題元素
<title>標籤定義了不同文件的標題。
案例05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>當前網頁在瀏覽器的標籤頁中的標題</title>
</head>
<body>
<h1>超文字標記語言</h1>
<p>歡迎來到HTML的世界</p>
</body>
</html>
效果：
網頁引數設定元素
meta標籤描述了一些基本的元資料。
<meta>標籤提供了元資料.元資料也不顯示在頁面上，但會被瀏覽器解析。
<meta>元素通常用於指定網頁的描述，關鍵詞，檔案的修改時間，作者，和其他元資料。
<meta>可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他Web服務。
案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文件標題</title>
<!--為搜尋引擎定義關鍵詞-->
<meta name="keywords" content="HTML超文字標記語言">
<!--為網頁定義描述內容-->
<meta name="description" content="前端必備的基礎技能">
<!--定義網頁作者-->
<meta name="author" content="star">
<!--每5秒鐘重新整理當前頁面-->
<meta http-equiv="refresh" content="5">
<!--每5秒鐘後自動給跳轉-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
</head>
<body>
<h1>超文字標記語言</h1>
<p>歡迎來到HTML的世界</p>
</body>
</html>
效果：
HTML 水平分割線
實現水平分割線使用<hr>標籤，**<hr>標籤屬性**如下：
屬性值描述alignleft|center|right規定hr元素的對齊方式color顏色單詞規定hr元素的顏色size畫素規定hr元素的高度。width畫素|百分比規定hr元素的寬度。
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件標題</title>
</head>
<body>
<h4 align="center">分割線的屬性</h4>
<p align="center">分割線寬度屬性（width="200"）</p>
<hr width="200">
<p align="center">分割線厚度屬性（size="20"）</p>
<hr width="200" size="20">
<p align="center">分割線顏色屬性（color="blue"）</p>
<hr width="200" size="20" color="blue">
<p align="center">分割線對齊屬性（color="blue"）</p>
<hr width="200" size="20" color="blue" align="left">
</body>
</html>
效果展示
HTML 文字格式化
常用的文字格式化標籤
標籤描述案例<b>粗體文字<b>加粗</b><i>斜體字<i>斜體</i><small>小號字<small>小號</small><sub>下標字<sub>下標</sub><sup>上標字<sup>上標</sup><ins>插入字（下劃線）<ins>下劃線</ins><del>刪除字（中劃線）<del>中劃線</del><em> 著重字，和 i相似<em>著重字</em>strong加重語氣，和b相似<strong>加重語氣</strong>font自定義字型(~~不推薦使用~~)<font size="3" color="red">自定義字型</font>
案例08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 文字格式化</title>
</head>
<body>
<h3 align="center">靜夜思<small><i><sub>（李白<del>詩作</del>）</sub></i></small></h3>
<hr align="center" width="160">
<p align="center"><ins>床前明月<b>光</b></ins><sup>(1)</sup>，</p>
<p align="center"><ins>疑是地上<b>霜</b></ins><sup>(2)</sup>。</p>
<p align="center">舉頭<b>望</b>明月<sup>(3)</sup>，</p>
<p align="center">低頭<b>思</b>故鄉<sup>(4)</sup>。</p>
<hr width="160">
</body>
</html>
效果展示
HTML 字元實體
HTML 中的預留字元必須被替換為字元實體。
一些在鍵盤上找不到的字元也可以使用字元實體來替換。
如：在 HTML 中不能使用小於號<和大於號>，這是因為瀏覽器會誤認為它們是標籤。
顯示結果描述實體名稱空格 <小於號<>大於號>©版權©®註冊商標re&g;™商標&trade
案例09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">
軟體開發 2222年©版權歸屬創作人：靳鍾新™
</p>
</body>
</html>
效果展示
HTML 超連結
HTML使用標籤<a>來設定超文字連結。
超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象，可以點選這些內容來跳轉到**新的文件**或者**當前文件中的某個部分**。
當把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。
在標籤<a>中使用href屬性來描述連結的地址。
在標籤<a>中使用target="_blank"屬性來設定在瀏覽器新標籤頁中開啟頁面。
預設情況下，連結將以以下形式出現在瀏覽器中：
一個未訪問過的連結顯示為**藍色**字型並帶有下劃線。
訪問過的連結顯示為**紫色**並帶有下劃線。
點選連結時，連結顯示為**紅色**並帶有下劃線。
超連結屬性
屬性值描述hrefURL規定連結的目標 URL。target_blank | 規定在瀏覽器新標籤頁中開啟目標網頁 URL。僅在href屬性存在時使用。 |
超連結語法
<a href="http://www.xx.com" target="_blank">這是一個超連結</a>
超連結錨點（書籤）
超連結錨點類似淘寶點選選單跳轉到某一分類產品。
連結的**錨點**通過ID屬性來指定。ID屬性是每個元素都有的屬性，為某元素指定ID編碼
元素具有ID屬性後，就可以通過超連結a標籤的href屬性來跳轉到指定的元素。但是需要加上#字首。如
1
2
<h1 id="aaa">頂部</h1>
<a href="#aaa">回到頂部</a>
案例10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr >
<h1 id="aaa">頂部</h1>
<a href="#bbb">回到中部</a>
<a href="#ccc">回到底部</a>
<hr >
往下看↓<br><br><br><br><br><br><br><br><br><br>
<hr >
<h2 id="bbb">頁面中部</h2>
<a href="#aaa">回到頂部</a>
<a href="#ccc">回到底部</a>
<hr >
往下看↓<br><br><br><br><br><br><br><br><br><br>
往下看↓<br><br><br><br><br><br><br><br><br><br>
<hr >
<h2 id="ccc">頁面底部</h2>
<a href="#aaa">回到頂部</a>
<a href="#bbb">回到中部</a>
<hr >
</body>
</html>
效果：
HTML 圖片
在HTML中，影象由<img>標籤定義。<img>是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤
要在頁面上顯示影象，你需要使用源屬性src。src指source。源屬性的值是影象的URL地址
圖片標籤屬性
顯示結果值實體名稱srcURL規定圖片的目標URL。width%|值規定圖片的寬度。height%|值規定圖片的高度。
定義影象的語法
<img src="logo.png" width="200" height="200" />
URL統一資源定位符
圖片連結
HTML標籤可以相互巢狀。當在超連結a標籤中巢狀圖片後，圖片和超連結就合二為一，也就是說點選圖片可以實現a標籤的跳轉功能。
案例11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>影象連結</title>
</head>
<body>
<a href="www.baidu.com" target="_blank">
<img src="img/timg.jpg" alt="提示文字" width="200" height="200" />
</a>
</body>
</html>
效果：
圖片對齊模式
圖片的對齊使用<img>標籤的align屬性控制
<img align="middle|top|bottom">
屬性值：
值描述middlecenter把影象與周圍文字的中央對齊。top把影象與周圍文字的頂部對齊。bottom把影象與周圍文字的底部對齊。
案例12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片對齊模式</title>
</head>
<body>
<img src="img/avatar.jpg" height="50"/>預設：底對齊
<br>
<img src="img/avatar.jpg" height="50" align="center"/>居中對齊align="center"
<br>
<img src="img/avatar.jpg" height="50" align="texttop"/>頂對齊align="texttop"
<br>
<img src="img/avatar.jpg" height="50" align="texttop"/>
<img src="img/avatar.jpg" height="50" align="right"/>右對齊align="right"
</body>
</html>
效果展示
圖片整體居中
圖片通過align屬性只能控制顯示在**左邊**或者**右邊**，卻不能控制顯示在中間。
HTML的標籤可以巢狀，巢狀的時候往往外層標籤的屬性會作用於內層標籤，利用此特性可以使用具有居中排版的標籤來控制其內部的標籤居中顯示。
如使用<p></p>來包裹<img>標籤來控制<img>標籤居中顯示。
案例13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片整體居中</title>
</head>
<body>
<h4 align="center">圖片整體居中</h4>
<p align="center"><img src="img/timg.jpg" height="150" /></p>
</body>
</html>
效果展示
作業
製作微信聊天介面
要求：實現如下效果
參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center">與女神聊天</h1>
<hr>
<p><img src="img/07.jpg" width="30" align="center">你好呀！</p>
<p align="right">好，你妹<img src="img/01.jpg" width="30" align="center"></p>
<p><img src="img/03.jpg" width="30" align="center">修養啊！</p>
<p align="right">呵呵<img src="img/04.jpg" width="30" align="center"></p>
<p><img src="img/05.jpg" width="30" align="center">在幹嘛呢！</p>
<p align="right">要你管<img src="img/06.jpg" width="30" align="center"></p>
<p><img src="img/07.jpg" width="30" align="center">雅黑</p>
<p align="right">......<img src="img/08.jpg" width="30" align="center"></p>
</body>
</html>
製作部落格文章網頁
要求：
分割線寬度640，
全部內容居中顯示
點選底部的者文字，返回頂部標題
效果展示：
參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 align="center" id="top">三月，醉一場青春的流年</h1>
<hr width="750">
<p align="center"><img src="img/timg.jpg" width="30" align="center">作者：小小</p>
<hr size="20" width="750">
<p align="center">三月，醉一場青春的流年。慢步在三月的春光裡，</p>
<p align="center">走停停，看花開嫣然，看春雨綿綿，</p>
<p align="center">感受春風拂面，春天，就是青春的流年。</p>
<p align="center">青春，是人生中最美的風景。，</p>
<p align="center">青春是一場花開的遇見；</p>
<p align="center">青春，是一場痛並快樂著的旅行；</p>
<p align="center">青春，是一場轟轟烈烈的比賽；</p>
<p align="center">青春，是一場轟轟烈烈的比賽；</p>
<p align="center">青春，是一場風花雪月的光陰。</p>
<br>
<br>
<p align="center">三月，醉一場青春的流年。慢步在三月的春光裡，</p>
<p align="center">走停停，看花開嫣然，看春雨綿綿，</p>
<p align="center">感受春風拂面，春天，就是青春的流年。</p>
<p align="center">青春，是人生中最美的風景。，</p>
<p align="center">青春是一場花開的遇見；</p>
<p align="center">青春，是一場痛並快樂著的旅行；</p>
<p align="center">青春，是一場轟轟烈烈的比賽；</p>
<p align="center">青春，是一場轟轟烈烈的比賽；</p>
<p align="center">青春，是一場風花雪月的光陰。</p>
<br>
<p align="center"><a href="#top">回到頂部</a></p>
</body>
</html>
美文排版
要求：自選內容或者按照圖文內容，實現型別如下效果
目的：學會使用HTML實現圖文排版，練習打字速度