HTML基礎知識總結
目錄
- 標籤分類
- 常用標籤
- 表單
- 框架
- 常用的佈局組合標籤
- HTML4和HTML5的區別：
- HTML5 中新增的語義標籤 - 瞭解
- HTML5 新的表單屬性
- form 新屬性
- input 新屬性
- HTML5 新的表單元素 -- 瞭解
- HTML5 中新的 input 型別
- HTML5 中新增的音訊
- HTML5 中新增的視訊
- HTML5 中已經移除的元素
- 轉義符號
標籤的屬性：多個屬性中間用空格
< 標籤名稱 屬性名 1 = " 屬性值 " 屬性名 2 = " 屬性值 " ></ 標籤名稱 >
<p id = "p1" name = "p1" >
</p>
標籤分類
標籤分類：塊狀元素、行級元素
塊狀元素：一般都是新起一行，可以容納行內元素和其他塊級元素；
行級元素 ：一般都是語義級別的基本元素，一般只能容納文字或者其他行內元素。
塊狀元素和行內元素的區別：
- 1 、 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度； 行內元素會排列到同一行裡，其寬度隨元素的內容變化而變化。
- 2 、塊級元素可以設定寬高；行內元素設定寬高無效。
- 3 、塊級元素可以設定 margin ， padding 屬性；行內元素的水平方向的 padding會有邊距效果，但是豎 直方向的 padding沒有效果。（此處的屬性稍後介紹）
屬於塊狀元素的：
標題標籤h1-h6,
段落標籤p,
水平線標籤hr,
有序列表標籤ol--li，
無序列表標籤 ul--li，
定義描述標籤 dl-dt-dd，
容器標籤 div：
屬於行級元素的：
範圍標籤：span
影象標籤： img
基本結構：
常用標籤
文字標籤<h1></h1>
段落標籤 <p></p>
換行標籤<br/>
水平線標籤 <hr/>
範圍標籤<span></span>
圖片標籤<img 屬性 />
圖片標籤的熱點區域<map name="?"/> <atea形狀範圍連結標題 / >
列表標籤：無序<ul> <li> <li/> <ul/> 有序<ol> <li> <li/> <ol/>
描述標籤 ：圖文混編 <dl> <dt>(文字或圖片)<dt/><dd>(文字說明多個)<dd/> <dl/>
佈局標籤：<div>中間放其他標籤的容器<div/>
超連結和錨鏈接：<a><a/>
屬性 name：錨點 herf：目標（#錨點）
規則表格：<table> <tr > <td><td/> <td><td/> <tr/> <table/> <th>標題行<th/>
align左右對齊 valign上下對齊
不規則表格：
屬性colspan="列數" rowspan="行數" 然後把被佔的格刪掉
高階標籤：標題和邏輯分割槽標籤
表格標題：<caption>標題文字<caption/>
表格邏輯分割槽：theadtbodytfoot
表單
id: 元素的唯一表示，不重複
name:表單項元素的名稱，伺服器獲取資料通過該名稱
value:表單項元素的值，伺服器獲取資料通過name 獲取到的就是 value
type: 表示表單項元素的呈現形式
class:表示樣式名稱
readonly: 表示只讀，使用者只能看不能改
disabled：表示禁用，該元素不能改而且背景是灰色
文字框：
密碼框：
單選按鈕：
複選框：
檔案域：
日期-h5中的新特性 ：
隱藏域：
下拉列表框：
文字域：
按鈕：
提交按鈕、圖片按鈕、重置按鈕、普通按鈕
最終效果：
位址列內容：
dest.html?
userId=1001&
userName=lina&
password=12312&
gender= 女 &
statu=1&
hobby=swim&hobby=movie&
headImg=a.png&
birthday=2020-10-24T20%3A19&
month=3&x=25&y=46
框架
在一個頁面引入其他頁面 iframe
框架集：HTML5已經取消
常用的佈局組合標籤
div-ul-li/div-ol-li ：常用於導航佈局
div-dl-dt-dd: 常用於圖文混編佈局
div-form: 常用於表單佈局
div-table: 常用於區域性規則資料展示佈局
HTML4和HTML5的區別：
HTML5 中新增的語義標籤 - 瞭解
標籤 描述
article 定義頁面獨立的內容區域。
aside 定義頁面的側邊欄內容。
bdi 允許您設定一段文字，使其脫離其父元素的文字方向設定。
details 用於描述文件或文件某個部分的細節
dialog 定義對話方塊，比如提示框
summary&http://www.cppcns.comnbsp; 標籤包含 details 元素的標題
header 定義了文件的頭部區域
footer 定義 section 或 document 的頁尾。
nav 定義導航連結的部分。
progress 定義任何型別的任務的進度。
section 定義文件中的節（section 、區段）。
time 定義日期或時間。
wbr 規定在文字中的何處適合新增換行符。
HTML5 新的表單屬性
form 新屬性
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。
提示 : autocomplete 屬性有可能在 form 元素中是開啟的，而在 input 元素中是關閉的。
注意 : autocomplete 適用於 <input> 標籤，以及以下型別的 <input> 標籤： text,search,url,telephone,email,password,datepickers,range 以及 color 。
<form action = "" autocomplete = "on" >
姓名: <input type = "text" name = "name" ><br>
電話: <input type = "text" name = "phone" ><br>
郵箱: <input type = "email" name = "email" autocomplete = "off" ><br>
<input type = "submit" >
</form>
測試的時候需要先輸入一遍，然後再重新整理頁面再次輸入看到效果。
有些瀏覽器可能不自動支援，需要自己啟用。
input 新屬性
list 屬性規定輸入域的 datalist 。 datalist 是輸入域的選項列表。
<input list = "companys" >
<datalist id = "companys" >
<option value = "alibaba" >
<option value = "baidu" >
<option value = "tencent" >
<option value = "zijie" >
<option value = "didi" >
</datalist>
multiple 屬性是一個 boolean 屬性 .
multiple 屬性規定 <input> 元素中可選擇多個值。
注意 : multiple 屬性適用於以下型別的 <input> 標籤： email 和 fifile
上傳多個檔案 : <input type="file" name="img" multiple>
placeholder 屬性提供一種提示（ hint ），描述輸入域所期待的值。
簡短的提示在使用者輸入值前會顯示在輸入域上。
注意 : placeholder 屬性適用於以下型別的 <input> 標籤： text,email 以及 password 。
<input type = "text" name = "userName" placeholder = " 請輸入使用者名稱 " >
required 屬性是一個 boolean 屬性 .
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
注意 : required 屬性適用於以下型別的 <input> 標籤： text,date pickers,number,checkbox,radio 以及 fifile 。
使用者名稱 : <input type = "text" name = "username" required >
HTML5 新的表單元素 -- 瞭解
HTML5 中新的 input 型別
HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
注意 : 並不是所有的主流瀏覽器都支援新的 input型別，不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支援，仍然可以顯示為常規的文字域。
HTML5 中新增的音訊
直到現在，仍然不存在一項旨在網頁上播放音訊的標準。大多數音訊是通過外掛（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的外掛。 HTML5 規定了在網頁上嵌入音訊元素的標準，即使用 <audio> 元素。
<audio controls >
<source src = "horse.ogg" type = "audio/ogg" >
<source src = "horse.mp3" type = "audio/mpeg" >
您的瀏覽器不支援 audio 元素。
</audio>
PS ： control 屬性供新增播放、暫停和音量控制元件。
在 <audio> 與 </audio> 之間你需要插www.cppcns.com入瀏覽器不支援的 <audio> 元素的提示文字 。
<audio> 元素允許使用多個 <source> 元素 . <source> 元素可以連結不同的音訊檔案，瀏覽器將使用 第一個支援的音訊檔案
目前,<audio> 元素支援三種音訊格式檔案 : MP3,Wav,和 Ogg:
音訊格式的 MIME 型別
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wavaudio/wav
HTML5 中新增的視訊
<video width = "320" height = "240" controls > <source src = "movie.mp4" type = "video/mp4" > <source src = "movie.ogg" type = "video/ogg" > 您的瀏覽器不支援 Video 標籤。 </video>
<video> 元素提供了 播放、暫停和音量控制元件來控制視訊。
同時 <video> 元素也提供了 width 和 height 屬性控制視訊的尺寸 . 如果設定的高度和寬度，所需的
視訊空間會在頁面載入時保留。如果沒有設定這些屬性，瀏覽器不知道大小的視訊，瀏覽器就不能再載入時
保留特定的空間，頁面就會根據原始視訊的大小而改變。
<video> 與 </video> 標籤之間插入的內容是提供給不支援 video 元素的瀏覽器顯示的。
當前， <video> 元素支援三種視訊格式： MP4,WebM,和 Ogg:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8" > <title> 視訊音訊 </title> </head> <body> <h1> 音訊 </h1> <audio controls > <source src = "audio/wgs.ogg" type = "audio/ogg" > <source src = "audio/zjl.mp3" type = "audio/mpeg" > 您的瀏覽器不支援 audio 元素。 </audio> <h1> 視訊 </h1> <video width = "1320" height =www.cppcns.com "640" controls > <source src = "audio/ruhai.mp4" type = "video/mp4" > <source src = "audio/wgs.ogg" type = "video/ogg" > 您的瀏覽器不支援Video標籤。 </video> </body> </html>
HTML5 中已經移除的元素
frame
frameset
noframes
轉義符號
到此這篇關於HTML基礎知識總結的文章就介紹到這了,更多相關HTML基礎知識內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！