基本結(jié)構(gòu)代碼：

1 html 2 head ... /head 3 body ... /body 4 /html 

代碼講解：

1. html /html 稱(chēng)為根標(biāo)簽，所有的網(wǎng)頁(yè)標(biāo)簽都在 html /html 中。

2. head /head 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有 title 、 script 、 style 、 link 、 meta 等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。

3. body /body 標(biāo)簽之間的內(nèi)容是網(wǎng)頁(yè)的主要內(nèi)容，如 h1 、 p 、 a 、 img 等網(wǎng)頁(yè)內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來(lái)。

4. p /p 是文章的段落標(biāo)簽

5. hx /hx 表示文章標(biāo)題（x表示數(shù)字，為文章標(biāo)題等級(jí)1-6）

6. em /em 表示斜體

7. strong /strong 表示加粗

8. style

span{

在這里配置樣式，比如文字大小，顏色等

}

/style

span /span 設(shè)置單獨(dú)樣式

9. q /q 引用，會(huì)自動(dòng)加上雙引號(hào)

10. blockquote /blockquote 縮進(jìn)

11. br / 換行

12. nbsp;輸入空格

13. hr/ 添加水平橫線(xiàn)

14. address /address 輸入地址信息（默認(rèn)以 斜體表示）

15. code /code 代碼標(biāo)簽

16. pre /pre 大段代碼標(biāo)簽

17.無(wú)序列表

ul

li 內(nèi)容 /li

li 內(nèi)容 /li

li 內(nèi)容 /li

/ul

18.有序列表(列表會(huì)自動(dòng)加上序號(hào))

ol

li 內(nèi)容 /li

li 內(nèi)容 /li

li 內(nèi)容 /li

/ol

19. div … /div ：劃分區(qū)域（獨(dú)立邏輯）

20. div id= 版塊名稱(chēng) … /div ：劃分板塊并給板塊命名

21.表格展示（沒(méi)有框線(xiàn)）

 table  tbody  th 班級(jí) /th  th 學(xué)生數(shù) /th  th 平均成績(jī) /th  /tr  td 一班 /td  td 30 /td  td 89 /td  /tr  /tbody  /table 

22. table summary = 內(nèi)容 /table 為表格添加摘要

23. caption /caption 為表格添加標(biāo)題

24. a href = 網(wǎng)址 title = 提示 .. /a 加入網(wǎng)頁(yè)鏈接（在當(dāng)前頁(yè)面打開(kāi)）

25. a href= 目標(biāo)網(wǎng)址 target= _blank .. /a 加入網(wǎng)頁(yè)鏈接（新建頁(yè)面）

26.在網(wǎng)頁(yè)中鏈接Email地址

如果mailto后面同時(shí)有多個(gè)參數(shù)的話(huà)，第一個(gè)參數(shù)必須以“?”開(kāi)頭，后面的參數(shù)每一個(gè)都以“ ”分隔。

27. img src= 圖片地址 alt= 下載失敗時(shí)的替換文本 title = 提示文本 ：為網(wǎng)頁(yè)插入圖片

28.表單標(biāo)簽：表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。

 form method= 傳送方式 action= 服務(wù)器文件 

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title 表單標(biāo)簽 /title  /head  body  form method= post action= save.php  label for= username 用戶(hù)名: /label  input type= text name= username id= username value= /  br/  label for= pass 密 nbsp;碼: /label  input type= password name= pass id= pass value= /  input type= submit value= 確定 name= submit /  input type= reset value= 重置 name= reset /  /form  /body  /html 

輸出：

29.輸入大段內(nèi)容：（文本域） textarea cols = 50 rows = 10 .. /textarea

cols = 行數(shù)

rows = 列數(shù)

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title 文本域 /title  /head  body  form action= save.php method= post  label 個(gè)人簡(jiǎn)介： /label  textarea cols = 50 rows = 10 在這里輸入內(nèi)容... /textarea  input type= submit value= 確定 name= submit /  input type= reset value= 重置 name= reset /  /form  /body  /html 

輸出：

30.單選/復(fù)選框

 input type= radio/checkbox value= 值 name= 名稱(chēng) checked= checked / 

1、type:

當(dāng) type= radio 時(shí)，控件為單選框

當(dāng) type= checkbox 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）

3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用

4、checked：當(dāng)設(shè)置 checked= checked 時(shí)，該選項(xiàng)被默認(rèn)選中

（同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。）

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title 單選框、復(fù)選框 /title  /head  body  form action= save.php method= post  label 性別: /label  label 男 /label  input type= radio value= 1 name= gender /  label 女 /label  input type= radio value= 2 name= gender /  /form  /body  /html 

輸出：

31.下拉框表 select .. /select

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title 下拉列表框 /title  /head  body  form action= save.php method= post  label 愛(ài)好: /label  select  option value= 看書(shū) 看書(shū) /option  option value= 旅游 selected = selected 旅游 /option  option value= 運(yùn)動(dòng) 運(yùn)動(dòng) /option  option value= 購(gòu)物 購(gòu)物 /option  /select  /form  /body  /html 

輸出：

select .. /select 下拉框列表

selected = selected ：默認(rèn)選中

32.下拉框表支持復(fù)選:multiple = multiple

 select multiple = multiple .. select 

輸出：

（在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)）

33.提交按鈕

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title 提交按鈕 /title  /head  body  form method= post action= save.php  label for= myName 姓名： /label  input type= text value= name= myName /  input type= submit value= 提交 name= submitBtn /  /form  /body  /html 

輸出：

34.重置按鈕

在33中把type的值改為reset.

35.form表單中的label標(biāo)簽

label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用 戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。

 label for= 控件id名稱(chēng) 

注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title form中的lable標(biāo)簽 /title  /head  body  form  label for= male 男 /label  input type= radio name= gender id= male /  br /  label for= female 女 /label  input type= radio name= gender id= female /  br /  label for= email 輸入你的郵箱地址 /label  input type= email id= email placeholder= Enter email  br/ br/  你對(duì)什么運(yùn)動(dòng)感興趣： br /  label for= jog 慢跑 /label  input type= checkbox name= jog id= jog / br /  label for= climb 登山 /label  input type= checkbox name= climb id= climb / br /  label for= basketball 籃球 /label  input type= checkbox name= basketball id= basketball /  /form  /body  /html 

輸出：

相關(guān)推薦：

HTML的基本結(jié)構(gòu)有哪些

HTML基本結(jié)構(gòu)介紹

以上就是如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。