Html結構解析

時間 2019-11-11

標籤 html 結構解析欄目 HTML 简体版

原文原文鏈接

1、html文檔樹狀圖結構php

　　1）html樹狀圖css

2）html代碼解釋樹形圖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結束-->

View Code

二 Html文檔聲明 html5

　　<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。java

　　<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。python

DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。linux

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。web

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">

View Code

下面對上圖中的三種小規範進行解釋：

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表示「元」。「元」配置，就是表示基本的配置項目。

#一、指定字符集,charset就是charactor set（即「字符集」）
    瀏覽器就是經過meta來看網頁是什麼字符集的。好比你保存的時候，meta寫的和聲明的不匹配，那麼瀏覽器就是亂碼。
    <meta charset="gbk">

#二、頁面描述,name即「名字」，content即「內容」。只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，
    <meta name="Description" content="具體描述。。。">

#三、關鍵字：就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。有助於搜索引擎SEC優化，。
    <meta name="Keywords" content="網易，郵箱，遊戲，新聞">

#四、重定向
    <meta http-equiv="refresh" content="3,http://www.baidu.com">

#五、頁面刷新
    <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>

View Code

2 非meta標籤

#一、定義標題
<title>百度一下，你就知道</title>

#二、加載網頁logo
 <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">  
 
#三、引入外部css文件
 <link rel="stylesheet" href="my.css">
 
#四、引入本地css樣式
<style>       
        p {
            color: rebeccapurple;
          }
    </style>
    
#五、引入文件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>

View Code

4、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裏面只能放文字、圖片、表單元素。其餘的一概不能放。

View Code

(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 - 客戶端腳本

View Code

(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 都接受在打開的標籤內部來關閉標籤的作法。

View Code

(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中用於打印一個數組時使用。

View Code

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>

View Code

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://開頭的東西，這個是徹底錯誤的！

View Code

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裏面至關於放的就是純文字。

View Code

5 列表

HTML中列表中共有三種：有序列表、無序列表和定義列表。

(1) ol有序列表

一、 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。

View Code

(2) ul無序列表

二、    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。

View Code

應用：

場景1 —— 導航條：

場景2 —— li裏面放置的內容可能不少：

(3) dl定義列表

三、    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。

View Code

應用：

場景一

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

View Code

場景二

備註：

　　從語義上來說，三組標籤分別對應不一樣具備含義的列表：
　　無序列表適合成員之間無級別順序關係的情形，
　　有序列表適合各項目之間存在順序關係的情形，
　　定義列表用於一個術語名對應多重定義或者多個術語名同一個給出的定義，也能夠只有術語名稱或只有定義，也就是說<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來作總體頁面的佈局，佈局的技巧概括爲以下幾點： 
    一、定義表格寬高，將border、cellpadding、cellspacing所有設置爲0 
    二、單元格里面嵌套表格 
    三、單元格中的元素和嵌套的表格用align和valign設置對齊方式 
    四、經過屬性或者css樣式設置單元格中元素的樣式

View Code

(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>

View Code

(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>

View Code

(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>

View Code

(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>

View Code

　　如圖

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段落標籤。

View Code

(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>

View Code

實例解析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。

View Code

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擁有高度和寬度屬性。

View Code

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、仿宋_GB23十二、黑體、楷體_GB23十二、隸書、宋體、幼圓；
　　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";//顯示

View Code

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>