重學(xué)前端之HTML網(wǎng)頁(yè)開發(fā)入門
時(shí)間：2023-09-26 01:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-26 01:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
重學(xué)前端之HTML網(wǎng)頁(yè)開發(fā)入門：前端學(xué)習(xí)路徑及基礎(chǔ)學(xué)習(xí)教程目錄
HTML主要用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)，描述頁(yè)面的內(nèi)容，本篇講HTML相關(guān)語(yǔ)法以及常用標(biāo)簽。
1、HTML概述HTML就是用來(lái) 制作網(wǎng)頁(yè)文件的 。
瀏覽器查看的 網(wǎng)頁(yè)都是 .html或 .htm文件。
HTML叫做超 文本 標(biāo)記語(yǔ)言 （Hypertext Markup Language），用于 搭建網(wǎng)頁(yè)結(jié)構(gòu)。
2、純文本格式 純文本格式，就是沒有任何文本修飾的，沒有任何粗體，下劃線，斜體，圖形，符號(hào)或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式設(shè)置。
格式對(duì)比 純文本格式：最常見的是.txt文件。在存儲(chǔ)和傳輸過(guò)程中，只能保存文字，不能保存格式。
富文本格式：最常見的是.rtf,.doc文件，內(nèi)部可以保存文本的格式、圖片等。
純文本文件特點(diǎn) 1、文件只能保存文本，不保存其他的格式或非文本內(nèi)容，有利于網(wǎng)絡(luò)傳輸。
2、所有的純文本格式文件 ，可以通過(guò)直接更改擴(kuò)展名的方式更改保存格式。
3、純文本格式文件可以使用任意的純文本編輯器進(jìn)行查看和編輯。
4、占用空間小，易于傳輸
Html,css,js文件都是純文本格式文件。
3、HTML概念 Hypertext Markup Language：超文本標(biāo)記語(yǔ)言。是用來(lái)制作網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言。
HTML是一種純文本格式的文件，內(nèi)部只能書寫文字內(nèi)容，不能添加圖片、音頻、視頻等，但是在網(wǎng)頁(yè)中給用戶呈現(xiàn)的效果卻包含了文字以外的內(nèi)容，這種效果就是HTML文件區(qū)別于其他文件的不同之處。
超文本：是超級(jí)文本的縮寫，就是用于鏈接另一個(gè)文本或多媒體內(nèi)容的文本，比如鏈接到圖片、鏈接、音頻、視頻、程序等。
標(biāo)記：又叫標(biāo)簽（HTML TAG），有特殊的書寫規(guī)范，是寫給瀏覽器的一種語(yǔ)法格式，結(jié)合普通的文字信息，實(shí)現(xiàn)特殊的語(yǔ)義或顯示內(nèi)容。在編輯器中可以編輯和查看，在瀏覽器中不顯示。
例子：
新建一個(gè)txt文檔，把文件名改為 xxx.html，在里面輸入文字，瀏覽器打開可以看到效果，在文字外面加上h1,h2,p等標(biāo)簽，再看效果
<h1>標(biāo)題1</h1><h2>標(biāo)題2</h2><p>內(nèi)容1</p>內(nèi)容2內(nèi)容3HTML的功能：利用標(biāo)記給普通的文本添加語(yǔ)義、描述超文本內(nèi)容，搭建網(wǎng)頁(yè)的基本結(jié)構(gòu)。
思考：h1標(biāo)簽的作用是什么？
答案：h1標(biāo)簽負(fù)責(zé)給內(nèi)部文字添加一級(jí)標(biāo)題的語(yǔ)義，不負(fù)責(zé)樣式，樣式由CSS負(fù)責(zé)。
HTML的語(yǔ)義化：HTML文件中，如果沒有使用特殊語(yǔ)義的標(biāo)記，也可以實(shí)現(xiàn)網(wǎng)頁(yè)顯示效果，但是利用標(biāo)記給普通的文字添加了不同的語(yǔ)義，能夠讓網(wǎng)站的結(jié)構(gòu)劃分更加清晰。
語(yǔ)義化網(wǎng)頁(yè)的優(yōu)勢(shì)： 1、方便代碼的閱讀和后期維護(hù)
2、便于瀏覽器或是搜索引擎爬蟲更好地解析網(wǎng)站內(nèi)容
3、有利于SEO搜索引擎優(yōu)化，提高網(wǎng)站的自然搜索排名
4、HTML基本語(yǔ)法（HTML版本規(guī)范和HTML標(biāo)簽語(yǔ)法） HTML規(guī)范版本 W3C:world wide web consortium，萬(wàn)維網(wǎng)聯(lián)盟。專門發(fā)布和維護(hù)互聯(lián)網(wǎng)的規(guī)范和標(biāo)準(zhǔn)。
HTML標(biāo)簽，也叫HTML標(biāo)記（HTML tag）。標(biāo)簽在書寫和使用過(guò)程中，必須遵循特定的語(yǔ)法。
HTML標(biāo)簽語(yǔ)法 1、標(biāo)簽名必須書寫在一對(duì)尖括號(hào)<>內(nèi)部。
<html></html>
2、標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽必須成對(duì)出現(xiàn)。
雙標(biāo)簽：<p></p>
單標(biāo)簽：<img /><br />
3、雙標(biāo)簽包含開始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽必須書寫關(guān)閉符號(hào)/，單標(biāo)簽也需要進(jìn)行自封閉書寫。在HTML5中，單標(biāo)簽可以不寫關(guān)閉符號(hào)，建議寫。
5、HTML元素 HTML元素指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容，包含開始標(biāo)簽、元素內(nèi)容、結(jié)束標(biāo)簽。
例如：雙標(biāo)簽內(nèi)部包含的純文本內(nèi)容，就是元素內(nèi)容。
<p>這是一段文字內(nèi)容</p>
元素內(nèi)容 1、元素內(nèi)容可以是純文本，也可以是其他的HTML元素。這種元素內(nèi)容包含其他HTML元素的情況，我們可以稱為嵌套，也就是div元素元素內(nèi)部嵌套了p標(biāo)簽元素。
<div><p>div元素內(nèi)部嵌套p元素</p></div> 2、一個(gè)HTML元素div的內(nèi)容可能是多個(gè)其他元素組成，例如p和h1，此時(shí)我們習(xí)慣稱div是p和h1的父級(jí)元素，p和h1是div的子級(jí)元素，而p和h1屬于同級(jí)元素，這種嵌套關(guān)系可以有多層。
<div> <p>div元素內(nèi)部嵌套p元素</p> <h1>div元素內(nèi)部嵌套的h1元素</h1> </div> 3、單標(biāo)簽是不能添加元素內(nèi)容的，可以稱為空元素
<br /> 標(biāo)簽級(jí)別 根據(jù)標(biāo)簽內(nèi)部可以存放的元素內(nèi)容不同，可以將雙標(biāo)簽劃分為兩個(gè)級(jí)別。
容器級(jí)：標(biāo)簽內(nèi)部可以存放任意內(nèi)容，包含容器級(jí)標(biāo)簽。如div等。
文本級(jí)：標(biāo)簽內(nèi)部只能存放文字或類似文字的內(nèi)容，比如存放圖片、表單元素等。如p等。
HTML元素的特性 1、元素間對(duì)空格、換行、縮進(jìn)等形成的空白不敏感，有無(wú)空白對(duì)在瀏覽器中加載的效果沒有影響。瀏覽器識(shí)別的是元素的開始和結(jié)束以及互相之間的嵌套關(guān)系。
<p>段落內(nèi)容</p><p>段落內(nèi)容</p><p>段落內(nèi)容</p> 等價(jià)于
<p>段落內(nèi)容</p> <p>段落內(nèi)容</p> <p>段落內(nèi)容</p> 2、空白折疊現(xiàn)象：元素內(nèi)容如果是文本，所有文字（類似文字內(nèi)容）之間如果有空格、換行、縮進(jìn)等空白字符，在瀏覽器中加載時(shí)，連接在一起的空白會(huì)折疊成一個(gè)空格顯示，這就是空白折疊現(xiàn)象。
<p>在網(wǎng)頁(yè)中顯示的時(shí)候，這里的空格 是沒有的，顯示時(shí)是連續(xù)的</p> 6、HTML屬性 HTML標(biāo)簽可以添加屬性，屬性可以提供關(guān)于HTML元素的更多信息。
HTML屬性規(guī)范 1、書寫位置：必須寫在開始標(biāo)簽或者單標(biāo)簽之內(nèi)，與標(biāo)簽名之間用空格進(jìn)行分隔。
2、屬性包含：屬性名(key)、屬性值(value)。屬性名與屬性值之間的寫法通常稱作鍵值對(duì)寫法，HTML標(biāo)簽屬性的鍵值對(duì)寫法是k=“v"。XHTML要求屬性值必須在雙引號(hào)內(nèi)部。
<p class="p1">內(nèi)容1</p>
3、一個(gè)標(biāo)簽內(nèi)可以設(shè)置多個(gè)不同的屬性，屬性與屬性之間使用空格進(jìn)行分隔，每個(gè)屬性的鍵值對(duì)寫法都是k=“v”。
<p class="p1" id="p1">內(nèi)容1</p>
4、部分標(biāo)簽屬性k可以設(shè)置多個(gè)屬性值v，所有屬性值v都必須寫在同一對(duì)雙引號(hào)內(nèi)，值與值之間需要使用空格分隔。
<p class="p1 p01 p02" id="p1">內(nèi)容1</p>
7、編輯器，使用VS code編程 純文本編輯
器 1、所有的純文本編輯器都能編輯HTML文件。例如記事本、Editplus、nodepad等。
2、專門制作網(wǎng)頁(yè)的軟件有：Sublime，WebStorm，Visual Studio Code等
VS code編輯器 1、它是微軟研發(fā)的一款非常方便使用的免費(fèi)的編輯器。
2、VS code擁有超級(jí)豐富的插件擴(kuò)展，你可以根據(jù)自己的需求使用不同的插件，對(duì)于開發(fā)者來(lái)說(shuō)更加友好。
安裝 官網(wǎng)：
https://code.visualstudio.com/ 插件擴(kuò)展 打開VS code后，使用 ctrl+shift+x 打開擴(kuò)展，推薦安裝幾個(gè)初期使用的插件。
Chinese (Simplified) Language Pack for Visual Studio Code：使用中文界面
Auto Rename Tag：自動(dòng)幫你完成尾部html閉合標(biāo)簽的同步修改
open in browser：右鍵設(shè)置在默認(rèn)瀏覽器打開網(wǎng)頁(yè)
Markdown Preview Enhanced：MarkDown支持
Mithril Emmet：快速編寫工具，已經(jīng)集成在VS code中，可以不用安裝
具體使用方式：
https://docs.emmet.io/cheat-sheet/ VS code 使用步驟 1、新建文件，ctrl+n
2、保存對(duì)應(yīng)的文件格式ctrl+s，例如.html,.css,.js等文件。
3、使用對(duì)應(yīng)的快捷鍵快速編寫程序。
常用快捷鍵 ! -> tab 自動(dòng)生成基本HTML結(jié)構(gòu)
標(biāo)簽名 -> tab 自動(dòng)生成標(biāo)簽
標(biāo)簽名*n -> tab 自動(dòng)生成N個(gè)相同的標(biāo)簽
h$*6 -> tab 自動(dòng)生成h1到h6的標(biāo)簽
ctrl+shift+d 復(fù)制光標(biāo)所在行、復(fù)制所選內(nèi)容
ctrl+shift+k/ctrl+x 刪除光標(biāo)所在行、所選內(nèi)容
ctrl+shift+向上鍵 將光標(biāo)所在行上移一行
ctrl+shift+向下鍵 將光標(biāo)所在行下移一行
按住鼠標(biāo)滾輪拖動(dòng) 同時(shí)選中多個(gè)光標(biāo)，同時(shí)操作
ctrl+滾輪 調(diào)整顯示字號(hào)大小
ctrl+z 無(wú)限后退一步
shift+ctrl+z 無(wú)限還原一步
ctrl+enter 在任意位置直接換行
8、HTML基本結(jié)構(gòu) 在vs code中輸入！再按tab鍵，可以得到HTML5的基本結(jié)構(gòu)，HTML5可以兼容之前的。
基本骨架 HTML文件最基本的四個(gè)標(biāo)簽，組成了網(wǎng)頁(yè)的基本骨架，包括：<html>、<head>、<title>、<body>四組標(biāo)簽。
<html><head><title>網(wǎng)頁(yè)的標(biāo)題</title></head><body>網(wǎng)頁(yè)的主體</body></html><html>標(biāo)簽 作用：定義HTML文件的根元素，表示整個(gè)的HTML文檔，所有的標(biāo)簽要書寫在<html>標(biāo)簽內(nèi)部。
<head>標(biāo)簽 作用：用于存放<title>,<meta>,<base>,<style>,<script>,<link>。用于對(duì)網(wǎng)頁(yè)的設(shè)置，除了<title>內(nèi)部的文字，其他標(biāo)簽都不顯示在瀏覽器上。
注意：在<head>標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title。
<title>標(biāo)簽 作用1：讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題。
作用2：title中的關(guān)鍵字可以作為搜索引擎抓取時(shí)的關(guān)鍵字，提高SEO搜索引擎優(yōu)化，讓網(wǎng)頁(yè)在搜索時(shí)排在靠前位置。
作用3：內(nèi)部的內(nèi)容會(huì)顯示在搜索結(jié)果的標(biāo)題部分。
作用4：作為瀏覽器收藏夾默認(rèn)的網(wǎng)頁(yè)標(biāo)題。
建議網(wǎng)頁(yè)必須添加title標(biāo)題內(nèi)容，內(nèi)容盡量精簡(jiǎn)，提取網(wǎng)頁(yè)的最重要的關(guān)鍵詞作為標(biāo)題。
<body>標(biāo)簽 作用：定義網(wǎng)頁(yè)的主體部分，用于存放所有的HTML顯示內(nèi)容的標(biāo)簽<p><h1><a><div>等。
<body>內(nèi)部的元素內(nèi)容會(huì)顯示在瀏覽器的窗口中。
9、DTD、命名空間、字符集 DTD 完整的HTML文件的第一行內(nèi)容叫做文檔定義類型，英文DocType Definition，簡(jiǎn)稱DTD。也稱作文檔聲明類型，DocType Declaration。
作用：告知瀏覽器該網(wǎng)頁(yè)使用的是哪個(gè)版本的HTML規(guī)范，讓瀏覽器按照對(duì)應(yīng)版本的HTML語(yǔ)法進(jìn)行解析頁(yè)面。
HTML5版本（推薦） <!DOCTYPE html>
XHTML1.0版本（以前的，不推薦）
<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
命名空間 <html>元素表示整個(gè)網(wǎng)頁(yè)文檔，在開始標(biāo)簽上設(shè)置了命名空間xmlns屬性。
XHTML1.0版本
<html xmlns=“
http://www.w3.org/1999/xhtml” xml:lang=“en”>
HTML5版本
<html lang="en”>
命名空間xmlns xml：可擴(kuò)展標(biāo)記語(yǔ)言，使用在傳輸過(guò)程中的規(guī)范。被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)，是html的補(bǔ)充。
xmlns：全稱叫做XML NameSpace,NameSpace叫做命名空間，瀏覽器會(huì)將此命名空間用于該屬性所在元素內(nèi)的所有內(nèi)容。
<html>元素的命名空間規(guī)定了在不同用戶的瀏覽器中標(biāo)簽語(yǔ)義遵循的統(tǒng)一標(biāo)準(zhǔn)，避免出現(xiàn)標(biāo)簽名沖突，這個(gè)標(biāo)準(zhǔn)使用的就是一個(gè)固定的網(wǎng)址
http://www.w3.org/1999/xhtml中的規(guī)范。
語(yǔ)言 xml:lang=“en”和lang=“en”表示所有的標(biāo)簽元素內(nèi)容的語(yǔ)言都是英語(yǔ)，對(duì)搜索引擎和瀏覽器是有幫助的。
lang=“zh-cn”表示中文
字符集 <head>標(biāo)簽內(nèi)部的<meta>標(biāo)簽通過(guò)http-equiv屬性定義了當(dāng)前的網(wǎng)頁(yè)所使用的字符編碼。
char:character，字符。set：集合。
XHTML1.0版本
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
HTML5版本
<meta charset=“UTF-8”>
常用的字符集編碼 國(guó)際通用字庫(kù) UTF-8:以字節(jié)為單位對(duì)Unicode萬(wàn)國(guó)碼進(jìn)行編碼，涵蓋了所有人類的語(yǔ)言文字，一個(gè)漢字為3個(gè)字節(jié)大小。
中文國(guó)標(biāo)字庫(kù) gb2312：共收入漢字6763個(gè)和包括拉丁字母、希臘字母、日文平假名及片假名字母、俄語(yǔ)里爾字母在內(nèi)的682個(gè)。
gbk：是gb2312的擴(kuò)展，增加了繁體字，共收入21886個(gè)漢字和圖形符號(hào)，其中漢字（包括部首和構(gòu)件）21003個(gè)，圖形符號(hào)883個(gè)，一個(gè)漢字為2個(gè)字節(jié)大小。
字符集常見問(wèn)題 使用情況建議：
1、建議使用utf-8
2、國(guó)內(nèi)也有很多是gbk，為了避免亂碼，可以沿用
注意：meta標(biāo)簽聲明的字庫(kù)，必須和編輯器軟件默認(rèn)編譯字庫(kù)相同，否則會(huì)出現(xiàn)兩個(gè)字庫(kù)不匹配，瀏覽器加載時(shí)出現(xiàn)亂碼。（在vs code右下角可以設(shè)置）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <title>Document</title></head><body></body></html>10、html常用標(biāo)簽-注釋 在很多代碼技術(shù)中都可以添加注釋內(nèi)容，我們也可以向HTML源代碼添加注釋。
HTML注釋語(yǔ)法：
<!—這里是注釋內(nèi)容—>
vscode快捷鍵：ctrl+/
注釋的特點(diǎn)：注釋只在源代碼中可見，在瀏覽器窗口是不顯示的。
用途：
1、在源代碼中添加描述性的提示信息，便于我們閱讀和修改代碼。
2、對(duì)于HTML糾錯(cuò)也有大幫助，可以通過(guò)注釋某一行HTML代碼，以便檢索錯(cuò)誤的位置。
3、暫時(shí)注釋掉一部分不用的代碼，便于后期恢復(fù)代碼。
11、html常用標(biāo)簽-標(biāo)題 標(biāo)題，是通過(guò)<h1>-<h6>六個(gè)標(biāo)簽分別來(lái)對(duì)六個(gè)級(jí)別的標(biāo)題進(jìn)行定義的。
<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題
<h1>-<h6>標(biāo)簽都是雙標(biāo)簽，且是容器級(jí)標(biāo)簽。
作用：給標(biāo)簽內(nèi)部的元素內(nèi)容添加對(duì)應(yīng)級(jí)別標(biāo)題的語(yǔ)義，不負(fù)責(zé)文字的粗體、字號(hào)等樣式。
樣式是由CSS設(shè)定的。
<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5><h6>六級(jí)標(biāo)題</h6>標(biāo)簽級(jí)別 標(biāo)題標(biāo)簽之間是不能互相嵌套的，下一級(jí)標(biāo)題與上一級(jí)標(biāo)題之間通過(guò)同級(jí)關(guān)系書寫，下一級(jí)標(biāo)題解釋說(shuō)明的是前面距離最近的上一級(jí)標(biāo)題。
權(quán)重 標(biāo)題標(biāo)簽對(duì)于呈現(xiàn)文檔結(jié)構(gòu)非常重要，使用時(shí)要根據(jù)標(biāo)簽的重要程度進(jìn)行選擇，其中<h1>標(biāo)簽最重要，<h2>標(biāo)簽次重要，以此類推。
<h1>在整個(gè)HTML中的權(quán)重非常高，內(nèi)部應(yīng)該放置HTML中最重要的內(nèi)容，比如logo關(guān)鍵字。
<h1>由于非常重要，內(nèi)部的文字對(duì)于提高搜索引擎排名也非常重要，為了防止作弊，如果一個(gè)頁(yè)面出現(xiàn)多個(gè)<h1>，反而降低權(quán)重。約定俗成的，一個(gè)頁(yè)面中只會(huì)出現(xiàn)一個(gè)<h1>。
12、html常用標(biāo)簽-段落和換行 段落標(biāo)簽 段落（paragraph）是通過(guò)<p>標(biāo)簽進(jìn)行定義的。
<p>標(biāo)簽是雙標(biāo)簽，且為文本級(jí)標(biāo)簽。內(nèi)部只能放置文本、圖片、表單元素，或者<strong><i><b>等標(biāo)簽。
<h2>二級(jí)標(biāo)題</h2><p>這是一個(gè)段落，用來(lái)解釋說(shuō)明二級(jí)標(biāo)題。</p>作用：<p>標(biāo)簽的作用是給標(biāo)簽內(nèi)部的內(nèi)容添加一個(gè)完整段落的語(yǔ)義，不負(fù)責(zé)內(nèi)容自動(dòng)換行的樣式。
換行的樣式是由CSS來(lái)負(fù)責(zé)。
換行標(biāo)簽 <br />（breaking）標(biāo)簽是HTML中一個(gè)簡(jiǎn)單的換行符。
<br />標(biāo)簽是一個(gè)單標(biāo)簽。
在需要換行的位置可以使用<br />標(biāo)簽書寫，但是<br />與<p>不同，<br />沒有建立新的段落的語(yǔ)義，只是簡(jiǎn)單的進(jìn)行強(qiáng)制換行。
<p>這是一個(gè)段落，需要換行，<br />不換段落。</p>
常規(guī)用法 每一對(duì)<p>標(biāo)簽內(nèi)部的元素內(nèi)容為一個(gè)完整的段落，如果有多個(gè)段落，需要分別使用不同的<p>標(biāo)簽進(jìn)行定義。
<p>這是第一個(gè)段落</p><p>這是第二個(gè)段落</p>13、html常用標(biāo)簽-文本格式化 HTML中有部分標(biāo)簽是用來(lái)對(duì)文字進(jìn)行格式化顯示設(shè)置的，如果粗體和斜體等。
但是在HTML4.0版本規(guī)范后，結(jié)構(gòu)和樣式進(jìn)行了分離，HTML只負(fù)責(zé)搭建結(jié)構(gòu)，CSS負(fù)責(zé)格式化樣式，所以大部分文本格式化標(biāo)簽被廢棄，但是在HTML4.01和XHTML1.0 transitional版本中依舊可以使用。
標(biāo)簽：文本格式化的標(biāo)簽均為雙標(biāo)簽，且為文本級(jí)標(biāo)簽，內(nèi)部只能書寫文字。
b：定義粗體文本，bold
big：定義大號(hào)字
em：定義著重文字，emphasis，自帶斜體效果
i：定義斜體字，italic
small：定義小號(hào)字
strong：定義加重語(yǔ)氣，自帶加粗效果
sub：定義下標(biāo)字，subscript
sup：定義上標(biāo)字，superscript
ins：定義插入字，自帶下劃線效果，insert
del：定義刪除字，delete
u：定義下劃線，underline
<p><b>這里是b標(biāo)簽</b></p><p><u>這里是u標(biāo)簽</u></p><p><i>這里是i標(biāo)簽</i></p><p><big>這里是big標(biāo)簽</big></p><p><small>這里是small標(biāo)簽</small></p><p><em>這里是em標(biāo)簽</em></p><p><ins>這里是ins標(biāo)簽</ins></p><p><del>這里是del標(biāo)簽</del></p><p>這里有個(gè)上標(biāo)3<sup>2</sup></p><p>這個(gè)有個(gè)水H<sub>2</sub>O</p>14、html常用標(biāo)簽-圖像 圖像（image）由<img>標(biāo)簽進(jìn)行定義。
<img>標(biāo)簽是單標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文本。
<img>標(biāo)簽的作用是在指定的位置插入一張圖片。
在HTML文件中，常用的插入圖片的類型有：jpg,png,gif等。
標(biāo)簽屬性 由于<img>為單標(biāo)簽，所以它只能通過(guò)屬性進(jìn)行相關(guān)的圖像設(shè)置。
<img>常用屬性展示：
src：表示圖片的路徑
width：表示圖片的寬度
height：表示圖片的高度
border：邊框?qū)傩裕凰闹悼梢栽O(shè)置邊框的厚度
title：設(shè)置提示文本
alt：設(shè)置圖像沒有找到時(shí)候的替換文本
src屬性和路徑 如果需要插入一張圖片到HTML中，<img>標(biāo)簽必須設(shè)置src屬性。
src：全稱source資源，屬性值是圖片查找的路徑。
路徑：指的是尋找文件時(shí)所歷經(jīng)的線路，在HTML中有特殊的書寫語(yǔ)法。
路徑分為相對(duì)路徑和絕對(duì)路徑，不同的方式出發(fā)點(diǎn)和參考位置不同。
部分標(biāo)簽的屬性需要設(shè)置為路徑，例如<img>的src屬性。
<img src="images/1.jpg" /> 15、html常用標(biāo)簽-相對(duì)路徑 相對(duì)路徑查找文件時(shí)，需要從HTML文件本身出發(fā)，根據(jù)相對(duì)的位置進(jìn)行查找，包含三種方向。
同級(jí)查找：指目標(biāo)文件與HTML文件位于同一級(jí)，直接書寫文件名+后綴格式；
<img src=“1.jpg”> 子級(jí)查找：指目標(biāo)文件在與HTML文件同一級(jí)的文件夾的內(nèi)部，需要先查找文件夾名稱，然后通過(guò)關(guān)閉符號(hào)/進(jìn)入文件夾查找里面的文件；如果有多層文件夾，需要/進(jìn)入多層。
<img src=“images/1.jpg”> <img src=“images/pic/1.jpg”> 上級(jí)查找：指目標(biāo)文件在HTML文件所在文件夾的更上一級(jí)，需要跳出當(dāng)前文件夾到上一層，路徑寫法利用 ../表示跳出一級(jí)，如果跳出多級(jí)書寫多次../，直到找到文件。
<img src=“../images/1.jpg”> <img src=“../../images/1.jpg”> 16、html常用標(biāo)簽-絕對(duì)路徑 絕對(duì)路徑查找文件時(shí)，不需要從HTML文件出發(fā)，而是直接從電腦的盤符出發(fā)進(jìn)行查找，或者使用網(wǎng)址形式查找。
盤符出發(fā)：例如從c盤或者d盤出發(fā)查找圖片，書寫時(shí)以c:/開頭，后續(xù)類似子級(jí)查找寫法直至找到目標(biāo)文件。
<img src=“C:/User/teacher/Documents/html/case/images/1.jpg”> 網(wǎng)址形式：要查找的文件是來(lái)自網(wǎng)絡(luò)資源，路徑寫法以http://開頭。
<img src=“https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/5ab5c9ea15ce36d3207eebbd3df33a87e850b1c1.jpg”> 從盤符出發(fā)的絕對(duì)路徑的缺點(diǎn)： 1、盤符出發(fā)的路徑不可移植，不可移動(dòng)。
2、盤符出發(fā)的路徑容易出現(xiàn)中文字符，中文的路徑容易出現(xiàn)錯(cuò)誤。
路徑實(shí)際應(yīng)用 1、建議多使用相對(duì)路徑，可以適當(dāng)使用網(wǎng)址形式的絕對(duì)路徑。
2、使用相對(duì)路徑必須將圖片或文件與HTML同時(shí)上傳，而且需要保持相對(duì)位置不變。
17、html常用標(biāo)簽-圖像其他屬性 width：圖片的寬度
height：圖片的高度
屬性值：以px為單位的數(shù)值，或者省略px不寫。
如果不設(shè)置兩個(gè)屬性，會(huì)以圖片的原始尺寸加載。
如果設(shè)置屬性：只設(shè)置了其中一個(gè)，另一個(gè)會(huì)等比例變換；如果兩個(gè)都設(shè)置，按照設(shè)置值加載。
邊框border border：設(shè)置圖片的邊框
屬性值：數(shù)值，數(shù)值是幾表示邊框?qū)挾葹閹紫袼亍?
<img src=“1.jpg” border=“20”>
注意：border屬性可以使用CSS進(jìn)行設(shè)置，CSS中的邊框有更多的設(shè)置效果。
提示文本title title：設(shè)置的是鼠標(biāo)懸停時(shí)的提示文本。
屬性值：自定義的提示文字內(nèi)容。
<img src=“1.jpg” title=“這里是鼠標(biāo)移上的提示文字”>
替換文本alt alt：設(shè)置的是圖片查找錯(cuò)誤時(shí)，出現(xiàn)的替換文本。
如果能正常找到圖片，替換文本是不顯示的。
屬性值：自定義的替換內(nèi)容。
<img src=“1.jpg” alt=“這里是一張植物圖片”> 總結(jié)：<img>標(biāo)簽最為重要的屬性為src，盡量使用alt屬性對(duì)圖片進(jìn)行說(shuō)明，添加相對(duì)關(guān)鍵詞可以有利于SEO搜索引擎優(yōu)化。其他屬性可以根據(jù)需求進(jìn)行設(shè)置。
18、html常用標(biāo)簽-音頻和視頻 網(wǎng)頁(yè)中的多媒體內(nèi)容除了圖片，還有音頻、視頻等，HTML也提供了特定的標(biāo)簽用于添加音頻和視頻。
音頻標(biāo)簽 音頻使用<audio>標(biāo)簽進(jìn)行定義。
<audio>是雙標(biāo)簽。
同圖片一樣，需要使用src屬性設(shè)置音頻查找的路徑。
音頻文件支持的格式包括：.mp3,.ogg,.wav。
<video src=“1.mp3”></video> 音頻控制條屬性 音頻加載后不會(huì)自動(dòng)顯示播放器的控制條，需要使用controls屬性進(jìn)行設(shè)置，屬性值也是controls。
<video src=“1.mp3” controls=“controls"></video> 視頻標(biāo)簽 視頻的設(shè)置方法與音頻非常類似。
視頻使用<video>標(biāo)簽進(jìn)行定義。
<video>是雙標(biāo)簽。
使用src屬性設(shè)置視頻查找的路徑。
視頻文件支持的格式包括：.mp4,.ogg,.webm。
<video src=“1.mp4”></video> 視頻控制條屬性 視頻也需要使用controls屬性設(shè)置控制條，屬性值也是controls。
19、html常用標(biāo)簽-超級(jí)鏈接 HTML使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
超級(jí)鏈接標(biāo)簽 在HTML中使用<a>標(biāo)簽可以創(chuàng)建鏈接。
a全稱anchor，錨的意思。
<a>為雙標(biāo)簽。
作用：在指定的位置添加超級(jí)鏈接，提供用戶進(jìn)行點(diǎn)擊和跳轉(zhuǎn)。
<a>標(biāo)簽可以實(shí)現(xiàn)兩種跳轉(zhuǎn)：跨頁(yè)面跳轉(zhuǎn)、頁(yè)面內(nèi)跳轉(zhuǎn)。實(shí)現(xiàn)跳轉(zhuǎn)的方式需要用到一些標(biāo)簽屬性。
<a>a標(biāo)簽</a>
href屬性 href全稱hypertext reference，超文本引用，用于規(guī)定鏈接的目標(biāo)地址。
屬性值：鏈接目標(biāo)的路徑地址?？梢允褂孟鄬?duì)路徑或網(wǎng)址形式的絕對(duì)路徑。
href屬性非常重要，<a>標(biāo)簽要想實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)，必須設(shè)置該屬性，擁有這個(gè)屬性，<a>標(biāo)簽在鼠標(biāo)移上時(shí)才會(huì)顯示一個(gè)小手指針狀態(tài)。
<a href="https://www.baidu.com">這里是鏈接</a>
target屬性 使用target屬性，可以定義被鏈接的文檔在何處跳轉(zhuǎn)顯示。
屬性值有兩種：
_self：默認(rèn)值，表示跳轉(zhuǎn)的頁(yè)面在當(dāng)前窗口打開，不會(huì)打開新的窗口。
_blank：空白的，表示跳轉(zhuǎn)的頁(yè)面在新窗口打開。
<a target="_blank" href="https://www.baidu.com">這里是鏈接</a>
<a target="_self" href="https://www.baidu.com">這里是鏈接</a>
title屬性 title設(shè)置的是鼠標(biāo)懸停時(shí)的提示文本，與<img>標(biāo)簽類似。
屬性值：自定義的文本內(nèi)容。
該屬性用于給用戶進(jìn)行提示，該鏈接的功能是什么，提高用戶的體驗(yàn)。
<a title="點(diǎn)擊跳到百度" target="_self" href="https://www.baidu.com">這里是鏈接</a>
20、html常用標(biāo)簽-錨點(diǎn)跳轉(zhuǎn) 超級(jí)鏈接的跳轉(zhuǎn)效果不止包含跨頁(yè)面的跳轉(zhuǎn)，還包含錨點(diǎn)跳轉(zhuǎn)的方式。
頁(yè)面內(nèi)錨點(diǎn)跳轉(zhuǎn) 這種跳轉(zhuǎn)方式實(shí)現(xiàn)的是從某個(gè)位置跳轉(zhuǎn)到同頁(yè)面的另一個(gè)位置。
制作方法分為兩個(gè)步驟，分別是設(shè)置錨點(diǎn)、添加鏈接。
設(shè)置錨點(diǎn) 也就是設(shè)置跳轉(zhuǎn)目標(biāo)位置，有兩種設(shè)置方式。
1、在目標(biāo)位置找到任意一個(gè)標(biāo)簽，給它添加id屬性，id屬性值必須是唯一的。
id屬性值自定義規(guī)則：必須以字母開頭，后面可以有字母、數(shù)字、下劃線和橫線，區(qū)分大小寫。
<h2 id=“mod2”>模塊2的標(biāo)題</h2>
2、在目標(biāo)位置添加一個(gè)空的<a>標(biāo)簽，只設(shè)置一個(gè)name屬性，name屬性值設(shè)置方式與id相同，也必須是唯一的。
<a name=“mod2”></a>
添加鏈接 鏈接到錨點(diǎn)，在需要點(diǎn)擊的位置設(shè)置<a>標(biāo)簽，給a的href屬性設(shè)置屬性值為#id屬性值或者#加a的name屬性值。
<a href=“#mod2”>去模塊2</a>
跨頁(yè)面錨點(diǎn)跳轉(zhuǎn) 這種跳轉(zhuǎn)方法綜合了跨頁(yè)面跳轉(zhuǎn)和錨點(diǎn)跳轉(zhuǎn)。
制作方法也分為兩個(gè)步驟，分別是設(shè)置錨點(diǎn)、添加鏈接。
第一步：設(shè)置錨點(diǎn)，方式與頁(yè)面內(nèi)錨點(diǎn)跳轉(zhuǎn)一致，在目標(biāo)網(wǎng)頁(yè)的指定位置設(shè)置使用id或name屬性。
第二步：鏈接到錨點(diǎn)，添加超級(jí)鏈接時(shí)href屬性需要新增，路徑+#id。
<a href="https://www.baidu.com#mod2">這里是鏈接</a>
21、html常用標(biāo)簽-無(wú)序列表 列表用于制作HTML中的一系列項(xiàng)目。
通常我們會(huì)將內(nèi)容相關(guān)、結(jié)構(gòu)相似、樣式相近的內(nèi)容使用列表結(jié)構(gòu)進(jìn)行搭建。
根據(jù)項(xiàng)目的內(nèi)容不同，可以有三種語(yǔ)義的列表結(jié)構(gòu)：無(wú)序列表、有序列表、定義列表。
無(wú)序列表標(biāo)簽 無(wú)序列表需要兩個(gè)標(biāo)簽參與，分別是<ul>和<li>。
ul：unordered list，表示定義一個(gè)無(wú)序列表的大結(jié)構(gòu)。
li：list item，列表項(xiàng)，定義的是無(wú)序列表內(nèi)的某一項(xiàng)。
<ul>和<li>是嵌套關(guān)系，快捷鍵：ul>li。
一個(gè)列表中可以有任意個(gè)列表項(xiàng)。
<ul><li>無(wú)序列表內(nèi)容1</li><li>無(wú)序列表內(nèi)容1</li><li>無(wú)序列表內(nèi)容1</li></ul>注意： 1、<ul>內(nèi)部只能嵌套<li>，<li>標(biāo)簽不能脫離<ul>單獨(dú)書寫。
2、<li>標(biāo)簽是一個(gè)經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容，甚至可以放一組ul>li無(wú)序列表結(jié)構(gòu)。
3、無(wú)序列表的列表項(xiàng)<li>之間，沒有順序的先后之分，它們的重要程度是相同的。
4、無(wú)序列表的作用只是搭建列表結(jié)構(gòu)，沒有添加樣式的功能，樣式由CSS負(fù)責(zé)。
<ul><li>無(wú)序列表內(nèi)容1<h3>標(biāo)題標(biāo)題</h3><ul><li>列表1.1</li><li>列表1.2</li></ul></li><li>無(wú)序列表內(nèi)容1</li><li>無(wú)序列表內(nèi)容1</li></ul>22、html常用標(biāo)簽-有序列表標(biāo)簽 有序列表的語(yǔ)法與無(wú)序列表非常類似，只是在語(yǔ)義上有差異。
有序列表由兩個(gè)標(biāo)簽組成，分別是<ol>和<li>。
ol:ordered list，表示定義一個(gè)有序的列表的大結(jié)構(gòu)。
li:list item，定義的是有序列表的每一項(xiàng)。<ol>和<li>是嵌套關(guān)系，快捷鍵：ol>li。
<ol>標(biāo)簽內(nèi)部可以嵌套任意多個(gè)<li>標(biāo)簽。
<ol><li>俄羅斯</li><li>中國(guó)</li><li>澳大利亞</li></ol>注意事項(xiàng) 1、<ol>內(nèi)部只能嵌套<li>標(biāo)簽，<li>不能脫離<ol>單獨(dú)書寫。
2、<li>標(biāo)簽是一個(gè)經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容，甚至可以放ol>li。
3、有序列表的列表項(xiàng)<li>之間，存在順序先后之分，根據(jù)內(nèi)容的順序需要合理調(diào)整書寫位置。
4、有序列表的作用只是搭建有順序的列表結(jié)構(gòu)，前面的數(shù)字排序樣式不是<ol>標(biāo)簽的作用，是CSS負(fù)責(zé)的。
<ol><li>俄羅斯</li><li>中國(guó)<h4>省份有</h4><ol><li>浙江</li><li>浙江</li></ol></li><li>澳大利亞</li></ol>23、html常用標(biāo)簽-定義列表標(biāo)簽 自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
由三個(gè)標(biāo)簽組成完整的結(jié)構(gòu)，包含<dl>、<dt>和<dd>。
dl:definition list，表示定義一個(gè)自定義列表的大結(jié)構(gòu)。
dt:definition term，表示定義自定義列表中的一個(gè)主題或者術(shù)語(yǔ)。
dd:definition description，定義解釋項(xiàng)，表示描述或解釋前面的定義主題。
<dl>內(nèi)部只能嵌套<dt>和<dd>，<dt>和<dd>是同級(jí)關(guān)系。 <dl><dt>主題</dt><dd>解釋主題</dd></dl>注意事項(xiàng) 1、<dl>內(nèi)部只能嵌套<dt>和<dd>，<dt>和<dd>不能脫離<dl>單獨(dú)書寫。
2、dl內(nèi)部可以放多組dt和dd，每個(gè)dd解釋說(shuō)明的是前面距離最后的一個(gè)dt。
3、每個(gè)dt后面可以有0到多個(gè)解釋項(xiàng)dd，每個(gè)dd解釋的都是前面距離最近的一個(gè)dt。
4、dt和dd標(biāo)簽也是容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容。
5、定義列表中的縮進(jìn)樣式由CSS負(fù)責(zé)，標(biāo)簽只負(fù)責(zé)搭建語(yǔ)義結(jié)構(gòu)。
6、配合著CSS布局效果，最好每個(gè)dl中只添加一組dt和dd，便于后期管理。
列表總結(jié)
根據(jù)項(xiàng)目的內(nèi)容不同，分別選擇對(duì)應(yīng)語(yǔ)義的列表結(jié)構(gòu)：有序列表、有序列表、定義列表。
24、html常用標(biāo)簽-布局標(biāo)簽 <div>和<span>標(biāo)簽常用作布局工具，我們俗稱盒子，后期HTML5也增加了更多的布局標(biāo)簽。
<div>和<span>都是沒有具體明確的語(yǔ)義的。
<div>標(biāo)簽 div：全稱division，分割、區(qū)域、跨度的意思。俗稱大盒子。
<div>是雙標(biāo)簽，是最經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容。
作用：多用于劃分網(wǎng)頁(yè)區(qū)域，進(jìn)行結(jié)構(gòu)布局。一般將相關(guān)的內(nèi)容使用<div>包裹起來(lái)，整體設(shè)置大的布局效果。
<span>標(biāo)簽 span：小區(qū)域、小跨度的意思。俗稱小盒子
<span>也是雙標(biāo)簽，容器級(jí)標(biāo)簽。
作用：在不改變整體效果的情況下，可以輔助進(jìn)行局部調(diào)整。
25、html常用標(biāo)簽-表格基礎(chǔ) 創(chuàng)建一個(gè)簡(jiǎn)單的表格至少由三個(gè)標(biāo)簽組成，分別是<table>、<tr>、<td>標(biāo)簽。
table：表格，定義的是整個(gè)的表格大結(jié)構(gòu)。
tr：table rows，表格的行，定義的是表格由多少行組成。
td：table data，表格數(shù)據(jù)，也叫表格單元格，定義的是每一行內(nèi)部的單元格。
三者的關(guān)系：table>tr>td。一個(gè)表格中有多個(gè)行，每個(gè)行中有多個(gè)單元格。
<table>的屬性 <table>標(biāo)簽可以添加border邊框?qū)傩浴?
屬性值：數(shù)字，表示像素值。
表格的單元格之間有默認(rèn)的空隙，會(huì)導(dǎo)致雙線邊框。
解決方法：用CSS樣式，border-collapse:collapse;表示邊框塌陷。
表頭單元格 如果要繪制表頭，使用標(biāo)簽<th>,table head data，表頭單元格。
在表格中繪制的時(shí)候，替換的是<td>的位置。
<th>標(biāo)簽中自帶默認(rèn)的CSS樣式效果，文字顯示粗體居中。
<table border="1" style="border-collapse: collapse;"> <tr><th>表頭1</th><th>表頭2</th></tr><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>26、html常用標(biāo)簽-合并單元格 合并單元格可以通過(guò)單元格屬性進(jìn)行設(shè)置。
單元格屬性 表格的單元格可以進(jìn)行合并，通過(guò)<th>和<td>的兩個(gè)屬性可以進(jìn)行合并設(shè)置。
rowspan：跨行合并。上下的合并。
colspan：跨列合并。左右的合并。
屬性值：數(shù)字，數(shù)字是幾表示跨幾行或跨幾列合并。
制作技巧 1、先列出所有行<tr>，以最小單元格為標(biāo)準(zhǔn)（共4行）。
2、再添加每一行的<td>或<th>單元格（有的是3列，有的是4列）。
3、劃分單元格所在行時(shí)，頂邊對(duì)齊的屬于同一行。
4、將所有行和列寫完后，再查看哪個(gè)單元格有跨行或跨列，屬性值的個(gè)數(shù)要參考最小的單元格。（跨行rowspan，跨列colspan）
<table width="400" border="1" style="border-collapse: collapse;"> <tr><td colspan="2">1</td> <td rowspan="2">2</td> <td colspan="2">3</td> </tr><tr><td>4</td><td rowspan="2">5</td> <td>6</td><td rowspan="2">7</td> </tr><tr><td rowspan="2">8</td> <td>9</td><td>10</td></tr><tr><td>11</td><td colspan="2">12</td> <td>13</td></tr></table>27、html常用標(biāo)簽-表格分區(qū) 一個(gè)完整的表格分為四個(gè)大的區(qū)域：表格標(biāo)題、表格頭部、表格主體、表格頁(yè)腳。
分區(qū)標(biāo)簽 <table>內(nèi)部最直接的子級(jí)包含四個(gè)分區(qū)標(biāo)簽，他們都是雙標(biāo)簽。
caption：表格的標(biāo)題，內(nèi)部書寫標(biāo)題文字。
thead:table head,表格的頭部。內(nèi)部嵌套tr>th。
tbody:table body,表格的主體。內(nèi)部嵌套tr>td。
tfoot:table foot,表格的頁(yè)腳。內(nèi)部嵌套tr>td。
四個(gè)分區(qū)可以選擇性的進(jìn)行組合。
注意：不論書寫順序如何顛倒，瀏覽器中的加載順序都是自動(dòng)按照caption,thead,tbody,tfoot執(zhí)行的。
制作技巧 1、先書寫大分區(qū)標(biāo)簽結(jié)構(gòu)。
2、填充每個(gè)分區(qū)的內(nèi)部?jī)?nèi)容。
3、如果有合并單元格內(nèi)容，進(jìn)行單元格合并。
<table width="400" border="1" style="border-collapse: collapse;"> <caption>各地區(qū)固定資產(chǎn)投資情況</caption><thead><tr><th rowspan="2">地區(qū)</th> <th colspan="2">按總量分</th> <th colspan="2">按比重分</th> </tr><tr><th>自年初累計(jì)（億元）</th><th>比去年同期增長(zhǎng)（%）</th><th>自年初累計(jì)（%）</th><th>去年同期（%）</th></tr></thead><tbody><tr><td>全國(guó)</td><td>12466.90</td><td>9.6</td><td>100.0</td><td>100.0</td></tr><tr><td>全國(guó)</td><td>12466.90</td><td>9.6</td><td>100.0</td><td>100.0</td></tr><tr><td>全國(guó)</td><td>12466.90</td><td>9.6</td><td>100.0</td><td>100.0</td></tr></tbody></table>28、html常用標(biāo)簽-表單 表單是用來(lái)收集用戶輸入信息的。
HTML表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁(yè)中提供用戶進(jìn)行輸入或點(diǎn)擊的小控件。
在HTML中，一個(gè)完整的表單通常由表單域、提示信息和表單控件（也稱為表單元素）3個(gè)部分構(gòu)成。
功能 表單域：相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的URL地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。
提示信息：一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫和操作。
表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
29、html常用標(biāo)簽-表單域form HTML表單域使用<form>標(biāo)簽進(jìn)行定義。
<form>標(biāo)簽是一個(gè)功能性標(biāo)簽，填寫的表單信息要想正確的提交到后臺(tái)服務(wù)器，必須放在一個(gè)<form>標(biāo)簽之內(nèi)。
<form>標(biāo)簽為雙標(biāo)簽，容器級(jí)標(biāo)簽。
表單域標(biāo)簽屬性 <form>標(biāo)簽通過(guò)對(duì)應(yīng)屬性規(guī)定提交數(shù)據(jù)的方法和提交位置。
屬性名 屬性值 描述
action url 指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址
method get/post 用于設(shè)置表單數(shù)據(jù)的提交方式
name 自定義名稱 規(guī)定表單的名稱
<form action="data.php" method="get" name="first"> </form>30、html常用標(biāo)簽-文本框、密碼框 <input>標(biāo)簽 <input>標(biāo)簽是最重要的一個(gè)表單元素
<input>標(biāo)簽為單標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文本
<input>標(biāo)簽需要通過(guò)標(biāo)簽屬性實(shí)現(xiàn)各種功能
<input>標(biāo)簽常用屬性
其中，type屬性的值不同，決定了<input>標(biāo)簽的形態(tài)不同。
單行文本輸入框：text <input>標(biāo)簽的type屬性值為text。
定義提供用戶輸入的單行文本的輸入框，不能輸入多行文字。
常用value屬性定義默認(rèn)的輸入文字。
<input type="text" value="">
密碼輸入框：password <input>標(biāo)簽的type屬性值為password。
定義提供用戶輸入的密碼框。
password字段中的字符會(huì)被做掩碼處理（顯示為星號(hào)或?qū)嵭膱A）。
<input type="password">
31、html常用標(biāo)簽-單選框、復(fù)選框 單選框：radio <input>標(biāo)簽的type屬性值為radio。
定義提供用戶點(diǎn)擊選擇的單選框。
單選框一般都是成組出現(xiàn)，多個(gè)單選框組成一組選擇的情況。
同一組單選框之間必須是互斥的關(guān)系，通過(guò)給同一組單選框都設(shè)置相同的name屬性值實(shí)現(xiàn)。
性別：<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女<
復(fù)選框：checkbox <input>標(biāo)簽的type屬性值為checkbox。
定義提供用戶點(diǎn)擊選擇的多選框。
復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。
同一組復(fù)選框最好也設(shè)置相同的name屬性。
愛好：<input type="checkbox" name="hobby"> 繪畫
<input type="checkbox" name="hobby"> 音樂
<input type="checkbox" name="hobby"> 閱讀
默認(rèn)選中設(shè)置 單選框和復(fù)選框都可以提前設(shè)置默認(rèn)選中項(xiàng)。
<input>標(biāo)簽有一個(gè)checked屬性，如果不設(shè)置表示默認(rèn)沒有選中。
屬性值如果設(shè)置為”checked”,表示該項(xiàng)默認(rèn)被選中。
<input type="radio" name="sex" checked="checked”>
<input type="checkbox" name="hobby" checked="checked">
32、html常用標(biāo)簽-按鈕 <input>標(biāo)簽有四種形式的按鈕：
type 名稱 特點(diǎn)
button 普通按鈕 沒有任何特殊功能
reset 重置按鈕 將同一個(gè)<form>中填寫的表單內(nèi)容清空，恢復(fù)成默認(rèn)值
submit 提交按鈕 將填寫數(shù)據(jù)提交到<form>中指定的后臺(tái)服務(wù)器，
并重置清空<form>中填寫的信息
image 圖片按鈕 默認(rèn)與提交按鈕的效果相同，
使用的圖片需要利用src屬性查找正確路徑
<input type="button" value="普通按鈕"> <input type="reset" value="重置按鈕"> <input type="submit" value="提交按鈕"> <input type="image" src="../images/btn.jpg"> 文件上傳：file <input>標(biāo)簽的type屬性值為file。
定義文件上傳按鈕，可以提供用戶選擇本地文件進(jìn)行上傳服務(wù)器。
<input type="file">
使用input的multiple屬性，可以決定是否可以選擇多個(gè)文件。
<input type="file" multiple="multiple">
33、html常用標(biāo)簽-文本域textarea 文本域使用<textarea>標(biāo)簽定義，制作可以輸入多行文本的區(qū)域。
<textarea>標(biāo)簽為雙標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文字。
文本域可以設(shè)置默認(rèn)輸入的文字，在雙標(biāo)簽之間書寫默認(rèn)文字。
<textarea>屬性 <textarea>有兩個(gè)標(biāo)簽屬性，可以設(shè)置顯示區(qū)域大小。
rows：行，屬性值是數(shù)字，數(shù)字是幾表示文本框顯示的最大行數(shù)，如果超過(guò)了行數(shù)，會(huì)被隱藏并且出現(xiàn)滾動(dòng)條。
cols：列，屬性值是數(shù)字，數(shù)字是幾，表示在出現(xiàn)滾動(dòng)條之后，每一行顯示的最大字節(jié)數(shù)（一個(gè)漢字按2個(gè)字節(jié)計(jì)算）。
34、html常用標(biāo)簽-下拉菜單 HTML中的下拉菜單提前設(shè)置一些選項(xiàng)，然后可以通過(guò)點(diǎn)擊選擇其中一項(xiàng)。
標(biāo)簽 下拉菜單需要至少兩個(gè)標(biāo)簽完成結(jié)構(gòu)：
<select>：選擇，表示定義下拉菜單整體結(jié)構(gòu)。
<option>：選項(xiàng)，表示定義下拉菜單的每一項(xiàng)。
兩個(gè)標(biāo)簽都是雙標(biāo)簽，文本級(jí)標(biāo)簽。
關(guān)系：select>option,option可以有任意多項(xiàng)。
<select><option>杭州</option><option>杭州</option><option>杭州</option></select>默認(rèn)選中項(xiàng)
默認(rèn)情況下，選中的是第一項(xiàng)。
下拉菜單可以通過(guò)給<option>標(biāo)簽設(shè)置selected屬性，屬性值為selected，更改默認(rèn)選中項(xiàng)。
<option selected="selected">杭州</option>
分組管理 下拉菜單中如果選項(xiàng)變得復(fù)雜，可以將<option>進(jìn)行分組管理。
可以使用<optgroup>標(biāo)簽對(duì)選項(xiàng)進(jìn)行分組，<optgroup>是一個(gè)雙標(biāo)簽。
關(guān)系：select>optgroup>option
<optgroup>可以設(shè)置一個(gè)label屬性，表示給這一組選項(xiàng)添加一個(gè)分組標(biāo)簽名，分組標(biāo)簽<optgroup>是不能被點(diǎn)擊選擇的。
<select><optgroup label="國(guó)內(nèi)"> <option>杭州</option><option selected="selected">杭州</option> <option>杭州</option></optgroup><optgroup label="國(guó)外"> <option>紐約</option><option>巴黎</option><option>悉尼</option></optgroup></select>35、html常用標(biāo)簽-label標(biāo)簽 所有的表單元素都可以通過(guò)綁定其他內(nèi)容去擴(kuò)大觸發(fā)點(diǎn)擊范圍，這時(shí)需要使用一個(gè)<label>標(biāo)簽。
<label>標(biāo)簽的作用是幫表單元素定義標(biāo)注（標(biāo)記）。
如果將表單控件與提示內(nèi)容使用<label>進(jìn)行綁定后，當(dāng)用戶鼠標(biāo)點(diǎn)擊<label>內(nèi)的提示內(nèi)容時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
綁定方法一 1、給表單元素設(shè)置id屬性。
2、然后將需要綁定的其他內(nèi)容用<label>標(biāo)簽包裹。
3、給<label>標(biāo)簽設(shè)置for屬性，屬性值為綁定的表單元素的id屬性值。
<input type="radio" name="sex" id="male"><label for="male"> 男</label>
綁定方法二 如果綁定內(nèi)容和表單元素寫在一起，可以化簡(jiǎn)綁定寫法。
直接使用<label>標(biāo)簽將綁定內(nèi)容與表單元素一起進(jìn)行嵌套。
<label><input type="radio" name="sex" checked="checked"> 女</label>
36、html字符實(shí)體 在普通文字書寫時(shí)，有一些特殊符號(hào)不能直接書寫（例如連續(xù)的空格），或者符號(hào)具有特殊功能也不能直接書寫（例如<>符號(hào)）。
可以使用一些HTML提前預(yù)留好的替換字符進(jìn)行書寫，這些替換字符叫做字符實(shí)體。
通過(guò)查詢w3cschool手冊(cè)，查看所有的字符實(shí)體。
https://w3cschool.com.cn
使用方法 可以查詢特殊字符的替換寫法，包含實(shí)體名稱以及實(shí)體編號(hào)。
規(guī)則和建議 規(guī)則：所有的字符實(shí)體和實(shí)體編號(hào)都是以&開頭，以;結(jié)尾的。
注意：實(shí)體名稱對(duì)大小寫敏感。
建議1：使用實(shí)體名稱，好處是名稱易于記憶。不過(guò)壞處是，瀏覽器也許并不支持所有實(shí)體名稱（對(duì)實(shí)體數(shù)字的支持卻很好）。
建議2：不需要強(qiáng)制記憶所有的字符實(shí)體，只需要記憶常用的幾個(gè)字符實(shí)體名稱即可，其他可以通過(guò)手冊(cè)進(jìn)行查詢。
<p>這里有空 格，這里是個(gè)<p>標(biāo)簽</p>
在線咨詢
