一.什么是HTML

html(hypertext makeup language),中文名為超文本標記語言，他是一門能被瀏覽器解析成網頁的標簽語言，當我們使用瀏覽器訪問網頁時，那邊就有一個服務端給你發送數據到你的瀏覽器上，而那些數據就包括html，然后被瀏覽器渲染成我們看到的那個樣子，瀏覽器就相當于一個解釋器解釋html

二.網頁的組成

我們網頁的組成其實就是由三大部分組成的，俗稱網頁三件套：

html：最先出現，它包括一系列的標簽，通過這些標簽，把網絡上的文檔格式統一，使分散的Internet資源連接成一個邏輯整體，html命令可以說明文字、圖形、動畫、聲音、表格、鏈接等；它在網頁三件套中相當于一個沒穿衣服的人；

css:用于裝飾html，是網頁變得更加美觀；在網頁三件套中相當于給html這個裸人穿上了衣服；

js:實現了網頁的動態效果；在網頁三件套中承擔了使得html這個裸人跑起來的功能；

三.html文檔樹形結構圖

上面我們已經對html有了一些了解，接下來咱們就來認識一些html的樹形結構：

四.標簽是什么

上面我們說html是標簽語言，那什么是標簽語言呢？

1.是由一對尖括號包裹的單詞構成 例如: *所有標簽中的單詞不可能以數字開頭.

2.標簽不區分大小寫如 和 . 推薦使用小寫.

標簽分為兩部分: 開始標簽 和 結束標簽. 兩個標簽之間的部分 我們叫做標簽體.

3.有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如:

---

4.標簽可以嵌套.但是不能交叉嵌套.

五.標簽的屬性

1.通常是以鍵值對的方式出現，如：name = "luyi"

2.屬性只能出現在開始標簽和自閉標簽

3.屬性名字全部小寫，屬性值必須是用雙或單引號引起來的

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

六.標簽

現在我們開始正式講標簽了，接下來我們來看看標簽；

標簽是用來給瀏覽器開啟一個標準模式的；

下面我就來講講為什么需要給瀏覽器開啟標準模式：

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

W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為Compatibility

Mode)；由于W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars

mode)，這就是二者最簡單的區別。如果你的網頁沒有加入標簽，那默認就是怪異模式(Quircks mode)，那你的網頁在不同的瀏覽器上就會有不同的樣式，這也就是標簽的作用了；

七.head標簽

meta標簽

meta標簽共有兩個屬性：分別是http-equiv和name屬性；

1.http-equiv屬性，相當于http的文件頭作用，他可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性名為content，cotent中的內容其實就是各個參數的變量值；

//表示著兩秒后跳轉到www.baidu.com

//設置編碼方式為UTF8

2.name屬性主要用于描述網頁，與之對應的屬性名為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的；

八.body標簽

基本標簽

//n為1-6的數值，從大到小，表示標題

//段落標簽，包裹的內容被換行，而且上下內容之間有一行空白

//加粗標簽

//為文字加上一條中線,還有標簽也一樣

//斜體標簽

^{_{//上角標和小角標}}

//換行標簽

---

//水平線標簽//沒功能的標簽，但是我們會經常用到的

圖形標簽

img標簽的屬性

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

alt:圖片沒加載成功時要顯示的內容

title:鼠標放到這張圖片時顯示的文字

超鏈接標簽

a標簽的屬性

href：要鏈接過去的url

target:_blank:在新的窗口打開超鏈接，如果是框架名稱的話，就是在指定框架中打開鏈接內容

name:定義一個頁面的書簽

補充：a標簽還可以實現在頁面跳轉(錨)的功能：

href: #id//跳轉到id屬性值為id的標簽的位置

列表標簽

• 無序列表

：有序列表

一般與

標簽一起用列表標題

列表項

表格標簽

table標簽的屬性

border:設置表格邊框

cellpadding:內邊距

cellspacing:外邊距

table標簽一般與以下標簽一起使用

：表示行:表示列的數據:這一行數據的數據標題(不常用):為表格進行分區

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

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

例子：

student info

infostudent1student2

name	age	sex
luyi	18	boy
luer	19	girl

表單標簽

(重點)

1.form標簽屬性：

action:表單要提交到哪去，一般指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)作相應處理，

比如https://www.sogou.com/web,他還可以跳轉到指定的網頁，如index.html

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

//get提交的鍵值對會放在地址欄后面，安全性相對較低，而且提交的內容長度是有限制的

//post提交的鍵值對不會放在地址欄后面，安全性相對較高，而且對提交內容的長度理論上無限制

2.表單元素之input標簽

屬性：

type： text 文本輸入框

password 密碼輸入框

radio 單選框

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

然后value值設置為不同的

二選一例子：

boy:

girl:

checkbox 多選框

submit 提交按鈕//f非常好用，點擊它就會自動向服務端提交數據

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

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

enctype="multipart/form-data"

name:表單提交項的鍵，這個name非常重要，服務端獲取數據就是通過這個name的值來獲取的

value:表單提交項的值，對于不同的type，value屬性的用法也不一樣：

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

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

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

checked:用于radio和checkbox設置默認選中

readonly：只讀，用于text和password

disabled:對所有type類型都適用

表單元素之select的屬性：

name：表單提交項的鍵

size:選項個數

與標簽option一起用：

option標簽就是下拉選中的每一項

屬性：value：表單提交項的值

selected:selected下拉選默認被選中，可以直接寫成selected

還有一個optgrounp,為每一項加上分組

例子：

apple

banana

pear

red

green

blue

表單元素之其他

文本域

屬性：name:表單提交項的鍵

cols和rows：文本域默認有多少列和多少行

：用法：

姓名

//當用戶點擊姓名兩字后鼠標會自動將焦點轉到id為www的input去

例子：

登錄信息

用戶名：

密碼：

例子的結果為：

!DOCTYPE>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。