HTML大整合（上）

、HTML簡介

1.HTML是什么?

HTML:htper text markup language超文本標(biāo)記(標(biāo)簽)語言

由各種標(biāo)簽組成，用來制作網(wǎng)頁，告訴瀏覽器如何顯示頁面

2.作用

制作網(wǎng)頁，控制網(wǎng)頁和內(nèi)容的顯示
插入圖片、音樂、視頻、動(dòng)畫等多媒體
通過鏈接來檢索信息
使用表單獲取用戶的信息，實(shí)現(xiàn)交互

3.版本

w3c:world wide web consortium萬維網(wǎng)聯(lián)盟，制定web技術(shù)相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織，HTML技術(shù)hi由w3c制定的標(biāo)準(zhǔn)

兩個(gè)版本:HTML4.0.1、HTML5.0-----通常H5

官網(wǎng)：http://www.W3shcool.com.cn

4.擴(kuò)展名

HTML文檔是以.html或.htm結(jié)尾

二、HTML文檔結(jié)構(gòu)

1.基本結(jié)構(gòu)

1.1簡介

HTML標(biāo)簽是由尖括號(hào)括起來的關(guān)鍵詞，如,通常是成對出現(xiàn)的,如<html></html>
以 <html>為根標(biāo)簽，包含： <head>頭部和<body>主體部分
頭部提供關(guān)于網(wǎng)頁的相關(guān)信息，如標(biāo)題、文檔類型、字符編碼、關(guān)鍵字等摘要信息
主體部分提供網(wǎng)頁的顯示內(nèi)容，真正顯示在頁面中的內(nèi)容
合理地進(jìn)行縮進(jìn)
標(biāo)簽名不區(qū)分大小寫，但是一般要用小寫

1.2.開發(fā)工具

記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步驟：

新建文件(cltr+N)，然后保存（ctrl+s）,指定擴(kuò)展名為.html
編寫HTML代碼
在瀏覽器中打開文件

使用技巧：

先保存再寫代碼，否則代碼無顏色提示
創(chuàng)建一個(gè)文件夾，用于保存所有的網(wǎng)頁內(nèi)容，將文件夾拖拽到sublime中，便于管理
顯示/隱藏側(cè)邊欄方式1:查看–>側(cè)邊欄–>顯示/隱藏側(cè)邊欄方式2:ctrl+K緊接著按B
顯示多欄方式1：查看–>布局–>列數(shù)：2列方式2：Alt+shift+2

1.3瀏覽器

常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果

瀏覽器的作用是讀取html文件，并以網(wǎng)頁的形式來顯示

瀏覽器不會(huì)直接顯示html標(biāo)簽，而是使用標(biāo)簽來解釋網(wǎng)頁的內(nèi)容

2.標(biāo)簽

2.1標(biāo)簽的組成

一個(gè)完整的html標(biāo)簽的組成：

<標(biāo)簽名屬性名="屬性值">內(nèi)容</標(biāo)簽名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>標(biāo)簽</title>
	</head>
	<body  bgcolor="red" text="blue">
		html從入門到精通!
    </body>
</html>
12345678910

屬性值要用雙撇號(hào)括起來，一般用雙引號(hào)

2.2標(biāo)簽的分類

根據(jù)標(biāo)簽是否關(guān)閉，分為，關(guān)閉型和非關(guān)閉型

關(guān)閉型：有結(jié)束標(biāo)簽，即標(biāo)簽成對出現(xiàn)

<html></html>
<head></head>
<title></title>

非關(guān)閉型：沒有結(jié)束標(biāo)簽

<meta>
<br>
<h1>....<h6>

根據(jù)標(biāo)簽是否獨(dú)占一行，分為塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽

塊級(jí)標(biāo)簽：顯示為塊狀，獨(dú)占一行

<h1>大家好</h1>
<hr>

行級(jí)標(biāo)簽：在行內(nèi)顯示，可與其他內(nèi)容在同一行顯示

2.3注釋

注釋在瀏覽器中不會(huì)顯示,是用來標(biāo)注解釋html語句,但通過查看源代碼的方式可以看到

語法:

<--注釋內(nèi)容-->

2.4實(shí)體字符

也稱為特殊字符,用于顯示一些特殊符號(hào),如<>&空格等

語法:

<&實(shí)體字符的名稱>

2.5文檔類型

在html文檔的第一行,使用<!DOCTYPE html>

聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規(guī)范

目前基本上最常用的html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
12345678910

三\常用標(biāo)簽

3.1基本標(biāo)簽

塊級(jí)標(biāo)簽\親啊后有明顯的間隔 |
| h1…h(huán)5 | 標(biāo)題標(biāo)簽 | 按照h1到h6逐漸變小.塊級(jí)標(biāo)簽 |
| | | |
| | | |

三、常用標(biāo)簽

1.基本標(biāo)簽

1.1 有序列表
ol:ordered listli:list item默認(rèn)使用阿拉伯?dāng)?shù)字、從1開始標(biāo)記，可以通過屬性進(jìn)行修改
· type屬性：設(shè)置列表的符號(hào)標(biāo)記、取值；數(shù)字1（默認(rèn)）、字母（a或A）、羅馬數(shù)字(i或I) · start屬性：設(shè)置起始值，值必須是數(shù)字
1.2 無序列表
ul:unodered list
li:list item
默認(rèn)情況下使用實(shí)心圓表作為符號(hào)標(biāo)記，可以通過屬性進(jìn)行修改
· type屬性：設(shè)置列表的符號(hào)標(biāo)記、取值：disc實(shí)心圓（默認(rèn)）、circle空心圓、square正方形、none不顯示項(xiàng)目符號(hào)
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標(biāo)簽
hr:horizontal
常用屬性：
· color:顏色

兩種方式：

顏色名稱：如red、green、blue、white、black、pink、orange等

16進(jìn)制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉(zhuǎn)換為16 進(jìn)制00-FF

如: #FF0000 紅色 #00FF00綠色 #0000FF藍(lán)色 #FFFFFF白色、#CCCCCC #FF7300桔色

· size:粗細(xì)，數(shù)值

· width寬度

兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于水平線標(biāo)簽所在父容器寬度的百分比

· align對齊

? 取值：center居中 left right
1.5圖像標(biāo)簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數(shù)

如果圖片與html源代碼在同一個(gè)文件夾中，可以直接在src中寫圖片名稱即可

習(xí)慣上，我們會(huì)將多個(gè)圖片與html代碼文檔分別放在同一個(gè)文件夾project中的不同目錄下，此時(shí)需要在src中指定圖片的路徑為相對路徑

路徑的分類：

? · 相對路徑

? 表示： ./當(dāng)前路徑
…/當(dāng)前位置的上一級(jí)文件夾

? 提示：…/image

? · alt:當(dāng)圖片無法顯示時(shí)顯示的提示信息

? · title:當(dāng)鼠標(biāo)放到圖片上時(shí)顯示的提示信息

? · width和 height:設(shè)置圖片的寬度和高度
默認(rèn)圖片以原始尺寸顯示

? 如果只設(shè)置其中一個(gè)，則另一個(gè)會(huì)按比例縮放

? 如果同時(shí)設(shè)置寬和高，可能導(dǎo)致圖片變形

? 兩種寫法：

? 像素：絕對值（固定值）

? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標(biāo)簽

為了更好語義化
3.頭部標(biāo)簽
· meta定義網(wǎng)頁的摘要信息，如字符編碼，關(guān)鍵詞，描述，作者等
· title定義網(wǎng)頁的標(biāo)題
· style定義內(nèi)容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前頁面文件所在的位置為相對路徑參照
4.標(biāo)簽嵌套
一個(gè)標(biāo)簽中嵌套另外一個(gè)標(biāo)簽
標(biāo)簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時(shí)有所不同
chrome瀏覽器提供的開發(fā)工具：幫助開發(fā)人員查看和調(diào)試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時(shí)內(nèi)部的結(jié)構(gòu)
· console:控制臺(tái)，顯示各種警告和錯(cuò)誤信息
· network:查看網(wǎng)絡(luò)請求信息，瀏覽器向服務(wù)器請求了哪些資源，資源大小，
加載資源所消耗的時(shí)間

四、超鏈接
1.簡介
使用超鏈接可以從一個(gè)頁面跳轉(zhuǎn)到另外一個(gè)頁面，實(shí)現(xiàn)頁面之間導(dǎo)航
當(dāng)鼠標(biāo)移動(dòng)到超鏈接文本或圖片時(shí)，鼠標(biāo)箭頭會(huì)變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉(zhuǎn)到另一個(gè)頁面錨鏈接：鏈接到錨點(diǎn)（鏈接到同一個(gè)頁面的指定位置）功能鏈接：實(shí)現(xiàn)特殊功能(發(fā)郵件，下載)
2.基本用法
使用標(biāo)簽來創(chuàng)建超鏈接
語法格式：

常用屬性：
href:鏈接地址或路徑,鏈接地址

world

鏈接文本或圖片

1 2 3 4 5 1 target:鏈接打開的位置,取值

路徑分類：
絕對路徑以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑相對于當(dāng)前頁面文件所在的路徑,不是以根開始的路徑 ./ 當(dāng)前路徑 …/ 當(dāng)前位置上一級(jí)目錄

3.錨鏈接
3.1簡介
點(diǎn)擊鏈接后跳轉(zhuǎn)到某一個(gè)頁面的指定位置（錨點(diǎn)anchor）
錨鏈接的分類：
頁面內(nèi)的錨鏈接頁面間的錨鏈接
3.2 頁面內(nèi)的錨鏈接
步驟：

定義錨點(diǎn)（標(biāo)記）
鏈接錨點(diǎn)
_self 自身，當(dāng)前，默認(rèn)值 _blank新的，空白的 _parent父層框架 _top頂層框架
目標(biāo)位置
1 2 3 4
1

3.3 頁面間的錨鏈接

4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統(tǒng)一資源定位器,用來定位資源所在的位置，最常見的就是網(wǎng)址

5.2 組成
一個(gè)完整的URL由8個(gè)部分組成：
協(xié)議：prococol 如 http:超文本傳輸協(xié)議，用來訪問WEB網(wǎng)站Hyper text Transfer protocal https:更加安全的協(xié)議 SSL安全套接子層 ftp文件傳輸協(xié)議，用來訪問服務(wù)器上的文件，實(shí)現(xiàn)文件的上傳和下載File Transfer protocol file:文件協(xié)議，用來訪問本地文件主機(jī)名hostname服務(wù)器地址或服務(wù)器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機(jī)名的后面，使用冒號(hào)進(jìn)行分隔不同的協(xié)議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認(rèn)端口，則端口可以省略如果使用的不是默認(rèn)端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標(biāo)文件所在的路徑結(jié)構(gòu)，如:www.baidu.com/img/ 資源resource要訪問的目標(biāo)文件，如bd_logo1.png 查詢字符串：query string 也稱為參數(shù) 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔，多個(gè)之間用&分隔，如:name=tom&age=2&sex=male 錨點(diǎn)anchor，在資源后面使用#開頭的文本，如#6 身份認(rèn)證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個(gè)規(guī)則的行列結(jié)構(gòu)，每個(gè)表格是由若干行組成，每行由若干個(gè)單元格組成
table row column
2.基本結(jié)構(gòu)
2.1 table標(biāo)簽
用來定義表格
常用屬性：
border:表格邊框默認(rèn)為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認(rèn)) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內(nèi)容到邊界之間的距離
2.2 tr標(biāo)簽
用來定義行：table row
常用屬性：
align:水平對齊取值：left(默認(rèn)) center right valign垂直對齊取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標(biāo)簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數(shù)據(jù)必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個(gè)屬性：
rowspan 設(shè)置單元格所跨的行數(shù) colspan 設(shè)置單元格所跨的列數(shù)
步驟：

在跨越的單元格中設(shè)置rowspan/colspan屬性 2. 將被跨越的單元格刪除
必須要保證每行的實(shí)際列數(shù)是相同的，否則表格可能會(huì)出錯(cuò)亂
4.高級(jí)標(biāo)簽
4.1caption標(biāo)簽
表格的標(biāo)題標(biāo)簽
4.2thead標(biāo)簽
表格的頭部table head
4.3th標(biāo)簽
表格的頭部標(biāo)題table head title
一般用在thead中，設(shè)置頭部的標(biāo)題，替代td標(biāo)簽，與td的區(qū)別，th中的文本會(huì)加粗且居中顯示
4.4tbody標(biāo)簽
表格的主體table body
4.5tfoot標(biāo)簽
表格的底部table foot

六、表單
1.簡介
表單是一個(gè)包含若干個(gè)表單元素的區(qū)域，用于獲取瑣類型的用戶數(shù)據(jù)

表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕等
2.表單結(jié)構(gòu)
2.1表單語法

2.2form標(biāo)簽
用來定義表單，可以包含多個(gè)表單元素
常用屬性：
action:提交數(shù)據(jù)給誰處理，即處理數(shù)據(jù)的程序，默認(rèn)為當(dāng)前頁面 method:提交數(shù)據(jù)的方式或方法，取值：get(默認(rèn))，post get和post的區(qū)別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數(shù)據(jù)組的形式進(jìn)行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數(shù)據(jù)的編碼，取值：application/X-www-form-urlencoded(默認(rèn))、multipart/form-data(文件上傳)
3.表單元素
大多數(shù)的表單元素都是使用標(biāo)簽來定義的，通過設(shè)置屬性type來定義不同的表單元素

3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數(shù)據(jù)是無法提交的

·value初始值

·size顯示寬度

·maxlength:大字符數(shù)，默認(rèn)是沒有限制

·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名

·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用

表單元素被提交的兩個(gè)條件，1.有name屬性2.非disabled

3.2 單選按鈕
常用屬性：

·name名稱：多個(gè)radio的name屬性必須相同，才能實(shí)現(xiàn)互斥（單選）

·value值

·checked:是否被選中，兩種狀態(tài)，選中，未選中 checked=“checked” 簡寫 checked

3.3 復(fù)選框
常用屬性與單選按鈕radio類似

3.4 文件選擇器
常用屬性：

·name:名稱

·accept設(shè)置可選擇的文件類型，用來限制上傳的文件類型

使用MIME格式字符串對資源類型進(jìn)行限制

常見的MIME類型：

·純文本：text/plain text/xml text/html

· 圖像：image/png image/jpeg image/gif

4.特殊表單元素

4.1下拉列表

select常用屬性：

·name名稱

·size行數(shù)，同時(shí)顯示多個(gè)選項(xiàng)

·multiple允許同時(shí)選擇多個(gè)

option常用屬性：

·value選項(xiàng)值

·selected設(shè)置默認(rèn)選中項(xiàng)

optgroup常用屬性：

·label分組的標(biāo)簽

4.2文本域

·name名稱

·rows行數(shù)

·cols列數(shù)

5、其他標(biāo)簽

5.1 label標(biāo)簽

為表單元素提供標(biāo)簽，當(dāng)選中l(wèi)abel標(biāo)簽中的文本內(nèi)容時(shí)會(huì)自動(dòng)將光標(biāo)切換到與之相關(guān)聯(lián)的表單元素。

常用屬性：

·for必須將該屬性值設(shè)置為與相關(guān)聯(lián)的表單元素的Id屬性值相同。

注：幾乎所有HTML標(biāo)簽都具有id屬性，且id值必須唯一。

5.2 button標(biāo)簽

也表示按鈕，與input按鈕類似

語法：

1按鈕文字或圖像

常用屬性：

·type按鈕的類型，取值: submit（默認(rèn)）、reset、button

5.3 fieldset和legend標(biāo)簽

fieldset標(biāo)簽，對表單元素進(jìn)行分組

legend標(biāo)簽，對分組添加標(biāo)題

七、內(nèi)嵌框架
1、簡介

使用iframe可以在一個(gè)頁面中引用另一個(gè)頁面，實(shí)現(xiàn)復(fù)用、靈活

2、基本用法

語法：

常用屬性：

· src:引用的頁面

· width/height寬度/高度，像素或百分比

· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認(rèn)

· scrolling是否顯示滾動(dòng)條，取值：yes no auto

· name屬性為框架定義名稱

3、在框架中打開鏈接

3鏈接的文本或圖像

八、HTML5簡介

1、發(fā)展

W3C于1992年12月發(fā)布了HTML4.0.1標(biāo)準(zhǔn)
W3C于2014年10月發(fā)布了HTML5標(biāo)準(zhǔn)

2、特點(diǎn)

· 取消了過時(shí)的標(biāo)簽，如font、center等，它們僅具有展示外觀的功能

· 增加了一些更具有語義化的標(biāo)簽，如header、footer、aside等

· 增加了一些新功能標(biāo)簽，如canvas、audio、video

· 增加了一些表單控件，如email、date、time、url、search等

· 可以直接在瀏覽器中繪畫（canvas），無需flash

· 增加了本地存儲(chǔ)的支持

3、兼容性

http://caniuse.com

提供了各種瀏覽器版本對HTML5和CSS規(guī)范的支持度

九、HTML5新增內(nèi)容
1、結(jié)構(gòu)相關(guān)的標(biāo)簽

用來進(jìn)行頁面結(jié)構(gòu)布局，本身無任何特殊樣式，需要使用CSS進(jìn)行樣式設(shè)置

· article定義一個(gè)獨(dú)立的內(nèi)容，完整的文章

· section定義文檔的章節(jié)、段落

· header文章的頭部、頁眉、標(biāo)題

· footer文章的底部、頁腳、標(biāo)注

· aside定義側(cè)邊欄

· figure圖片區(qū)域

· figcaption為圖片區(qū)域定義標(biāo)題

· nav定義導(dǎo)航菜單

結(jié)構(gòu)標(biāo)簽只是表明各部分的角色，并無實(shí)際的外觀樣式，與普通div相同

2、語義相關(guān)的標(biāo)簽
2.1 mark標(biāo)簽
標(biāo)注，用來突出顯示文本，默認(rèn)添加黃色背景
2.2 time標(biāo)簽
定義日期和時(shí)間，便于搜索引擎智能查找
2.3 details和 summary標(biāo)簽
默認(rèn)顯示summary中的內(nèi)容，點(diǎn)擊后顯示details中的內(nèi)容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標(biāo)簽
計(jì)數(shù)儀，表示度量
常用屬性：

· max定義大值，默認(rèn)為1

· min定義小值，默認(rèn)為0

· value定義當(dāng)前值

· high定義限定為高的值

· low定義限定為低的值

· optimum定義佳值

規(guī)則：

如果optimum大于high，則表示值越大越好

當(dāng)value大于high時(shí)為綠色

當(dāng)value在low與high之間時(shí)為黃色

當(dāng)value小于low時(shí)為紅色

如果optimum小于low，則表示值越小越好

當(dāng)value小于low時(shí)為綠色

當(dāng)value在low與high之間時(shí)為黃色

當(dāng)value大于high時(shí)為紅色

當(dāng)optimum介于low和high之間，則表示值在low和high之間好當(dāng)value在low與high之間時(shí)顯示綠色，否則顯示黃色

2.5 progress標(biāo)簽
進(jìn)度條，表示運(yùn)行中的進(jìn)度
常用屬性：

· value定義當(dāng)前值

· max定義完成的值

3.表單相關(guān)
3.1 新增表單元素
新增以下type類型：

· email接收郵箱

· url接收URL

· tel接收電話號(hào)碼，目前僅在移動(dòng)設(shè)備上有效

· search搜索文框

· number/range接收數(shù)字/數(shù)字滑塊,包含min,max,step屬性

· date/month/week/time/datetime日期時(shí)間選擇器，兼容性不好

· color顏色拾取

作用：

· 具有格式校驗(yàn)的功能

· 可以與移動(dòng)設(shè)備的鍵盤相關(guān)聯(lián)

3.2新增表單屬性
form標(biāo)簽的屬性：

· autocomplete是否啟動(dòng)表單的自動(dòng)完成功能，取值:on(默認(rèn))、o?

· novalidate提交表單時(shí)不進(jìn)行校驗(yàn)，默認(rèn)會(huì)進(jìn)行表單校驗(yàn)

3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等

· placeholder提示文字

· required是否必填

· autocomplete是否啟用該表單元素的自動(dòng)完成功能

· autofocus設(shè)置初始焦點(diǎn)元素

· pattern使用正則表達(dá)式（RegExp后面會(huì)講解），進(jìn)行數(shù)據(jù)校驗(yàn)

· list使文本元素具有下拉列表的功能，需要配合datalist和option標(biāo)簽一起使用

· form可以將表單元素寫在form標(biāo)簽外面，然后通過該屬性關(guān)聯(lián)指定的表單

4、多媒體標(biāo)簽
4.1audio標(biāo)簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：

· src音頻文件的來源

· controls是否顯示控制面板，默認(rèn)不顯示

· autoplay是否自動(dòng)播放，默認(rèn)不自動(dòng)播放

· loop是否循環(huán)播放

· muted是否靜音

· preload是否預(yù)加載，取值：none不預(yù)加載、auto預(yù)加載（默認(rèn)）、metadata只加載元數(shù)據(jù)

如果設(shè)置了autoplay屬性，則該屬性無效

可以結(jié)合source標(biāo)簽使用，指定多個(gè)音頻文，瀏覽器會(huì)檢測并使用第一個(gè)可用的音頻文件

4.2 video標(biāo)簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標(biāo)簽基本相同，增加屬性：

· widht/height視頻播放器的寬度/高度

· poster在視頻加載前顯示的圖片

案例1hello.html

<html>
	<body>
		<tiele>HTML技術(shù)</tiele>
	</body>
	<body>
		大家好，歡迎學(xué)習(xí)html技術(shù)!
	</body>
</html>1234567

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例1.png)]

案例2標(biāo)簽的組成.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>標(biāo)簽</title>
</head>
<body text="blue">
	標(biāo)簽的組成
	<br>
	html從入門到精通！
	<hr>
	<h1>標(biāo)簽的分類</h1>
	<hr>

	<h2>標(biāo)簽的分類</h2>
	<hr>

	<h6>標(biāo)簽的分類</h6>
	<hr>

	<span>哈哈</span>嘿嘿
	
</body>
</html>1234567891011121314151617181920212223

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例2.png)]

案例3實(shí)體字符.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	圖書:<<HTML從入門到精通<<
	<hr>

	北京      上海      廣州
	<hr>

	在HTML中用<表示<小于號(hào)
	<hr>

	“HTML語言” 或 &qout;HTML語言&qout;
	<hr>

	版權(quán)所有? 2000-2020 高教培訓(xùn)
	<hr>

	×關(guān)閉符號(hào)
</body>
</html>123456789101112131415161718192021222324

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例3.png)]

（剩下的下期出）

原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出處：從CSDN

、什么是HTML

HTML簡介

HTML是用來描述網(wǎng)頁的一種語言，它是一種超文本標(biāo)記語言，由一套標(biāo)記標(biāo)簽組成，在制作網(wǎng)頁時(shí)，HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。

發(fā)展史

HTML：Hyper Text Markup Language超文本標(biāo)記語言

超文本標(biāo)記語言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標(biāo)準(zhǔn)）

HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時(shí)。

HTML3.2—1996年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML4.0—1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML4.01（微小改進(jìn)）—1999年12月24日，W3C推薦標(biāo)準(zhǔn)，2000年5月15日發(fā)布基本嚴(yán)格的HTML4.01語法，是國標(biāo)標(biāo)準(zhǔn)化組織和國際電工委員會(huì)的標(biāo)準(zhǔn)

XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布

XHTML1.1—2001年5月31日發(fā)布

XHTML2.0是W3C的工作草案，由于改動(dòng)過大，學(xué)習(xí)這個(gè)新技術(shù)的成本過高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標(biāo)準(zhǔn)。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團(tuán)隊(duì)，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規(guī)范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時(shí)也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁功能，如使用網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)渲染圖形、圖表、圖像和動(dòng)畫，以及不需要安裝任何插件直接使用網(wǎng)頁播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度

HTML的優(yōu)勢

各大瀏覽器廠商對H5的支持
市場的需求
跨平臺(tái)

二、HTML的基本結(jié)構(gòu)

<html>......</html> HTML文檔的開始和結(jié)束標(biāo)記。
<head>……</head> 頭控制標(biāo)記，不在界面上進(jìn)行展示，子標(biāo)簽可設(shè)置SEO優(yōu)化的一些內(nèi)容以及設(shè)置網(wǎng)頁的編碼。
<title>……</title>：設(shè)置瀏覽器的窗口上標(biāo)題。
<body>……</body>：頁面可見內(nèi)容。

三、HTML的基本標(biāo)簽

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

h1~h6

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h7>這是七級(jí)標(biāo)題</h7>效果怎么顯示不出來呢？？？

</body>

</html>

瀏覽器預(yù)覽效果

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

p標(biāo)簽為段落標(biāo)簽，br標(biāo)簽為換行標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>段落和換行標(biāo)簽</title>

</head>

<body>

<h1>北京歡迎你</h1>

<p>北京歡迎你，<br>為你開天辟地</p>

<p>北京歡迎你，<br/>有有勇氣就會(huì)有奇跡</p>

</body>

</html>

瀏覽器預(yù)覽效果圖

水平線標(biāo)簽

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

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了半年的積蓄，<br>漂洋過海來看你</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

字體樣式標(biāo)簽

em為斜體標(biāo)簽，strong為字體加粗標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>字體樣式標(biāo)簽</title>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br>

<em><strong>漂洋過海</strong></em>來看你

</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

注釋和特殊符號(hào)

注釋使用：

大于號(hào)：> great than的縮寫

小于號(hào)：< less than的縮寫

雙引號(hào)：""

空格：

源代碼

<!DOCTYPE html>

<head>

<title>注釋和特殊符號(hào)</title>

</head>

<body>

<pre>

注釋使用：

大于號(hào)：> great than的縮寫

小于號(hào)：< less than的縮寫

雙引號(hào)：""

空格：

</pre>

5<10>6 <br>

"我是被雙引號(hào)引起來的內(nèi)容"<br>

我是測試空格的

</body>

</html>

瀏覽器預(yù)覽效果圖

以上就是HTML的簡單入門，后續(xù)帶大家更深入的了解HTML

HTML頁面中嵌入其他頁面的方法

在自己的頁面中嵌入其他頁面是一個(gè)非常重要的操作，既能豐富自己的頁面樣式又能增強(qiáng)頁面的信息量。

舉個(gè)例子，如果打算在自己的頁面中插入一個(gè)視頻網(wǎng)站的視頻該怎么做呢？

假如我現(xiàn)在自己的頁面中嵌入這個(gè)視頻，

我只需要在視頻下側(cè)找到"分享"。

點(diǎn)擊之后出現(xiàn)這樣的對話框，如圖：

通過在我們的頁面中粘貼這段通用代碼就可以顯示這個(gè)視頻了。

代碼如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就寫到我們的頁面中試試吧。

首先復(fù)制"第一個(gè)網(wǎng)頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標(biāo)簽中的<title>第一個(gè)頁面</title>編輯為"在頁面中嵌入頁面"即可，完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

頁面效果如下：

怎么樣，是不是很神奇！

下面我們來分析一下這段代碼的含義。

首先要引入一個(gè)新標(biāo)簽<iframe>，HTML的使用手冊中翻譯為"框架"，說實(shí)話，這么翻譯初學(xué)者是不知所云的。這個(gè)框架元素的主要作用就是在自己的頁面中嵌入其他頁面。

在<iframe>標(biāo)簽中先指定路徑屬性即src。這里使用的是單引號(hào)，實(shí)際上只要是半角符號(hào)，單引號(hào)和雙引號(hào)都可以的。

然后設(shè)置長寬屬性，即width和height，大家可以嘗試改變數(shù)據(jù)看看。

frameborder可以為iframe的窗口指定一個(gè)邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因?yàn)檫@個(gè)屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點(diǎn)燈的開關(guān)一樣！

如圖：多了個(gè)邊框出來。

最后'allowfullscreen'這個(gè)描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識(shí)）。如果有詳細(xì)了解的小伙伴歡迎留言指教，感激不盡。

下面我們嘗試修改一下src屬性，給它一個(gè)別的路徑看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原頁面關(guān)閉然后重新打開才可以正常顯示！

效果如下：

在瀏覽網(wǎng)頁時(shí)我們還經(jīng)常遇到這樣的情況，就是有一個(gè)獨(dú)立窗口顯示嵌套的頁面，上面有個(gè)標(biāo)題，一點(diǎn)擊就會(huì)跳到那個(gè)嵌入的頁面上，這個(gè)其實(shí)很簡答，使用一個(gè)<a></a>元素即可辦到，示例代碼如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面示例如下：

框架元素并沒有換行，所有我們可以推測出<iframe>標(biāo)簽實(shí)際上是個(gè)內(nèi)聯(lián)元素，如何讓它換行呢？

為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內(nèi)容。

示例代碼如下：

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面效果如下：

是不是很有意思。

下面我們來介紹一個(gè)更有趣的玩法。如圖所示：

這個(gè)怎么做呢？

這就要介紹<iframe>標(biāo)簽中的另一個(gè)屬性：name（名字）

示例代碼如下：name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

這里講個(gè)題外話，如果大家了解中國古代的"請神術(shù)"的話就會(huì)知道這樣一個(gè)有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅(qū)使它。

編程也是這樣，我們給函數(shù)或變量一個(gè)名字后，就可以隨時(shí)隨地的驅(qū)使它。

現(xiàn)在我們給<iframe>起了個(gè)名字叫做"iframe"，當(dāng)然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。

有了名字之后，<a>標(biāo)簽就要驅(qū)使<iframe>標(biāo)簽來顯示自己路徑下的內(nèi)容，如何驅(qū)使呢？

大家還記得<a>標(biāo)簽中有一個(gè)target屬性嗎？只要讓target="iframename"即可！

也就是target="iframe"。示例代碼如下：大家要注意的是<a>標(biāo)簽也是內(nèi)聯(lián)元素，也需要添加display:block，不然也是排在一列顯示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a><!--第一個(gè)a鏈接的是頭條文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰(zhàn)斗機(jī)百科</a><!--第二個(gè)a鏈接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個(gè)a鏈接的是本地圖片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我們?yōu)椴煌?lt;a>標(biāo)簽賦予target="iframe"的屬性，點(diǎn)擊這些<a>標(biāo)簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時(shí)我們可以把<iframe>標(biāo)簽中的src屬性刪除掉，保存文件后，關(guān)閉測試網(wǎng)頁，再重新打開，效果如下:

初始狀態(tài)下，因?yàn)榭蚣茉刂械膕rc是空的，所以打開后是空白的。如果您覺得單調(diào)可以任意復(fù)制3個(gè)<a>中的一個(gè)href中的鏈接路徑給<iframe>的src屬性，打開就是相應(yīng)的標(biāo)簽。這個(gè)就不演示了，大家自己試試即可。

點(diǎn)擊第一個(gè)鏈接效果如下：

點(diǎn)擊第二個(gè)鏈接如下：

點(diǎn)擊第三個(gè)鏈接如下：

最后再強(qiáng)調(diào)一下，改完框架的src屬性后需要關(guān)閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！

今天的示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的內(nèi)容結(jié)束了，明天我將會(huì)為大家介紹<object>和<embed>這兩個(gè)標(biāo)簽，它們可以在頁面中嵌入更多有趣的東西。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：如何控制表單內(nèi)tab鍵切換的順序
下一篇：CSS width 屬性

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML大整合（上）

、HTML簡介

1.HTML是什么?

2.作用

3.版本

4.擴(kuò)展名

二、HTML文檔結(jié)構(gòu)

1.基本結(jié)構(gòu)

1.1簡介

1.2.開發(fā)工具

1.3瀏覽器

2.標(biāo)簽

2.1標(biāo)簽的組成

2.2標(biāo)簽的分類

2.3注釋

2.4實(shí)體字符

2.5文檔類型

三\常用標(biāo)簽

3.1基本標(biāo)簽

案例1hello.html

案例2標(biāo)簽的組成.html

案例3實(shí)體字符.html

、什么是HTML

二、HTML的基本結(jié)構(gòu)

三、HTML的基本標(biāo)簽

HTML頁面中嵌入其他頁面的方法

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求