目錄

• 標簽分類
• 常用標簽
• 表單
• 框架
• 常用的布局組合標簽
• 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/>

表格邏輯分區：thead tbody tfoot

表單

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 標簽包含 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, search, url, telephone, email 以及 password 。

<input type = "text" name = "userName" placeholder = " 請輸入用戶名 " >

required 屬性是一個 boolean 屬性 .

required 屬性規定必須在提交之前填寫輸入域（不能為空）。

注意 : required 屬性適用于以下類型的 <input> 標簽： text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 fifile 。

用戶名 : <input type = "text" name = "username" required >

HTML5 新的表單元素 -- 了解

標簽 描述
datalist input標簽定義選項列表。與 input 元素配合使用，來定義 input 可能的值。
keygen 規定用于表單的密鑰對生成器字段。
output 標簽定義不同類型的輸出，比如腳本的輸出。

HTML5 中新的 input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

color

date

datetime

datetime-local

email

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> 之間你需要插入瀏覽器不支持的 <audio> 元素的提示文本 。
<audio> 元素允許使用多個 <source> 元素 . <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用 第一個支持的音頻文件

目前 , <audio> 元素支持三種音頻格式文件 : MP3, Wav, 和 Ogg:

音頻格式的 MIME 類型

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/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:

Format MIME-type
MP4 video/mp4
Ogg audio/ogg
WebM video/webm

<!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 = "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基礎知識內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！