【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
<html lang="en">lang是用來定義語言的種類
- en 定義的語言為英語
- zh-CN 定義的語言為中文
出現這個就說明當前網頁是一個英語網站,定義的語義為英語
字符集
<meta charset="UTF-8">字符集（Character set）是多個字符的集合，字符集種類較多，每個字符集包含的字符個數不同，常見字符集名稱：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。
- UTF-8也叫萬國碼 ，是最常用的字符集編碼方式，基本上包含了所有國家需要用到的字符。
title標簽
定義文檔的標題, 瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上
<title>Document</title> title標簽里面的內容可以自己修改簡單來說就是設置網頁的名字
標題標簽
在HTML中,標題標簽一共有6種,如下:
<body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6><p>文本</p> </body>效果圖:
h1~h6標題標簽文字是逐漸變小的,一般常用的是h4標題標簽.
段落和換行標簽
<p></p>標簽用于定義段落 可以將文檔文字分成若干段落 大家理解為是寫作文,作文中的每一段文字就在一對<p></p>里面 文本在瀏覽器中會根據游覽器大小子自動換行 段落與段落之間有空隙 <br> 強制換行標簽 是一個單標簽 段落與段落之間的距離比較大,換行之間的距離比較小文本格式化標簽
在網頁中,有些內容需要以特殊方式顯示,這時就需要用到文本格式化標簽
常用的文本格式化標簽如下:
div和span標簽
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分。 <div>標簽常用于組合塊級元素，以便通過 CSS 來對這些元素進行格式化<span> 用于對文檔中的行內元素進行組合。 <span> 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。 <span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。div和span是沒有語義的,它們就是盒子,用來放內容的
圖像標簽
<img> 單標簽 <img src = "圖片路徑" >下面是一些圖像標簽中一些常見屬性:
| src | 圖片路徑 | 必須要有的屬性 |
| alt | 文本 | 替換文本,圖片不能正常顯示時,顯示文本 |
| title | 文本 | 提示文本,鼠標放在圖片上,顯示的文字 |
| width | 像素 | 設置圖片寬度 |
| height | 像素 | 設置圖片高度 |
| border | 像素 | 設置圖片邊框 |
圖像標簽的注意點:
- 圖像可以有多個屬性,必須在標簽名后面
- 屬性之間不分先后
- 屬性采用鍵值對的格式,即 “屬性 = 屬性值”
路徑
相對路徑
相對路徑就是以引用圖片作為參考,得到的路徑
相對路徑分為3種 同一級路徑,上一級路徑和下一級路徑
同一級路徑
以圖片文件舉例,這里的圖片文件和HTML文件就是在web文件夾里面,這就是同一路徑下,此時如果要引用這里的圖片文件就可以這么寫:
上一級路徑:
index2文件是code文件夾里的,而code文件夾和1.png這個圖片文件都在WEB文件夾下,那么1.png文件就是在index2的上一級路徑
如果在index2里面引用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="#">文本或者圖片</a>下載鏈接
下載鏈接地址是文件(.exe 或者是zip等壓縮包形式) 跳轉后會自動下載文件
錨點鏈接
錨點鏈接:當我們點擊鏈接,可以跳轉到頁面中的某個位置
- 在鏈接文本的href屬性中,設置屬性名為"#名字"的形式
- 在目標標簽中,添加一個屬性 id = 剛才的名字
注釋與空格符
注釋在寫代碼時還是很重要的,如果代碼很多,如果要改之前寫的某個地方,就非常難找.那么在寫代碼時就可以寫注釋標識一下,這里寫的是什么內容. 方便后續的檢查和修改 . 一般編譯器都有自己生成注釋的快捷鍵,我只用過WebStorm和VScode,快捷鍵都是 ctrl + / 如果不喜歡也可以自定義快捷鍵
然后在HTML中會有一些特殊符號或者不方便使用,對于這些符號就需要用特殊符號來代替
最常用的就是空格符了
直接記的話可能不太好記,大家可以記成&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> 用于解釋自定義列表項目效果:
雖然解釋自定義列表項目的內容不和自定義列表項目對齊,這是正?，F象,可以通過CSS進行修改
表單標簽
一張完整的表單通常是由表單域,表單控件(表單元素)和提示信息構成
表單域
表單域是表示表單元素的區域
<from action="url地址" method="提交方式" name="表單域名稱"><!-- 表單元素 --></from> 解釋: <from> 標簽用于定義表單域 <from> 會把表單元素信息提交給服務器常用屬性:
| action | url地址 | 用于指定接受并處理表單數據的服務器的url的地址 |
| method | get或post | 用于設置表單的提交方式,值為get或post |
| name | 名稱 | 指定表單的名稱,用于區分同一區域內多個表單域 |
表單控件(表單元素)
表單元素是允許用戶在表單中輸入內容
接下來重點介紹以下表單元素:
- input輸入表單元素
- select下拉表單元素
- textarea文本域元素
| button | 定義可點擊按鈕 |
| checkbox | 定義復選框 |
| file | 定義輸入字段和"瀏覽"按鈕,供文件上傳 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的提交按鈕 |
| password | 定義密碼字段,該字段的字符會被掩蓋 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕,重置按鈕會清楚表單內的所有數據 |
| submit | 定義提交按鈕,提交按鈕會將表單元素提交給服務器 |
| text | 定于單行的輸入字段,用戶可輸入文本,默認寬度為20字符 |
| 限制用戶必須輸入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里面就新增了一些語義標簽
多媒體標簽
在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的視頻樣式
音頻標簽
<video src="文件地址" 屬性=""></video>音頻標簽同樣支持3中格式的音頻,分別是MP3,Wav和Ogg格式的音頻,盡量使用MP3格式的音頻
常見屬性
| autoplay | autoplay | 音頻就緒后馬上播放 |
| controls | controls | 向用戶顯示播放控件,如播放按鈕 |
| loop | loop | 設置音頻循環播放 |
| src | url | 音頻url地址 |
總結:
感謝你的觀看!
前端的知識點很多,有些地方最好還是自己嘗試一下比較好,可以方便理解和記憶.
建議收藏后面可以還會增加一些新的東西
總結
以上是生活随笔為你收集整理的【web前端开发】HTML知识点超详细总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android实现仿QQ登录可编辑下拉菜
- 下一篇： HTML基础二