腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

HTML基礎(chǔ)知識總結(jié)

更新時間：2021年08月31日 15:15:20 作者：yipfang

本文主要介紹了HTML基礎(chǔ)知識，HTML指的是超文本標(biāo)記語言，它不是一種編程語言，而是一種標(biāo)記語言。需要具體了解HTML的小伙伴可以參考一下這篇文章哦

標(biāo)簽分類

標(biāo)簽分類：塊狀元素、行級元素

塊狀元素：一般都是新起一行，可以容納行內(nèi)元素和其他塊級元素；

行級元素 ：一般都是語義級別的基本元素，一般只能容納文本或者其他行內(nèi)元素。

塊狀元素和行內(nèi)元素的區(qū)別：

1 、塊級元素會獨占一行，其寬度自動填滿其父元素寬度；行內(nèi)元素會排列到同一行里，其寬度隨元素的內(nèi)容變化而變化。
2 、塊級元素可以設(shè)置寬高；行內(nèi)元素設(shè)置寬高無效。
3 、塊級元素可以設(shè)置 margin ， padding 屬性；行內(nèi)元素的水平方向的 padding會有邊距效果，但是豎直方向的 padding沒有效果。（此處的屬性稍后介紹）

屬于塊狀元素的：

標(biāo)題標(biāo)簽 h1-h6,

段落標(biāo)簽 p ,

水平線標(biāo)簽 hr,

有序列表標(biāo)簽 ol--li，

無序列表標(biāo)簽 ul--li，

定義描述標(biāo)簽 dl-dt-dd，

容器標(biāo)簽 div：

屬于行級元素的：

范圍標(biāo)簽： span

圖像標(biāo)簽： img

基本結(jié)構(gòu)：

常用標(biāo)簽

文本標(biāo)簽<h1></h1>

段落標(biāo)簽 <p></p>

換行標(biāo)簽<br/>

水平線標(biāo)簽 <hr/>

范圍標(biāo)簽<span></span>

圖片標(biāo)簽<img 屬性 />

圖片標(biāo)簽的熱點區(qū)域<map name="?" /> <atea 形狀范圍鏈接標(biāo)題 / >

列表標(biāo)簽：無序<ul> <li> <li/> <ul/> 有序<ol> <li> <li/> <ol/>

描述標(biāo)簽：圖文混編 <dl> <dt>(文字或圖片)<dt/><dd>(文字說明多個)<dd/> <dl/>

布局標(biāo)簽：<div>中間放其他標(biāo)簽的容器<div/>

超鏈接和錨鏈接：<a><a/>

屬性 name：錨點 herf：目標(biāo)（網(wǎng)頁#錨點）

規(guī)則表格：<table> <tr > <td><td/> <td><td/> <tr/> <table/> <th>標(biāo)題行<th/>

align 左右對齊 valign 上下對齊

不規(guī)則表格：

屬性 colspan="列數(shù)" rowspan="行數(shù)" 然后把被占的格刪掉

高級標(biāo)簽：標(biāo)題和邏輯分區(qū)標(biāo)簽

表格標(biāo)題：<caption>標(biāo)題文字<caption/>

表格邏輯分區(qū)：thead tbody tfoot

表單

id:· 元素的唯一表示，不重復(fù)

name: 表單項元素的名稱，服務(wù)器獲取數(shù)據(jù)通過該名稱

value: 表單項元素的值，服務(wù)器獲取數(shù)據(jù)通過name 獲取到的就是 value

type: 表示表單項元素的呈現(xiàn)形式

class: 表示樣式名稱

readonly: 表示只讀，用戶只能看不能改

disabled：表示禁用，該元素不能改而且背景是灰色

文本框：

密碼框：

單選按鈕：

復(fù)選框：

文件域：

日期-h5中的新特性 ：

隱藏域：

下拉列表框：

文本域：

按鈕：

提交按鈕、圖片按鈕、重置按鈕、普通按鈕

最終效果：

地址欄內(nèi)容：

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已經(jīng)取消

常用的布局組合標(biāo)簽

div-ul-li/div-ol-li ：常用于導(dǎo)航布局

div-dl-dt-dd: 常用于圖文混編布局

div-form: 常用于表單布局

div-table: 常用于局部規(guī)則數(shù)據(jù)展示布局

HTML4和HTML5的區(qū)別：

HTML5 中新增的語義標(biāo)簽 - 了解

標(biāo)簽 描述

article 定義頁面獨立的內(nèi)容區(qū)域。

aside 定義頁面的側(cè)邊欄內(nèi)容。

bdi 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。

details 用于描述文檔或文檔某個部分的細(xì)節(jié)

dialog 定義對話框，比如提示框

summary 標(biāo)簽包含 details 元素的標(biāo)題

header 定義了文檔的頭部區(qū)域

footer 定義 section 或 document 的頁腳。

nav 定義導(dǎo)航鏈接的部分。

progress 定義任何類型的任務(wù)的進(jìn)度。

section 定義文檔中的節(jié)（section 、區(qū)段）。

time 定義日期或時間。

wbr 規(guī)定在文本中的何處適合添加換行符。

HTML5 新的表單屬性

form 新屬性

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。

當(dāng)用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項。

提示 : autocomplete 屬性有可能在 form 元素中是開啟的，而在 input 元素中是關(guān)閉的。

注意 : autocomplete 適用于 <input> 標(biāo)簽，以及以下類型的 <input> 標(biāo)簽： 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 屬性規(guī)定輸入域的 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 屬性規(guī)定 <input> 元素中可選擇多個值。

注意 : multiple 屬性適用于以下類型的 <input> 標(biāo)簽： email 和 fifile

上傳多個文件 : <input type="file" name="img" multiple>

placeholder 屬性提供一種提示（ hint ），描述輸入域所期待的值。

簡短的提示在用戶輸入值前會顯示在輸入域上。

注意 : placeholder 屬性適用于以下類型的 <input> 標(biāo)簽： text, search, url, telephone, email 以及 password 。

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

required 屬性是一個 boolean 屬性 .

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

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

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

HTML5 新的表單元素 -- 了解

HTML5 中新的 input 類型

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

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

注意 : 并不是所有的主流瀏覽器都支持新的 input類型，不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規(guī)的文本域。

HTML5 中新增的音頻

直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。大多數(shù)音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。 HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <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 標(biāo)簽。
</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。
同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸 . 如果設(shè)置的高度和寬度，所需的
視頻空間會在頁面加載時保留。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時
保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。
<video> 與 </video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

當(dāng)前， <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 = "640" controls >
<source src = "audio/ruhai.mp4" type = "video/mp4" >
<source src = "audio/wgs.ogg" type = "video/ogg" >
您的瀏覽器不支持Video標(biāo)簽。
</video>
</body>
</html>