當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2024/1/8 HTML 28 豆豆

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

文章目錄

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

什么是網(wǎng)頁

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺

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

常用的瀏覽器及內(nèi)核

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

瀏覽器內(nèi)核（Rendering Engine），是指瀏覽器最核心的部分，負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用HTML、JavaScript）并渲染（顯示）網(wǎng)頁

瀏覽器內(nèi)核說明

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

VScode和WebStrom使用

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

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

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

HTML常用標(biāo)簽

在講HTML標(biāo)簽之前,先看下面這段代碼:

<!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>

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

文檔類型<!DOCTYPE>

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

網(wǎng)頁語言lang

lang是用來定義語言的種類

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

出現(xiàn)這個就說明當(dāng)前網(wǎng)頁是一個英語網(wǎng)站,定義的語義為英語

字符集

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

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

title標(biāo)簽

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

<title>Document</title> title標(biāo)簽里面的內(nèi)容可以自己修改

簡單來說就是設(shè)置網(wǎng)頁的名字

標(biāo)題標(biāo)簽

在HTML中,標(biāo)題標(biāo)簽一共有6種,如下:

效果圖:

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

段落和換行標(biāo)簽

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

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

在網(wǎng)頁中,有些內(nèi)容需要以特殊方式顯示,這時就需要用到文本格式化標(biāo)簽
常用的文本格式化標(biāo)簽如下:

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

div和span標(biāo)簽

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

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

圖像標(biāo)簽

下面是一些圖像標(biāo)簽中一些常見屬性:

屬性屬性值說明

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

圖像標(biāo)簽的注意點:

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

路徑

相對路徑

相對路徑就是以引用圖片作為參考,得到的路徑
相對路徑分為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圖片文件的話,寫法如下:

絕對路徑

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

例如:

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

鏈接標(biāo)簽

超鏈接標(biāo)簽

外部鏈接:

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

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

內(nèi)部鏈接:

鏈接標(biāo)簽也可以跳轉(zhuǎn)到寫好的HTML界面,例如我要在test里面設(shè)置一個超鏈接跳轉(zhuǎn)到index1的界面,那么可以這么寫:

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

空鏈接:

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

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

下載鏈接

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

錨點鏈接

錨點鏈接:當(dāng)我們點擊鏈接,可以跳轉(zhuǎn)到頁面中的某個位置

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

注釋與空格符

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

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

空格: &nbsp

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

表格相關(guān)標(biāo)簽

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

表格標(biāo)簽

<table></table> 用來定義表格的標(biāo)簽 <tr></tr> 用來定義表格中的行 <td></td> 用來定義表格中的單元格

表頭單元格

一般表頭位于表格的第一行,使用表頭單元格標(biāo)簽可以用來突出表頭內(nèi)容的重要性

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

表格的相關(guān)屬性

這些屬性要寫到table標(biāo)簽里面

屬性名屬性值描述

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

表格的結(jié)構(gòu)標(biāo)簽

有的時候表格很大,為了更好的表示語義,就可以使用表格結(jié)構(gòu)標(biāo)簽來解決這個問題

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

合并單元格

合并單元格的方式

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

目標(biāo)單元格用來寫合并代碼

跨行合并:最上測為目標(biāo)單元格
跨列合并:最左側(cè)為目標(biāo)單元格

合并單元格的三個步驟:

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

找到目標(biāo)單元格,寫合并代碼

刪除多余的單元格

列表標(biāo)簽

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

無序列表(重要)

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

效果如下:

有序列表

<ol> 標(biāo)簽表示的就是有序列表只有這一點不同 <body><ol><li>內(nèi)容1</li><li>內(nèi)容2</li><li>內(nèi)容3</li></ol> </body>

效果:

自定義列表

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

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

效果:

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

表單標(biāo)簽

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

表單域

表單域是表示表單元素的區(qū)域

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

常用屬性:

屬性屬性值作用

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

表單控件(表單元素)

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

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

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

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

label標(biāo)簽

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

select標(biāo)簽

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

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

效果:

textarea文本域標(biāo)簽

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

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

效果:

表單屬性

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

屬性值說明

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

語義標(biāo)簽

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

<header></header> 頭部標(biāo)簽 <nav></nav> 導(dǎo)航標(biāo)簽 <article></article> 內(nèi)容標(biāo)簽 <section></section> 定義文檔某個區(qū)域 <aside></aside> 側(cè)邊欄標(biāo)簽 <footer></footer> 底部標(biāo)簽解釋: 這些標(biāo)簽要配合CSS來使用在IE9中,需要將這些元素轉(zhuǎn)化為塊級元素

多媒體標(biāo)簽

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

視頻標(biāo)簽

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

video里的常用屬性:

屬性值描述

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

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

音頻標(biāo)簽

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

屬性值描述

autoplay	autoplay	音頻就緒后馬上播放
controls	controls	向用戶顯示播放控件,如播放按鈕
loop	loop	設(shè)置音頻循環(huán)播放
src	url	音頻url地址

總結(jié):

感謝你的觀看!
前端的知識點很多,有些地方最好還是自己嘗試一下比較好,可以方便理解和記憶.
建議收藏后面可以還會增加一些新的東西

總結(jié)

以上是生活随笔為你收集整理的【web前端开发】HTML知识点超详细总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android实现仿QQ登录可编辑下拉菜
下一篇： HTML基础二