基本結構代碼：

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

代碼講解：

1. html /html 稱為根標簽，所有的網頁標簽都在 html /html 中。

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

3. body /body 標簽之間的內容是網頁的主要內容，如 h1 、 p 、 a 、 img 等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。

4. p /p 是文章的段落標簽

5. hx /hx 表示文章標題（x表示數字，為文章標題等級1-6）

6. em /em 表示斜體

7. strong /strong 表示加粗

8. style

span{

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

}

/style

span /span 設置單獨樣式

9. q /q 引用，會自動加上雙引號

10. blockquote /blockquote 縮進

11. br / 換行

12. nbsp;輸入空格

13. hr/ 添加水平橫線

14. address /address 輸入地址信息（默認以 斜體表示）

15. code /code 代碼標簽

16. pre /pre 大段代碼標簽

17.無序列表

ul

li 內容 /li

li 內容 /li

li 內容 /li

/ul

18.有序列表(列表會自動加上序號)

ol

li 內容 /li

li 內容 /li

li 內容 /li

/ol

19. div … /div ：劃分區域（獨立邏輯）

20. div id= 版塊名稱 … /div ：劃分板塊并給板塊命名

21.表格展示（沒有框線）

 table  tbody  th 班級 /th  th 學生數 /th  th 平均成績 /th  /tr  td 一班 /td  td 30 /td  td 89 /td  /tr  /tbody  /table 

22. table summary = 內容 /table 為表格添加摘要

23. caption /caption 為表格添加標題

24. a href = 網址 title = 提示 .. /a 加入網頁鏈接（在當前頁面打開）

25. a href= 目標網址 target= _blank .. /a 加入網頁鏈接（新建頁面）

26.在網頁中鏈接Email地址

如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“ ”分隔。

27. img src= 圖片地址 alt= 下載失敗時的替換文本 title = 提示文本 ：為網頁插入圖片

28.表單標簽：表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

 form method= 傳送方式 action= 服務器文件 

 !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= username 用戶名: /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.輸入大段內容：（文本域） textarea cols = 50 rows = 10 .. /textarea

cols = 行數

rows = 列數

 !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 個人簡介： /label  textarea cols = 50 rows = 10 在這里輸入內容... /textarea  input type= submit value= 確定 name= submit /  input type= reset value= 重置 name= reset /  /form  /body  /html 

輸出：

30.單選/復選框

 input type= radio/checkbox value= 值 name= 名稱 checked= checked / 

1、type:

當 type= radio 時，控件為單選框

當 type= checkbox 時，控件為復選框

2、value：提交數據到服務器的值（后臺程序PHP使用）

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

4、checked：當設置 checked= checked 時，該選項被默認選中

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

 !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 性別: /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 愛好: /label  select  option value= 看書 看書 /option  option value= 旅游 selected = selected 旅游 /option  option value= 運動 運動 /option  option value= 購物 購物 /option  /select  /form  /body  /html 

輸出：

select .. /select 下拉框列表

selected = selected ：默認選中

32.下拉框表支持復選:multiple = multiple

 select multiple = multiple .. select 

輸出：

（在 windows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項）

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標簽

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用 戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

 label for= 控件id名稱 

注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title form中的lable標簽 /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/  你對什么運動感興趣： 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 

輸出：

相關推薦：

HTML的基本結構有哪些

HTML基本結構介紹

以上就是如何來簡述html的基本結構（附代碼）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。