當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 基础总结

發布時間：2024/3/13 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 基础总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1. html 骨架（頁面固定結構）
2. html 注釋
3. html 標題標簽
4. 換行標簽
5. 水平線標簽
6. 文本格式化標簽
7. 圖片標簽
- 7.1 圖片標簽的使用
- 7.2 圖片標簽的屬性
8. 路徑
- 8.1 絕對路徑
- 8.2 相對路徑
9. 音頻標簽
10. 視頻標簽
11. 鏈接標簽
12. 段落標簽
13. 列表
- 13.1 無序列表
- 13.2 有序列表
- 13.3 自定義列表
14. 表格
- 14.1 基本標簽
- 14.2 表格屬性
- 14.3 表格標題和表頭單元格標簽
- 14.4 結構標簽
- 14.5 合并單元格
15. 表單
- 15.1 input 系列標簽
- 15.2 button 按鈕標簽
- 15.3 select 下拉菜單標簽
- 15.4 textarea 文本域標簽
- 15.5 label 標簽
16. 語義化標簽
- 16.1 沒有語義的布局標簽 - div 和 span
- 16.2 有語義的布局標簽（了解）
17. 字符實體
18. 綜合案例
- 18.1 優秀學生信息表
- 18.2 相親會員注冊表單

1. html 骨架（頁面固定結構）

整體、頭部、標題、主體

<html><head><title>網頁的標題</title></head><body>網頁的主體內容</body> </html>

html 標簽：網頁的整體
head 標簽：網頁的頭部
body 標簽：網頁的身體
title 標簽：網頁的標題

2. html 注釋

注釋格式

3. html 標題標簽

格式：h 系列標簽

標題大小根據級別逐漸縮小，標題標簽寫在 body 標簽中。

4. 換行標簽

格式：

<br>

換行標簽讓文字強制換行顯示，是單標簽。

5. 水平線標簽

格式：

<hr>

單標簽，在頁面中顯示一條水平線。

6. 文本格式化標簽

文本格式化標簽完成文字的加粗、下劃線、傾斜、刪除線等效果。

標簽說明

b/strong	加粗
u/ins	下劃線
i/em	傾斜
s/del	刪除線

7. 圖片標簽

7.1 圖片標簽的使用

在網頁中顯示圖片需要用到圖片標簽。

格式：

<img src="URL" alt="">// src 為屬性名，后面跟屬性值。 // URL 可以是本地地址，也可以是公網上的地址。 // alt 屬性用來為圖像定義一串預備的可替換的文本。

是單標簽，展示對應的效果需要借助標簽的屬性進行設置。

7.2 圖片標簽的屬性

必需的屬性

屬性值描述

alt	text	規定圖像的替代文本，當圖片加載失敗會顯示替換的內容。
src	URL	規定顯示圖像的 URL。

可選的屬性

屬性值描述

title	提示文本	鼠標懸停時顯示的文本。
align	top/bottom/middle/left/right	不推薦使用。規定如何根據周圍的文本來排列圖像。
border	pixels	不推薦使用。定義圖像周圍的邊框。
height	pixels%	定義圖像的高度。
hspace	pixels	不推薦使用。定義圖像左側和右側的空白。
ismap	URL	將圖像定義為服務器端圖像映射。
longdesc	URL	指向包含長的圖像描述文檔的 URL。
usemap	URL	將圖像定義為客戶器端圖像映射。
vspace	pixels	不推薦使用。定義圖像頂部和底部的空白。
width	pixels%	設置圖像的寬度。

示例

8. 路徑

8.1 絕對路徑

示例：

8.2 相對路徑

示例：

9. 音頻標簽

音頻標簽用于在頁面中插入音頻，支持的格式：MP3、Wav、Ogg。

格式：

常用屬性：

屬性名功能

loop	循環播放
autoplay	自動播放（部分瀏覽器不支持）
controls	顯示播放的控件
src	音頻的路徑

示例：

10. 視頻標簽

視頻標簽用于在網頁中插入視頻。

格式：

常用屬性：

屬性名功能

loop	循環播放
autoplay	自動播放（谷歌瀏覽器需配合muted實現靜音播放）
controls	顯示播放的控件
src	視頻的路徑

示例：

11. 鏈接標簽

場景：點擊之后，從一個頁面跳轉到另一個頁面。
稱呼：a 標簽、超鏈接、錨鏈接。
特點：雙標簽，需要設置 a 標簽的 href 屬性。

格式：

target 屬性：目標網頁的打開形式

取值效果

_self	默認值，當前窗口跳轉（覆蓋原網頁）
_blank	在新窗口跳轉（保留原網頁）

示例：

當開發網站初期，我們還不知道跳轉地址的時候， href 的值書寫為 # ，是空鏈接的意思。

12. 段落標簽

p 標簽定義段落。p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，也可以在樣式表中規定。所有主流瀏覽器都支持 p 標簽。

格式：

<p>This is some text in a very short paragraph</p>

可選屬性：

屬性值描述

align

left/right/center/justify

不贊成使用。請使用樣式取代它。規定段落中文本的對齊方式。

示例：

<p>秦時明月主題曲《情動》，旋律優美，扣人心弦，推薦收聽！<a href="http://www.zgei.com/?name=%E6%83%85%E5%8A%A8&type=netease">《情動》</a> </p>

13. 列表

列表的使用場景：在網頁中按照行展示關聯性的內容，如：新聞列表、排行榜、賬單等。
特點：按照行的方式，整齊的顯示內容。
種類：無序列表、有序列表、自定義列表。

13.1 無序列表

標簽組成：

標簽名說明

ul	表示無序列表的整體，用于包裹標簽
li	表示無序列表的每一項，用于包含每一行的內容

列表的每一項前默認顯示圓點標識；ul 標簽中只允許包含 li 標簽，li 標簽可以包含任意內容。

示例：

13.2 有序列表

標簽組成：

標簽名說明

ol	表示有序列表的整體，用于包裹 li 標簽
li	表示有序列表的每一項，用于包含每一行的內容

列表的每一項前默認顯示序號標識；ol 標簽中只允許包含 li 標簽，li 標簽可以包含任意內容。

示例：

13.3 自定義列表

標簽組成：

標簽名說明

dl	表示自定義列表的整體，用于包裹 dt/dd 標簽
dt	表示自定義列表的主題
dd	表示自定義列表的針對主題的每一項內容

dd 前會默認顯示縮進效果；dl 標簽中只允許包含 dt/dd 標簽，dt/dd 標簽可以包含任意內容。

示例：

14. 表格

14.1 基本標簽

標簽名說明

table	表格整體，可用于包裹多個 tr
tr	表格每行，用于包裹 td
td	表格單元格，可用于包裹內容

嵌套關系：table > tr > td

示例：

上面示例顯示效果是沒有邊框的，需要設置屬性。

14.2 表格屬性

相關屬性：

屬性名稱屬性值效果

align	left/center/right	規定表格相對周圍元素的對齊方式
cellpadding	像素值	規定單元邊沿與其內容之間的空白，默認1像素
cellspacing	像素值	規定單元格之間的空白，默認2像素
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

PS：在實際開發中樣式效果推薦用 CSS 設置。

示例：

14.3 表格標題和表頭單元格標簽

用處：在表格中表示整體大標題和一系列小標題。

其他標簽：

標簽名名稱說明

caption	表格大標題	表示表格整體大標題，默認在表格整體頂部居中位置顯示
th	表頭單元格	表示一列小標題，通常用于表格第一行，默認內部文字加粗并居中顯示

PS：caption 標簽書寫在 table 標簽內部；th 標簽書寫在 tr 標簽內部（用于替換 td 標簽）。

示例：

<table border="1"><caption><strong>學生成績單</strong></caption><tr><th>姓名</th><th>成績</th><th>評語</th></tr><tr><td>小紅</td><td>100</td><td>優秀</td></tr><tr><td>小藍</td><td>90</td><td>優秀</td></tr> </table>

14.4 結構標簽

用處：讓表格的內容結構分組，突出表格的不同部分（頭部、主體、底部），使語義更加清晰。

結構標簽：

標簽名名稱

thead	表格頭部
tbody	表格主題
tfoot	表格底部

PS：表格結構標簽內部用于包裹 tr 標簽，表格的結構標簽可以省略。

示例：

<table border="1"><caption><strong>學生成績單</strong></caption><thead><tr><th>姓名</th><th>成績</th><th>評語</th></tr></thead><tbody><tr><td>小紅</td><td>100</td><td>優秀</td></tr><tr><td>小藍</td><td>90</td><td>優秀</td></tr></tbody><tfoot><tr><td>總結</td><td>非常優秀</td><td>非常優秀</td></tr></tfoot> </table>

14.5 合并單元格

合并單元格方式：

跨行合并：rowspan=“合并單元格的個數” ；最上側單元格為目標單元格, 寫合并代碼。
跨列合并：colspan=“合并單元格的個數”；最左側單元格為目標單元格, 寫合并代碼。

合并單元格三步曲：

先確定是跨行還是跨列合并。
找到目標單元格. 寫上合并方式 = 合并的單元格數量。比如：<td colspan=“2”></td>。
刪除多余的單元格。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>合并單元格</title> </head> <body><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table> </body> </html>

效果：

15. 表單

15.1 input 系列標簽

用處：在網頁中顯示收集用戶信息的表單效果，如：登錄頁、注冊頁。
input 標簽可以通過 type 屬性值的不同展示不同的效果。

type 屬性值

示例

請輸入內容：<input type="text"> <br> 請輸入密碼：<input type="password">  <br> 單選框：<input type="radio"> <br> 多選框：<input type="checkbox"> <br> 上傳文件：<input type="file">

input 按鈕系列標簽

標簽名type 屬性值說明

input	submit	提交按鈕，點擊之后提交數據給后端服務器
input	reset	重置按鈕，點擊之后恢復表單默認值
input	button	普通按鈕，默認無功能，之后配合 js 添加功能

PS：如果需要實現以上按鈕功能，需要配合 form 標簽使用。form 使用方法：用 form 標簽把表單標簽一起包裹起來即可。

示例：

15.2 button 按鈕標簽

button 標簽用于在網頁中顯示用戶點擊的按鈕。

type 屬性值同 input

標簽名type 屬性值說明

input	submit	提交按鈕，點擊之后提交數據給后端服務器
input	reset	重置按鈕，點擊之后恢復表單默認值
input	button	普通按鈕，默認無功能，之后配合 js 添加功能

PS：谷歌瀏覽器中 button 默認是提交按鈕，button 標簽是雙標簽，便于包裹其他內容：文字、圖片等。

示例：

15.3 select 下拉菜單標簽

場景：在網頁中提供多個選擇項的下拉菜單表單控件

標簽組成：

select標簽：下拉菜單的整體
option標簽：下拉菜單的每一項

常見屬性：

selected：下拉菜單的默認選中

示例：

15.4 textarea 文本域標簽

場景：在網頁中提供可輸入多行文本的表單控件。

常見屬性：

cols：規定了文本域內可見寬度
rows：規定了文本域內可見行數

注意點：

右下角可以拖拽改變大小
實際開發時針對于樣式效果推薦用 CSS 設置

示例：

15.5 label 標簽

場景：常用于綁定內容與表單標簽的關系。

使用方法一：

使用 label 標簽把內容（如：文本）包裹起來

在表單標簽上添加 id 屬性

在 label 標簽的 for 屬性中設置對應的 id 屬性值

使用方法二：

直接使用 label 標簽把內容（如：文本）和表單標簽一起包裹起來

需要把 label 標簽的 for 屬性刪除即可

示例：

性別： <input type="radio" name="sex" id=""> <label for="">男</label> <label><input type="radio" name="sex">女</label>

16. 語義化標簽

16.1 沒有語義的布局標簽 - div 和 span

場景：實際開發網頁時會大量頻繁的使用到 div 和 span 這兩個沒語義的布局標簽。
div 標簽：一行只顯示一個（獨占一行）。
span 標簽：一行可以顯示多個。

示例：

普通文字 <div>這是 div 標簽</div> <div>這是 div 標簽</div> <span>這是 span 標簽</span> <span>這是 span 標簽</span>

16.2 有語義的布局標簽（了解）

標簽語義

header	網頁頭部
nav	網頁導航
footer	網頁底部
aside	網頁側邊欄
section	網頁區塊
article	網頁文章

PS：以上標簽顯示特點和 div 一致，但是比 div 多了不同的語義。

示例：

17. 字符實體

場景：在網頁中展示特殊符號效果時，需要使用字符實體替代。

常見字符實體：

18. 綜合案例

18.1 優秀學生信息表

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><table border="1" width="400" height="400"><caption><h3>優秀學生信息表格</h3></caption><thead><tr><th>年級</th><th>姓名</th><th>學號</th><th>班級</th></tr></thead><tbody><tr><td rowspan="2">高三</td><td>張三</td><td>110</td><td>三年二班</td></tr><tr><td>趙四</td><td>120</td><td>三年三班</td></tr></tbody><tfoot><tr><td>評語</td><td colspan="3">你們都很優秀</td></tr></tfoot></table> </body> </html>

18.2 相親會員注冊表單

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>青春不常在，抓緊談戀愛</h1><hr><form>昵稱：<input type="text" placeholder="請輸入昵稱"><br><br>性別：<label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label><br><br>所在城市：<select><option>上海</option><option>北京</option><option>廣州</option><option>深圳</option></select><br><br>婚姻狀況：<input type="radio" name="marry" checked>未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">保密<br><br>喜歡的類型：<input type="checkbox" checked>可愛<input type="checkbox" checked>性感<input type="checkbox">御姐<input type="checkbox">蘿莉<input type="checkbox">小鮮肉<input type="checkbox">大叔<br><br>個人介紹：<br><br><textarea name="" id="" cols="60" rows="10"></textarea><h3>我承諾</h3><ul><li>年滿18歲、單身</li><li>抱著嚴肅的態度</li><li>真誠尋找另一半</li></ul><input type="checkbox">我同意所有條款<br><br><input type="submit" value="免費注冊"><input type="reset"></form> </body> </html>

總結

以上是生活随笔為你收集整理的HTML5 基础总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

基础

上一篇：求图像边界点坐标c语言,三、Window
下一篇： Excel文件导出，前端导出或者后端导出