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>

View Code

参考来源：

http://www.cnblogs.com/linhaifeng/articles/8982967.html

https://www.cnblogs.com/yuanchenqi/articles/5603871.html

https://www.cnblogs.com/linu/p/8150499.html