當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML（总）

發(fā)布時(shí)間：2023/12/15 HTML 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML（总）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一，HTML簡(jiǎn)介：

1，HTML是什么？

HTML ：hyper text markup language從外部標(biāo)簽語(yǔ)言。

各種標(biāo)簽組成，用來(lái)制作網(wǎng)頁(yè)，告訴瀏覽器如何顯示。

2，作用

制作網(wǎng)頁(yè) ，控制網(wǎng)頁(yè)和內(nèi)容的顯示

插入圖片，音樂(lè)，視頻動(dòng)畫(huà)等多媒體

通過(guò)鏈接檢索信息

使用表單獲取用戶數(shù)據(jù)，實(shí)現(xiàn)互通

3，HTML 版本

W3C：World Wide web consortium 互聯(lián)網(wǎng)聯(lián)盟，制定web技術(shù)的相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織，HTML就是由W3C制定的標(biāo)準(zhǔn)

兩個(gè)版本：HTML4.0.1，HTML5.0——常稱h5 官網(wǎng)：https://www.w3school.com.cn

4，擴(kuò)展名

HTML文件的擴(kuò)展名是以html或htm結(jié)尾

eg:hello.html

—typoa

<head><title>第一個(gè)HTML學(xué)習(xí)</title><meta charset = "UTF-8"></head><body>歡迎學(xué)習(xí)HTML網(wǎng)頁(yè)技術(shù)！</body>

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

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

1.1簡(jiǎn)介

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

1.2開(kāi)發(fā)工具

記事本，notepad，sublime，notepad++，Dreamweaver，vscode，webstorm等

使用步驟：

1，新建文件保存指定擴(kuò)展名

2，編寫(xiě)html代碼

3.在瀏覽器中打開(kāi)文件進(jìn)行驗(yàn)證效果

1.3瀏覽器

常見(jiàn)的瀏覽器 IE微軟，chrome谷歌，firefox火狐，Safari蘋果

瀏覽器作用：讀取html文件，以網(wǎng)頁(yè)形式顯示

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

2.標(biāo)簽

2.1 標(biāo)簽的組成

完整html標(biāo)簽的組成

<標(biāo)簽名屬性名-“屬性值”>內(nèi)容</標(biāo)簽名>

屬性值要用引號(hào)引起來(lái)，一般使用雙引號(hào)

2.2 標(biāo)簽的分類

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

關(guān)閉型：又開(kāi)始標(biāo)簽，也有結(jié)束標(biāo)簽，一般是成對(duì)出現(xiàn)的

(1)標(biāo)題

(2)主體

(3)

一級(jí)標(biāo)題

非關(guān)閉型標(biāo)簽：只有開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽

(1)

(2)

(3)

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

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

(1)

(2)

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

eg:

標(biāo)簽的組成 </head><<body bgcolor ="red" text="blue">標(biāo)簽的組成<hr>html從入門到精通<hr><h1>第一課</h1><hr><h2>二級(jí)標(biāo)簽</h2><h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼 </body>

2.3注釋

注釋在瀏覽器中不會(huì)顯示，是用來(lái)標(biāo)注解釋html語(yǔ)句，但通過(guò)查看源代碼可以看到

2.4實(shí)體字符

實(shí)體字符也成為特殊字符，用于顯示一些特殊符號(hào) 如：<>&空格等

語(yǔ)法：

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

常用實(shí)體字符；

&lt； < 小于號(hào) less than

&gt； > 大于號(hào) great than

&nbsp；空格 space 在html中對(duì)于連續(xù)的空白字符（空格、縮進(jìn)、換行等）

&amp； & 與

&quot； “ 雙撇號(hào)

&copy；版權(quán)符號(hào) copyright

&reg；注冊(cè)符號(hào) register

&time；關(guān)閉符號(hào)

注意：實(shí)體字符是嚴(yán)格區(qū)分大小寫(xiě)，即大小寫(xiě)敏感

2.5文檔類型

在HTML文檔的第一行，使用聲明html文檔的類型

用來(lái)告訴瀏覽器頁(yè)面的html文檔類型，簡(jiǎn)單來(lái)說(shuō)，用來(lái)指定使用的html版本規(guī)范

目前基本上都是用的是html5，

三.常用標(biāo)簽

1.基本表格

標(biāo)簽含義說(shuō)明

換行標(biāo)簽非關(guān)閉型標(biāo)簽

段落標(biāo)簽關(guān)閉型標(biāo)簽，快型標(biāo)簽，前后段落之間有明顯的距離
h1 h2…h(huán)6 標(biāo)題標(biāo)簽標(biāo)題h1到h6逐漸變小，塊級(jí)標(biāo)簽，加粗顯示預(yù)格式化標(biāo)簽保留編碼時(shí)的格式 div 分區(qū)標(biāo)簽常用容器來(lái)使用，一般用于頁(yè)面布局劃分，塊級(jí)標(biāo)簽 span 范圍標(biāo)簽默認(rèn)情況沒(méi)有任何效果，一般用來(lái)設(shè)置行內(nèi)的特殊格式ol、li 有序列表有順序的項(xiàng)目列表 ul、li 無(wú)序列表無(wú)順序的項(xiàng)目列表

dl、dt、dd 定義列表對(duì)術(shù)語(yǔ)、圖片等就行描述和定義的列表
hr 水平線標(biāo)簽非關(guān)閉型標(biāo)簽，塊級(jí)標(biāo)簽
img 圖像標(biāo)簽非關(guān)閉型標(biāo)簽，行級(jí)標(biāo)簽

1.1有序列表

ol:ordered list

li:list item

默認(rèn)情況下使用阿拉伯?dāng)?shù)字，從1開(kāi)始標(biāo)記，可以通過(guò)屬性進(jìn)行修改

type屬性:設(shè)置列表前的符合標(biāo)記，取值，數(shù)字1（默認(rèn)）字母a或A 羅馬數(shù)字i或I
start屬性:設(shè)置起始值，值必須是數(shù)字

1.2無(wú)序列表

ul：unodered list

li：list item

默認(rèn)使用實(shí)心圓作為符合標(biāo)記，可以通過(guò)屬性進(jìn)行修改

type屬性：設(shè)置列表前面的符合標(biāo)記，取值；disc實(shí)心圓（默認(rèn)）、circle空心圓、square正方形、none不顯示符合

1.3定義列表

dl：definition list

dt：definition title

dd：definition description

1.4水平線標(biāo)簽

hr:horizontal

常用屬性

color顏色
兩種寫(xiě)法：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進(jìn)制的RGB：Red Green Blue 用法：#RGBRGBRGB 每種顏色的取值范圍0-255轉(zhuǎn)換為16進(jìn)制00-FF
eg：#FF0000紅色、#00FF00綠色、#0000FF藍(lán)色、#000000黑色、#CCCCCC、#FF7300
size表示粗細(xì)，數(shù)值
width寬度
兩種寫(xiě)法：
像素：絕對(duì)值（固定值）
百分比：相對(duì)值，相當(dāng)于該標(biāo)簽所在的父容器的寬度的百分比
align對(duì)齊
取值：默認(rèn)center left right

1.5圖像標(biāo)簽

img：image

常見(jiàn)的圖片格式：jpg png gif bmp

常見(jiàn)屬性：

src:source指定圖片的路徑（來(lái)源），必選參數(shù)

如果圖片與html源代碼在同一個(gè)文件夾中，可以直接書(shū)寫(xiě)圖片的名稱

習(xí)慣上，會(huì)將多個(gè)圖片存放到一個(gè)單獨(dú)的文件夾中，如project\image,此時(shí)，需要在圖片名稱的前面添加路徑

路徑的分類：

相對(duì)路徑
表示： ./當(dāng)前路徑
…/當(dāng)前位置的上一級(jí)文件夾
提示：…/image
alt:當(dāng)圖片無(wú)法正常顯示時(shí)提示的信息
title:當(dāng)鼠標(biāo)停留在圖片上時(shí)顯示的提示信息
width/height:設(shè)置圖片的寬度和高度
默認(rèn)情況下原始尺寸顯示如果只設(shè)置其中一個(gè)，則另一個(gè)按比例自動(dòng)縮放如果同時(shí)設(shè)置寬和高，可能會(huì)導(dǎo)致圖片變形
兩種寫(xiě)法：像素：絕對(duì)值（固定值）
百分比，相對(duì)值，相對(duì)該標(biāo)簽所在的上一級(jí)父容器的寬度的百分比

2.其他標(biāo)簽

標(biāo)簽含義說(shuō)明 <i></i> 斜體 italic <em></em> 強(qiáng)調(diào)的內(nèi)容在瀏覽器中顯示的為斜體地址在瀏覽器中顯示一般為斜體，塊級(jí)標(biāo)簽加粗 bold 強(qiáng)調(diào)的內(nèi)容在瀏覽器中顯示一般為粗體刪除線 delete 下劃線下標(biāo) 上標(biāo) 設(shè)置文本方向通過(guò)屬性dir="ltr"(left to right) "rtl"(right to left)從右到左設(shè)置文本縮寫(xiě) 通過(guò)title屬性設(shè)置當(dāng)前鼠標(biāo)停留在文字上時(shí)顯示的提示信息相當(dāng)于當(dāng)前其他文本的字號(hào)減小一號(hào) 相當(dāng)于當(dāng)前其他文本的字號(hào)增大一號(hào)

為了更好的語(yǔ)義化

3.頭部標(biāo)簽

mata定義網(wǎng)頁(yè)的摘要信息，如字符編碼，關(guān)鍵字，描述，作者等信息
title定義網(wǎng)頁(yè)的標(biāo)題
style定義內(nèi)部的CSS樣式
link引用外部的CSS樣式
script定義或引用腳本
base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前頁(yè)面文件的所在位置為相對(duì)路徑的參照

4.標(biāo)簽嵌套

一個(gè)標(biāo)簽中嵌套另外一個(gè)標(biāo)簽

標(biāo)簽不能亂嵌套，如以下標(biāo)簽的嵌套是錯(cuò)誤的

<p style="width:300px;height:300px;background:green"> <div style="width:200px;height:200px;background:blue"> world </div> </p>

瀏覽器渲染后顯示的頁(yè)面代碼與編碼時(shí)有所不同

chrome瀏覽器提供的開(kāi)發(fā)工具：用來(lái)幫助開(kāi)發(fā)人員查看和調(diào)試頁(yè)面的

如何打開(kāi)：

在頁(yè)面中右鍵單擊–>檢查/審查元素/查看元素
按F12

常用工具：

Elements:從瀏覽器的角度來(lái)看頁(yè)面，瀏覽器渲染頁(yè)面時(shí)的結(jié)構(gòu)
console:控制臺(tái)，顯示各種警告和錯(cuò)誤信息
network:查看網(wǎng)絡(luò)請(qǐng)求信息，瀏覽器向服務(wù)器請(qǐng)求了哪些資源、資源大小、加載資源所共費(fèi)的時(shí)間

四、超鏈接

1.簡(jiǎn)介

使用超鏈接可以從一個(gè)界面跳轉(zhuǎn)到另一個(gè)頁(yè)面，實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)

當(dāng)前鼠標(biāo)移動(dòng)到超鏈接文本時(shí)，鼠標(biāo)箭頭會(huì)變成一個(gè)小手

超鏈接有三種類型：

普通鏈接/頁(yè)面鏈接：跳轉(zhuǎn)到另一個(gè)頁(yè)面
錨鏈接：跳轉(zhuǎn)到描點(diǎn)（同一個(gè)頁(yè)面的某個(gè)位置）
功能鏈接：實(shí)現(xiàn)特殊功能（發(fā)郵件，下載）

2.基本用法

使用標(biāo)簽創(chuàng)建超鏈接

語(yǔ)法格式：

<a href-"鏈接地址" target="鏈接打開(kāi)的位置">鏈接文本或圖像</a>

常見(jiàn)屬性：

herf鏈接地址或路徑：鏈接地址

target鏈接打開(kāi)的位置：取值

_self自身，當(dāng)前，默認(rèn)值； _blank新的，空白，新的頁(yè)面 _parent父層框架 _top頂層框架，自定義

路徑分類：

相對(duì)路徑
相對(duì)于當(dāng)前頁(yè)面所在的路徑為參照，不是以根開(kāi)始的
./當(dāng)前路徑
…/表示上級(jí)路徑
絕對(duì)路徑：以根開(kāi)始的路徑
file://d:/software/b.html
http://www.baidu.com

3.超鏈接

3.1簡(jiǎn)介

點(diǎn)擊鏈接后跳轉(zhuǎn)到頁(yè)面的指定位置（描點(diǎn)anchor）

超鏈接的分類：

頁(yè)面內(nèi)的錨鏈接
頁(yè)面間的錨鏈接

3.2頁(yè)面內(nèi)的錨鏈接

步驟：1.定義描點(diǎn)（標(biāo)記）

2.鏈接描點(diǎn)

3.3頁(yè)面間的錨鏈接

4.功能標(biāo)簽

5.URL

5.1簡(jiǎn)介

URL: uniform resource locator 統(tǒng)一資源定位器，用來(lái)定位資源所在的位置

1.https://www.baidu.com/img/bd_logo1.pngname=tom&age=2&sex=male 2.https://www.w3school.com.cn/html/html_quotation_elements.asp 3.file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html 4.http://www.sxgjpx.net/ 5.ftp://10.255.254.253/

5.2 組成

1.https://www.w3school.com.cn/html5/index.asp 2.http://www.sxgjpx.net 3.file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html 4.ftp://10.255.254.253/ 5.https://www.baidu.com/img/bd_logo1.png

一個(gè)完整的URL由8個(gè)部分組成：

協(xié)議：prococol 如
http:超文本傳輸協(xié)議，用來(lái)訪問(wèn)web網(wǎng)站Hyper text Transter protocol
https:更加安全的協(xié)議，SSL安全套接子層
ftp：文件傳輸協(xié)議，用來(lái)訪問(wèn)服務(wù)器上的文件，實(shí)現(xiàn)文件的上傳和下載file Transter protocol
file：文件協(xié)議，用來(lái)訪問(wèn)本地協(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)，如https://www.bilibli.com/video/av93425449//
資源：resource要訪問(wèn)的目標(biāo)文件，如bd_logo1.png
查詢字符串：query string也稱為參數(shù)
在資源后面使用？開(kāi)頭的一組名稱/值
名稱和值之間以=分隔，多個(gè)表達(dá)式之間用&分隔，如：name=tom&age=2&sex=male
錨點(diǎn)anchor，在資源后面使用#開(kāi)頭的文本，如#6
身份認(rèn)證：authentication.指定身份信息，如ftp://賬戶:密碼@ftp.bbshh010.com

五、表格

1.簡(jiǎn)介

表格是一個(gè)規(guī)則的行列結(jié)構(gòu)，每個(gè)表格是由若干行組成的，每行是由若干個(gè)單元格組成

table、row、column

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

2.1 table標(biāo)簽

用來(lái)定義表格

常用屬性：

border :邊框，默認(rèn)值為0
width/height寬度/高度
align對(duì)齊方式取值：left，center，right
bordercolor：邊框顏色
bgcolor：背景顏色
background：背景圖片
cellspacing：間距，單元格與單元格之間的距離
cellpadding：邊距，單元格內(nèi)容與邊界之間的距離

2.2 tr標(biāo)簽

用來(lái)定義行：table row

2.3 td標(biāo)簽

用來(lái)定義單元格：table data

常用屬性：align、valign、bgcolor、background

3.合并單元格

合并單元格也稱為表格的跨行和跨列

兩個(gè)屬性：

rowspan
設(shè)置單元格所跨的行數(shù)，如rowspan=“2” 表示所跨行數(shù)為2
colspan
設(shè)置單元格所跨的列數(shù)，如colspan=“4” 表示跨越4列

步驟：

在跨值得單元格中設(shè)置rowspan/colspan屬性

將被跨越的單元格刪除
注意：必須要保證每行的實(shí)際列數(shù)是相同的，否則表格可能會(huì)出現(xiàn)錯(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ū)別，加粗和居中對(duì)齊

4.4 tbody標(biāo)簽

表格的主體 table body

4.5 tfoot標(biāo)簽

表格的底部 table foot

六.表單

1.簡(jiǎn)介

表單是一個(gè)包含若干個(gè)表單元格的區(qū)域，用于獲取不同類型的用戶信息

表單元素是允許用戶在表單元格中輸入信息的元素，如：文本框，密碼框，單選按鈕，復(fù)選框，下拉列表，按鈕等

2.表單結(jié)構(gòu)

2.1表單的語(yǔ)法

2.2form標(biāo)簽

用來(lái)定義表單，可以包含多個(gè)表單元素

常用屬性：

action提交數(shù)據(jù)給處理，即處理數(shù)據(jù)的程序，默認(rèn)為當(dāng)前頁(yè)面，并且以查詢字符串的形式來(lái)表現(xiàn)
method提交數(shù)據(jù)的方式，取值：get（默認(rèn)）、post
get和post的區(qū)別：
get以查詢字符串形式提交，在地址欄中能夠看到，長(zhǎng)度有限制，不安全
post以表單數(shù)據(jù)組形成提交，在地址欄中看不到，長(zhǎng)度無(wú)限制，安全
enctype提交數(shù)據(jù)的編碼，取值：application/x-www-form-urlencoded(默認(rèn))，multipart/form-data（文件上傳）

3.表單元素

大多數(shù)表單元素都是使用標(biāo)簽來(lái)定義，通過(guò)設(shè)置type屬性來(lái)定義不同的表單元素

<input type="表單元素的類型" name="名稱" value="默認(rèn)值" size="寬度"

表單元素的類型含義說(shuō)明
text 單行文本框省略時(shí)默認(rèn)就是text
password 密碼框輸入時(shí)以點(diǎn)顯示，安全
radio 單選按鈕只能選擇其中一個(gè)
CheckBox 復(fù)選框同時(shí)選擇多個(gè)
submit 提交按鈕提交表單數(shù)據(jù)
reset 重置按鈕重置表單元素的初始值
image 圖像按鈕可以使用圖片作為按鈕，也具有提交功
button 普通按鈕默認(rèn)情況下無(wú)功能
file 文件選擇器選擇要上傳的文件
hidden 隱藏域在頁(yè)面上不顯示，但是會(huì)提交，可以用來(lái)存儲(chǔ)數(shù)據(jù)

3.1單行文本框

常用屬性：

name屬性：名稱，很重要，如果沒(méi)有指定name，則表單元素的數(shù)據(jù)是無(wú)法提交的
value屬性：當(dāng)用戶沒(méi)有輸入數(shù)據(jù)時(shí)，文本框中的默認(rèn)值
size文本框顯示寬度
maxlength最大字符數(shù)，默認(rèn)是沒(méi)有限制的
readonly只讀readonly=“readonly”，可以簡(jiǎn)寫(xiě)readonly，即只寫(xiě)屬性名
disabled屬性：不可用，禁用。disabled=“disabled”，也可直接寫(xiě)disabled完全被禁用
readonly和disable的區(qū)別：前者的數(shù)據(jù)會(huì)提交，后者數(shù)據(jù)不會(huì)被提交

3.2 單選按鈕

常用屬性：

name屬性：名稱，多個(gè)radio的name屬性必須相同，這樣才可以實(shí)現(xiàn)互斥（單選）
value屬性：值，
checked：是否被選中，有兩種狀態(tài)，選中與未選中，<checked=“checked”>簡(jiǎn)寫(xiě)

3.3復(fù)選框

常用屬性：與radio相同

3.4文件選擇器

常用屬性：

name屬性：名稱
accept屬性：設(shè)置可選的文件類型，用來(lái)限制上傳文件的類型
使用MIME格式字符串對(duì)資源類型進(jìn)行限制
常見(jiàn)MIME類型：
純文本：text/plain text/html text/xml
圖像：image/png、image/gif、image/jpeg

4.特殊表單元素

表單元素含義說(shuō)明
select 下拉列表
option 列表的選項(xiàng)
optgroup 選項(xiàng)組用來(lái)對(duì)option進(jìn)行分組
textarea 文本域/多行文本框用于創(chuàng)建一個(gè)多行文本框

4.1下拉列表

select常用屬性：

name屬性，名稱
size下拉列表所顯示的行數(shù)，同時(shí)顯示多個(gè)選項(xiàng)
multiple，允許同時(shí)選擇多個(gè)

option常用屬性：

value選項(xiàng)值
selected，設(shè)置默認(rèn)選住的項(xiàng)

4.2文本域

常用屬性：

name屬性：
rows屬性：行數(shù)
cols屬性：列數(shù)

5.其他表單元素

5.1label標(biāo)簽

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

常用屬性：

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

注意：幾乎所有的HTML標(biāo)簽所有ID屬性，且ID屬性值必須統(tǒng)一

5.2button標(biāo)簽

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

語(yǔ)法：

<button type="按鈕類型">按鈕文本或圖像</input>

常用屬性：

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

5.3filedset和legend標(biāo)簽

filedset標(biāo)簽：對(duì)表單元素進(jìn)行分組

legend標(biāo)簽：對(duì)分組添加標(biāo)簽

七、內(nèi)嵌框架

1.簡(jiǎn)介

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

2.基本語(yǔ)法

語(yǔ)法：

常用屬性：

src屬性：引用的界面
frameborder屬性：是否顯示邊框，1（yes）、0（no）
scrolling屬性：是否顯示滾動(dòng)條，yes、no、auto（自動(dòng)）
width/height屬性：寬度、高度、百分比、像素比

3.在框架中打開(kāi)超鏈接

八.HTML簡(jiǎn)介

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)：

取消了過(guò)時(shí)的標(biāo)簽，如foot、center等，它們僅限于展示外觀
增加了一些更加具有語(yǔ)義化的標(biāo)簽，如header、footer、aside
增加了一些功能標(biāo)簽，如audio、video、canvas等
增加了一些表單控制，如email、date、time、url、search等
增加了本地存儲(chǔ)的功能

3.兼容性

http://canluse.com

提供了個(gè)瀏覽器版本對(duì)HTML5和CSS3規(guī)范的支持度

九.HTML5新增內(nèi)容

1.結(jié)構(gòu)相關(guān)的標(biāo)簽

用來(lái)進(jìn)行頁(yè)面的布局，本身無(wú)無(wú)任何特殊樣式，需要使用CSS進(jìn)行央視設(shè)置

article定義一個(gè)獨(dú)立的內(nèi)容，完整的文章
section定義文檔的章節(jié)段落
header文章的頭部、頁(yè)面、標(biāo)題
footer文章的底部、頁(yè)腳、標(biāo)注
aside定義側(cè)邊欄
figure圖片區(qū)域
figcaption圖片標(biāo)題
nav導(dǎo)航

2.語(yǔ)義相關(guān)的標(biāo)簽

2.1mark標(biāo)簽

標(biāo)記、用來(lái)突出顯示文本，默認(rèn)會(huì)添加黃色的底紋或背景

2.2time標(biāo)簽

定義日期和時(shí)間

2.3details和summary標(biāo)簽

默認(rèn)顯示summary中的內(nèi)容，點(diǎn)擊后顯示details中的內(nèi)容

注：并不是所有的瀏覽器都兼容，Chrome、Opera支持，Firefox不支持

2.4meter標(biāo)簽

計(jì)數(shù)儀，表示度量

常用屬性：

max定義最大值，默認(rèn)為1
min定義最小值，默認(rèn)為0
value定義當(dāng)前值
high定義限定為高的值
low定義為低的值
optimum定義最佳值

規(guī)則：

1.如果optimum大于high時(shí)，則表示越大越好

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

當(dāng)value值在high和low之間為黃色

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

2.如果optimum小于high時(shí)，則表示越小越好

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

當(dāng)value值在high和low之間為黃色

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

3.當(dāng)optimum介于low和high之間時(shí)，則表示值在low和high之間最好

當(dāng)value在low和high之間為綠色，不在為黃色

2.5progress標(biāo)簽

表示進(jìn)度條，運(yùn)行中的進(jìn)度

常用屬性：

value：定義當(dāng)前的值
max：定義完成的值

3.表單相關(guān)

3.1新增表單元素

新增以下type類型：

email：接受郵箱
url：接受url（統(tǒng)一接受資源器）
tel：接受電話號(hào)碼，目前只在移動(dòng)設(shè)備上有效
search：搜索文本框
number/range（范圍）：接受數(shù)字/數(shù)字滑塊，包含min、max、step屬性
date/month/week/time/datetime：表示日期，但兼容性不太好
color：顏色拾取

作用：

具有格式校驗(yàn)的功能
可以與移動(dòng)設(shè)備的鍵盤進(jìn)行關(guān)聯(lián)

3.2 新增表單屬性

form標(biāo)簽屬性：

autocomplete：是否啟用表單的自動(dòng)完成功能，取值on（默認(rèn)）、off
novialidate：提交表單時(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：可以將表單元素寫(xiě)在form標(biāo)簽的外部，然后通過(guò)該屬性來(lái)關(guān)聯(lián)到指定的表單

4.多媒體標(biāo)簽

4.1audio 標(biāo)簽

在頁(yè)面上插入音頻，不同的瀏覽器對(duì)音頻格式的支持不一致

audio常用標(biāo)簽：

src：音頻文件的來(lái)源
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屬性，則該屬性無(wú)效

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

4.2video標(biāo)簽

在頁(yè)面中插入視頻，不同的瀏覽器對(duì)視頻格式的支持不一樣

用法與audio標(biāo)簽基本相同，增加屬性：

width/height：視頻播放器的寬度/高度
poster：在視頻加載前顯示的圖片

1.歡迎來(lái)到html

html從入門到精通<hr><h1>第一課</h1><hr><h2>二級(jí)標(biāo)簽</h2><h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼 </body> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123646114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 4.注釋 <meta charset ="UTF-8"><title>Document</title></head><body></body>

5.實(shí)體標(biāo)簽的字符

Document 圖書(shū)：<<HTML從入口到精通>>

北京???上海????廣州

在html中用<表示<小于號(hào)

"HTML語(yǔ)言"或者 "HTML語(yǔ)言 "

版權(quán)所有 ?2000-2020高焦培訓(xùn)

®&time;關(guān)閉符合&aMp;實(shí)體字符名稱嚴(yán)格區(qū)分大小寫(xiě)，即大小寫(xiě)敏感 ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123757200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 6.常用標(biāo)簽1 hello world
welcome to html！

HTML稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。

<p>超文本是一種組織信息的方式，它通過(guò)超級(jí)鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠(yuǎn)的某臺(tái)計(jì)算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接，為人們查找，檢索信息提供方便。 </p> <hr> <h1>一級(jí)標(biāo)題</h1> <h2>二級(jí)標(biāo)題</h2> <h3>四級(jí)標(biāo)題</h3> <h6>六級(jí)標(biāo)題</h6> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123948399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 7.常用標(biāo)簽2 Document HTML從入門到精通主講：hector

<div style="width: 400px;height:100px;background: red">導(dǎo)航部分</div> <div style="width: 400px;height:500px ;background: yellow">導(dǎo)航部分</div> <div style="width: 400px;height:100px ;background: blue">導(dǎo)航部分</div>iphone XR,不要8888，不要1888，只要<span style="font-size: 50px;color: red">98元</span> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124103823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 8.常用標(biāo)簽3 Document

2020年網(wǎng)絡(luò)游戲排行榜

吃雞

王者農(nóng)藥

LOL

WOW

可愛(ài)的同學(xué)們

張三

李四

小五

小六

<h3>術(shù)語(yǔ)的解釋</h3> <dl><dt>LOL</dt><dd>它是騰訊公司代理的一款游戲，中文名稱叫英雄聯(lián)盟</dd><dd>可以分為PC端和移動(dòng)端</dd><dt>HTML</dt><dd>是一種用來(lái)制作網(wǎng)頁(yè)的標(biāo)記語(yǔ)言</dd><dt>JAVA</dt><dd>是一種跨平臺(tái)編程語(yǔ)言</dd> </dl> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124316800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 9.常用標(biāo)簽4 Document

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124645153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 10.常用標(biāo)簽5 Document

<img src="../image/mac.jpg" width="400px" height="100px"> <hr><img src="../image/mac.jpg" width="50%"> <hr> <div style="width: 800px;height: 800px;background:red;"><img src="../image/mac.jpg" width="50%"> </div> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124804978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 11.常用標(biāo)簽6 Document welcome to HTML!

welcome to HTML!

welcome to 上海市南京東路

HTML從入門到精通！

原價(jià)： 188元，優(yōu)惠價(jià)， 98元
主講： wwwww

水分子的表達(dá)式：H ₂0
2 ³=8

<bdo dir="rtl">welcome to html!</bdo> <br> <bdo dir="rtl">上海自來(lái)水來(lái)自海上</bdo> <hr><abbr title="Hyper Markup Language">HTML</abbr> <br> <span title="Hyper Markup Language">HTML</span> <hr>HTML從<small>入門到精通</small><br> HTML從<big>入門到精通</big>

12.頭部標(biāo)簽

<title>Document</title>  <style>body{color:red;}</style>  <link rel="stylesheet" href="CSS文件的路徑">   <base href="../image/"> IT教育，全國(guó)計(jì)算機(jī)等級(jí)考試

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125027507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 13.標(biāo)簽嵌套 Document

hello

</div> </p>

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125101955.png) ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125117490.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 14.超鏈接 Document 百度
百度

b.html

c.html
d ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125206847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 15.錨鏈接 Document

簡(jiǎn)介

HTML版本

特點(diǎn)

編輯方式

整理結(jié)構(gòu)

相關(guān)要求

簡(jiǎn)介

<P> HTML的英文全稱是 Hypertext Marked Language，即超文本標(biāo)記語(yǔ)言。HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語(yǔ)言，它是標(biāo)準(zhǔn)通用化標(biāo)記語(yǔ)言SGML的應(yīng)用。用HTML編寫(xiě)的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX， Windows等)。使用HTML語(yǔ)言，將所需要表達(dá)的信息按某種規(guī)則寫(xiě)成HTML文件，通過(guò)專用的瀏覽器來(lái)識(shí)別，并將這些HTML文件“翻譯”成可以識(shí)別的信息，即現(xiàn)在所見(jiàn)到的網(wǎng)頁(yè)。 </p> <p> 自1990年以來(lái)，HTML就一直被用作WWW的信息表示語(yǔ)言，使用HTML語(yǔ)言描述的文件需要通過(guò)WWW瀏覽器顯示出效果。HTML是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，通過(guò)標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字動(dòng)畫(huà)、影視等內(nèi)容顯示出來(lái)。事實(shí)上，每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁(yè)文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語(yǔ)言，只是一種排版網(wǎng)頁(yè)中資料顯示位置的標(biāo)記結(jié)構(gòu)語(yǔ)言，易學(xué)易懂，非常簡(jiǎn)單。HTML的普遍應(yīng)用就是帶來(lái)了超文本的技術(shù)―通過(guò)單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，與世界各地主機(jī)的文件鏈接超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)。 </P> <p><a name="second">HTML版本</a></p> <p>HTML是用來(lái)標(biāo)記Web信息如何展示以及其他特性的一種語(yǔ)法規(guī)則，它最初于1989年由GERN的Tim Berners-Lee發(fā)明。HTML基于更古老一些的語(yǔ)言SGML定義，并簡(jiǎn)化了其中的語(yǔ)言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數(shù)據(jù)，所以很早就得到各個(gè)Web瀏覽器廠商的支持。 </p> <p>HTML歷史上有如下版本： ①HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。<br> ②HTML 2.0：1995年1 1月作為RFC 1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。 <br> ③HTML 3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。 <br> ④HTML 4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。<br> ⑤HTML 4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。<br> ⑥HTML 5：HTML5是公認(rèn)的下一代Web語(yǔ)言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手。<br> </p><p><a name="three">特點(diǎn)</a></p> <p> 超級(jí)文本標(biāo)記語(yǔ)言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?#xff0c;這也是萬(wàn)維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下： [4] 簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便。 [4] 可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 [4] 平臺(tái)無(wú)關(guān)性：雖然個(gè)人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級(jí)文本標(biāo)記語(yǔ)言可以使用在廣泛的平臺(tái)上，這也是萬(wàn)維網(wǎng)（WWW）盛行的另一個(gè)原因。 [4] 通用性：另外，HTML是網(wǎng)絡(luò)的通用語(yǔ)言，一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。 </p><p><a name="four">編輯方式</a></p> <p> HTML其實(shí)是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：

基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉?xiě)，當(dāng)然，如果你用WPS來(lái)編寫(xiě)，也可以。不過(guò)存盤時(shí)請(qǐng)使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。 [7]
半所見(jiàn)即所得軟件，如：FCK-Editer、E-webediter等在線網(wǎng)頁(yè)編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開(kāi)發(fā)，Sublime Text2收費(fèi)但可以無(wú)限期試用）。 [7]
所見(jiàn)即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識(shí)就可以做出網(wǎng)頁(yè)，如：AMAYA（出品單位：萬(wàn)維網(wǎng)聯(lián)盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見(jiàn)即所得軟件與半所見(jiàn)即所得的軟件相比，開(kāi)發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強(qiáng)。任何地方進(jìn)行修改只需要刷新即可顯示。缺點(diǎn)是生成的代碼結(jié)構(gòu)復(fù)雜，不利于大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級(jí)功能的實(shí)現(xiàn)。

<p><a name="five">整體結(jié)構(gòu)</a></p> <p> 一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)多個(gè)HTML文件，超文本標(biāo)記語(yǔ)言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)）為擴(kuò)展名或.html（外語(yǔ)縮寫(xiě)）為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來(lái)產(chǎn)生超文本標(biāo)記語(yǔ)言文件，只用修改文件后綴即可。標(biāo)準(zhǔn)的超文本標(biāo)記語(yǔ)言文件都具有一個(gè)基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對(duì)出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語(yǔ)言文件的開(kāi)頭與結(jié)尾標(biāo)志和超文本標(biāo)記語(yǔ)言的頭部與實(shí)體兩大部分。有三個(gè)雙標(biāo)記符用于頁(yè)面整體結(jié)構(gòu)的確認(rèn)。 [10] 標(biāo)記符<html>，說(shuō)明該文件是用超文本標(biāo)記語(yǔ)言（本標(biāo)簽的中文全稱）來(lái)描述的，它是文件的開(kāi)頭;而</html>，則表示該文件的結(jié)尾，它們是超文本標(biāo)記語(yǔ)言文件的開(kāi)始標(biāo)記和結(jié)尾標(biāo)記。 </p><p><a name="six">相關(guān)要求</a></p> <p> 在編輯超文本標(biāo)記語(yǔ)言文件和使用有關(guān)標(biāo)記符時(shí)有一些約定或默認(rèn)的要求。 [9] 文本標(biāo)記語(yǔ)言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)為擴(kuò)展名）或 html（外語(yǔ)縮寫(xiě)為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時(shí)，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。 [9] 超文本標(biāo)記語(yǔ)言源程序?yàn)槲谋疚募?#xff0c;其列寬可不受限制，即多個(gè)標(biāo)記可寫(xiě)成一行，甚至整個(gè)文件可寫(xiě)成一行；若寫(xiě)成多行，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對(duì)文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號(hào)（實(shí)體符）“&nbsp（注意此字母必須小寫(xiě)，方可空格）”表示非換行空格；表示文件路徑時(shí)使用符號(hào)“/”分隔，文件名及路徑描述可用雙引號(hào)也可不用引號(hào)括起。 [9] 標(biāo)記符中的標(biāo)記元素用尖括號(hào)括起來(lái)，帶斜杠的元素表示該標(biāo)記說(shuō)明結(jié)束；大多數(shù)標(biāo)記符必須成對(duì)使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫(xiě)，即其作用相同，但完整的空格可使用特殊符號(hào)“&nbsp（注意此字母必須小寫(xiě)，方可空格）”；許多標(biāo)記元素具有屬性說(shuō)明，可用參數(shù)對(duì)元素作進(jìn)一步的限定，多個(gè)參數(shù)或?qū)傩皂?xiàng)說(shuō)明次序不限，其間用空格分隔即可；一個(gè)標(biāo)記元素的內(nèi)容可以寫(xiě)成多行。 [9] 標(biāo)記符號(hào)，包括尖括號(hào)、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。 [9] HTML注釋由"“結(jié)束結(jié)束，例如。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號(hào)，即被標(biāo)識(shí)為注釋，不予顯示。 </p></body> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125327540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 16.頁(yè)面間的錨鏈接 Document

簡(jiǎn)介

HTML版本

特點(diǎn)

編輯方式

整理結(jié)構(gòu)

相關(guān)要求

![在這里插入圖片描述](https://img-blog.csdnimg.cn/2020032212535969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 17.功能鏈接 Document 點(diǎn)擊此處下載鏈接
<a href="mailto:439988614@qq.com">聯(lián)系我們</a> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125442202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 18.表格 <meta charset="UTF-8"><title>Document</title> <table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../image/bg.gif" cellspacing="0" cellpadding="0px" ><tr align="right" valign="top"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr><tr align="center" valign="middle" bgcolor="blue"><td>hello</td><td bgcolor="yellow" valign="bottom">hello</td><td>hello</td><td>hello</td></tr><tr valign="bottom" background="../../image/qq.jpg"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr></table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125517676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 19.合并單元格 <meta charset="UTF-8"><title>Document</title> <table border="1" width="500px" height="300px"><tr><td colspan="4" align="center">hello</td></tr><tr><td rowspan="3">hello1</td><td>hello2</td><td>hello3</td> <td>hello4</td></tr><tr><td>hello2</td><td rowspan="2" colspan="2">hello3</td></tr><tr><td>hello2</td></tr></table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125549333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 20.表格的高級(jí)標(biāo)簽 Document <caption><h2>基本信息表</h2></caption><thead><th>學(xué)號(hào)</th><th>姓名</th><th>年齡</th><th>性別</th></thead><tbody bgcolor="cyan" align="left"><tr><td>1101</td><td>王五</td><td>19</td><td>男</td></tr><tr><td>1102</td><td>李四</td><td>19</td><td>男</td></tr><tr><td>1103</td><td>張三</td><td>20</td><td>男</td></tr><tr><td>1104</td><td>馬六</td><td>20</td><td>男</td></tr></tbody>

<tr><td width="40%">總計(jì)人數(shù)</td><td colspan="3">4</td></tr> </table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125627288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 21.表格的基本用法 <meta charset="UTF-8"><title>Document</title> <h2>用戶注冊(cè)</h2><form action="" method="get" enctype="application/x-www-form-urlencoded">用戶名：<input type="text" name="user_name" value="無(wú)名氏" ><br>密碼：<input type="text" name="pwd" size="20" maxlength="6"><br>年齡：<input type="text" name="age" disabled><br><input type="submit" value="確認(rèn)"></form> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130503666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 22.表單的基本用法2 <meta charset="UTF-8"><title>Document</title> <h2>用戶注冊(cè)</h2><form action="" method="get" enctype="application/x-www-form-urlencoded">用戶名：<input type="text" name="user_name" value="無(wú)名氏" ><br>密碼：<input type="text" name="pwd" size="20" maxlength="6"><br>年齡：<input type="text" name="age" ><br>性別：<input type="radio" name="sex" value="male"><input type="radio" name="sex" value="remale" checked><br>愛(ài) 好：<input type="checkbox" name="hobby" value="eat">吃飯 <input type="checkbox" name="hobby" value="sleep">睡覺(jué) <input type="checkbox" name="hobby" value="doudou">打豆豆 <br>頭像：<input type="file" name="head" accept="image/jpeg"><input type="hidden" name="usr_id" value="9528"> <hr><input type="submit" value="注冊(cè)"><input type="reset" value="重置"><hr><input type="image" src="../../image/submit.gif"> <input type="image" src="../../image/reset.gif"> <hr><input type="button" value="普通按鈕"> </form> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130559848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 23.特殊的表單元素 <meta charset="UTF-8"><title>Document</title> <form action="">學(xué)歷：<select name="degree"><option value="0">--請(qǐng)選擇學(xué)歷--</option><option value="dazhuan">大專</option><option value="benke" selected>本科</option><option value="yanjiusheng">研究生</option><option value="shuoshi">碩士</option></select> 城市： <select name="city" > <optgroup lable="山西省"><option value="taiyuan">太原</option><option value="datong">大同</option> </optgroup> <optgroup lable="山東省"><option value="qingdao">青島</option><option value="jinan">濟(jì)南</option> </optgroup> <optgroup lable="江蘇省"><option value="nanjing">南京</option><option value="yangzhou">揚(yáng)州</option> </optgroup> </select> <br> 個(gè)人簡(jiǎn)介： <textarea name="intrduce" rows="10" cols="20" endonly>請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī) </textarea> <hr> <input type="submit"> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130846255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 24.其他表單元素 <meta charset="UTF-8"><title>Document</title> <legend>個(gè)人信息</legend><lable for="">用戶名：</lable><input type="text" name="usrname" id="name"><br><lable for="">郵箱：</lable><input type="text" name="email" id="email"> <hr><input type="submit" value="提交按鈕"><input type="reset" value="重置按鈕"> <input type="image" src="../../image/submit.gif"> <input type="button" value="普通按鈕"><hr><button type="submit">提交按鈕</button> <button type="reset">重置按鈕</button> <button type="button">普通按鈕</button> <button><img src="../../image/submit.gif" alt=""></button> <legend>院校信息</legend>學(xué)號(hào)：<input type="text" name="stuID"><br>學(xué)校：<input type="text" name="stuSchool"><br>專業(yè)：<input type="text" name="stuMajor"><br> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322131019682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 25.內(nèi)嵌框架 <meta charset="UTF-8"><title>Document</title> <iframe src="top.html" width="100%" height="250" frameborder="0" scrolling=""></iframe><h3>主體部分</h3><hr><a href="01.表格.html" target="hello">01.html</a> <a href="02.合并單元格.html" target="hello">02.html</a> <br><iframe src="./foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe> (1) top.html <meta charset="UTF-8"><title>Document</title> <ul><li>網(wǎng)頁(yè)</li><li>咨詢</li><li>視頻</li><li>圖片</li><li>知道</li><li>貼吧</li></ul>

(2) foot.html

總結(jié)

以上是生活随笔為你收集整理的HTML（总）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html

上一篇： i78700k配什么显卡好_八代i7 8
下一篇：前端渲染框架NUXT + UI组件 ve