一、html文檔樹狀圖結構
1）html樹狀圖
2）html代碼解釋樹形圖
<!DOCTYPE html> <!--聲明--> <html lang="en"> <!--html開始--> <head> <!--頭部開始--> <meta charset="UTF-8"> <!--提供頁面元信息如編碼，緩存，關鍵字，渲染模式--> <title>Title</title> <!--定義標題，如瀏覽器工具欄，收藏夾，搜索引擎結果標題--> <link> <!--stylesheet--> <!--icon--> <!--定義html文檔和外部資源的關系，如css樣式，icon圖標--> <style></style> <!--定義html文檔樣式信息--> <script></script> <!--定義客戶端腳本--> </head> <!--頭部結束--> <body> <!--主體開始--> <!--行內標簽--> <a></a> <!--超鏈接--> <img> <!--嵌入圖片--> <input> <!--搜集用戶信息--> <label></label> <!--為 input 元素定義標注--> <span></span> <!--組合行內元素，以便通過樣式來格式化它們。--> <select></select> <!--創建選擇列表，是一種表單控件，可放在表單里收集用戶輸入--> <!--塊級標簽--> <h1></h1> <!--文本標題--> <p></p> <!--段落--> <hr/> <!-- 在頁面中創建一條水平線。--> <ol></ol> <!--有序列表--> <ul></ul> <!--無序列表--> <form></form> <!--用於為用戶輸入創建 HTML 表單。--> <fieldset></fieldset> <!--將表單內的相關元素分組，把表單內容的一部分打包，生成一組相關表單的字段。--> <div></div> <!--把文檔分割為獨立的、不同的部分。它可用作嚴格的組織工具，並且不使用任何格式與其關聯。--> <!--可變標簽--> <button></button> <!--按鈕--> <iframe></iframe> <!--創建包含另外一個文檔的內聯框架（即行內框架）--> <del></del> <!--已被刪除的文本--> <!--自定義屬性--> <!--自定義標簽--> </body> <!--主體結束--> </html> <!--html結束-->
二 Html文檔聲明
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基於 SGML，所以不需要引用 DTD。
注釋：<!DOCTYPE> 聲明沒有結束標簽。
提示：<!DOCTYPE> 聲明對大小寫不敏感。
提示：請使用 W3C 的驗證器來檢查您是否編寫了有效的 HTML / XHTML 文檔！
1 html5
<!DOCTYPE html>
2 html4.01
<!--HTML 4.01 Strict 該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!--HTML 4.01 Transitional 該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!--HTML 4.01 Frameset--> 該 DTD 等同於 HTML 4.01 Transitional，但允許框架集內容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!--XHTML 1.0 Strict--> 該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--XHTML 1.0 Transitional 該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--XHTML 1.0 Frameset 該 DTD 等同於 XHTML 1.0 Transitional，但允許框架集內容。--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!--XHTML 1.1 該 DTD 等同於 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
下面對上圖中的三種小規范進行解釋：
-
strict：表示“嚴格的”，這種模式里面的要求更為嚴格。這種嚴格體現在哪里？有一些標簽不能使用。
比如，u標簽，就是給一個本文加下划線，但是這和HTML的本質有沖突，因為HTML只能負責語義，不能負責樣式，而u這個下划線是樣式。所以，在strict中是不能使用u標簽的。
那怎么給文本增加下划線呢？今后的css將使用css屬性來解決。
那么，XHTML1.0更為嚴格，因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。 -
Transitional：表示“普通的”，這種模式就是沒有一些別的規范。
-
Frameset：表示“框架”，在框架的頁面使用。
三 head頭部
頭部標簽都放在<head></head>之間，包括：
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<base>：為頁面上的所有鏈接規標題欄顯示的內容定默認地址或默認目標。
base會對Html文檔中所有URL產生作用，慎用！
<meta>： 提供有關頁面的基本信息
<link>： 定義文檔與外部資源的關系。
1 meta標簽
meta表示“元”。“元”配置，就是表示基本的配置項目。
#1、指定字符集,charset就是charactor set（即“字符集”） 瀏覽器就是通過meta來看網頁是什么字符集的。比如你保存的時候，meta寫的和聲明的不匹配，那么瀏覽器就是亂碼。 <meta charset="gbk"> #2、頁面描述,name即“名字”，content即“內容”。只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句， <meta name="Description" content="具體描述。。。"> #3、關鍵字：就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。有助於搜索引擎SEC優化，。 <meta name="Keywords" content="網易，郵箱，游戲，新聞"> #4、重定向 <meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、頁面刷新 <meta http-equiv="refresh" content="3"> ############################ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="Description" content="具體描述。。。"> <meta name="Keywords" content="python,linux,go,IT培訓"> <meta http-equiv="refresh" content="3;https://www.baidu.com"> </head> <body> <p>我是段落</p> </body> </html>
2 非meta標簽
#1、定義標題 <title>百度一下，你就知道</title> #2、加載網頁logo <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"> #3、引入外部css文件 <link rel="stylesheet" href="my.css"> #4、引入本地css樣式 <style> p { color: rebeccapurple; } </style> #5、引入文件js，不建議在head標簽引用js,需在body標簽最后引用 <script src="hello.js"></script> ############################ <!DOCTYPE html> <html lang="en"> <head> <title>百度一下，你就知道</title> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="my.css"> <style> p { color: rebeccapurple; } </style> <script src="hello.js"></script> </head> <body> <p>我是段落</p> </body> </html>
四、body部分
<body>標簽的屬性
bgcolor：設置整個網頁的背景顏色。background：設置整個網頁的背景圖片。text：設置網頁中的文本顏色。leftmargin：網頁的左邊距。IE瀏覽器默認是8個像素。topmargin：網頁的上邊距。rightmargin：網頁的右邊距。bottommargin：網頁的下邊距。
<body>標簽另外還有一些屬性：
1 排版標簽
(1) 分類圖示
(2) 文本級和容器級
Html將所有標簽分為容器級標簽和文本級標簽 1 容器標簽 容器級的標簽里面可以放置任何東西，可以簡單的理解為能嵌套其它所有標簽的標簽。 常見容器級的標簽: <div> <h1>~<h6> <ul> <ol> <dl> <li> <dt> <dd> 等。 2 文本標簽 文本級的標簽對應容器級標簽，只能嵌套文字/圖片/超鏈接的標簽。 常見文本級的標簽:<span> <p> <a> <b> <strong> <i> <u> <em> <ins> <del> 等。 3 Html和CSS對應關系 CSS中的塊級元素基本與Html中的容器級標簽對應，除了P標簽 CSS中的行內元素基本與Html中的文本級標簽對應，除了P標簽 注：p標簽是一個文本級標簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。
(3) 行內元素和塊級元素
1 div和span的特點 語義： div的語義是division“分割”； span的語義就是span“范圍、跨度”。 類型： div 元素的默認 display 屬性值為 “block”，稱為“塊級” 元素。 span 元素的默認 display 屬性值為“inline”，稱為“行內” 元素。 根據 CSS 規范的規定，每一個網頁元素都有一個 display 屬性，用於確定該元素的類型，每一個元素都有默認的 display 屬性值。 空間： div 這樣的塊級元素，就會自動占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子； span這樣的行內元素，則沒有自己的獨立空間，它是依附於其他塊級元素存在的，因此，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。 區別： <span>是不換行的，而<div>是換行的。 2 塊狀元素和行內元素 (1) 塊級元素 .總是從新的一行開始 .高度、寬度都是可控的 .寬度沒有設置時，默認為100% .塊級元素中可以包含塊級元素和行內元素 (2) 行內元素 .和其他元素都在一行 .高度、寬度以及內邊距都是不可控的 .寬高就是內容的高度，不可以改變 .行內元素只能行內元素，不能包含塊級元素 (3) 行內、塊狀元素區別 . 塊級元素會獨占一行，其寬度自動填滿其父元素寬度 行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化 . 一般情況下，塊級元素可以設置 width, height 屬性， 行內元素設置 width, height 無效 (注意：塊級元素即使設置了寬度，仍然是獨占一行的) . 塊級元素可以設置 margin 和 padding. 行內元素的水平方向的 padding-left,padding-right,margin-left,margin-right 都產生邊距效果， 但是豎直方向的 padding-top,padding-bottom,margin-top,margin-bottom 都不會產生邊距效果(水平方向有效，豎直方向無效)。 3 行內、塊狀元素標簽 (1) 塊元素 (block element) address - 地址 blockquote - 塊引用 center - 舉中對齊塊 dir - 目錄列表 div - 常用塊級容易，也是 css layout 的主要標簽 dl - 定義列表 fieldset - form 控制組 form - 交互表單 h1 - 大標題 h2 - 副標題 h3 - 3 級標題 h4 - 4 級標題 h5 - 5 級標題 h6 - 6 級標題 hr - 水平分隔線 isindex - input prompt menu - 菜單列表 noframes - frames 可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容 noscript - 可選腳本內容（對於不支持 script 的瀏覽器顯示此內容） ol - 排序表單 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 (2) 內聯元素 (inline element) a - 錨點 abbr - 縮寫 acronym - 首字 b - 粗體 (不推薦) bdo - bidi override big - 大字體 br - 換行 cite - 引用 code - 計算機代碼 (在引用源碼的時候需要) dfn - 定義字段 em - 強調 font - 字體設定 (不推薦) i - 斜體 img - 圖片 input - 輸入框 kbd - 定義鍵盤文本 label - 表格標簽 q - 短引用 s - 中划線 (不推薦) samp - 定義范例計算機代碼 select - 項目選擇 small - 小字體文本 span - 常用內聯容器，定義文本內區塊 strike - 中划線 strong - 粗體強調 sub - 下標 sup - 上標 textarea - 多行文本輸入框 tt - 電傳文本 u - 下划線 var - 定義變量 (3) 可變元素 可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。 applet - java applet button - 按鈕 del - 刪除文本 iframe - inline frame ins - 插入的文本 map - 圖片區塊 (map) object - object 對象 script - 客戶端腳本
(4) 換行標簽<p>和<br>
1 <p>段落標簽 段落，是英語paragraph“段落”縮寫。 <p>This is a paragraph</p> <p>This is another paragraph</p> 屬性： align="屬性值"：對齊方式。屬性值包括left center right。 2 <br>換行標簽（已廢棄） 當你打算結束一行，而又不想開始一個新段落時，<br>標簽就派上用場了。 無論你將它置於何處，<br>標簽都會產生一個強制的換行。 This <br> is a para<br>graph with line breaks 3 <p>標簽和<br>標簽的區別：<p>標簽會在段落的前后自動插入一個空行。而<br>標簽沒有空行，而且<br>標簽沒有屬性。 注意：<br> 沒有結束標簽，把<br>標簽寫為 <br/> 是經得起未來考驗的做法，XHTML 和 XML 都接受在打開的標簽內部來關閉標簽的做法。
(5) 其他標簽
1 注釋標簽 <!-- 注釋 --> 2 水平線標簽<hr>（已廢棄） 水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分。 屬性： align="屬性值"：設定線條置放位置。屬性值可選擇：left right center。 size="2"：設定線條粗細。以像素為單位，內定為2。 width="500"或width="70%"：設定線條長度。可以是絕對值（單位是像素）或相對值。如果設置為相對值的話，內定為100%。 color="#0000FF"：設置線條顏色。 noshade：不要陰影，即設定線條為平面顯示。若沒有這個屬性則表明線條具陰影或立體，這是內定值。 3 內容居中標簽 <center> 此時center代表是一個標簽，而不是一個屬性值了。只要是在這個標簽里面的內容，都會居於瀏覽器的中間。 H5不建議使用center。 4 預定義（預格式化）標簽：<pre> 含義：將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行） 說明：真正排網頁過程中，<pre>標簽幾乎用不着。但在PHP中用於打印一個數組時使用。
2 常用標簽
<body> <!-- 這是一個注釋 --> <h1 style="background-color: blueviolet">hello1</h1> <!--塊級標簽，控制一整行--> <a style="background-color: darkred;color: white">wwwwww</a> <!--內聯標簽，只控制有字體的地方--> <h2>這是個標題</h2> <!--自動換行--> <br>hhhhhhhhhhh <br> bbbbbbbbb <!-- br 換行 --> <p>這是一個段落，增加空行開始</p> <!-- 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. --> <p>這是一個段落，增加空行結束</p> <b>加粗hello</b> <!-- 行內標簽，加黑加粗 --> <strong>加粗hello strong</strong> <font color="red" size="10px">我是哈哈哈</font> <!-- 修改文字大小，顏色。被廢棄的標簽 --> <strike>內容中加橫杠</strike> <!-- 為文字加上一條中線. --> <em>變成斜體</em> <sup>上標</sup> <!-- 上角標和下角表. --> <sub>下標</sub> <hr> <!-- 水平線 --> </body>
3 圖片
1 <img>標簽 <img> 代表的就是一張圖片,img 是image“圖片”的簡寫。 <img> 是空標簽，它只包含屬性，並且沒有閉合標簽。也稱為單邊標記。 語法： <img src="url" /> 能插入的圖片類型： 能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。 不能往網頁中插入的圖片格式是：psd、ai 注：HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。 屬性： src: 要顯示圖片的路徑。src 指 "source"。 src的值是圖像的 URL 地址。 URL 指存儲圖像的位置。 <img src="圖片地址"> alt: 用來為圖像定義一串預備的可替換的文本。 通常用於圖片沒有加載成功時的提示。 例: <img src="boat.gif" alt="Big Boat"> title: 鼠標懸浮時的提示信息. 提示性文本。公有屬性。也就是鼠標懸停時出現的文本。 width: 圖片的寬度 height:圖片的高度 (寬高兩個屬性只用一個會自動等比縮放.) align：指圖片的水平對齊方式， 屬性值可以是：left、center、right border：給圖片加邊框（描邊），單位是像素，邊框的顏色是黑色 hspace：指圖片左右的邊距 vspace：指圖片上下的邊距 注意事項： （1）如果要想保證圖片等比例縮放，請只設置width和height中其中一個。 （2）如果想實現圖文混排的效果，請使用align屬性，取值為left或right。 2 相對路徑 相對路徑：相對當前頁面所在的路徑。 兩個標記 . 和 .. 分表代表當前目錄和父路徑。 例： <!-- 當前目錄中的圖片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一級目錄中的圖片 --> <img src="..\2.jpg"> 3 絕對路徑 絕對路徑包括以下兩種： (1)以盤符開始的絕對路徑。舉例： <img src="C:\Users\smyhvae\Desktop\html\images\1.jpg"> (2)網絡路徑。舉例： <img src="http://img.smyhvae.com/2016040102.jpg"> 4 相對路徑和絕對路徑的總結 相對路徑的好處：站點不管拷貝到哪里，文件和圖片的相對路徑關系都是不變的。 相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。 問題：我的網頁在C盤，圖片卻在D盤，能不能插入呢？ 答案： 用相對路徑不能，用絕對路徑也不能。 總結： 無論是在a標簽、img標簽，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。 相對路徑，就是../ image/ 這種路徑。從自己出發，找到別人； 絕對路徑，就是http://開頭的路徑。 絕對不允許使用file://開頭的東西，這個是完全錯誤的！
4 超鏈接
超鏈接: 1 超鏈接<a>標簽 定義：超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。 <a>標簽：定義超鏈接，用於從一張頁面鏈接到另一張頁面。 a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。 <a> 標簽的使用方式： 通過使用 href 屬性 - 創建指向另一個文檔的鏈接 通過使用 name 屬性 - 創建文檔內的書簽 <a>標簽屬性： href：要連接的資源路徑 是英語hypertext reference超文本地址的縮寫。 格式如下: href="http://www.baidu.com" title：鼠標懸浮出現的內容 例： <a href="09_img.html" title="很好看哦">結婚照</a> target:告訴瀏覽器用什么方式來打開目標頁面。 _self：在同一個網頁中顯示（默認值） _blank：在新的窗口打開超鏈接 _parent：在父窗口中顯示 _top：在頂級窗口中顯示 name:：設置一個錨點的名稱。 主要用於定義一個頁面的書簽. 2 超鏈接的形式： (1) 外部鏈接：鏈接到外部文件。 <a href="02頁面.html">點擊進入另外一個文件</a> <a href="http://www.baidu.com" target="_blank">百度</a> (2) 錨鏈接： 指給超鏈接起一個名字，作用是在本頁面或者其他頁面的的不同位置進行跳轉。 比如說，在網頁底部有一個向上箭頭，點擊箭頭后回到頂部，這個就是利用到了錨鏈接。 首先我們要創建一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。 例： <html> <body> <a name="name1">頂部</a> <!--這行代碼表示，頂部這個錨的名字是name1--> <pre> </pre> <a href="#name1">回到頂部</a> <!--點擊時將回到頂部--> </body> </html> (3) 郵件鏈接： 例： <a href="mailto:smyhvae@163.com">點擊進入我的郵箱</a> (4) 圖片超鏈接 3 注意： (1) 分清楚img和a標簽的各自的屬性 <img src="1.jpg" /> <a href="1.html"></a> (2) a是一個文本級的標簽 比如一個段落中的所有文字都能夠被點擊，那么應該是p包裹a： <p> <a href="">段落段落段落段落段落段落</a> </p> 而不是a包裹p： <a href=""> <p> 段落段落段落段落段落段落 </p> </a> a的語義要小於p，a就是可以當做文本來處理，所以p里面相當於放的就是純文字。
5 列表
HTML中列表中共有三種：有序列表、無序列表和定義列表。
(1) ol有序列表
1、 ol有序列表 ol:Ordered List，有序列表。 有序列表是一列使用數字進行標記的項目，它使用<li>包含於<ol>標簽（ordered lists）內。 語法： <ol> <li>開始部分</li> <li>次要部分</li> <li>結尾部分</li> </ol> 屬性： type="屬性值"。屬性值可以是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始 <ol type="1"> <li>呵呵</li> <li>呵呵</li> <li>呵呵</li> </ol> <ol type="a"> <li>嘿嘿</li> <li>嘿嘿</li> <li>呵呵</li> </ol> <ol type="i" start="4"> <li>哈哈</li> <li>哈哈</li> <li>哈哈</li> </ol> <ol type="I" start="10"> <li>么么</li> <li>么么</li> <li>么么</li> </ol> 注：和無序列表一樣，有序列表也是可以嵌套。 ol和ul就是語義不一樣，使用方法都是一樣的。 ol里面只能有li，li必須被ol包裹。li是容器級。 ol這個用的不多，如果想表達順序，一般用ul。
(2) ul無序列表
2、 ul無序列表 ul：unordered list，“無序列表”的意思。 li：list item，“列表項”的意思 無序列表是一組使用黑點狀進行標記的項目，它使用<li>包含在<ul>標簽（unordered lists）內； <ul> <li>關於主題</li> <li>關於形式</li> <li>關於內容</li> </ul> 注意： li不能單獨存在，必須包裹在ul里面；反過來說，ul的“后代”不能是別的東西，只能有li。 我們這里再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。 屬性： type="屬性值"。屬性值可以選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。 不光是<ul>標簽有type屬性，<ul>里面的<li>標簽也有type屬性（雖然說這種寫法很少見）。 嵌套： 列表之間是可以嵌套的。 例： <ul> <li><b>北京市</b> <ul> <li>海淀區</li> <li>朝陽區</li> <li>東城區</li> </ul> </li> <li><b>廣州市</b> <ul> <li>天河區</li> <li>越秀區</li> </ul> </li> </ul> 注：ul的兒子，只能是li。但是li是一個容器級標簽，li里面什么都能放。甚至可以再放一個ul。
應用：
場景1 —— 導航條：
場景2 —— li里面放置的內容可能很多：
(3) dl定義列表
3、 dl定義列表 dl：definition list，定義列表。 dt：definition title 列表的標題，這個標簽是必須的。 dd：definition description 列表的列表項，如果不需要它，可以不加。 定義列表語義上表示項目及其注釋的組合，它以<dl>標簽（definition lists）開始， 自定義列表項以<dt>（definition title）開始， 自定義列表項的定義以<dd>（definition description）開始。 注：定義列表沒有屬性。dl的子元素只能是dt和dd。 <dl> <dt>CSS</dt> <dd>CSS概念</dd> <dd>CSS應用</dd> <dd>CSS hacks</dd> </dl> 定義列表表達的語義是兩層： (1)是一個列表，列出了幾個dd項目 (2)每一個詞兒都有自己的描述項。 備注：dd是描述dt的。 定義列表用法非常靈活，可以一個dt配很多dd。
應用：
場景一
<dl> <dt>購物指南</dt> <dd> <a href="#">購物流程</a> <a href="#">會員介紹</a> <a href="#">生活旅行/團購</a> <a href="#">常見問題</a> <a href="#">大家電</a> <a href="#">聯系客服</a> </dd> </dl> <dl> <dt>配送方式</dt> <dd> <a href="#">上門自提</a> <a href="#">211限時達</a> <a href="#">配送服務查詢</a> <a href="#">配送費收取標准</a> <a href="#">海外配送</a> </dd> </dl>
場景二
備注：
從語義上來講，三組標簽分別對應不同具有含義的列表：
無序列表適合成員之間無級別順序關系的情形，
有序列表適合各項目之間存在順序關系的情形，
定義列表用於一個術語名對應多重定義或者多個術語名同一個給出的定義，也可以只有術語名稱或只有定義，也就是說<dt>與<dd>在其中數量不限、對應關系不限。
用什么標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。
6 table表格
表格由 <table> 標簽來定義。
每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。
數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
(1) 表格語法說明
一 表格的作用： 表格標簽是用來給一堆數據添加表格語義的，其實表格就是數據的一種展現形式，具有一定的規則。 當數據量大的時候，表格這種展現形式被認為是最清晰的一種方式 二 表格的基本組成 表格由標題，表頭組，表身組，表尾組構成。 通常情況下， <caption> <thead> <tbody> <tfoot> 不需要編寫。 1 表格標簽 <table> 定義 HTML 表格。本着表現層與結構層的分離的原則，現在w3c上已經不贊成使用。 2 表格標題 <caption> 定義表格標題，必須寫在table標簽里面，緊隨 table 標簽之后。 只能對每個表格定義一個標題，默認居中於表格之上。 3 表頭組 <thead> 定義表格的表頭 表頭組通常存放每列共性的關鍵信息。 4 表身組 <tbody> 定義格主體（正文） <tr> 定義表格行 <th> 定義表頭 <td> 定義表格單元 <col> 標簽為表格中一個或多個列定義屬性值。 <colgroup> 標簽用於對表格中的列進行組合，以便對其進行格式化。 5 表尾組 <tfoot> 定義表格的頁腳（腳注或表注） 表身組通常只放一些注釋，很少用。 6 基本格式 <table> <tr> <td></td> </tr> </table> 表格的基本結構：一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。 所以說，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。 三 表格標簽及標簽屬性 1 <table>表格 屬性： align：水平對齊。align可以給table、tr、td標簽設置。 align=“left”/“center”/“right” valign：垂直對齊。valign只能給tr、td標簽設置。 bgcolor：背景色。用 css 的background-color 代替 border：邊框，決定了邊框的寬度，默認值為0，單位為像素px。 (在html5中，border只能為"1"或" ")(html5已廢棄) bordercolor：表格的邊框顏色。 cellpadding：內邊距，內容跟邊框的距離，默認值為0。 只能給table設置 (html5已廢棄) cellspacing：外邊距，單元格與單元格之間的距離，默認值為2px。 (html5已廢棄)（IE7-瀏覽器不支持border-spacing） 只能給table設置 background：背景圖片。 background="路徑src/..." frame：規定外側邊框的哪個部分是可見的，即設置表格 border，基本不會用這個屬性。 (IE7-瀏覽器不能正常顯示)(html5已廢棄) rules：規定內側邊框的哪個部分是可見的，同 frame，幾乎不會用到。 (IE7-瀏覽器不能正常顯示)(html5已廢棄) summary：規定表格內容的摘要，屏幕閱讀器可以利用該屬性，不會有其他視覺效果。 (IE7-瀏覽器不能正常顯示)(html5已廢棄) width：表格寬度。單位為像素px。 height：表格高度。單位為像素px。 (html5已廢棄) dir：公有屬性，單元格內容的排列方式(direction)。 取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left） 既然說dir是共有屬性，如果把這個屬性放在任意標簽中，那表明這個標簽的位置可能會從右開始排列。 默認樣式： table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } 2 <tr>行 屬性： align:一行內容的水平對齊方式。 valign:一行內容的垂直對齊方式。 height：行高。 bgcolor：背景色。 background：背景圖片。 dir：公有屬性，設置這一行單元格內容的排列方式。 3 <td>單元格 內容必須放在單元格里，單元格必須放在行里，行必須放在表格里。 設置單元格行高、列高時，會同時影響對應的行或列。 <th></th>表頭，單元格的內容自動居中、加粗 align:單元格內容的對齊方式。 valign:單元格的內容的垂直對齊方式。 width：單元格寬度。 height：單元格高度。 bgcolor：背景色。 background：背景圖片。 colspan=“n” 合並同一行的單元格（后面寫代碼要減去相對應的列） 設置 colspan = "2"，當前單元格被視為占兩格（自左向右） rowspan=“n” 合並同一列單元格（從第二行開始減去相對應的列） 設置 rowspan = "2"，當前單元格被視為占兩格（自上而下） <th>：加粗的單元格。相當於<td> + <b>屬性同<td>標簽。 <caption>：表格的標題。使用時和tr標簽並列 屬性：align，表示標題相對於表格的位置。屬性取值可以是：left、center、right、top、bottom 4 <col>列 colspan:為表格中一個或多個列定義屬性值 rowspan:對表格中的列進行組合，以便對其進行格式化 注意:關於行的表格元素生成矩形框，這些框有內容、內邊距和邊框，但是沒有外邊距margin。表頭呈現為居中的粗體文本 四 表格的傳統布局 傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點： 1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0 2、單元格里面嵌套表格 3、單元格中的元素和嵌套的表格用align和valign設置對齊方式 4、通過屬性或者css樣式設置單元格中元素的樣式
(2) 常見表格代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="solid" width="500px" height="150px" cellspacing="0" cellpadding="10" frame="solid" rules="solid" > <thead> <caption>課程表</caption> <tr align="center" valign="center" bgcolor="pink"> <th>星期一</th> <th>星期二</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody align="center" valign="center"> <tr > <td rowspan="2">語文</td> <td>數學</td> <td>英語</td> <td>生物</td> </tr> <tr> <td>數學</td> <td>英語</td> <td>生物</td> </tr> <tr> <td colspan="4">課間活動</td> </tr> </tbody> <tfoot align="center" valign="center"> <tr> <td>語文</td> <td>數學</td> <td >英語</td> <td>生物</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> </tr> </tfoot> </table> </body> </html>
(3) 表格嵌套代碼
<!DOCTYPE html> <html> <head> <title>表格屬性</title> <meta charset="utf-8"> </head> <body> <!-- 在以下表格標簽中添加相應代碼 --> <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center"> <caption>課程表</caption> <tr bgcolor="orange" align="center"> <th>星期一</th> <th>星期二</th> <th>星期四</th> <th>星期五</th> </tr> <tr align="center"> <td rowspan ="2">語文</td> <td>數學</td> <td>英語</td> <td>生物</td> </tr> <tr align="center"> <td>數學</td> <td>英語</td> <td>生物</td> </tr> <tr align="center"> <td colspan="4">課間活動</td> </tr> <tr align="center"> <td rowspan="2" > <table border="1" cellspacing="0" cellpadding="5px" align="center"> <tr> <td>前半節</td> <td>后半節</td> </tr> <tr> <td>詩詞</td> <td>古文</td> </tr> </table> </td> <td>數學</td> <td>英語</td> <td>生物</td> </tr> <tr align="center"> <td>數學</td> <td>英語</td> <td>生物</td> </tr> </table> </body> </html>
(4) 表格布局代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局</title> </head> <body> <table width="100%" height="100%" bgcolor="#f2f2f2"> <tr bgcolor="#14191e" height="60px"> <!-- 頁頭 --> <td></td> </tr> <tr height="15px"> <!-- 空隙 --> <td></td> </tr> <tr > <!-- 主內容 --> <td> <table width="1024px" align="center" > <tr> <td width="400px" valign="top" align="right"> <table bgcolor="#fff" width="100%"> <tr> <td align="center" height="60px">html簡介</td> </tr> <tr> <td align="center" height="60px">html表格</td> </tr> <tr> <td align="center" height="60px">html實例</td> </tr> <tr> <td align="center" height="60px">css簡介</td> </tr> <tr> <td align="center" height="60px">css表格</td> </tr> <tr> <td align="center" height="60px">css實例</td> </tr> <tr> <td align="center" height="60px">JavaScript簡介</td> </tr> <tr> <td align="center" height="60px">JavaScript實例</td> </tr> <tr> <td align="center" height="60px">關於我們</td> </tr> </table> </td> <td width="24px"></td> <!-- 空隙 --> <td width="600px" bgcolor="#fff"> <pre> 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容： 我的第一個標題 我的第一個段落。 例子解釋 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容： 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容： 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容： 我的第一個標題 我的第一個段落。 例子解釋 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容： 什么是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 HTML 標簽 HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現的，比如 和 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽 開始和結束標簽也被稱為開放標簽和閉合標簽 HTML 文檔 = 網頁 HTML 文檔描述網頁 HTML 文檔包含 HTML 標簽和純文本 HTML 文檔也被稱為網頁 </pre> </td> </tr> </table> </td> </tr> <tr height="20px"> <!-- 空隙 --> <td></td> </tr> <tr bgcolor="#14191e" height="100px"><!-- 頁尾 --> <td></td> </tr> </table> </body> </html>
(5) 實例
<html> <body> <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" align="center" width="100%"> <tr align="center" style="background:#628FC3"><td colspan="5" height="100px" width="100%" >頁首</td></tr> <tr align="center" style="background:#CBDAEB"><td height="30px" width="20%">標題1</td><td width="20%">標題2</td><td width="20%">標題3</td><td width="20%">標題4</td><td width="20%">標題5</td></tr> <tr align="center"><td height="300px" style="background:#92D050">側導航欄</td><td colspan="4" style="background:#00B0F0">主頁內容</td></tr> <tr align="center"><td height="50px" colspan="5" style="background:#FFC000">頁尾</td></tr> </table> </body> </html>
如圖
7 form表單
(1) 表單語法圖解
(2) 語法說明
1 表單的概念 定義：表單是一個包含表單元素的區域。 作用：表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。 組成：表單是控件的容器，一個表單由form元素、表單控件（表單子元素）和表單按鈕三部分組成。 1） form：用來創建表單，並通過 action、method和enctype三個屬性，來設置表單的提交路徑、提交方式、編碼類型。 2） 表單控件：主要用來收集用戶數據，包括 label、input、textarea、select、datalist、keygen、progress、meter、output等，也包括對表單控件進行分組顯示的 fieldset 和 legend 控件。 根據功能的不同，input 控件又分為 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等類型。 3） 表單按鈕：包括提交按鈕、重置按鈕和一般按鈕。提交按鈕和一般按鈕可用於把表單數據發送到服務器，重置按鈕用於重置表單，把整個表單恢復到初始狀態。 基本語法： <form> form elements </form> <form action="提交地址" method="提交方式">表單內容</form> 2 表單工作原理 當我們點擊了提交按鈕后，表單中所填的數據會被打包發送到服務器進行處理，接着服務器會根據表單中的信息返回特定的響應。 在表單中，我們可以輸入的元素大致可以分成兩種：輸入賦值和選擇賦值。雖然有兩種，但是其最終結果卻是一樣的。都是先為一個變量賦值，然后后將此變量傳到服務器進行處理。 1） <input type="text" name="test_name" value="165"> 上面的實例中，test_name就是一個變量名，test_name的初始值就是value=“165”，當我們刪除輸入框中的初始值，然后寫入新值的時候比如777，test_name的值變成了777，提交表單的時候，就會將變量test_name和其新賦值提交到服務器等。 2） <input type="radio" name="test_radio" value="not"> 3） <input type="radio" name=" test_radio" value="yes"> 雖然是兩行代碼，但是這兩個單選框為一組，只能選擇一個。兩個選項都是為 test_radio賦值，所賦值即每個選項 value 的值。表單提交時同樣會提交變量 test_radio及它的 value. 3 form form：用來創建表單，即以 <form> 標簽開始，</form> 標簽結束，在 <form> 和 </form> 之間，是表單所需要的控件和按鈕,要提交的所有內容都應該在該標簽中. 該元素不會生成可視化部分。 表單內容：可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等標簽 基本屬性： action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web method: 表單的提交方式 post/get 默認取值 就是 get（信封） get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制. post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制. accept-charset:屬性規定服務器可處理的表單數據字符集。默認值是保留字符串 "UNKNOWN"，表示編碼為包含 <form> 元素的文檔的編碼。 enctype: 屬性規定在將表單數據發送到服務器之前如何對其進行編碼。注意：只有 method="post" 時才使用 enctype 屬性。 autocomplete: 屬性規定表單是否應該啟用自動完成功能。 自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。 注意：autocomplete 屬性 "on" 適用於表單，"off" 適用於特定的輸入字段，反之亦然。 默認值為 on 規定啟用自動完成功能。瀏覽器會基於用戶之前鍵入的值自動完成值。off 則規定禁用自動完成功能。用戶必須在每次使用時輸入值到每個字段中，瀏覽器不會自動完成輸入。 novalidate: 屬性規定當提交表單時不對表單數據進行驗證。 4 表單控件 表單控件也叫表單子元素。 每一個表單控件都有一個 name 屬性，用於在提交表單時，對表單數據進行識別。name名稱必須有區別才能被識別。 訪問者通過提交按鈕提交表單，表單提交后，他們填寫的數據就會發送到服務器端進行處理。如，用戶登錄的表單： 文本框-語法 <input type="text"(文本框) name="userName"(文本框名稱) value="用戶名"(文本框初始值) size="30"(文本框長度) maxlength="20"(文本框可輸入最多字符) /> 密碼框-語法 <input type="password "(密碼框) name="pass"(密碼框的名稱) size="20"(密碼框的長度) /> 單選按鈕-語法 <input name="gen" type="radio"(單選按鈕框) value="男"(值) checked(單選按鈕選中狀態) />男 <input name="gen" type="radio" value="女" />女 復選框-語法 <input type="checkbox"(復選框) name="interest" value="sports"(值)/>運動 <input type="checkbox" name="interest" value="talk" checked(復選框選中狀態) />聊天 <input type="checkbox" name="interest" value="play"/>玩游戲 列表框-語法 <select(列表框) name="列表名稱" size="行數"> <option value="選項的值" selected="selected"(默認選中項)>…</option > <option(選項) value="選項的值">…</option > </select> 按鈕-語法 <input type="reset" (重置按鈕) name="butReset" value="reset按鈕"(按鈕上顯示的文字)> <input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕"> <input type="button"(普通按鈕) name="butButton" value="button按鈕"/> 圖片按鈕 <input type="image" src="images/login.gif"/(圖片路徑)> 多行文本域-語法 <textarea(多行文本域) name="showText" cols="x"(顯示的列數) rows="y"(顯示的行數)>文本內容 </textarea > 文件域-語法 <form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）> <p><input type="file"(文件域) name="files" /> <input type="submit" name="upload" value="上傳" /></p> </form> 郵箱-語法 <p>郵箱:<input type="email"（郵箱） name="email"/></p> <input type="submit"/> 網址-語法 <p>請輸入你的網址:<input type="url"（網址） name="userUrl"/></p> <input type="submit"/> 數字-語法 <p>請輸入數字:<input type="number"(數字) name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p> <input type="submit"/> 滑塊-語法 <p>請輸入數字:<input type="range"(滑塊) name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p> <input type="submit"/> 搜索框-語法 <p>請輸入搜索的關鍵詞:<input type="search"(搜索框) name="sousuo"/></p> <input type="submit"/> 隱藏域-語法 <input type="hidden"(隱藏域) value="666" name="userid"> 只讀和禁用-語法 <input name="name" type="text" value="張三" readonly(只讀文本框)> <input type="submit " disabled （禁用） value="保存" > 表單元素的標注 <label for="id"(表單元素的id)>標注的文本</label> <input type="radio" name="gender" id="male"/(表單元素id)> 按鈕 在表單中有兩種按鈕可以使用，分別為：提交按鈕和重置按鈕。還有一種按鈕叫做點擊按鈕。 (1)點擊按鈕 type="button" 定義一個可點擊的按鈕，在用戶點擊按鈕時啟動一段 JavaScript。 <input type="button" value="按鈕" onclick="show()"> <script> function show(){ alert("Hello world!"); } </script> (2)提交按鈕 當用戶需要提交表單信息到服務器時，需要用到提交按鈕。type="submit" 用於定義提交按鈕。 <form method="post" action="demo.php"> <label for="urse">用戶名：</label> <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/> <label for="password">密 碼：</label> <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/> <input type="submit" value="提交信息"> </form> button 和 submit 都是定義一個按鈕，不同的是 button 只是一個普通的按鈕，主要用於綁定事件，如果不給其綁定事件，那么點擊按鈕不會有任何反應。 而 submit 則是提交按鈕，主要用於提交表單，傳送數據，如果給 submit 綁定事件，那么點擊按鈕觸發事件的同時，也會提交表單。 (3)重置按鈕 當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入信息后，發現輸入錯誤，那么可以使用重置按鈕使輸入框恢復到初始狀態。只需要把 type 設置為 "reset" 就可以。 <form method="post" action="demo.php"> <label for="urse">用戶名：</label> <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/> <label for="password">密 碼：</label> <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/> <input type="submit" value="提交信息"> <input type="reset" value="重置信息"> </form> type="reset" 用於定義一個重置按鈕，需要謹慎使用該按鈕，當用戶點擊重置按鈕后，所有表單值都會恢復到默認值，這對於用戶來說，如果不慎點擊了重置按鈕將是一件十分令人惱火的事。 在 HTML 中還有一種創建按鈕的方法就是使用 <button> 標簽。 該元素與使用 <input> 元素創建的按鈕之間的不同之處就在於：使用 button 元素創建的按鈕，在該元素內部可以放入內容，比如文本或圖像，也就是該元素可以使用多媒體內容，<button> 與 </button> 標簽之間的所有內容都是按鈕的內容。該元素也可以定義點擊按鈕、提交按鈕和重置按鈕。 但是他的缺點就是：不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值，因此要始終為 <button> 元素規定 type 屬性，不同瀏覽器可能會提交不同的按鈕值，也就是瀏覽器得到的 value 值不同，存在兼容性問題。所以要使用 <input> 元素在 HTML 表單中創建按鈕。 5 fieldset fieldset元素可將表單內的相關元素分組。 <fieldset> 標簽將表單內容的一部分打包，生成一組相關表單的字段。 當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。 <fieldset> 標簽沒有必需的或唯一的屬性。 <legend> 標簽為 fieldset 元素定義標題。 代碼 <!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset> </form> <p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p> </body> </html> 6 換行 (1) Br強制換行,小換行 (2) P段落換行,大換行 (3) 行高間距：2個br換行標簽相當於使用p段落標簽。
(3) 實例解析1
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>表單實例</title> </head> <body> <h1>表單的基本使用</h1> <form action='./05-form.php' method='post' enctype='multipart/form-data'> <!--get與post的區別: 1.一個是顯式get,會將你提交的數據顯示在地址欄中,不安全,一個是隱式post,會隱藏參數 2.一個攜帶的數據量小GET:128KB,一個攜帶的數據量大post:2M--> <!--編碼格式enctype編碼格式定死的 上傳文件視頻音頻是使用 一定要寫上 讓瀏覽器識別,寫上后他才能把這個放在請求頭里面響應--> 用戶名:<input type='text' name='uname' value='' placeholder='請輸入用戶名' maxlength='6' style='width:100px;' autofocus/><br/> 密 碼: <input type='password' name='pass'><br/> 確認密碼:<input type='password'/><br/> <!--text文本標簽 服務器在你提交的時候看的是name和value, 在你輸入之后會默認的把新輸入的內容放到value里面, 服務器獲取name對應的值value, placeholder是你什么都不輸入顯示在文本框中的內容 maxlength是輸入的最大長度, size表示輸入框的長度size的寫法可以單基本已經廢棄一般用style='width:200px;', autofocus移動光標自動顯示在用戶名上,提示你在這里輸入--> 性別:<label><input type='radio' name='sex' value='m' checked/>男</label> <label><input type='radio' name='sex' value='w'/>女<br/></label> <!--radio單選框,label的作用是點擊男字或女字也有效果checked 默認選中,對於單選框和復選框而言--> 愛好:<input type='checkbox' name='check[]' value='lan'/>籃球 <input type='checkbox' name='check[]'value='zu'/>足球 <input type='checkbox' name='check[]' value='ping' checked/>乒乓球 <input type='checkbox' name='check[]'value='yu'/>羽毛球<br/> <!--checkbox復選框或者多選框,check[]可以只接收一個name得到四個值 可以分別把value的值放入列表中,然后服務器只接收一個name就好--> 文件上傳:<input type='file' name='pic'/><br/> 籍貫:<select name='city'> <option value='hb'>河北</option> <!--option選項的意思--> <option value='bj'>北京</option> <option value='sd' selected>山東</option> <!--selected起始默認選中,對於下拉框而言--> <option value='hn' disabled>河南</option> <!--disabled你怎么選也選不中,變灰----> </select><br/> 內容:<textarea name='areas' style='resize:none' rows='5' cols='40'> <!--resize:none文本框不能被自由的擴大和縮小, rows表示文本框的高度也就是行數,cols代表的就是寬度也就是列數--> </textarea> <br/> <input type='submit' value='注冊'/> <input type='button' value='按鈕'/><!--沒有提交功能--> <input type='image' src='./post.png' width='40' height='18'/> <!--圖片的方式提交h5基本沒有使用--> <button>點擊按鈕</button> <!--button這里面可以套一個背景圖很多功能都可以實現 常用的--> <input type='reset' value='重置'/> <!--reset把先前寫過的東西清空掉--> 隱藏域:<input type='hidden' name='id' value='100'/> <!--這里有點不動還需再看一下--> </form> <button>點擊按鈕</button> <!--放在form外面沒有提交功能--> </body> </html>
實例解析2
HTML表單 表單用於搜集不同類型的用戶輸入，表單由不同類型的標簽組成，實現一個特定功能的表單區域（比如：注冊）， 首先應該用<form>標簽來定義表單區域整體，在此標簽中再使用不同的表單控件來實現不同類型的信息輸入， 具體實現及注釋可參照以下偽代碼： <form action="http://www..." method="get"> <!-- form定義一個表單區域,action屬性定義表單數據提交的地址，method屬性定義提交的方式。 --> <p> <!-- p標簽定義大換行 --> <label>姓名：</label> <!-- label標簽定義表單控件的文字標注，input類型為text定義了一個單行文本輸入框 --> <input type="text" name="username" /> </p> <p> <label>密碼：</label> <input type="password" name="password" /> <!-- input類型為password定義了一個密碼輸入框 --> </p> <p> <label>性別：</label> <label><input type="radio" name="gender" value="0" /> 男</label> <label><input type="radio" name="gender" value="1" /> 女</label> <!-- input類型為radio定義了單選框 --> </p> <p> <label>愛好：</label> <label><input type="checkbox" name="like" value="sing" /> 唱歌</label> <label><input type="checkbox" name="like" value="run" /> 跑步</label> <label><input type="checkbox" name="like" value="swiming" /> 游泳</label> <!-- input類型為checkbox定義了單選框 --> </p> <p> <label>照片：</label> <input type="file" name="person_pic"> <!-- input類型為file定義上傳照片或文件等資源 --> </p> <p> <label>個人描述：</label> <textarea name="about"></textarea> <!-- textarea定義多行文本輸入 --> </p> <p> <label>籍貫：</label> <select name="site"> <!-- select定義下拉列表選擇 --> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <!-- input類型為submit定義提交按鈕 還可以用圖片控件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如： <input type="image" src="xxx.gif"> --> <input type="reset" name="" value="重置"> <!-- input類型為reset定義重置按鈕 --> </p> </form> input表單項中的屬性，可以提供 *type屬性:表示表單項的類型:值如下: text:單行文本框 password:密碼輸入框 checkbox:多選框 注意要提供value值 radio:單選框 注意要提供value值 file:文件上傳選擇框 button:普通按鈕 submit:提交按鈕 image:圖片提交按鈕 reset:重置按鈕, 還原到開始\(第一次打開時\)的效果 hidden:主表單隱藏域,要是和表單一塊提交的信息,但是不需要用戶修改 *name屬性:表單項名,用於存儲內容值的 *value屬性:輸入的值\(默認指定值\) size屬性:輸入框的寬度值 maxlength屬性:輸入框的輸入內容的最大長度 readonly屬性:對輸入框只讀屬性 *disabled屬性:禁用屬性 *checked屬性:對選擇框指定默認選項 src和alt是為圖片按鈕設置的 注意：reset重置按鈕是將表單數據恢復到第一次打開時的狀態，並不是清空 image圖片按鈕，默認具有提交表單功能。 placeholder 屬性規定可描述輸入字段預期值的簡短的提示信息（比如：一個樣本值或者預期格式的短描述）。 該提示會在用戶輸入值之前顯示在輸入字段中。 注意：placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。
8 span元素
1 <span>標簽 作用：標簽被用來組合文檔中的行內元素。 在行內定義一個區域，也就是一行內可以被<span>划分成好幾個區域，從而實現某種特定效果。 <span>本身沒有任何屬性。 提示：請使用 <span> 來組合行內元素，以便通過樣式來格式化它們。 注釋：span 沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。 (1) span 是行內元素，SPAN 的前后是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。 ＜span＞SPAN標記有一個重要而實用的特性，即它什么事也不會做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。 (2) span是一個in-line元素，翻譯為內聯元素。它的特點是不會獨占一行。它和塊（block）級元素是相對的，塊級元素是獨占一行的。 比如你在網頁中的某個位置加入一些文字，最好用span將文字包含起來，這樣你在想取到這段文字的時候，就可以先取到該span,然后再取span.innerhtml來得到文字 。 2 DIV與SPAN的區別與特點 <span>在CSS定義中屬於一個行內元素，而<div>是塊級元素，我們可能通俗地理解為<div>為大容器，大容器當然可以放一個小容器了,<span>就是小容器。 (1) div占用的位置是一行，span占用的是內容有多寬就占用多寬的空間距離 (2) <span>在<div>中一般都是用於顯示一段文本，<span默認是橫排的，而<div>默認是豎排的 用<span>有時候是為了使頁面元素看起來規整，沒有什么特別的用處。 代碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>這是我第一個網頁</title> </head> <body> <div>div標簽是占滿一行的</div> <span>span標簽包裹內容1</span> <span>span標簽包裹內容2</span> </body> </html> 3 span標簽和p標簽的區別 (1) 一般標簽都有語義,p標簽是指一個段落，而且默認是一個塊級元素，span是一個行內元素的代表，沒有什么意思，一般可以放文字等行內元素 (2) <p>標簽是一個段落結束的標志，我們知道段落與段落中間會留出一行文字的空白，這樣才能顯出兩個段落了。也就是說<p>可以放在段落結束的地方 也表示換行的意思. (3) <span>標簽主要是指一個塊，就是說指定的這一塊內容是一起的，不可分割，就算換行的時候也不 會出現空白的情況。 4 如何定義span標簽的寬度和高度 因為span屬於內聯元素，而內聯元素是忽略寬度和高度的，明白了這一點解決就很簡單了，解決的辦法就是利用css將span變為盒裝元素即可。 將內聯元素定義為盒裝元素的方法有兩種： (1) 直接使用顯示屬性display將其定義為盒裝元素； display:block; (2) 使用浮動屬性float將其自動定義為盒裝元素； float:left; 在css屬性里定義以上任意一個屬性就可以使span擁有高度和寬度屬性。
9 div元素
HTML <div> 標簽 1 定義和用法： <div> 可定義文檔中的分區或節（division/section）。 <div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。 如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。 用法： <div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。 不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。 可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。 (1) HTML 與 XHTML 之間的差異 在 HTML 4.01 中，div 元素的 "align" 屬性不被贊成使用。 在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 屬性不被支持。 (2) HTML 4.01 與 HTML 5 之間的差異 HTML 4.01 中的 "align" 是不贊成使用的，在 HTML 5 中不支持該屬性。 2 提示和注釋： 注釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個換行符。 提示：請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。 3 div的屬性 主要設置如下： overflow（溢出控制）：visible（默認，可見）、auto（自動）、scroll（顯示滾動條）； width（寬度）：數值； height（高度）：數值； color（字體顏色）：色彩代碼； font-size（字體大小）：數值； line-height（行高）：數值； border（邊框）：寬度、類型和顏色，類型主要支持以下幾種：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； font-weight（字體粗細）：normal、bold、bolder、lighter； font-family（字體類型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑體、楷體_GB2312、隸書、宋體、幼圓； background（背景顏色）：色彩代碼； scrollbar-base-color, scrollbar-face-color, scrollbar-track-color, scrollbar -darkshadow-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar -3dlight-color, scrollbar-arrow-color（滾動條各部分的顏色）：色彩代碼； filter:chroma(COLOR=轉換成透明的顏色)（chroma過濾器）：色彩代碼，該顏色將轉換成透明效果； word-break（斷字）：normal（默認，正常斷字）、keep-all（嚴格不斷字）、break-all（嚴格斷字）； direction（文字方向）：ltr（默認，從左向右）、rtl（從右向左）。 4 HTML中的Div分區屬性 (1) 基本屬性：width, height, left, top, background-color（當設置為transparent時表示透明） (2) 定位屬性：position: absolute/relative absolute時，位置固定；relative時，位置會隨着內容的實際情況進行浮動 (3) 顯示屬性：display: block/none block為默認狀態，表示顯示；none為隱藏 (4) 優先屬性：z-index:n n表示一個整數（正負均可），有多個Div時n越大，則越靠前顯示； z-index可以理解為z軸的坐標（x,y軸控制左右、上下方位，z軸控制層疊div的前后方位） 只有用絕對定位（position:absolute）時，屬性z-index才起作用； 未設置絕對定位（position:absolute）的div，其z-index永遠為0； 未設定優先屬性（z-index）的div，按照聲明的順序層疊，后聲明的蓋住先聲明的，如果有兩個Div屬於父子關系，則子div覆蓋父div； (5) 透明屬性：opacity:0.3;（firefox專用）； filter:alpha(opacity=30)（IE專用） 兩者一起用的時候就將兩種主流瀏覽器都兼容了；上面例子是將Div的透明度設置為30％，可以看出兩者的設置稍有不同；Div的文本與背景色均能被透明化！ 5 如何讓DIV標簽居中顯示？ 在經典論壇上面搜了些老貼子看，大都說的是用text-align:center加在BODY中，然后DIV標簽相對於BODY而居中對齊。 這樣有個缺點就是文章中所有的對象都會居中對齊（包括文字、圖像等），這樣文檔中要靠左的對象就需要另加代碼，這方法不行。 而如果直接加上：width:200PX;margin:0 atuo;，這樣的話只是在FireFox瀏覽器中會居中對齊，而IE里面就不行。 搞了大半天，問題又回到標准上來了，在學習網頁標准的時候，首先就是了解DOCTYPE的設置，因為這是至關重要的。 而DIV居中的問題所在，就是你的DOCTYPE部份： 程序代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 當你加入這句聲明以后： 程序代碼 .div-1{ width:200px; margin:0 auto; } margin屬性用於控制對象的上/右/下/左4個方向的外邊距,使用兩個參數時,第一個參數表示為上下邊距,第二個參數表示為左右邊距.除了直接使用數值外,margin還支持一個值叫auto,auto值是讓瀏覽器自動判斷邊距. 這樣的語句在IE和FF瀏覽器中都可以讓DIV居中。 呵呵，開始搞了半天，甚至想用論壇上說的JS方法，后來找到一個貼子，才搞懂原來是DOCTYPE的問題。 PS：而有些朋友在做某些網頁的時候，是不能加這句聲明的，嘿，這時候就只能用文章開頭所說的在BODY中加入text-align:center的方法了。 6 如何隱藏div標簽 document.getElementById("DIV的ID").style.display="none";//隱藏 document.getElementById("DIV的ID").style.display="block";//顯示
10 框架
一 框架 一個瀏覽器文檔窗口只能顯示一個網頁文件，但是可以通過使用框架，在同一個瀏覽器窗口中顯示不止一個頁面。 使用框架的頁面主要包含兩個部分，一個是框架集，另一個就是具體的框架文件。 框架多用於網站后台或者內網系統的布局。 使用框架的壞處： (1) 開發人員必須同時跟蹤更多的HTML文檔 (2) 很難打印整張頁面 1 框架集（<frameset></frameset>）： (1)框架集就是用來定義這一HTML文件為框架模式，並設定視窗如何分割的文件。通俗一點地說，框架集就是存放框架結構的文件，也是訪問框架文件的入口文件。 如果網頁由左右二個框架組成，那么除了左右二個網頁文件之外，還有一個總的框架集文件。 在使用框架的頁面中，<body>主體標記被框架標記<frameset>所代替。而對於框架頁面中包含的每一個框架，都是通過<frame>標記來定義的。 (2)rows屬性：水平分割窗口。 水平分割窗口是將頁面沿水平方向切割，也就是將頁面分成上下排列的多個窗口。 rows中可以取多個值，每個值表示一個框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。 但是要注意的是，一般設定了幾個rows的值，就需要有幾個框架，也就是需要有相應數量的<frame>參數。 框架集rows屬性代碼： <html> <head> <title>水平分割窗口的效果</title> </head> <frameset rows="30%,70%"> <frame> <frame> </frameset> </html> (3) cols屬性：垂直分割窗口。 垂直分割窗口就是將頁面沿垂直方向分割成多個窗口，也就是將頁面分成左右排列的多個窗口。 cols中可以取多個值，每個值表示一個框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。 與水平分割窗口向同，一般設定了幾個cols的值，就需要有幾個框架，也就是有幾個<frame>參數。 框架集cols屬性代碼： <html> <head> <title>垂直分割窗口的效果</title> </head> <frameset cols="20%,55%,25%"> <frame> <frame> <frame> </frameset> </html> (4) frameborder屬性：設置邊框。 在默認情況下，框架窗口的四周有一條邊框線，通過frameborder參數可以調整邊框線的顯示情況。 語法為： <frameset frameborder="1">或者<frame frameborder="0">。 frameborder的取值只能為0或1。如果取值為0，那么邊框線將會被隱藏；如果取值為1，邊框線將會顯示。 在frameset中設置將會對整個框架有效，在frame中設置則只對當前這個框架有效。 框架集frameborder屬性代碼： <html> <head> <title>設置框架窗口的邊框顯示效果</title> </head> <frameset rows="20%,55%,25%"> <frame frameborder="1"> <frameset cols="35%,65%" frameborder="0"> <frame > <frame> </frameset> <frame frameborder="0"> </frameset> </html> (5) framespacing屬性：框架的邊框寬度。 框架的邊框寬度在默認情況下是1像素，通過參數framespacing可以調整其大小。 語法： <frameset framespacing="邊框寬度"> 說明：邊框寬度就是在頁面中各個邊框之間的線條寬度，以像素為單位。而這一參數只能對框架集使用，對單個框架無效。 框架集framespacing屬性代碼： <html> <head> <title>設置框架的邊框寬度</title> </head> <frameset rows="30%,70%" framespacing="10"> <frame> <frameset cols="20%,55%,25%" framespacing="30"> <frame> <frame> <frame> </frameset> </frameset> </html> (6) bordercolor屬性： 框架的邊框顏色。使用參數bordercolor可以設置框架集的邊框顏色。 語法： <frameset bordercolor="顏色代碼"> 說明：該參數同樣只對整個框架集有效，對於單個框架無效。 框架集bordercolor屬性代碼 <html> <head> <title>設置框架的邊框顏色</title> </head> <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF"> <frame> <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF"> <frame> <frame> <frame> </frameset> </frameset> </html> 2 框架（<frame>）和src屬性。 框架結構中的各個頁面都是一個單獨的文字，而這些文件是通過src參數進行設置的。 語法： <frame src="頁面源文件地址"> 說明：頁面文件是框架頁面的具體內容的所在，對於沒有設置源文件的框架，只是空白頁面，是沒有任何作用的。 頁面的源文件可以是正常的HTML文件，也可以是一個圖片或者其他的文件。 框架frame和src屬性代碼 <html> <head> <title>設置頁面源文件</title> </head> <frameset rows="30%,70%"> <frame src="pic01.gif"> <frame src="src01.html"> </frameset> </html> 3 <noframes>標簽 <noframes></noframes>標簽用於瀏覽器不支持框架時顯示頁面內容。 noframes代碼 <html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的瀏覽器無法處理框架！</body> </noframes> </frameset> </html> 二 浮動框架（<iframe>） 浮動框架是一種較為特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個頁面並不是框架頁面，但是卻包含一個框架窗口。在框架窗口內顯示相應的頁面內容。浮動框架又叫內聯框架（inline frame），並且因此而得名。 語法： <iframe src="頁面源文件"></iframe> 說明：與普通框架結構類似，浮動框架也可以設置很多參數，如 name、scrolling、frameborder等。 但是與普通框架相比，浮動框架中不包含framespacing和bordercolor參數。 src屬性：浮動框架中最基本的參數就是src，它用來設置浮動框架頁面的源文件地址，也是浮動框架頁面必需的參數。因為只有設置了源文件的內容，浮動框架才有意義。 語法：<iframe src="頁面源文件"> width和height屬性：在普通框架結構中，由於框架就是整個瀏覽器窗口，因此不需要設置其大小。但是在浮動框架中，是插入到普通HTML頁面中的，可以調整整個框架的大小。 語法： <iframe src= src="浮動框架頁面源文件" width="頁面寬度" height="頁面高度">，頁面的寬度和高度值都以像素為單位。 浮動框架iframe代碼 <html> <body> <iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可見的。</p> </body> </html> 三 框架布局的示例 <html> <head> <title>框架主頁面 </title> </head> <frameset rows="20%,*"><!--框架集，控件文件的容器--> <frame name="topFame" src="3.html" noresize/> <frameset cols="240px,*"> <frame name="leftFrame" src="1.html"/> <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/> </frameset> <noframes> <!--noframes標記當中可以包含body標記--> <body> 該頁面不支持frameset標簽！ </body> </noframes> </frameset> </html> 四 鏈接如何跳出框架 在網站后台布局中，框架用得比較多。在很多時候，我們需要跳出框架，重新加載頁面。 那么鏈接如何才能跳出框架呢？其實，只需要指定<a></a>標簽的target屬性為"_top"即可實現。下面是一個簡單的例子。 代碼 <html> <body> <p>被鎖在框架中了嗎？</p> <a href="/index.html" target="_top">請點擊這里！</a> </body> </html>
參考來源：
http://www.cnblogs.com/linhaifeng/articles/8982967.html
https://www.cnblogs.com/yuanchenqi/articles/5603871.html
https://www.cnblogs.com/linu/p/8150499.html