一.什么是HTML

html(hypertext makeup language),中文名為超文本標(biāo)記語(yǔ)言，他是一門(mén)能被瀏覽器解析成網(wǎng)頁(yè)的標(biāo)簽語(yǔ)言，當(dāng)我們使用瀏覽器訪問(wèn)網(wǎng)頁(yè)時(shí)，那邊就有一個(gè)服務(wù)端給你發(fā)送數(shù)據(jù)到你的瀏覽器上，而那些數(shù)據(jù)就包括html，然后被瀏覽器渲染成我們看到的那個(gè)樣子，瀏覽器就相當(dāng)于一個(gè)解釋器解釋html

二.網(wǎng)頁(yè)的組成

我們網(wǎng)頁(yè)的組成其實(shí)就是由三大部分組成的，俗稱(chēng)網(wǎng)頁(yè)三件套：

html：最先出現(xiàn)，它包括一系列的標(biāo)簽，通過(guò)這些標(biāo)簽，把網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接成一個(gè)邏輯整體，html命令可以說(shuō)明文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等；它在網(wǎng)頁(yè)三件套中相當(dāng)于一個(gè)沒(méi)穿衣服的人；

css:用于裝飾html，是網(wǎng)頁(yè)變得更加美觀；在網(wǎng)頁(yè)三件套中相當(dāng)于給html這個(gè)裸人穿上了衣服；

js:實(shí)現(xiàn)了網(wǎng)頁(yè)的動(dòng)態(tài)效果；在網(wǎng)頁(yè)三件套中承擔(dān)了使得html這個(gè)裸人跑起來(lái)的功能；

三.html文檔樹(shù)形結(jié)構(gòu)圖

上面我們已經(jīng)對(duì)html有了一些了解，接下來(lái)咱們就來(lái)認(rèn)識(shí)一些html的樹(shù)形結(jié)構(gòu)：

四.標(biāo)簽是什么

上面我們說(shuō)html是標(biāo)簽語(yǔ)言，那什么是標(biāo)簽語(yǔ)言呢？

1.是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成 例如: *所有標(biāo)簽中的單詞不可能以數(shù)字開(kāi)頭.

2.標(biāo)簽不區(qū)分大小寫(xiě)如 和 . 推薦使用小寫(xiě).

標(biāo)簽分為兩部分: 開(kāi)始標(biāo)簽 和 結(jié)束標(biāo)簽. 兩個(gè)標(biāo)簽之間的部分 我們叫做標(biāo)簽體.

3.有些標(biāo)簽功能比較簡(jiǎn)單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如:

---

4.標(biāo)簽可以嵌套.但是不能交叉嵌套.

五.標(biāo)簽的屬性

1.通常是以鍵值對(duì)的方式出現(xiàn)，如：name = "luyi"

2.屬性只能出現(xiàn)在開(kāi)始標(biāo)簽和自閉標(biāo)簽

3.屬性名字全部小寫(xiě)，屬性值必須是用雙或單引號(hào)引起來(lái)的

4.如果屬性名和屬性值一樣，可以直接寫(xiě)屬性名就行，如readonly

六.標(biāo)簽

現(xiàn)在我們開(kāi)始正式講標(biāo)簽了，接下來(lái)我們來(lái)看看標(biāo)簽；

標(biāo)簽是用來(lái)給瀏覽器開(kāi)啟一個(gè)標(biāo)準(zhǔn)模式的；

下面我就來(lái)講講為什么需要給瀏覽器開(kāi)啟標(biāo)準(zhǔn)模式：

由于歷史的原因，各個(gè)瀏覽器在對(duì)頁(yè)面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對(duì)頁(yè)面的渲染也不同。在

W3C標(biāo)準(zhǔn)出臺(tái)以前，瀏覽器在對(duì)頁(yè)面的渲染上沒(méi)有統(tǒng)一規(guī)范，產(chǎn)生了差異(Quirks mode或者稱(chēng)為Compatibility

Mode)；由于W3C標(biāo)準(zhǔn)的推出，瀏覽器渲染頁(yè)面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱(chēng)為Strict mode也有叫做Standars

mode)，這就是二者最簡(jiǎn)單的區(qū)別。如果你的網(wǎng)頁(yè)沒(méi)有加入標(biāo)簽，那默認(rèn)就是怪異模式(Quircks mode)，那你的網(wǎng)頁(yè)在不同的瀏覽器上就會(huì)有不同的樣式，這也就是標(biāo)簽的作用了；

七.head標(biāo)簽

meta標(biāo)簽

meta標(biāo)簽共有兩個(gè)屬性：分別是http-equiv和name屬性；

1.http-equiv屬性，相當(dāng)于http的文件頭作用，他可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性名為content，cotent中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值；

//表示著兩秒后跳轉(zhuǎn)到www.baidu.com

//設(shè)置編碼方式為UTF8

2.name屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性名為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類(lèi)信息用的；

八.body標(biāo)簽

基本標(biāo)簽

//n為1-6的數(shù)值，從大到小，表示標(biāo)題

//段落標(biāo)簽，包裹的內(nèi)容被換行，而且上下內(nèi)容之間有一行空白

//加粗標(biāo)簽

//為文字加上一條中線,還有標(biāo)簽也一樣

//斜體標(biāo)簽

^{_{//上角標(biāo)和小角標(biāo)}}

//換行標(biāo)簽

---

//水平線標(biāo)簽//沒(méi)功能的標(biāo)簽，但是我們會(huì)經(jīng)常用到的

圖形標(biāo)簽

img標(biāo)簽的屬性

src：要顯示的圖片路徑(常用)

alt:圖片沒(méi)加載成功時(shí)要顯示的內(nèi)容

title:鼠標(biāo)放到這張圖片時(shí)顯示的文字

超鏈接標(biāo)簽

a標(biāo)簽的屬性

href：要鏈接過(guò)去的url

target:_blank:在新的窗口打開(kāi)超鏈接，如果是框架名稱(chēng)的話(huà)，就是在指定框架中打開(kāi)鏈接內(nèi)容

name:定義一個(gè)頁(yè)面的書(shū)簽

補(bǔ)充：a標(biāo)簽還可以實(shí)現(xiàn)在頁(yè)面跳轉(zhuǎn)(錨)的功能：

href: #id//跳轉(zhuǎn)到id屬性值為id的標(biāo)簽的位置

列表標(biāo)簽

• 無(wú)序列表

：有序列表

一般與

標(biāo)簽一起用列表標(biāo)題

列表項(xiàng)

表格標(biāo)簽

table標(biāo)簽的屬性

border:設(shè)置表格邊框

cellpadding:內(nèi)邊距

cellspacing:外邊距

table標(biāo)簽一般與以下標(biāo)簽一起使用

：表示行:表示列的數(shù)據(jù):這一行數(shù)據(jù)的數(shù)據(jù)標(biāo)題(不常用):為表格進(jìn)行分區(qū)

他們的屬性：rowspan:單元格豎跨多少行

colspan:單元格橫跨多少行(即單元合并)

例子：

student info

infostudent1student2

name	age	sex
luyi	18	boy
luer	19	girl

表單標(biāo)簽

(重點(diǎn))

1.form標(biāo)簽屬性：

action:表單要提交到哪去，一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)(即表單元素值)作相應(yīng)處理，

比如https://www.sogou.com/web,他還可以跳轉(zhuǎn)到指定的網(wǎng)頁(yè)，如index.html

method:表單提交的方式(get/post)，默認(rèn)是get

//get提交的鍵值對(duì)會(huì)放在地址欄后面，安全性相對(duì)較低，而且提交的內(nèi)容長(zhǎng)度是有限制的

//post提交的鍵值對(duì)不會(huì)放在地址欄后面，安全性相對(duì)較高，而且對(duì)提交內(nèi)容的長(zhǎng)度理論上無(wú)限制

2.表單元素之input標(biāo)簽

屬性：

type： text 文本輸入框

password 密碼輸入框

radio 單選框

//注意單選框中如果是二選一這種情況，就需要把兩個(gè)多選框的name值設(shè)置成一樣的，

然后value值設(shè)置為不同的

二選一例子：

boy:

girl:

checkbox 多選框

submit 提交按鈕//f非常好用，點(diǎn)擊它就會(huì)自動(dòng)向服務(wù)端提交數(shù)據(jù)

button 按鈕(常常配合js使用)

file 提交文件，如果要提交文件，form表單需要加上屬性

enctype="multipart/form-data"

name:表單提交項(xiàng)的鍵，這個(gè)name非常重要，服務(wù)端獲取數(shù)據(jù)就是通過(guò)這個(gè)name的值來(lái)獲取的

value:表單提交項(xiàng)的值，對(duì)于不同的type，value屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值

checked:用于radio和checkbox設(shè)置默認(rèn)選中

readonly：只讀，用于text和password

disabled:對(duì)所有type類(lèi)型都適用

表單元素之select的屬性：

name：表單提交項(xiàng)的鍵

size:選項(xiàng)個(gè)數(shù)

與標(biāo)簽option一起用：

option標(biāo)簽就是下拉選中的每一項(xiàng)

屬性：value：表單提交項(xiàng)的值

selected:selected下拉選默認(rèn)被選中，可以直接寫(xiě)成selected

還有一個(gè)optgrounp,為每一項(xiàng)加上分組

例子：

apple

banana

pear

red

green

blue

表單元素之其他

文本域

屬性：name:表單提交項(xiàng)的鍵

cols和rows：文本域默認(rèn)有多少列和多少行

：用法：

姓名

//當(dāng)用戶(hù)點(diǎn)擊姓名兩字后鼠標(biāo)會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到id為www的input去

例子：

登錄信息

用戶(hù)名：

密碼：

例子的結(jié)果為：

!DOCTYPE>

總結(jié)

以上是生活随笔為你收集整理的表格 树形结构 HTML 语言 CSS,HTML介绍(示例代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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