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

HTML

【web前端开发】HTML知识点超详细总结

發布時間：2024/1/8 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了【web前端开发】HTML知识点超详细总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

什么是網頁
常用的瀏覽器及內核
VScode和WebStrom使用
HTML常用標簽
文檔類型
網頁語言lang
字符集
title標簽
標題標簽
段落和換行標簽
文本格式化標簽
div和span標簽
圖像標簽
路徑
- 相對路徑
- - 同一級路徑
  - 上一級路徑:
  - 下一級路徑
- 絕對路徑
鏈接標簽
- 超鏈接標簽
- - 外部鏈接:
  - 內部鏈接:
  - 空鏈接:
- 下載鏈接
錨點鏈接
注釋與空格符
表格相關標簽
- 表格標簽
- 表頭單元格
- 表格的相關屬性
- 表格的結構標簽
- 合并單元格
列表標簽
- 無序列表(重要)
- 有序列表
- 自定義列表
表單標簽
- 表單域
- 表單控件(表單元素)
- label標簽
- select標簽
- textarea文本域標簽
- 表單屬性
語義標簽
多媒體標簽
- 視頻標簽
音頻標簽
總結:

什么是網頁

網頁是構成網站的基本元素，是承載各種網站應用的平臺

網頁通常是指HTML格式的文件文件擴展名為.html或.htm 它通過瀏覽器來閱讀
HTML不是一種編程語言,而是一種標記語言

常用的瀏覽器及內核

常用的瀏覽器有 IE瀏覽器（Internet explorer）火狐瀏覽器谷歌(chrome) Safari瀏覽器 Opera瀏覽器

瀏覽器內核（Rendering Engine），是指瀏覽器最核心的部分，負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript）并渲染（顯示）網頁

瀏覽器內核說明

IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	火狐瀏覽器內核
Safari	webkit	蘋果瀏覽器內核
chrome	Chromium/Blink	大部分國產瀏覽器最新版都采用Blink內核
Opera	Blink	跟隨chrome使用Blink內核,Blink其實是webkit的分支

VScode和WebStrom使用

工欲善其事,必先利其器.前端開發的軟件有很多,下面給大家介紹一下VScode和WebStrom的使用,我們可以在VScode和WebStrom上寫一些HTML文件

VScode
下載地址:https://code.visualstudio.com/
WebStorm
下載地址:https://www.jetbrains.com/webstorm/

使用VScode要下載一些插件,如果嫌麻煩,可以使用WebStorm.

HTML常用標簽

在講HTML標簽之前,先看下面這段代碼:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body></body> </html>

我們平時在使用編譯器編寫前端內容的時候，會生成這樣一些代碼，這些代碼就相當于HTML的骨架了,下面給大家簡單解釋一下這些代碼是什么意思

文檔類型<!DOCTYPE>

<!DOCTYPE>文檔類型的聲明，作用是告訴瀏覽器是以那種HTML版本來顯示網頁其中要注意兩點：- <!DOCTYPE html> 這句代碼的意思就是說當前是以HTML5版本來顯示網頁的- <!DOCTYPE>不是HTML5的標簽，只是文檔類型聲明標簽

網頁語言lang

lang是用來定義語言的種類

en 定義的語言為英語
zh-CN 定義的語言為中文

出現這個就說明當前網頁是一個英語網站,定義的語義為英語

字符集

字符集（Character set）是多個字符的集合，字符集種類較多，每個字符集包含的字符個數不同，常見字符集名稱：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。

UTF-8也叫萬國碼，是最常用的字符集編碼方式，基本上包含了所有國家需要用到的字符。

title標簽

定義文檔的標題, 瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上

<title>Document</title> title標簽里面的內容可以自己修改

簡單來說就是設置網頁的名字

標題標簽

在HTML中,標題標簽一共有6種,如下:

效果圖:

h1~h6標題標簽文字是逐漸變小的,一般常用的是h4標題標簽.

段落和換行標簽

<p></p>標簽用于定義段落可以將文檔文字分成若干段落大家理解為是寫作文,作文中的每一段文字就在一對<p></p>里面文本在瀏覽器中會根據游覽器大小子自動換行段落與段落之間有空隙 <br> 強制換行標簽是一個單標簽段落與段落之間的距離比較大,換行之間的距離比較小

文本格式化標簽

在網頁中,有些內容需要以特殊方式顯示,這時就需要用到文本格式化標簽
常用的文本格式化標簽如下:

加粗標簽:<strong></strong> 粗體標簽:<b></b>傾斜:<em></em> 斜體:<i></i>閃爍標簽:<blink></blink> 放大標簽:<big></big> 縮小標簽:<small></small>上標效果標簽: <sup></sup> 下標效果標簽: <sub></sub>刪除線標簽:<del></del>和<s></s> 下劃線標簽:<ins></ins>和<u></u>

div和span標簽

<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分。 <div>標簽常用于組合塊級元素，以便通過 CSS 來對這些元素進行格式化<span> 用于對文檔中的行內元素進行組合。 <span> 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。 <span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。

div和span是沒有語義的,它們就是盒子,用來放內容的

圖像標簽

下面是一些圖像標簽中一些常見屬性:

屬性屬性值說明

src	圖片路徑	必須要有的屬性
alt	文本	替換文本,圖片不能正常顯示時,顯示文本
title	文本	提示文本,鼠標放在圖片上,顯示的文字
width	像素	設置圖片寬度
height	像素	設置圖片高度
border	像素	設置圖片邊框

圖像標簽的注意點:

圖像可以有多個屬性,必須在標簽名后面
屬性之間不分先后
屬性采用鍵值對的格式,即 “屬性 = 屬性值”

路徑

相對路徑

相對路徑就是以引用圖片作為參考,得到的路徑
相對路徑分為3種同一級路徑,上一級路徑和下一級路徑

同一級路徑

以圖片文件舉例,這里的圖片文件和HTML文件就是在web文件夾里面,這就是同一路徑下,此時如果要引用這里的圖片文件就可以這么寫:

上一級路徑:

index2文件是code文件夾里的,而code文件夾和1.png這個圖片文件都在WEB文件夾下,那么1.png文件就是在index2的上一級路徑
如果在index2里面引用1.png文件的話,寫法如下:

<img src="../1.png"/> ../就是返回上一級路徑 ../ ../就是返回上兩級路徑以此類推

下一級路徑

如果index1要引用images里面的2.png路徑,因為index1與images文件是同一級,圖片在images文件夾里面,那么圖片文件就是在index1的下一級路徑
如果index1文件要引用2.png圖片文件的話,寫法如下:

絕對路徑

絕對路徑是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。

例如:

這個一般使用的很少,畢竟這只是我電腦里的文件,別人電腦在我這個路徑下沒有我想要的文件

鏈接標簽

超鏈接標簽

外部鏈接:

<a> 標簽用于定義超鏈接標簽作用是跳轉到另一個鏈接語法格式: <a href="跳轉鏈接", target="目標窗口的彈出方式">文本或者圖像</a> 屬性作用

href	用于指定目標的url地址,從而實現超鏈接(必有屬性)
target	用于指定連接的打開方式,_self是將當前頁面跳轉到鏈接地址,_blank是以新窗口打開

內部鏈接:

鏈接標簽也可以跳轉到寫好的HTML界面,例如我要在test里面設置一個超鏈接跳轉到index1的界面,那么可以這么寫:

<a href="index1.HTML">文本或者圖片</a> #同一級路徑

空鏈接:

如果沒有想好跳轉的地址,就可以使用空鏈接

<a href="#">文本或者圖片</a>

下載鏈接

下載鏈接地址是文件(.exe 或者是zip等壓縮包形式) 跳轉后會自動下載文件

錨點鏈接

錨點鏈接:當我們點擊鏈接,可以跳轉到頁面中的某個位置

在鏈接文本的href屬性中,設置屬性名為"#名字"的形式
在目標標簽中,添加一個屬性 id = 剛才的名字

注釋與空格符

注釋在寫代碼時還是很重要的,如果代碼很多,如果要改之前寫的某個地方,就非常難找.那么在寫代碼時就可以寫注釋標識一下,這里寫的是什么內容. 方便后續的檢查和修改 . 一般編譯器都有自己生成注釋的快捷鍵,我只用過WebStorm和VScode,快捷鍵都是 ctrl + / 如果不喜歡也可以自定義快捷鍵

然后在HTML中會有一些特殊符號或者不方便使用,對于這些符號就需要用特殊符號來代替
最常用的就是空格符了

空格: &nbsp

直接記的話可能不太好記,大家可以記成&nb super plus

表格相關標簽

表格三要素 table、tr、td 缺一不可

表格標簽

<table></table> 用來定義表格的標簽 <tr></tr> 用來定義表格中的行 <td></td> 用來定義表格中的單元格

表頭單元格

一般表頭位于表格的第一行,使用表頭單元格標簽可以用來突出表頭內容的重要性

<th></th> 表頭單元格里面的文本會加粗居中顯示

表格的相關屬性

這些屬性要寫到table標簽里面

屬性名屬性值描述

align	left,right,center	單元格整體的對齊方式
border	0或""(空)	規定單元格是否有邊框,默認是沒有的
cellpadding	像素值	創建單元格內容與其邊框之間的空白
cellspacing	像素值	設置單元格之間的距離
width	像素值或百分比	設置表格的寬度
height	像素值或百分比	設置表格的高度

表格的結構標簽

有的時候表格很大,為了更好的表示語義,就可以使用表格結構標簽來解決這個問題

<thead></thead> 表格的頭部區域里面必須有<tr>標簽一般位于第一行 <tbody></tbody> 表格的主體區域

合并單元格

合并單元格的方式

跨行合并:rowspan=“合并單元格的個數”
跨列合并:colspan=“合并單元格的個數”

目標單元格用來寫合并代碼

跨行合并:最上測為目標單元格
跨列合并:最左側為目標單元格

合并單元格的三個步驟:

先確定是跨行合并還是跨列合并

找到目標單元格,寫合并代碼

刪除多余的單元格

列表標簽

列表有三大類:== 無序列表,有序列表和自定義列表==

無序列表(重要)

<body><ul><li>內容1</li><li>內容2</li><li>內容3</li></ul> </body> 解釋: 1. <ul>標簽表示的就是無序列表里面只能放<li>標簽 2. 列表項用<li>標簽來定義 <li>標簽里面可以放任意的標簽

效果如下:

有序列表

<ol> 標簽表示的就是有序列表只有這一點不同 <body><ol><li>內容1</li><li>內容2</li><li>內容3</li></ol> </body>

效果:

自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

<body><dl><dt>表格</dt><dd>無序列表</dd><dd>有序列表</dd><dd>自定義列表</dd></dl> </body> 解釋: <dl> 標簽用于定義自定義列表 <dt> 自定義列表項目 <dd> 用于解釋自定義列表項目

效果:

雖然解釋自定義列表項目的內容不和自定義列表項目對齊,這是正常現象,可以通過CSS進行修改

表單標簽

一張完整的表單通常是由表單域,表單控件(表單元素)和提示信息構成

表單域

表單域是表示表單元素的區域

<from action="url地址" method="提交方式" name="表單域名稱"></from> 解釋: <from> 標簽用于定義表單域 <from> 會把表單元素信息提交給服務器

常用屬性:

屬性屬性值作用

action	url地址	用于指定接受并處理表單數據的服務器的url的地址
method	get或post	用于設置表單的提交方式,值為get或post
name	名稱	指定表單的名稱,用于區分同一區域內多個表單域

表單控件(表單元素)

表單元素是允許用戶在表單中輸入內容
接下來重點介紹以下表單元素:

input輸入表單元素
select下拉表單元素
textarea文本域元素

<input type="屬性值"> type 是必須要寫的屬性屬性值描述

button	定義可點擊按鈕
checkbox	定義復選框
file	定義輸入字段和"瀏覽"按鈕,供文件上傳
hidden	定義隱藏的輸入字段
image	定義圖像形式的提交按鈕
password	定義密碼字段,該字段的字符會被掩蓋
radio	定義單選按鈕
reset	定義重置按鈕,重置按鈕會清楚表單內的所有數據
submit	定義提交按鈕,提交按鈕會將表單元素提交給服務器
text	定于單行的輸入字段,用戶可輸入文本,默認寬度為20字符
email	限制用戶必須輸入Email類型
url	限制用戶必須輸入url類型
date	限制用戶必須輸入日期類型
time	限制用戶必須輸入時間類型
month	限制用戶必須輸入月份類型
week	限制用戶必須輸入周類型
number	限制用戶必須輸入數字類型
tel	手機號碼
search	搜索框
color	生成一個顏色選擇表單

label標簽

<label for="值">文本</label> <input type="" name="" id="值"> 解釋: <label>標簽為input元素定義標注 <label>標簽用于綁定一個表單元素, 當點擊<lable>標簽里面的文本時, 瀏覽器會自動將光標轉到或者選擇對應的表單元素上, 增加用戶的體驗注意:for里面的值和id里面的值必須是一樣的

select標簽

select標簽就是下拉列表標簽,應用場景:如填寫家庭地址之類的,會提供省份和城市供用戶選擇,這時候就可以使用select標簽來實現這個功能

<body>選擇:<select><option>選項一</option><option>選項二</option><option>選項三</option></select> </body> 解釋: <select>標簽里面至少有一對<option>標簽 <option selected="selected">文本</option> -> <option>標簽里面可以加selected="selected"這一句話,那么此時默認選項就是當前選項

效果:

textarea文本域標簽

在表單元素中,textarea標簽用于定義多行文本輸入的控件,使用textarea標簽可以輸入更多的文字

<from><textarea rows="5" cols="20">默認文字</textarea></from> rows="" 這是顯示的行數 cols=""這是每行有多少字默認文字可加可不加

效果:

表單屬性

在HTML5中還新增了一些表單屬性

屬性值說明

required	required	表單擁有該屬性的內容不能為空,一定要填
placeholder	提示文本	表單的提示信息,存在默認值不顯示
autofocus	autofocus	頁面加載完成后自動聚焦到指定表單
autocomplete	off/on	在用戶進行輸入時,會提示之前輸入過的值,需要放在表單內,要有name屬性且成功提交才可以
multiple	multiple	同時多選文件提交

語義標簽

之前布局頁面使用div來做的,但是對搜索引擎來說,div是沒有語義的
因此HTML5里面就新增了一些語義標簽

<header></header> 頭部標簽 <nav></nav> 導航標簽 <article></article> 內容標簽 <section></section> 定義文檔某個區域 <aside></aside> 側邊欄標簽 <footer></footer> 底部標簽解釋: 這些標簽要配合CSS來使用在IE9中,需要將這些元素轉化為塊級元素

多媒體標簽

在HTML5中新增了多媒體標簽video和audio標簽,這兩個標簽可以幫助我們很方便的在網頁中嵌入音頻和視頻

視頻標簽

<video></video> 視頻標簽語法格式: <video src="文件地址" 屬性=""></video>

video里的常用屬性:

屬性值描述

controls	controls	向用戶顯示播放控件
autoplay	autoplay	視頻就緒自動播放
width	像素	設置播放器寬度
height	像素	設置播放器高度
loop	loop	設置播是否繼續播放視頻,循環播放
preload	auto(預先加載視頻) none(不預先加載視頻)	是否加載視頻
src	url	視頻url地址
poster	Imgurl	加載等待的畫面圖片
muted	muted	靜音播放

video標簽只支持3種視頻樣式,分別是MP4,WebM和Ogg 盡量使用MP4的視頻樣式

音頻標簽

音頻標簽同樣支持3中格式的音頻,分別是MP3,Wav和Ogg格式的音頻,盡量使用MP3格式的音頻
常見屬性