碼上快樂

相關內容    簡體    繁體

01-前端核心技術-HTML基礎

本文轉載自   查看原文   2021-11-20 14:27   159    前端課件

第01章前端核心技術-HTML基礎

學習目標

  1. 了解什么是HTML

  2. 掌握HTML標簽、元素的概念 重點

  3. 掌握HTML常用頭部元素的使用 重點

  4. 掌握HTML標題、段落、文本、圖片等排版 重點 難點

  5. 掌握HTML超鏈接的使用 重點

HTML 是什么

HTML就是**超文本標記語言**（英語：HyperText Markup Language，簡稱：HTML），是一種用於創建網頁的標准標記語言，主要功能就是控制網頁顯示的內容，而不關注內容樣式的展示，樣式的展示效果有css技術來實現

HTML 特點：

  1. HTML 不是一種編程語言，而是一種簡單的標記語言
  2. HTML的文檔也叫做 web頁面（網頁）
  3. HTML文檔只是一種簡單的ASCII碼[文本]，通過瀏覽器直接解釋執行

一個網頁的默認文件名是index.html，也就是說如果一個頁面名叫index.html就可以在訪問這個頁面的時候忽略不寫，如：

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

案例01

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>超文本標記語言</h1>
		<p>歡迎來到HTML的世界</p>
	</body>
</html>

效果展示

image-20210830231452234

案例解析

1
2
3
4
5
6
7
<!DOCTYPE html> 聲明為 HTML第5版本的文檔
<html> 元素是 HTML 頁面的根元素，所以內容都應該寫在其內部
<head> 元素包含了文檔的元（meta）數據，用來設置頁面參數
<title> 元素設置整個頁面的在瀏覽器中的標題
<body> 元素包含整個頁面的可見區域顯示的內容
<h1> 元素顯示一個一級標題
<p> 元素顯示普通文字的段落

HTML 網頁結構

下面是一個可視化的HTML頁面結構：

image-20210830230434708

說明

1
2
3
<head> 元素包含了文檔的元（meta）數據，用來設置頁面參數
<body> 元素包含整個頁面的可見區域顯示的內容
注意：只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示

HTML 標簽（標記）

HTML**標記**通常被稱為HTML**標簽** (HTML tag)。把由<>括起來的部分統稱為**標簽**

HTML 標簽通常是**成對出現**的，比如<p> 和</p>標簽對中的第一個標簽是**開始標簽**（開放標簽），第二個標簽是**結束標簽**（閉合標簽）

也有特殊的標簽，只有開頭沒有結尾，在開頭后面加上/表示結尾，這種表簽叫做**單標簽**或者**空標簽**，如：<br>

標簽格式

<標簽>內容</標簽>

HTML 元素

由**開始標簽**和**標簽中的內容**和**結束標簽**共同組成的**整體**，叫做一個元素。

如：

1
2
3
4
<body>
    <h1>超文本標記語言</h1>
    <p>歡迎來到HTML的世界</p>
</body>

HTML 屬性

把寫在**開始標簽**中**鍵值對（名稱/值對）**稱之為屬性。

HTML 元素可以設置屬性，就像長方形的長寬屬性一樣。屬性必須寫在**開始標簽**中，比如：<p align="center">段落</p>，屬性總是以**名稱/值**對的形式出現，比如：name="value"。

HTML屬性作用

  1. 給元素中添加附加信息（僅僅添加數據）
  2. 控制元素顯示的風格（改變元素默認顯示樣式）

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

效果展示

image-20210830231324486

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>

效果展示

image-20210830231732350

HTML 段落&換行

HTML中文字一般都是寫在標簽里面的，普通文字用的標簽就是段落P標簽。

在HTML中空格和換行標記都會被自動忽略，不會顯示，因此需要使用換行標簽<br>來手動換行。

標簽 描述 案例
<p> 普通文字標簽（段落標簽） <p>這是一個段落</p>
<br> 換行 <br/>

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>

效果展示

image-20210830231858151

HTML 頭部

頁面標題元素

<title>標簽定義了不同文檔的標題。

案例05

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>當前網頁在瀏覽器的標簽頁中的標題</title>
	</head>
	<body>
		<h1>超文本標記語言</h1>
		<p>歡迎來到HTML的世界</p>
	</body>
</html>

網頁參數設置元素

meta標簽描述了一些基本的元數據。

  1. <meta>標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。

  2. <meta> 元素通常用於指定網頁的描述，關鍵詞，文件的修改時間，作者，和其他元數據。

  3. <meta>可以使用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>標簽屬性**如下：

屬性 值 描述
align left|center|right 規定 hr 元素的對齊方式
color 顏色單詞 規定 hr 元素的顏色
size 像素 規定 hr 元素的高度。
width 像素|百分比 規定 hr 元素的寬度。

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

效果展示

image-20210830115551662

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

效果展示

image-20210830144910059

HTML 字符實體

HTML 中的預留字符必須被替換為字符實體。

一些在鍵盤上找不到的字符也可以使用字符實體來替換。

如：在 HTML 中不能使用小於號<和大於號>，這是因為瀏覽器會誤認為它們是標簽。

顯示結果 描述 實體名稱
空格 &nbsp;
< 小於號 &lt;
> 大於號 &gt;
© 版權 &copy;
® 注冊商標 &reg;
™ 商標 &trade

案例09

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p align="center">
			軟件開發培訓 &nbsp;&nbsp;&nbsp;&nbsp; 2222年&copy;版權歸屬創作人：張明星&trade;
		</p>
	</body>
</html>

效果展示

image-20210830145046294

HTML 超鏈接

HTML使用標簽<a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點擊這些內容來跳轉到**新的文檔**或者**當前文檔中的某個部分**。

  1. 當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

  2. 在標簽<a> 中使用href屬性來描述鏈接的地址。

  3. 在標簽<a> 中使用target="_blank"屬性來設置在瀏覽器新標簽頁中打開頁面。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

  1. 一個未訪問過的鏈接顯示為**藍色**字體並帶有下划線。

  2. 訪問過的鏈接顯示為**紫色**並帶有下划線。

  3. 點擊鏈接時，鏈接顯示為**紅色**並帶有下划線。

超鏈接屬性

屬性 值 描述
href URL 規定鏈接的目標 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<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>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<br><br><br><br><br><br><br><br><br><br>
		往下看↓<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 地址

圖片標簽屬性

顯示結果 值 實體名稱
src URL 規定圖片的目標 URL。
width %|值 規定圖片的寬度。
height %|值 規定圖片的高度。

定義圖像的語法

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

URL統一資源定位符

image-20210830094457461

圖片鏈接

HTML標簽可以相互嵌套。當在超鏈接a標簽中嵌套圖片后，圖片和超鏈接就合二為一，也就是說點擊圖片可以實現a標簽的跳轉功能。

案例11

1
2
3
4
5
6
7
8
9
10
11
12
<!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">

屬性值：

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

案例12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>

效果展示

image-20210830094744059

圖片整體居中

圖片通過align屬性只能控制顯示在**左邊**或者**右邊**，卻不能控制顯示在中間。

HTML的標簽可以嵌套，嵌套的時候往往外層標簽的屬性會作用於內層標簽，利用此特性可以使用具有居中排版的標簽來控制其內部的標簽居中顯示。

如使用<p></p>來包裹<img>標簽來控制<img>標簽居中顯示。

案例13

1
2
3
4
5
6
7
8
9
10
11
<!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>

效果展示

image-20210830094918061

作業

制作微信聊天界面

要求：實現如下效果

​ image-20210830094954258

制作博客文章網頁

要求：

  1. 分割線寬度640，

  2. 全部內容居中顯示

  3. 點擊底部的者文字，返回頂部標題

image-20210830095630022

美文排版

要求：自選內容或者按照圖文內容，實現類型如下效果

目的：學會使用HTML實現圖文排版，練習打字速度

img 
    </article>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Web前端三大核心技術之HTML 03-前端核心技術-HTML媒體 02-前端核心技術-HTML排版 （下） 04-前端核心技術-CSS基礎屬性 09-前端核心技術-JavaScript基礎語法 02-前端核心技術-HTML排版（上） 11-前端核心技術-JavaScript Redis核心技術與實戰(基礎部分) 【Web前端HTML5&CSS3】01-前端簡介 01-前端初識
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM