weixin_30527143
weixin_30527143

Html结构解析

一、html文档树状图结构

　　1）html树状图

Html结构解析_第1张图片

2）html代码解释树形图

 

DOCTYPE html>
    

<html lang="en">
    

<head>
    

    <meta charset="UTF-8">
        
    <title>Titletitle>
        
    <link>
        
        
        
    <style>style>
        
    <script>script>
        
    
head>
    

<body>
    


    
    
    <a>a>
        
    <img>
        
    <input> 
        
    <label>label>
        
    <span>span>
        
    <select>select>
                


    

    <h1>h1>
        
    <p>p>
        
    <hr/> 
        
    <ol>ol>
        
    <ul>ul>
        
    <form>form>
        
    <fieldset>fieldset> 
        
    <div>div> 
        


    
    
    <button>button>
        
    <iframe>iframe>
        
    <del>del>
        
    
    

    
    
body>
    

html>
View Code

 

二    Html文档声明 

　　 声明必须是 HTML 文档的第一行，位于 标签之前。

　　 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

       DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

       在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

       HTML5 不基于 SGML，所以不需要引用 DTD。

       注释： 声明没有结束标签。

       提示： 声明对大小写不敏感。

       提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

1     html5       

DOCTYPE html>

2     html4.01


DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">


该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">


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



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
View Code

 

Html结构解析_第2张图片

      下面对上图中的三种小规范进行解释：

    • strict：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
      比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
      那怎么给文本增加下划线呢？今后的css将使用css属性来解决。
      那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

    • Transitional：表示“普通的”，这种模式就是没有一些别的规范。

    • Frameset：表示“框架”，在框架的页面使用。

三    head头部

       头部标签都放在之间，包括：

　　：指定整个网页的标题，在浏览器最上方显示。<br>　　<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。<br> 　　　　　　 base会对Html文档中所有URL产生作用，慎用！<br>　　<meta>： 提供有关页面的基本信息<br>　　<link>： 定义文档与外部资源的关系。</p> <p>   1  meta标签</p> <p>       meta表示“元”。“元”配置，就是表示基本的配置项目。</p> <div class="cnblogs_code"> <img id="code_img_closed_a54c349e-da2d-4769-9709-05f0dfe3a308" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_a54c349e-da2d-4769-9709-05f0dfe3a308" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_a54c349e-da2d-4769-9709-05f0dfe3a308" class="cnblogs_code_hide"> <pre><span style="color:#000000;">#1、指定字符集,charset就是charactor set（即“字符集”） 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="gbk"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #2、页面描述,name即“名字”，content即“内容”。只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句， </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="Description"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="具体描述。。。"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #3、关键字：就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。有助于搜索引擎SEC优化，。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="Keywords"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="网易，邮箱，游戏，新闻"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #4、重定向 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="refresh"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="3,http://www.baidu.com"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #5、页面刷新 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="refresh"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="3"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> ############################ </span><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="Description"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="具体描述。。。"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="Keywords"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="python,linux,go,IT培训"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="refresh"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="3;https://www.baidu.com"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>我是段落<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>   2  非meta标签</p> <div class="cnblogs_code"> <img id="code_img_closed_f5f6d737-fa45-473d-80ef-947b41a0bfa8" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_f5f6d737-fa45-473d-80ef-947b41a0bfa8" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_f5f6d737-fa45-473d-80ef-947b41a0bfa8" class="cnblogs_code_hide"> <pre><span style="color:#000000;">#1、定义标题 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>百度一下，你就知道<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #2、加载网页logo </span><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="shortcut icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://www.baidu.com/favicon.ico"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/x-icon"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #3、引入外部css文件 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="stylesheet"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="my.css"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #4、引入本地css样式 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">style</span><span style="color:#0000ff;">></span><span style="color:#800000;"> p </span><span style="color:#000000;">{</span><span style="color:#ff0000;"> color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> rebeccapurple</span><span style="color:#000000;">;</span> <span style="color:#000000;">}</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">style</span><span style="color:#0000ff;">></span><span style="color:#000000;"> #5、引入文件js，不建议在head标签引用js,需在body标签最后引用 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="hello.js"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span><span style="color:#000000;"> ############################ </span><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>百度一下，你就知道<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="shortcut icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://www.baidu.com/favicon.ico"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/x-icon"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="stylesheet"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="my.css"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">style</span><span style="color:#0000ff;">></span><span style="color:#800000;"> p </span><span style="color:#000000;">{</span><span style="color:#ff0000;"> color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> rebeccapurple</span><span style="color:#000000;">;</span> <span style="color:#000000;">}</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">style</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="hello.js"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>我是段落<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>四、body部分</p> <p><code>  <body></code>标签的属性</p> <ul> <li><code>bgcolor</code>：设置整个网页的背景颜色。</li> <li><code>background</code>：设置整个网页的背景图片。</li> <li><code>text</code>：设置网页中的文本颜色。</li> <li><code>leftmargin</code>：网页的左边距。IE浏览器默认是8个像素。</li> <li><code>topmargin</code>：网页的上边距。</li> <li><code>rightmargin</code>：网页的右边距。</li> <li><code>bottommargin</code>：网页的下边距。</li> </ul> <p><code>  <body></code>标签另外还有一些属性：</p> <p><a href="http://img.e-com-net.com/image/info8/429a8271f43844c0b3358c3419ddcdb9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/429a8271f43844c0b3358c3419ddcdb9.png" alt="Html结构解析_第3张图片" width="460" height="177" style="border:1px solid black;"></a></p> <p>1     排版标签</p> <p>(1)  分类图示</p> <p><a href="http://img.e-com-net.com/image/info8/ea31f4821e5146ccb28c20e221d27311.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea31f4821e5146ccb28c20e221d27311.jpg" alt="Html结构解析_第4张图片" width="600" height="541" style="border:1px solid black;"></a></p> <p>(2)  文本级和容器级</p> <div class="cnblogs_code"> <img id="code_img_closed_f21d01a9-7d1c-4d23-8ab0-d7a479216e33" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_f21d01a9-7d1c-4d23-8ab0-d7a479216e33" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_f21d01a9-7d1c-4d23-8ab0-d7a479216e33" class="cnblogs_code_hide"> <pre><span style="color:#000000;">Html将所有标签分为容器级标签和文本级标签 1 容器标签 容器级的标签里面可以放置任何东西，可以简单的理解为能嵌套其它所有标签的标签。 常见容器级的标签: </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>~<span style="color:#0000ff;"><</span><span style="color:#800000;">h6</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 等。 2 文本标签 文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。 常见文本级的标签:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">strong</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">i</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">u</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">em</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ins</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">del</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 等。 3 Html和CSS对应关系 CSS中的块级元素基本与Html中的容器级标签对应，除了P标签 CSS中的行内元素基本与Html中的文本级标签对应，除了P标签 注：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>(3)  行内元素和块级元素</p> <div class="cnblogs_code"> <img id="code_img_closed_acb0015e-3d14-42ae-871f-fe07429a42c8" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_acb0015e-3d14-42ae-871f-fe07429a42c8" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_acb0015e-3d14-42ae-871f-fe07429a42c8" class="cnblogs_code_hide"> <pre><span style="color:#000000;">1 div和span的特点 语义： div的语义是division“分割”； span的语义就是span“范围、跨度”。 类型： div 元素的默认 display 属性值为 “block”，称为“块级” 元素。 span 元素的默认 display 属性值为“inline”，称为“行内” 元素。 根据 CSS 规范的规定，每一个网页元素都有一个 display 属性，用于确定该元素的类型，每一个元素都有默认的 display 属性值。 空间： div 这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子； span这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 区别： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span>是不换行的，而<span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;">是换行的。 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 - 客户端脚本</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> (4)  换行标签<p>和<br></p> <div class="cnblogs_code"> <img id="code_img_closed_7bd89fda-4805-4bb5-b8c4-f9face7bb109" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_7bd89fda-4805-4bb5-b8c4-f9face7bb109" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_7bd89fda-4805-4bb5-b8c4-f9face7bb109" class="cnblogs_code_hide"> <pre>1 <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#000000;">段落标签 段落，是英语paragraph“段落”缩写。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>This is a paragraph<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>This is another paragraph<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 属性： align="属性值"：对齐方式。属性值包括left center right。 2 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;">换行标签（已废弃） 当你打算结束一行，而又不想开始一个新段落时，</span><span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签就派上用场了。 无论你将它置于何处，</span><span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签都会产生一个强制的换行。 This </span><span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span> is a para<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;">graph with line breaks 3 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>标签和<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span>标签的区别：<span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>标签会在段落的前后自动插入一个空行。而<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span>标签没有空行，而且<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签没有属性。 注意：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span> 没有结束标签，把<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span>标签写为 <span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。</pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> (5)  其他标签</p> <div class="cnblogs_code"> <img id="code_img_closed_c3cb73e5-5e22-4efc-88d2-dd5f3d7c28e4" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_c3cb73e5-5e22-4efc-88d2-dd5f3d7c28e4" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_c3cb73e5-5e22-4efc-88d2-dd5f3d7c28e4" class="cnblogs_code_hide"> <pre><span style="color:#000000;">1 注释标签 </span><span style="color:#008000;"><!--</span><span style="color:#008000;"> 注释 </span><span style="color:#008000;">--></span><span style="color:#000000;"> 2 水平线标签</span><span style="color:#0000ff;"><</span><span style="color:#800000;">hr</span><span style="color:#0000ff;">></span><span style="color:#000000;">（已废弃） 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 属性： align="属性值"：设定线条置放位置。属性值可选择：left right center。 size="2"：设定线条粗细。以像素为单位，内定为2。 width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。 color="#0000FF"：设置线条颜色。 noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。 3 内容居中标签 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">center</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 H5不建议使用center。 4 预定义（预格式化）标签：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行） 说明：真正排网页过程中，</span><span style="color:#0000ff;"><</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span>标签几乎用不着。但在PHP中用于打印一个数组时使用。</pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>2     常用标签</p> <div class="cnblogs_code"> <img id="code_img_closed_3c747408-a44d-4f03-ae92-ce1ca87ef2cd" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_3c747408-a44d-4f03-ae92-ce1ca87ef2cd" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_3c747408-a44d-4f03-ae92-ce1ca87ef2cd" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 这是一个注释 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1 </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">="background-color: blueviolet"</span><span style="color:#0000ff;">></span>hello1<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">块级标签，控制一整行</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">="background-color: darkred;color: white"</span><span style="color:#0000ff;">></span>wwwwww<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">内联标签，只控制有字体的地方</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h2</span><span style="color:#0000ff;">></span>这是个标题<span style="color:#0000ff;"></</span><span style="color:#800000;">h2</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">自动换行</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span>hhhhhhhhhhh <span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">></span><span style="color:#000000;"> bbbbbbbbb </span><span style="color:#008000;"><!--</span><span style="color:#008000;"> br 换行 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>这是一个段落，增加空行开始<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>这是一个段落，增加空行结束<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span>加粗hello<span style="color:#0000ff;"></</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 行内标签，加黑加粗 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">strong</span><span style="color:#0000ff;">></span>加粗hello strong<span style="color:#0000ff;"></</span><span style="color:#800000;">strong</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">font </span><span style="color:#ff0000;">color</span><span style="color:#0000ff;">="red"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="10px"</span><span style="color:#0000ff;">></span>我是哈哈哈<span style="color:#0000ff;"></</span><span style="color:#800000;">font</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 修改文字大小，颜色。被废弃的标签 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">strike</span><span style="color:#0000ff;">></span>内容中加横杠<span style="color:#0000ff;"></</span><span style="color:#800000;">strike</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 为文字加上一条中线. </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">em</span><span style="color:#0000ff;">></span>变成斜体<span style="color:#0000ff;"></</span><span style="color:#800000;">em</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">sup</span><span style="color:#0000ff;">></span>上标<span style="color:#0000ff;"></</span><span style="color:#800000;">sup</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 上角标和下角表. </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">sub</span><span style="color:#0000ff;">></span>下标<span style="color:#0000ff;"></</span><span style="color:#800000;">sub</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">hr</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 水平线 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>3     图片</p> <div class="cnblogs_code"> <img id="code_img_closed_a86b3aef-8b31-49fe-8b16-190d03cc3ae2" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_a86b3aef-8b31-49fe-8b16-190d03cc3ae2" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_a86b3aef-8b31-49fe-8b16-190d03cc3ae2" class="cnblogs_code_hide"> <pre> 1 <span style="color:#0000ff;"><</span><span style="color:#800000;">img</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 代表的就是一张图片,img 是image“图片”的简写。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 是空标签，它只包含属性，并且没有闭合标签。也称为单边标记。 语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="url"</span> <span style="color:#0000ff;">/></span><span style="color:#000000;"> 能插入的图片类型： 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。 不能往网页中插入的图片格式是：psd、ai 注：HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。 属性： src: 要显示图片的路径。src 指 "source"。 src的值是图像的 URL 地址。 URL 指存储图像的位置。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="图片地址"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　　　alt: 用来为图像定义一串预备的可替换的文本。 通常用于图片没有加载成功时的提示。 例: </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="boat.gif"</span><span style="color:#ff0000;"> alt</span><span style="color:#0000ff;">="Big Boat"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　　　title: 鼠标悬浮时的提示信息. 提示性文本。公有属性。也就是鼠标悬停时出现的文本。 　　　　width: 图片的宽度 　　　 height:图片的高度 (宽高两个属性只用一个会自动等比缩放.) align：指图片的水平对齐方式， 属性值可以是：left、center、right border：给图片加边框（描边），单位是像素，边框的颜色是黑色 hspace：指图片左右的边距 vspace：指图片上下的边距 注意事项： （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。 2 相对路径 相对路径：相对当前页面所在的路径。 两个标记 . 和 .. 分表代表当前目录和父路径。 例： </span><span style="color:#008000;"><!--</span><span style="color:#008000;"> 当前目录中的图片 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="2.jpg"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">=".\2.jpg"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 上一级目录中的图片 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="..\2.jpg"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 3 绝对路径 绝对路径包括以下两种： (1)以盘符开始的绝对路径。举例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="C:\Users\smyhvae\Desktop\html\images\1.jpg"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (2)网络路径。举例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="http://img.smyhvae.com/2016040102.jpg"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 4 相对路径和绝对路径的总结 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。 问题：我的网页在C盘，图片却在D盘，能不能插入呢？ 答案： 用相对路径不能，用绝对路径也不能。 总结： 无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。 相对路径，就是../ image/ 这种路径。从自己出发，找到别人； 绝对路径，就是http://开头的路径。 绝对不允许使用file://开头的东西，这个是完全错误的！</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>4     超链接</p> <div class="cnblogs_code"> <img id="code_img_closed_531df4bb-5d64-45ea-9a5f-56215a8d1f10" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_531df4bb-5d64-45ea-9a5f-56215a8d1f10" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_531df4bb-5d64-45ea-9a5f-56215a8d1f10" class="cnblogs_code_hide"> <pre><span style="color:#000000;">超链接: 1 超链接</span><span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签 定义：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签：定义超链接，用于从一张页面链接到另一张页面。 a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签的使用方式： 通过使用 href 属性 - 创建指向另一个文档的链接 通过使用 name 属性 - 创建文档内的书签 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签属性： href：要连接的资源路径 是英语hypertext reference超文本地址的缩写。 格式如下: href="http://www.baidu.com" title：鼠标悬浮出现的内容 例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="09_img.html"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="很好看哦"</span><span style="color:#0000ff;">></span>结婚照<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> target:告诉浏览器用什么方式来打开目标页面。 _self：在同一个网页中显示（默认值） _blank：在新的窗口打开超链接 _parent：在父窗口中显示 _top：在顶级窗口中显示 　　　　　　 name:：设置一个锚点的名称。 主要用于定义一个页面的书签. 2 超链接的形式： (1) 外部链接：链接到外部文件。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="02页面.html"</span><span style="color:#0000ff;">></span>点击进入另外一个文件<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="http://www.baidu.com"</span><span style="color:#ff0000;"> target</span><span style="color:#0000ff;">="_blank"</span><span style="color:#0000ff;">></span>百度<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (2) 锚链接： 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。 比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。 首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。 例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="name1"</span><span style="color:#0000ff;">></span>顶部<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">这行代码表示，顶部这个锚的名字是name1</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#name1"</span><span style="color:#0000ff;">></span>回到顶部<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">点击时将回到顶部</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (3) 邮件链接： 例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="mailto:smyhvae@163.com"</span><span style="color:#0000ff;">></span>点击进入我的邮箱<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (4) 图片超链接 3 注意： (1) 分清楚img和a标签的各自的属性 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="1.jpg"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="1.html"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (2) a是一个文本级的标签 比如一个段落中的所有文字都能够被点击，那么应该是p包裹a： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span>段落段落段落段落段落段落<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 而不是a包裹p： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 段落段落段落段落段落段落 </span><span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;"> a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>5     列表</p> <p>HTML中列表中共有三种：有序列表、无序列表和定义列表。</p> <p>(1)  ol有序列表</p> <div class="cnblogs_code"> <img id="code_img_closed_205e1779-2900-4a07-8399-9e1d4a54fb4c" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_205e1779-2900-4a07-8399-9e1d4a54fb4c" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_205e1779-2900-4a07-8399-9e1d4a54fb4c" class="cnblogs_code_hide"> <pre><span style="color:#000000;">1、 ol有序列表 ol:Ordered List，有序列表。 有序列表是一列使用数字进行标记的项目，它使用</span><span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>包含于<span style="color:#0000ff;"><</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签（ordered lists）内。 语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>开始部分<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>次要部分<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>结尾部分<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 属性： type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">ol </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="1"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>呵呵<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>呵呵<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>呵呵<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ol </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="a"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>嘿嘿<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>嘿嘿<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>呵呵<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ol </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="i"</span><span style="color:#ff0000;"> start</span><span style="color:#0000ff;">="4"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>哈哈<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>哈哈<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>哈哈<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ol </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="I"</span><span style="color:#ff0000;"> start</span><span style="color:#0000ff;">="10"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>么么<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>么么<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>么么<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ol</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 注：和无序列表一样，有序列表也是可以嵌套。 ol和ul就是语义不一样，使用方法都是一样的。 ol里面只能有li，li必须被ol包裹。li是容器级。 ol这个用的不多，如果想表达顺序，一般用ul。 </span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>(2)  ul无序列表</p> <div class="cnblogs_code"> <img id="code_img_closed_ee7f6d64-5122-4d72-bf04-b44236d62fe6" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_ee7f6d64-5122-4d72-bf04-b44236d62fe6" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_ee7f6d64-5122-4d72-bf04-b44236d62fe6" class="cnblogs_code_hide"> <pre><span style="color:#000000;">2、 ul无序列表 ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思 无序列表是一组使用黑点状进行标记的项目，它使用</span><span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>包含在<span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签（unordered lists）内； </span><span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>关于主题<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>关于形式<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>关于内容<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 注意： li不能单独存在，必须包裹在ul里面；反过来说，ul的“后代”不能是别的东西，只能有li。 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。 属性： type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。 不光是</span><span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>标签有type属性，<span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>里面的<span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签也有type属性（虽然说这种写法很少见）。 嵌套： 列表之间是可以嵌套的。 例： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span>北京市<span style="color:#0000ff;"></</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>海淀区<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>朝阳区<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>东城区<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span>广州市<span style="color:#0000ff;"></</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>天河区<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>越秀区<span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 注：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>应用：</p> <p>场景1 —— 导航条：</p> <p><a href="http://img.e-com-net.com/image/info8/8163f807d02248ee87507076c8888ea9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8163f807d02248ee87507076c8888ea9.jpg" alt="Html结构解析_第5张图片" width="650" height="309" style="border:1px solid black;"></a></p> <p>场景2 —— li里面放置的内容可能很多：</p> <p><a href="http://img.e-com-net.com/image/info8/15447327b48046d985b1fe448a8c01df.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/15447327b48046d985b1fe448a8c01df.jpg" alt="Html结构解析_第6张图片" width="650" height="360" style="border:1px solid black;"></a></p> <p>(3)  dl定义列表</p> <div class="cnblogs_code"> <img id="code_img_closed_04725cee-780f-4416-b586-56bf91e5c0c9" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_04725cee-780f-4416-b586-56bf91e5c0c9" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_04725cee-780f-4416-b586-56bf91e5c0c9" class="cnblogs_code_hide"> <pre><span style="color:#000000;">3、 dl定义列表 dl：definition list，定义列表。 dt：definition title 列表的标题，这个标签是必须的。 dd：definition description 列表的列表项，如果不需要它，可以不加。 定义列表语义上表示项目及其注释的组合，它以</span><span style="color:#0000ff;"><</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签（definition lists）开始， 自定义列表项以</span><span style="color:#0000ff;"><</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span><span style="color:#000000;">（definition title）开始， 自定义列表项的定义以</span><span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span><span style="color:#000000;">（definition description）开始。 注：定义列表没有属性。dl的子元素只能是dt和dd。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span>CSS<span style="color:#0000ff;"></</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span>CSS概念<span style="color:#0000ff;"></</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span>CSS应用<span style="color:#0000ff;"></</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span>CSS hacks<span style="color:#0000ff;"></</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义列表表达的语义是两层： (1)是一个列表，列出了几个dd项目 (2)每一个词儿都有自己的描述项。 备注：dd是描述dt的。 定义列表用法非常灵活，可以一个dt配很多dd。</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>应用：</p> <p>场景一</p> <p><a href="http://img.e-com-net.com/image/info8/b9fc2add1f554135916f921566e112a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9fc2add1f554135916f921566e112a8.jpg" alt="Html结构解析_第7张图片" width="650" height="154" style="border:1px solid black;"></a></p> <div class="cnblogs_code"> <img id="code_img_closed_16d098a7-3302-4dbd-ae73-e0642f23659a" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_16d098a7-3302-4dbd-ae73-e0642f23659a" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_16d098a7-3302-4dbd-ae73-e0642f23659a" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span>购物指南<span style="color:#0000ff;"></</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>购物流程<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>会员介绍<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>生活旅行/团购<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>常见问题<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>大家电<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>联系客服<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span>配送方式<span style="color:#0000ff;"></</span><span style="color:#800000;">dt</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>上门自提<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>211限时达<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>配送服务查询<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>配送费收取标准<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>海外配送<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">dd</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">dl</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>场景二</p> <p><a href="http://img.e-com-net.com/image/info8/1eb018029136476a9ffa164483c87017.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1eb018029136476a9ffa164483c87017.jpg" alt="Html结构解析_第8张图片" width="650" height="330" style="border:1px solid black;"></a></p> <p>备注：</p> <p> 　　从语义上来讲，三组标签分别对应不同具有含义的列表：<br> 　　无序列表适合成员之间无级别顺序关系的情形，<br> 　　有序列表适合各项目之间存在顺序关系的情形，<br> 　　定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，也就是说<dt>与<dd>在其中数量不限、对应关系不限。</p> <p>　　<strong>用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）</strong>。</p> <p>6     table表格　</p> <p>　　表格由 <table> 标签来定义。<br>　　每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。<br>　　数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p> <p>　　<a href="http://img.e-com-net.com/image/info8/002cdcc2af1c403aa199bd196b839a19.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/002cdcc2af1c403aa199bd196b839a19.jpg" alt="Html结构解析_第9张图片" width="557" height="334" style="border:1px solid black;"></a></p> <p>(1)   表格语法说明</p> <div class="cnblogs_code"> <img id="code_img_closed_436f5fc5-5288-4adb-9152-8f27c6f5226c" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_436f5fc5-5288-4adb-9152-8f27c6f5226c" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_436f5fc5-5288-4adb-9152-8f27c6f5226c" class="cnblogs_code_hide"> <pre><span style="color:#000000;">一 表格的作用： 表格标签是用来给一堆数据添加表格语义的，其实表格就是数据的一种展现形式，具有一定的规则。 当数据量大的时候，表格这种展现形式被认为是最清晰的一种方式 二 表格的基本组成 表格由标题，表头组，表身组，表尾组构成。 通常情况下， </span><span style="color:#0000ff;"><</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tbody</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tfoot</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 不需要编写。 1 表格标签 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义 HTML 表格。本着表现层与结构层的分离的原则，现在w3c上已经不赞成使用。 2 表格标题 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表格标题，必须写在table标签里面，紧随 table 标签之后。 只能对每个表格定义一个标题，默认居中于表格之上。 3 表头组 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表格的表头 表头组通常存放每列共性的关键信息。 4 表身组 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">tbody</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义格主体（正文） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表格行 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表头 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表格单元 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">col</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签为表格中一个或多个列定义属性值。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">colgroup</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签用于对表格中的列进行组合，以便对其进行格式化。 5 表尾组 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">tfoot</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 定义表格的页脚（脚注或表注） 表身组通常只放一些注释，很少用。 6 基本格式 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 表格的基本结构：一个表格</span><span style="color:#0000ff;"><</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span>是由每行<span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span>组成的，每行是由<span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span><span style="color:#000000;">组成的。 所以说，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。 三 表格标签及标签属性 1 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span><span style="color:#000000;">表格 属性： 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 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span><span style="color:#000000;">行 属性： 　　 align:一行内容的水平对齐方式。 　　 valign:一行内容的垂直对齐方式。 　　 height：行高。 　　 bgcolor：背景色。 　　 background：背景图片。 dir：公有属性，设置这一行单元格内容的排列方式。 3 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span><span style="color:#000000;">单元格 　　内容必须放在单元格里，单元格必须放在行里，行必须放在表格里。 　　 设置单元格行高、列高时，会同时影响对应的行或列。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span><span style="color:#000000;">表头，单元格的内容自动居中、加粗 　　 align:单元格内容的对齐方式。 　　 valign:单元格的内容的垂直对齐方式。 　　 width：单元格宽度。 　　 height：单元格高度。 　　 bgcolor：背景色。 　　 background：背景图片。　　 colspan=“n”　　合并同一行的单元格（后面写代码要减去相对应的列） 设置 colspan = "2"，当前单元格被视为占两格（自左向右） rowspan=“n”　 合并同一列单元格（从第二行开始减去相对应的列） 设置 rowspan = "2"，当前单元格被视为占两格（自上而下） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>：加粗的单元格。相当于<span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> + <span style="color:#0000ff;"><</span><span style="color:#800000;">b</span><span style="color:#0000ff;">></span>属性同<span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span><span style="color:#000000;">：表格的标题。使用时和tr标签并列 属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom 4 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">col</span><span style="color:#0000ff;">></span><span style="color:#000000;">列 colspan:为表格中一个或多个列定义属性值 rowspan:对表格中的列进行组合，以便对其进行格式化 　　 注意:关于行的表格元素生成矩形框，这些框有内容、内边距和边框，但是没有外边距margin。表头呈现为居中的粗体文本 四 表格的传统布局 传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点： 1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0 2、单元格里面嵌套表格 3、单元格中的元素和嵌套的表格用align和valign设置对齐方式 4、通过属性或者css样式设置单元格中元素的样式</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>(2)  常见表格代码</p> <div class="cnblogs_code"> <img id="code_img_closed_1b6049bf-8c94-4622-bb5f-787919d63741" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_1b6049bf-8c94-4622-bb5f-787919d63741" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_1b6049bf-8c94-4622-bb5f-787919d63741" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="UTF-8"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>Document<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">border</span><span style="color:#0000ff;">="solid"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="500px"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="150px"</span><span style="color:#ff0000;"> cellspacing</span><span style="color:#0000ff;">="0"</span><span style="color:#ff0000;"> cellpadding</span><span style="color:#0000ff;">="10"</span><span style="color:#ff0000;"> frame</span><span style="color:#0000ff;">="solid"</span><span style="color:#ff0000;"> rules</span><span style="color:#0000ff;">="solid"</span> <span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span>课程表<span style="color:#0000ff;"></</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> valign</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> bgcolor</span><span style="color:#0000ff;">="pink"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期一<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期二<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期四<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期五<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">thead</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tbody </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> valign</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">rowspan</span><span style="color:#0000ff;">="2"</span><span style="color:#0000ff;">></span>语文<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">colspan</span><span style="color:#0000ff;">="4"</span><span style="color:#0000ff;">></span>课间活动<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tbody</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tfoot </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> valign</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>语文<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>语文<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tfoot</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>(3)   表格嵌套代码</p> <div class="cnblogs_code"> <img id="code_img_closed_c80e6fe8-bbdb-4632-8cb2-b89a4c6071e1" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_c80e6fe8-bbdb-4632-8cb2-b89a4c6071e1" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_c80e6fe8-bbdb-4632-8cb2-b89a4c6071e1" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>表格属性<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 在以下表格标签中添加相应代码 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">border</span><span style="color:#0000ff;">="1"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="500"</span><span style="color:#ff0000;"> cellspacing</span><span style="color:#0000ff;">="0"</span><span style="color:#ff0000;"> cellpadding</span><span style="color:#0000ff;">="5px"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span>课程表<span style="color:#0000ff;"></</span><span style="color:#800000;">caption</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">bgcolor</span><span style="color:#0000ff;">="orange"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期一<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期二<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期四<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span>星期五<span style="color:#0000ff;"></</span><span style="color:#800000;">th</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">rowspan </span><span style="color:#0000ff;">="2"</span><span style="color:#0000ff;">></span>语文<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">colspan</span><span style="color:#0000ff;">="4"</span><span style="color:#0000ff;">></span>课间活动<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">rowspan</span><span style="color:#0000ff;">="2"</span> <span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">border</span><span style="color:#0000ff;">="1"</span><span style="color:#ff0000;"> cellspacing</span><span style="color:#0000ff;">="0"</span><span style="color:#ff0000;"> cellpadding</span><span style="color:#0000ff;">="5px"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>前半节<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>后半节<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>诗词<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>古文<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>数学<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>英语<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span>生物<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>(4)   表格布局代码</p> <div class="cnblogs_code"> <img id="code_img_closed_bc3d45d1-fce9-4071-9af2-a06af728a9cb" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_bc3d45d1-fce9-4071-9af2-a06af728a9cb" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_bc3d45d1-fce9-4071-9af2-a06af728a9cb" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="UTF-8"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>布局<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="100%"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="100%"</span><span style="color:#ff0000;"> bgcolor</span><span style="color:#0000ff;">="#f2f2f2"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">bgcolor</span><span style="color:#0000ff;">="#14191e"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 页头 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">="15px"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 空隙 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 主内容 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="1024px"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="center"</span> <span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="400px"</span><span style="color:#ff0000;"> valign</span><span style="color:#0000ff;">="top"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="right"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">bgcolor</span><span style="color:#0000ff;">="#fff"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="100%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>html简介<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>html表格<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>html实例<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>css简介<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>css表格<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>css实例<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>JavaScript简介<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>JavaScript实例<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="60px"</span><span style="color:#0000ff;">></span>关于我们<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="24px"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 空隙 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="600px"</span><span style="color:#ff0000;"> bgcolor</span><span style="color:#0000ff;">="#fff"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 什么是 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 文档也被称为网页 </span><span style="color:#0000ff;"></</span><span style="color:#800000;">pre</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">="20px"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 空隙 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">bgcolor</span><span style="color:#0000ff;">="#14191e"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="100px"</span><span style="color:#0000ff;">></span><span style="color:#008000;"><!--</span><span style="color:#008000;"> 页尾 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>(5)   实例</p> <div class="cnblogs_code"> <img id="code_img_closed_eae0b428-3971-44d6-9004-1b6fa6094eb6" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_eae0b428-3971-44d6-9004-1b6fa6094eb6" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_eae0b428-3971-44d6-9004-1b6fa6094eb6" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">table </span><span style="color:#ff0000;">cellspacing</span><span style="color:#0000ff;">=0 </span><span style="color:#ff0000;">border</span><span style="color:#0000ff;">=1 </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">="bordercolor:#C0C0C0;"</span><span style="color:#ff0000;"> align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="100%"</span><span style="color:#0000ff;">></span> 　　<span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="background:#628FC3"</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">colspan</span><span style="color:#0000ff;">="5"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="100px"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="100%"</span> <span style="color:#0000ff;">></span>页首<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> 　　<span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="background:#CBDAEB"</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">="30px"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="20%"</span><span style="color:#0000ff;">></span>标题1<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="20%"</span><span style="color:#0000ff;">></span>标题2<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="20%"</span><span style="color:#0000ff;">></span>标题3<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="20%"</span><span style="color:#0000ff;">></span>标题4<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="20%"</span><span style="color:#0000ff;">></span>标题5<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> 　　<span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">="300px"</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="background:#92D050"</span><span style="color:#0000ff;">></span>侧导航栏<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">colspan</span><span style="color:#0000ff;">="4"</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="background:#00B0F0"</span><span style="color:#0000ff;">></span>主页内容<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> 　　<span style="color:#0000ff;"><</span><span style="color:#800000;">tr </span><span style="color:#ff0000;">align</span><span style="color:#0000ff;">="center"</span><span style="color:#0000ff;">><</span><span style="color:#800000;">td </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">="50px"</span><span style="color:#ff0000;"> colspan</span><span style="color:#0000ff;">="5"</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="background:#FFC000"</span><span style="color:#0000ff;">></span>页尾<span style="color:#0000ff;"></</span><span style="color:#800000;">td</span><span style="color:#0000ff;">></</span><span style="color:#800000;">tr</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">table</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p>　　如图</p> <p>　　<a href="http://img.e-com-net.com/image/info8/40df5b38e8a5455b8c6663b0e82211e5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40df5b38e8a5455b8c6663b0e82211e5.jpg" alt="Html结构解析_第10张图片" width="650" height="257" style="border:1px solid black;"></a></p> <p>7     form表单</p> <p>(1)   表单语法图解</p> <p><a href="http://img.e-com-net.com/image/info8/048823182a924f138a4be89a9af2563a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/048823182a924f138a4be89a9af2563a.jpg" alt="Html结构解析_第11张图片" width="650" height="1094" style="border:1px solid black;"></a></p> <p>(2)  语法说明</p> <div class="cnblogs_code"> <img id="code_img_closed_1f40ff32-1eed-49bf-8f96-037f3ee69f1c" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_1f40ff32-1eed-49bf-8f96-037f3ee69f1c" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_1f40ff32-1eed-49bf-8f96-037f3ee69f1c" class="cnblogs_code_hide"> <pre><span style="color:#000000;">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） 表单按钮：包括提交按钮、重置按钮和一般按钮。提交按钮和一般按钮可用于把表单数据发送到服务器，重置按钮用于重置表单，把整个表单恢复到初始状态。 基本语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> form elements <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">action</span><span style="color:#0000ff;">="提交地址"</span><span style="color:#ff0000;"> method</span><span style="color:#0000ff;">="提交方式"</span><span style="color:#0000ff;">></span>表单内容<span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 2 表单工作原理 当我们点击了提交按钮后，表单中所填的数据会被打包发送到服务器进行处理，接着服务器会根据表单中的信息返回特定的响应。 　　在表单中，我们可以输入的元素大致可以分成两种：输入赋值和选择赋值。虽然有两种，但是其最终结果却是一样的。都是先为一个变量赋值，然后后将此变量传到服务器进行处理。 1） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="test_name"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="165"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　 上面的实例中，test_name就是一个变量名，test_name的初始值就是value=“165”，当我们删除输入框中的初始值，然后写入新值的时候比如777，test_name的值变成了777，提交表单的时候，就会将变量test_name和其新赋值提交到服务器等。 2） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="test_radio"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="not"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 3） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">=" test_radio"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="yes"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　 虽然是两行代码，但是这两个单选框为一组，只能选择一个。两个选项都是为 test_radio赋值，所赋值即每个选项 value 的值。表单提交时同样会提交变量 test_radio及它的 value. 3 form form：用来创建表单，即以 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> 标签开始，<span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> 标签结束，在 <span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> 和 <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 之间，是表单所需要的控件和按钮,要提交的所有内容都应该在该标签中. 该元素不会生成可视化部分。 表单内容：可以是</span><span style="color:#0000ff;"><</span><span style="color:#800000;"> input</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> textarea</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> button</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> select</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> option</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> optgroup</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> fieldset</span><span style="color:#0000ff;">></span>、<span style="color:#0000ff;"><</span><span style="color:#800000;"> label</span><span style="color:#0000ff;">></span><span style="color:#000000;">等标签 基本属性： action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web method: 表单的提交方式 post/get 默认取值 就是 get（信封） get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制. post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制. accept-charset:属性规定服务器可处理的表单数据字符集。默认值是保留字符串 "UNKNOWN"，表示编码为包含 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 元素的文档的编码。 　　enctype: 属性规定在将表单数据发送到服务器之前如何对其进行编码。注意：只有 method="post" 时才使用 enctype 属性。 　　autocomplete: 属性规定表单是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 注意：autocomplete 属性 "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。 默认值为 on 规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off 则规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。 　　novalidate: 属性规定当提交表单时不对表单数据进行验证。 4 表单控件 表单控件也叫表单子元素。 每一个表单控件都有一个 name 属性，用于在提交表单时，对表单数据进行识别。name名称必须有区别才能被识别。 访问者通过提交按钮提交表单，表单提交后，他们填写的数据就会发送到服务器端进行处理。如，用户登录的表单： 文本框-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;">(文本框) name</span><span style="color:#0000ff;">="userName"</span><span style="color:#ff0000;">(文本框名称) value</span><span style="color:#0000ff;">="用户名"</span><span style="color:#ff0000;">(文本框初始值) size</span><span style="color:#0000ff;">="30"</span><span style="color:#ff0000;">(文本框长度) maxlength</span><span style="color:#0000ff;">="20"</span><span style="color:#ff0000;">(文本框可输入最多字符) </span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 密码框-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="password "</span><span style="color:#ff0000;">(密码框) name</span><span style="color:#0000ff;">="pass"</span><span style="color:#ff0000;">(密码框的名称) size</span><span style="color:#0000ff;">="20"</span><span style="color:#ff0000;">(密码框的长度) </span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 单选按钮-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="gen"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;">(单选按钮框) value</span><span style="color:#0000ff;">="男"</span><span style="color:#ff0000;">(值) checked(单选按钮选中状态) </span><span style="color:#0000ff;">/></span><span style="color:#000000;">男 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="gen"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="女"</span> <span style="color:#0000ff;">/></span><span style="color:#000000;">女 复选框-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;">(复选框) name</span><span style="color:#0000ff;">="interest"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="sports"</span><span style="color:#ff0000;">(值)</span><span style="color:#0000ff;">/></span><span style="color:#000000;">运动 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="interest"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="talk"</span><span style="color:#ff0000;"> checked(复选框选中状态) </span><span style="color:#0000ff;">/></span><span style="color:#000000;">聊天 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="interest"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="play"</span><span style="color:#0000ff;">/></span><span style="color:#000000;">玩游戏 列表框-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">select</span><span style="color:#ff0000;">(列表框) name</span><span style="color:#0000ff;">="列表名称"</span><span style="color:#ff0000;"> size</span><span style="color:#0000ff;">="行数"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">="选项的值"</span><span style="color:#ff0000;"> selected</span><span style="color:#0000ff;">="selected"</span><span style="color:#ff0000;">(默认选中项)</span><span style="color:#0000ff;">></span>…<span style="color:#0000ff;"></</span><span style="color:#800000;">option </span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option</span><span style="color:#ff0000;">(选项) value</span><span style="color:#0000ff;">="选项的值"</span><span style="color:#0000ff;">></span>…<span style="color:#0000ff;"></</span><span style="color:#800000;">option </span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">select</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 按钮-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="reset"</span><span style="color:#ff0000;"> (重置按钮) name</span><span style="color:#0000ff;">="butReset"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="reset按钮"</span><span style="color:#ff0000;">(按钮上显示的文字)</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#ff0000;">(提交按钮) name</span><span style="color:#0000ff;">="butSubmit"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="submit按钮"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="button"</span><span style="color:#ff0000;">(普通按钮) name</span><span style="color:#0000ff;">="butButton"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="button按钮"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 图片按钮 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="image"</span><span style="color:#ff0000;"> src</span><span style="color:#0000ff;">="images/login.gif"</span><span style="color:#ff0000;">/(图片路径)</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 多行文本域-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">textarea</span><span style="color:#ff0000;">(多行文本域) name</span><span style="color:#0000ff;">="showText"</span><span style="color:#ff0000;"> cols</span><span style="color:#0000ff;">="x"</span><span style="color:#ff0000;">(显示的列数) rows</span><span style="color:#0000ff;">="y"</span><span style="color:#ff0000;">(显示的行数)</span><span style="color:#0000ff;">></span>文本内容 <span style="color:#0000ff;"></</span><span style="color:#800000;">textarea </span><span style="color:#0000ff;">></span><span style="color:#000000;"> 文件域-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">action</span><span style="color:#0000ff;">=""</span><span style="color:#ff0000;"> method</span><span style="color:#0000ff;">="post"</span><span style="color:#ff0000;"> enctype</span><span style="color:#0000ff;">="multipart/form-data"</span><span style="color:#ff0000;">（表单编码属性）</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="file"</span><span style="color:#ff0000;">(文件域) name</span><span style="color:#0000ff;">="files"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="upload"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="上传"</span> <span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 邮箱-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>邮箱:<span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="email"</span><span style="color:#ff0000;">（邮箱） name</span><span style="color:#0000ff;">="email"</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 网址-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>请输入你的网址:<span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="url"</span><span style="color:#ff0000;">（网址） name</span><span style="color:#0000ff;">="userUrl"</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 数字-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>请输入数字:<span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="number"</span><span style="color:#ff0000;">(数字) name</span><span style="color:#0000ff;">="num"</span><span style="color:#ff0000;"> min</span><span style="color:#0000ff;">="0"</span><span style="color:#ff0000;">(允许的最小值) max</span><span style="color:#0000ff;">="100"</span><span style="color:#ff0000;">(允许的最大值) step(合法的数字间隔)</span><span style="color:#0000ff;">="10"</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 滑块-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>请输入数字:<span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="range"</span><span style="color:#ff0000;">(滑块) name</span><span style="color:#0000ff;">="range1"</span><span style="color:#ff0000;"> min</span><span style="color:#0000ff;">="0"</span><span style="color:#ff0000;">(允许的最小值) max</span><span style="color:#0000ff;">="10"</span><span style="color:#ff0000;">(允许的最大值) step(合法的数字间隔)</span><span style="color:#0000ff;">="2"</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 搜索框-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>请输入搜索的关键词:<span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="search"</span><span style="color:#ff0000;">(搜索框) name</span><span style="color:#0000ff;">="sousuo"</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 隐藏域-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="hidden"</span><span style="color:#ff0000;">(隐藏域) value</span><span style="color:#0000ff;">="666"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="userid"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 只读和禁用-语法 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="name"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="张三"</span><span style="color:#ff0000;"> readonly(只读文本框)</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit "</span><span style="color:#ff0000;"> disabled （禁用） value</span><span style="color:#0000ff;">="保存"</span> <span style="color:#0000ff;">></span><span style="color:#000000;"> 表单元素的标注 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">label </span><span style="color:#ff0000;">for</span><span style="color:#0000ff;">="id"</span><span style="color:#ff0000;">(表单元素的id)</span><span style="color:#0000ff;">></span>标注的文本<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="gender"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="male"</span><span style="color:#ff0000;">/(表单元素id)</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 按钮 　　在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。 　　(1)点击按钮 　　type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="button"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="按钮"</span><span style="color:#ff0000;"> onclick</span><span style="color:#0000ff;">="show()"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;">function</span><span style="color:#000000;"> show(){ alert(</span><span style="color:#000000;">"</span><span style="color:#000000;">Hello world!</span><span style="color:#000000;">"</span><span style="color:#000000;">); } </span><span style="color:#0000ff;"></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　(2)提交按钮 　　当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">method</span><span style="color:#0000ff;">="post"</span><span style="color:#ff0000;"> action</span><span style="color:#0000ff;">="demo.php"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label </span><span style="color:#ff0000;">for</span><span style="color:#0000ff;">="urse"</span><span style="color:#0000ff;">></span>用户名：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="urse"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="ursename"</span><span style="color:#ff0000;"> placeholder</span><span style="color:#0000ff;">="邮箱/手机号/用户名"</span><span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label </span><span style="color:#ff0000;">for</span><span style="color:#0000ff;">="password"</span><span style="color:#0000ff;">></span>密　码：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="password"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="password"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="pass"</span><span style="color:#ff0000;"> placeholder</span><span style="color:#0000ff;">="请输入密码"</span> <span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="提交信息"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。 而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。 　　(3)重置按钮 　　当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">method</span><span style="color:#0000ff;">="post"</span><span style="color:#ff0000;"> action</span><span style="color:#0000ff;">="demo.php"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label </span><span style="color:#ff0000;">for</span><span style="color:#0000ff;">="urse"</span><span style="color:#0000ff;">></span>用户名：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="urse"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="ursename"</span><span style="color:#ff0000;"> placeholder</span><span style="color:#0000ff;">="邮箱/手机号/用户名"</span><span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label </span><span style="color:#ff0000;">for</span><span style="color:#0000ff;">="password"</span><span style="color:#0000ff;">></span>密　码：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="password"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="password"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="pass"</span><span style="color:#ff0000;"> placeholder</span><span style="color:#0000ff;">="请输入密码"</span> <span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="提交信息"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="reset"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="重置信息"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　type="reset" 用于定义一个重置按钮，需要谨慎使用该按钮，当用户点击重置按钮后，所有表单值都会恢复到默认值，这对于用户来说，如果不慎点击了重置按钮将是一件十分令人恼火的事。 　　在 HTML 中还有一种创建按钮的方法就是使用 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签。 该元素与使用 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input</span><span style="color:#0000ff;">></span> 元素创建的按钮之间的不同之处就在于：使用 button 元素创建的按钮，在该元素内部可以放入内容，比如文本或图像，也就是该元素可以使用多媒体内容，<span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> 与 <span style="color:#0000ff;"></</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签之间的所有内容都是按钮的内容。该元素也可以定义点击按钮、提交按钮和重置按钮。 但是他的缺点就是：不同的浏览器对 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> 元素的 type 属性使用不同的默认值，因此要始终为 <span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> 元素规定 type 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到的 value 值不同，存在兼容性问题。所以要使用 <span style="color:#0000ff;"><</span><span style="color:#800000;">input</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 元素在 HTML 表单中创建按钮。 5 fieldset fieldset元素可将表单内的相关元素分组。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">fieldset</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">fieldset</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">fieldset</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签没有必需的或唯一的属性。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">legend</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签为 fieldset 元素定义标题。 代码 </span><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE HTML</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">fieldset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">legend</span><span style="color:#0000ff;">></span>健康信息<span style="color:#0000ff;"></</span><span style="color:#800000;">legend</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 身高：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span> <span style="color:#0000ff;">/></span><span style="color:#000000;"> 体重：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">fieldset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>如果表单周围没有边框，说明您的浏览器太老了。<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 6 换行 (1) Br强制换行,小换行 (2) P段落换行,大换行 (3) 行高间距：2个br换行标签相当于使用p段落标签。 </span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>(3)  实例解析1</p> <div class="cnblogs_code"> <img id="code_img_closed_13bc7b0a-85cb-4cb8-8f97-36477131f9c5" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_13bc7b0a-85cb-4cb8-8f97-36477131f9c5" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_13bc7b0a-85cb-4cb8-8f97-36477131f9c5" class="cnblogs_code_hide"> <pre><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE HTML</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">='utf-8'</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>表单实例<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>表单的基本使用<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">action</span><span style="color:#0000ff;">='./05-form.php' </span><span style="color:#ff0000;">method</span><span style="color:#0000ff;">='post' </span><span style="color:#ff0000;">enctype</span><span style="color:#0000ff;">='multipart/form-data'</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">get与post的区别: 1.一个是显式get,会将你提交的数据显示在地址栏中,不安全,一个是隐式post,会隐藏参数 2.一个携带的数据量小GET:128KB,一个携带的数据量大post:2M</span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">编码格式enctype编码格式定死的 上传文件视频音频是使用 一定要写上 让浏览器识别,写上后他才能把这个放在请求头里面响应</span><span style="color:#008000;">--></span><span style="color:#000000;"> 用户名:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='text' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='uname' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='' </span><span style="color:#ff0000;">placeholder</span><span style="color:#0000ff;">='请输入用户名' </span><span style="color:#ff0000;">maxlength</span><span style="color:#0000ff;">='6' </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">='width:100px;' </span><span style="color:#ff0000;">autofocus</span><span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 密 码: </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='password' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='pass'</span><span style="color:#0000ff;">><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 确认密码:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='password'</span><span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">text文本标签 服务器在你提交的时候看的是name和value, 在你输入之后会默认的把新输入的内容放到value里面, 服务器获取name对应的值value, placeholder是你什么都不输入显示在文本框中的内容 maxlength是输入的最大长度, size表示输入框的长度size的写法可以单基本已经废弃一般用style='width:200px;', autofocus移动光标自动显示在用户名上,提示你在这里输入</span><span style="color:#008000;">--></span><span style="color:#000000;"> 性别:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='radio' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='sex' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='m' </span><span style="color:#ff0000;">checked</span><span style="color:#0000ff;">/></span>男<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='radio' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='sex' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='w'</span><span style="color:#0000ff;">/></span>女<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">radio单选框,label的作用是点击男字或女字也有效果checked 默认选中,对于单选框和复选框而言</span><span style="color:#008000;">--></span><span style="color:#000000;"> 爱好:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='checkbox' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='check[]' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='lan'</span><span style="color:#0000ff;">/></span><span style="color:#000000;">篮球 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='checkbox' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='check[]'value='zu'</span><span style="color:#0000ff;">/></span><span style="color:#000000;">足球 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='checkbox' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='check[]' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='ping' </span><span style="color:#ff0000;">checked</span><span style="color:#0000ff;">/></span><span style="color:#000000;">乒乓球 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='checkbox' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='check[]'value='yu'</span><span style="color:#0000ff;">/></span>羽毛球<span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">checkbox复选框或者多选框,check[]可以只接收一个name得到四个值 可以分别把value的值放入列表中,然后服务器只接收一个name就好</span><span style="color:#008000;">--></span><span style="color:#000000;"> 文件上传:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='file' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='pic'</span><span style="color:#0000ff;">/><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 籍贯:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">select </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='city'</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='hb'</span><span style="color:#0000ff;">></span>河北<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">option选项的意思</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='bj'</span><span style="color:#0000ff;">></span>北京<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='sd' </span><span style="color:#ff0000;">selected</span><span style="color:#0000ff;">></span>山东<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">selected起始默认选中,对于下拉框而言</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='hn' </span><span style="color:#ff0000;">disabled</span><span style="color:#0000ff;">></span>河南<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">disabled你怎么选也选不中,变灰--</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">select</span><span style="color:#0000ff;">><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span><span style="color:#000000;"> 内容:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">textarea </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='areas' </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">='resize:none' </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">='5' </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">='40'</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">resize:none文本框不能被自由的扩大和缩小, rows表示文本框的高度也就是行数,cols代表的就是宽度也就是列数</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">textarea</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">br</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='submit' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='注册'</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='button' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='按钮'</span><span style="color:#0000ff;">/></span><span style="color:#008000;"><!--</span><span style="color:#008000;">没有提交功能</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='image' </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">='./post.png' </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">='40' </span><span style="color:#ff0000;">height</span><span style="color:#0000ff;">='18'</span><span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">图片的方式提交h5基本没有使用</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span>点击按钮<span style="color:#0000ff;"></</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">button这里面可以套一个背景图很多功能都可以实现 常用的</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='reset' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='重置'</span><span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">reset把先前写过的东西清空掉</span><span style="color:#008000;">--></span><span style="color:#000000;"> 隐藏域:</span><span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">='hidden' </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">='id' </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">='100'</span><span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">这里有点不动还需再看一下</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span>点击按钮<span style="color:#0000ff;"></</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">放在form外面没有提交功能</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>     实例解析2</p> <div class="cnblogs_code"> <img id="code_img_closed_d263e35a-721f-498f-aa78-1e28d1d3e549" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_d263e35a-721f-498f-aa78-1e28d1d3e549" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_d263e35a-721f-498f-aa78-1e28d1d3e549" class="cnblogs_code_hide"> <pre><span style="color:#000000;">HTML表单 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册）， 首先应该用</span><span style="color:#0000ff;"><</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入， 具体实现及注释可参照以下伪代码： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">form </span><span style="color:#ff0000;">action</span><span style="color:#0000ff;">="http://www..."</span><span style="color:#ff0000;"> method</span><span style="color:#0000ff;">="get"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> form定义一个表单区域,action属性定义表单数据提交的地址，method属性定义提交的方式。 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> p标签定义大换行 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>姓名：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="username"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>密码：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="password"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="password"</span> <span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为password定义了一个密码输入框 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>性别：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="gender"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="0"</span> <span style="color:#0000ff;">/></span> 男<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="radio"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="gender"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="1"</span> <span style="color:#0000ff;">/></span> 女<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为radio定义了单选框 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>爱好：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="like"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="sing"</span> <span style="color:#0000ff;">/></span> 唱歌<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="like"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="run"</span> <span style="color:#0000ff;">/></span> 跑步<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="checkbox"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="like"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="swiming"</span> <span style="color:#0000ff;">/></span> 游泳<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为checkbox定义了单选框 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>照片：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="file"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="person_pic"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为file定义上传照片或文件等资源 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>个人描述：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">textarea </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="about"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">textarea</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> textarea定义多行文本输入 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span>籍贯：<span style="color:#0000ff;"></</span><span style="color:#800000;">label</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">select </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="site"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> select定义下拉列表选择 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">="0"</span><span style="color:#0000ff;">></span>北京<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">="1"</span><span style="color:#0000ff;">></span>上海<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">="2"</span><span style="color:#0000ff;">></span>广州<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">option </span><span style="color:#ff0000;">value</span><span style="color:#0000ff;">="3"</span><span style="color:#0000ff;">></span>深圳<span style="color:#0000ff;"></</span><span style="color:#800000;">option</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">select</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="submit"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">=""</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="提交"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为submit定义提交按钮 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： <input type="image" src="xxx.gif"> </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="reset"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">=""</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="重置"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> input类型为reset定义重置按钮 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">form</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 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。 </span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>8  span元素</p> <div class="cnblogs_code"> <img id="code_img_closed_20396c64-28c0-46a6-99ed-824288c91f2a" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_20396c64-28c0-46a6-99ed-824288c91f2a" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_20396c64-28c0-46a6-99ed-824288c91f2a" class="cnblogs_code_hide"> <pre>1 <span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签 作用：标签被用来组合文档中的行内元素。 在行内定义一个区域，也就是一行内可以被</span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">划分成好几个区域，从而实现某种特定效果。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">本身没有任何属性。 提示：请使用 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 来组合行内元素，以便通过样式来格式化它们。 注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 (1) span 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 ＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。 (2) span是一个in-line元素，翻译为内联元素。它的特点是不会独占一行。它和块（block）级元素是相对的，块级元素是独占一行的。 比如你在网页中的某个位置加入一些文字，最好用span将文字包含起来，这样你在想取到这段文字的时候，就可以先取到该span,然后再取span.innerhtml来得到文字 。 2 DIV与SPAN的区别与特点 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span>在CSS定义中属于一个行内元素，而<span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>是块级元素，我们可能通俗地理解为<span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>为大容器，大容器当然可以放一个小容器了,<span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">就是小容器。 (1) div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离 (2) </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span>在<span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>中一般都是用于显示一段文本，<span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#ff0000;">默认是横排的，而<div</span><span style="color:#0000ff;">></span><span style="color:#000000;">默认是竖排的 用</span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">有时候是为了使页面元素看起来规整，没有什么特别的用处。 代码： </span><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>这是我第一个网页<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>div标签是占满一行的<span style="color:#0000ff;"></</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span>span标签包裹内容1<span style="color:#0000ff;"></</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span>span标签包裹内容2<span style="color:#0000ff;"></</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 3 span标签和p标签的区别 (1) 一般标签都有语义,p标签是指一个段落，而且默认是一个块级元素，span是一个行内元素的代表，没有什么意思，一般可以放文字等行内元素 (2) </span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>标签是一个段落结束的标志，我们知道段落与段落中间会留出一行文字的空白，这样才能显出两个段落了。也就是说<span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#000000;">可以放在段落结束的地方 也表示换行的意思. (3) </span><span style="color:#0000ff;"><</span><span style="color:#800000;">span</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签主要是指一个块，就是说指定的这一块内容是一起的，不可分割，就算换行的时候也不 会出现空白的情况。 4 如何定义span标签的宽度和高度 因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这一点解决就很简单了，解决的办法就是利用css将span变为盒装元素即可。 将内联元素定义为盒装元素的方法有两种： (1) 直接使用显示属性display将其定义为盒装元素； display:block; (2) 使用浮动属性float将其自动定义为盒装元素； float:left; 在css属性里定义以上任意一个属性就可以使span拥有高度和宽度属性。</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>9  div元素</p> <div class="cnblogs_code"> <img id="code_img_closed_495bcf27-296f-4074-b88a-1bcec916d3cd" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_495bcf27-296f-4074-b88a-1bcec916d3cd" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_495bcf27-296f-4074-b88a-1bcec916d3cd" class="cnblogs_code_hide"> <pre>HTML <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签 1 定义和用法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 可定义文档中的分区或节（division/section）。 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;">，那么该标签的作用会变得更加有效。 用法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span> 固有的唯一格式表现。可以通过 <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 的 class 或 id 应用额外的样式。 不必为每一个 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 元素应用 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 提示和注释： 注释：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。 提示：请使用 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。 3 div的属性 主要设置如下： overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）； 　　width（宽度）：数值； 　　height（高度）：数值； 　　color（字体颜色）：色彩代码； 　　font-size（字体大小）：数值； 　　line-height（行高）：数值； 　　border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； 　　font-weight（字体粗细）：normal、bold、bolder、lighter； 　　font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆； 　　background（背景颜色）：色彩代码； scrollbar-base-color, scrollbar-face-color, scrollbar-track-color, scrollbar -darkshadow-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar -3dlight-color, scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码； 　　filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果； 　　word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）； 　　direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。 4 HTML中的Div分区属性 (1) 基本属性：width, height, left, top, background-color（当设置为transparent时表示透明） (2) 定位属性：position: absolute/relative absolute时，位置固定；relative时，位置会随着内容的实际情况进行浮动 (3) 显示属性：display: block/none block为默认状态，表示显示；none为隐藏 (4) 优先属性：z-index:n n表示一个整数（正负均可），有多个Div时n越大，则越靠前显示； z-index可以理解为z轴的坐标（x,y轴控制左右、上下方位，z轴控制层叠div的前后方位） 只有用绝对定位（position:absolute）时，属性z-index才起作用； 未设置绝对定位（position:absolute）的div，其z-index永远为0； 未设定优先属性（z-index）的div，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个Div属于父子关系，则子div覆盖父div； (5) 透明属性：opacity:0.3;（firefox专用）； filter:alpha(opacity=30)（IE专用） 两者一起用的时候就将两种主流浏览器都兼容了；上面例子是将Div的透明度设置为30％，可以看出两者的设置稍有不同；Div的文本与背景色均能被透明化！ 5 如何让DIV标签居中显示？ 在经典论坛上面搜了些老贴子看，大都说的是用text-align:center加在BODY中，然后DIV标签相对于BODY而居中对齐。 这样有个缺点就是文章中所有的对象都会居中对齐（包括文字、图像等），这样文档中要靠左的对象就需要另加代码，这方法不行。 而如果直接加上：width:200PX;margin:0 atuo;，这样的话只是在FireFox浏览器中会居中对齐，而IE里面就不行。 搞了大半天，问题又回到标准上来了，在学习网页标准的时候，首先就是了解DOCTYPE的设置，因为这是至关重要的。 而DIV居中的问题所在，就是你的DOCTYPE部份： 程序代码 </span><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 当你加入这句声明以后： 程序代码 .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";//显示</span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>10 框架</p> <div class="cnblogs_code"> <img id="code_img_closed_09735c67-e786-4f61-88e6-8a8b4b2f2b66" class="code_img_closed" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" alt="" width="0" height="0"> <img id="code_img_opened_09735c67-e786-4f61-88e6-8a8b4b2f2b66" class="code_img_opened" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" alt="" width="0" height="0"> <div id="cnblogs_code_open_09735c67-e786-4f61-88e6-8a8b4b2f2b66" class="cnblogs_code_hide"> <pre><span style="color:#000000;">一 框架 　　一个浏览器文档窗口只能显示一个网页文件，但是可以通过使用框架，在同一个浏览器窗口中显示不止一个页面。 使用框架的页面主要包含两个部分，一个是框架集，另一个就是具体的框架文件。 　　框架多用于网站后台或者内网系统的布局。 使用框架的坏处： (1) 开发人员必须同时跟踪更多的HTML文档 (2) 很难打印整张页面 1 框架集（</span><span style="color:#0000ff;"><</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span><span style="color:#000000;">）： (1)框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。 如果网页由左右二个框架组成，那么除了左右二个网页文件之外，还有一个总的框架集文件。 在使用框架的页面中，</span><span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>主体标记被框架标记<span style="color:#0000ff;"><</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span>所代替。而对于框架页面中包含的每一个框架，都是通过<span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span><span style="color:#000000;">标记来定义的。 (2)rows属性：水平分割窗口。 水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。 rows中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。 但是要注意的是，一般设定了几个rows的值，就需要有几个框架，也就是需要有相应数量的</span><span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span><span style="color:#000000;">参数。 框架集rows属性代码： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>水平分割窗口的效果<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="30%,70%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (3) cols属性：垂直分割窗口。 垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的多个窗口。 cols中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。 与水平分割窗口向同，一般设定了几个cols的值，就需要有几个框架，也就是有几个</span><span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span><span style="color:#000000;">参数。 框架集cols属性代码： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>垂直分割窗口的效果<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="20%,55%,25%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (4) frameborder属性：设置边框。 在默认情况下，框架窗口的四周有一条边框线，通过frameborder参数可以调整边框线的显示情况。 语法为： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">frameborder</span><span style="color:#0000ff;">="1"</span><span style="color:#0000ff;">></span>或者<span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">frameborder</span><span style="color:#0000ff;">="0"</span><span style="color:#0000ff;">></span><span style="color:#000000;">。 frameborder的取值只能为0或1。如果取值为0，那么边框线将会被隐藏；如果取值为1，边框线将会显示。 在frameset中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效。 框架集frameborder属性代码： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>设置框架窗口的边框显示效果<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="20%,55%,25%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">frameborder</span><span style="color:#0000ff;">="1"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="35%,65%"</span><span style="color:#ff0000;"> frameborder</span><span style="color:#0000ff;">="0"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">frameborder</span><span style="color:#0000ff;">="0"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (5) framespacing属性：框架的边框宽度。 框架的边框宽度在默认情况下是1像素，通过参数framespacing可以调整其大小。 　　语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">framespacing</span><span style="color:#0000ff;">="边框宽度"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。 框架集framespacing属性代码： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>设置框架的边框宽度<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="30%,70%"</span><span style="color:#ff0000;"> framespacing</span><span style="color:#0000ff;">="10"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="20%,55%,25%"</span><span style="color:#ff0000;"> framespacing</span><span style="color:#0000ff;">="30"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> (6) bordercolor属性： 框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。 　　语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">bordercolor</span><span style="color:#0000ff;">="颜色代码"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　说明：该参数同样只对整个框架集有效，对于单个框架无效。 框架集bordercolor属性代码 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>设置框架的边框颜色<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="30%,70%"</span><span style="color:#ff0000;"> framespacing</span><span style="color:#0000ff;">="10"</span><span style="color:#ff0000;"> bordercolor </span><span style="color:#0000ff;">="#CC99FF"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="20%,55%,25%"</span><span style="color:#ff0000;"> framespacing</span><span style="color:#0000ff;">="30"</span><span style="color:#ff0000;"> bordercolor </span><span style="color:#0000ff;">="#9900FF"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 2 框架（</span><span style="color:#0000ff;"><</span><span style="color:#800000;">frame</span><span style="color:#0000ff;">></span><span style="color:#000000;">）和src属性。 　　框架结构中的各个页面都是一个单独的文字，而这些文件是通过src参数进行设置的。 　　语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="页面源文件地址"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　说明：页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。 页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件。 框架frame和src属性代码 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>设置页面源文件<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="30%,70%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="pic01.gif"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="src01.html"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 3 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签 　 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签用于浏览器不支持框架时显示页面内容。 noframes代码 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="25%,50%,25%"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="/example/html/frame_a.html"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="/example/html/frame_b.html"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="/example/html/frame_c.html"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>您的浏览器无法处理框架！<span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 二 浮动框架（</span><span style="color:#0000ff;"><</span><span style="color:#800000;">iframe</span><span style="color:#0000ff;">></span><span style="color:#000000;">） 　　浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。浮动框架又叫内联框架（inline frame），并且因此而得名。 　　语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">iframe </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="页面源文件"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">iframe</span><span style="color:#0000ff;">></span><span style="color:#000000;">　　 　　说明：与普通框架结构类似，浮动框架也可以设置很多参数，如 name、scrolling、frameborder等。 但是与普通框架相比，浮动框架中不包含framespacing和bordercolor参数。 　　src属性：浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。 语法：</span><span style="color:#0000ff;"><</span><span style="color:#800000;">iframe </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="页面源文件"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 　　width和height属性：在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。 语法： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">iframe </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">= src="浮动框架页面源文件" </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="页面宽度"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="页面高度"</span><span style="color:#0000ff;">></span><span style="color:#000000;">，页面的宽度和高度值都以像素为单位。 浮动框架iframe代码 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">iframe </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="/i/eg_landscape.jpg"</span><span style="color:#ff0000;"> width</span><span style="color:#0000ff;">="550"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="310"</span> <span style="color:#0000ff;">></</span><span style="color:#800000;">iframe</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>一些老的浏览器不支持 iframe。<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>如果得不到支持，iframe 是不可见的。<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 三 框架布局的示例 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>框架主页面 <span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">rows</span><span style="color:#0000ff;">="20%,*"</span><span style="color:#0000ff;">></span><span style="color:#008000;"><!--</span><span style="color:#008000;">框架集，控件文件的容器</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="topFame"</span><span style="color:#ff0000;"> src</span><span style="color:#0000ff;">="3.html"</span><span style="color:#ff0000;"> noresize</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frameset </span><span style="color:#ff0000;">cols</span><span style="color:#0000ff;">="240px,*"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="leftFrame"</span><span style="color:#ff0000;"> src</span><span style="color:#0000ff;">="1.html"</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">frame </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="rightFrame"</span><span style="color:#ff0000;"> src</span><span style="color:#0000ff;">="2.html"</span><span style="color:#ff0000;"> marginwidth</span><span style="color:#0000ff;">="20px"</span><span style="color:#ff0000;"> scrolling</span><span style="color:#0000ff;">="no"</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;">noframes标记当中可以包含body标记</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 该页面不支持frameset标签！ </span><span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">noframes</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">frameset</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span><span style="color:#000000;"> 四 链接如何跳出框架 　　在网站后台布局中，框架用得比较多。在很多时候，我们需要跳出框架，重新加载页面。 那么链接如何才能跳出框架呢？其实，只需要指定</span><span style="color:#0000ff;"><</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#000000;">标签的target属性为"_top"即可实现。下面是一个简单的例子。 代码 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>被锁在框架中了吗？<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="/index.html"</span><span style="color:#ff0000;"> target</span><span style="color:#0000ff;">="_top"</span><span style="color:#0000ff;">></span>请点击这里！<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <span class="cnblogs_code_collapse">View Code</span> </div> <p> </p> <p>参考来源：</p> <p>http://www.cnblogs.com/linhaifeng/articles/8982967.html</p> <p>https://www.cnblogs.com/yuanchenqi/articles/5603871.html</p> <p>https://www.cnblogs.com/linu/p/8150499.html</p> </div> <p>转载于:https://www.cnblogs.com/iamspecialone/p/11139491.html</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1292662009522888704"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Html结构解析)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232316974526464.htm" title="（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析" target="_blank">（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析</a> <span class="text-muted"></span> <div>数据如何从子公司流转到合并报表的全过程，即数据采集→合并引擎→报表输出，特别是HANA内存计算如何优化传统ETL瓶颈。SAPGroupReporting(GR)核心模块功能及数据流向的架构解析，涵盖核心组件、数据处理流程和关键集成点，适用于S/4HANA1809+版本：一、核心功能模块概览模块功能关键事务码/FioriApp数据采集(DataCollection)整合子公司财务数据（SAP/非SA</div> </li> <li><a href="/article/1950228031117258752.htm" title="深入解析JVM工作原理：从字节码到机器指令的全过程" target="_blank">深入解析JVM工作原理：从字节码到机器指令的全过程</a> <span class="text-muted"></span> <div>一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为</div> </li> <li><a href="/article/1950228031524106240.htm" title="Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程" target="_blank">Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程</a> <span class="text-muted">倾听铃的声</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>前文我们有了IOC的源码基础以及SpringMVC的基础，我们便可以进一步深入理解SpringMVC主要实现原理，包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇：DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的</div> </li> <li><a href="/article/1950227022097739776.htm" title="第28章 汇编语言--- 异常处理" target="_blank">第28章 汇编语言--- 异常处理</a> <span class="text-muted">hummhumm</span> <a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">程序设计</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7%E8%AF%AD%E8%A8%80/1.htm">高级语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86/1.htm">异常处理</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a> <div>在汇编语言中，异常处理是一个重要的概念，它涉及到处理器如何响应和处理程序运行时发生的非正常情况。异常可以是硬件错误（例如除零错误、非法指令）或者软件触发的中断（例如系统调用）。当发生异常时，处理器会暂停当前正在执行的程序，并转移到一个预先定义好的位置来处理这个异常。为了详细阐述第28章关于汇编语言中的异常处理，我们可以考虑一个简化的例子，展示异常处理的基本结构。请注意，实际的代码将取决于具体的处理</div> </li> <li><a href="/article/1950226517397139456.htm" title="JVM 内存模型深度解析：原子性、可见性与有序性的实现" target="_blank">JVM 内存模型深度解析：原子性、可见性与有序性的实现</a> <span class="text-muted">练习时长两年半的程序员小胡</span> <a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%89%96%E6%9E%90%EF%BC%9A%E4%BB%8E%E9%9D%A2%E8%AF%95%E8%80%83%E7%82%B9%E5%88%B0%E7%94%9F%E4%BA%A7%E5%AE%9E%E8%B7%B5/1.htm">深度剖析：从面试考点到生产实践</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E6%A8%A1%E5%9E%8B/1.htm">内存模型</a> <div>在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950224616647618560.htm" title="JAVA接口机结构解析" target="_blank">JAVA接口机结构解析</a> <span class="text-muted">秃狼</span> <a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/%E5%85%AB%E8%82%A1%E6%96%87/1.htm">八股文</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>什么是接口机在Java项目中，接口机通常指用于与外部系统进行数据交互的中间层，负责处理请求和响应的转换、协议适配、数据格式转换等任务。接口机的结构我们的接口机的结构分为两个大部分，外部接口机和内部接口机，在业务的调度上也是通过mq来实现的，只要的目的就是为了解耦合和做差异化。在接口机中主要的方法就是定时任务，消息的发送和消费，其他平台调用接口机只能提供外部接口机的方法进行调用，外部接口机可以提供消</div> </li> <li><a href="/article/1950222852074565632.htm" title="2025年SDK游戏盾终极解析：重新定义手游安全的“隐形护甲”" target="_blank">2025年SDK游戏盾终极解析：重新定义手游安全的“隐形护甲”</a> <span class="text-muted">上海云盾商务经理杨杨</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>副标题：从客户端加密到AI反外挂，拆解全链路防护如何重塑游戏攻防天平引言：当传统高防在手游战场“失效”2025年全球手游市场规模突破$2000亿，黑客单次攻击成本却降至$30——某SLG游戏因协议层CC攻击单日流失37%玩家，某开放世界游戏遭低频DDoS瘫痪6小时损失千万。传统高防IP的致命短板暴露无遗：无法识别伪造客户端流量、难防协议篡改、误杀率超15%。而集成于游戏终端的SDK游戏盾，正以“源</div> </li> <li><a href="/article/1950222345163567104.htm" title="深入理解汇编语言子程序设计与系统调用" target="_blank">深入理解汇编语言子程序设计与系统调用</a> <span class="text-muted">网安spinage</span> <a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>本文将全面解析汇编语言中子程序设计的核心技术以及系统调用的实现方法，涵盖参数传递的多种方式、堆栈管理、API调用等关键知识点，并提供实际案例演示。一、子程序设计：参数传递的艺术1.寄存器传参：高效简洁.386.modelflat,stdcalloptioncasemap:none.dataxdd5;定义变量ydd6sumdd?.code;函数定义：addxy1addxy1procpushebpmo</div> </li> <li><a href="/article/1950218946015719424.htm" title="图论算法经典题目解析：DFS、BFS与拓扑排序实战" target="_blank">图论算法经典题目解析：DFS、BFS与拓扑排序实战</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA/1.htm">图论</a> <div>图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或</div> </li> <li><a href="/article/1950218819616174080.htm" title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中，Redis是一种广泛使用的内存数据存储系统，尤其在需要高效检索和排序的场景中表现优异。在本篇博客中，我们将深入探讨如何使用Redis的有序集合（ZSet）构建一个高效的笔记排行榜系统，并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台，用户可以发布各种笔记，系统需要根据用户发布的笔记数量来生成一个实时更新的</div> </li> <li><a href="/article/1950218314064130048.htm" title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a> <span class="text-muted">bug菌¹</span> <a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a> <div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div> </li> <li><a href="/article/1950217936077647872.htm" title="Java 队列" target="_blank">Java 队列</a> <span class="text-muted">tryxr</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97/1.htm">队列</a> <div>队列一般用什么哪种结构实现队列的特性数据入队列时一定是从尾部插入吗数据出队列时一定是从头部删除吗队列的基本运算有什么队列支持随机访问吗队列的英文表示什么是队列队列从哪进、从哪出队列的进出顺序队列是用哪种结构实现的Queue和Deque有什么区别Queue接口的方法Queue中的add与offer的区别offer、poll、peek的模拟实现如何利用链表实现队列如何利用顺序表实现队列什么叫做双端队列</div> </li> <li><a href="/article/1950215918101524480.htm" title="第二十二天（数据结构，无头节点的单项链表）" target="_blank">第二十二天（数据结构，无头节点的单项链表）</a> <span class="text-muted">肉夹馍不加青椒</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>线性表：一个线性表里面可以是任意的数据元素，但是同一个线性表里面数据应该是同类型的1存在一个/唯一被称为第一个节点的节点2存在一个/唯一被称为最后一个节点的节点3除了第一个以外，每一个元素都有一个前驱节点4除了最后一个，每一个元素都有一个后继节点满足以上性质，这个表就被称为线性表数组就是一个线性表想实现线性表的保存，我们需要考虑下面的事情1元素要保存2元素与元素之间的序偶关系谁是前面的谁是后面的我</div> </li> <li><a href="/article/1950215540215705600.htm" title="JVM 内存分配与回收策略：从对象创建到内存释放的全流程" target="_blank">JVM 内存分配与回收策略：从对象创建到内存释放的全流程</a> <span class="text-muted"></span> <div>在JVM的运行机制中，内存分配与回收策略是连接对象生命周期与垃圾收集器的桥梁。它决定了对象在堆内存中的创建位置、存活过程中的区域迁移，以及最终被回收的时机。合理的内存分配策略能减少GC频率、降低停顿时间，是优化Java应用性能的核心环节。本文将系统解析JVM的内存分配规则、对象晋升机制，以及实战中的内存优化技巧。一、对象优先在Eden区分配：新生代的“临时缓冲区”大多数情况下，Java对象在新生代</div> </li> <li><a href="/article/1950214657750921216.htm" title="猎板 PCB 控深槽工艺：5G 基站散热模块的关键支撑" target="_blank">猎板 PCB 控深槽工艺：5G 基站散热模块的关键支撑</a> <span class="text-muted">猎板PCB黄浩</span> <a class="tag" taget="_blank" href="/search/5G/1.htm">5G</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>PCB控深槽工艺在5G基站散热模块中的关键作用：猎板PCB的技术突破在5G基站的密集高频信号与高功率运行环境下，散热性能直接决定了设备的稳定性和寿命。猎板PCB通过创新性的控深槽工艺（控深锣/控深铣），结合材料科学与结构优化，为5G基站散热模块提供了高精度、高可靠性的解决方案，有效攻克了高热负荷下的技术瓶颈。一、5G基站散热的核心挑战热负荷激增：5G基站的射频功放（PA）、电源管理模块等器件功耗显</div> </li> <li><a href="/article/1950213691718823936.htm" title="仿品百达翡丽男表价格(仿品百达翡丽价格一览表)" target="_blank">仿品百达翡丽男表价格(仿品百达翡丽价格一览表)</a> <span class="text-muted">爱表之家</span> <div>百达翡丽作为世界顶级的钟表品牌，其男表以精湛的工艺、卓越的品质和独特的设计赢得了众多钟表爱好者的青睐。然而，由于其高昂的价格，许多消费者转向仿品市场，以较低的价格体验类似的设计与风格【重要提醒】文章最下面有联系方式将对仿品百达翡丽男表的价格进行详细解析，帮助消费者更好地了解这一市场。一、仿品百达翡丽男表价格区间仿品百达翡丽男表的价格因其品质、材质、功能等因素而差异较大，大致可以分为以下几个价格区间</div> </li> <li><a href="/article/1950213272120651776.htm" title="Redis + Caffeine 实现高效的两级缓存架构" target="_blank">Redis + Caffeine 实现高效的两级缓存架构</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Redis+Caffeine实现高效的两级缓存架构引言在现代高并发系统中，缓存是提升系统性能的关键组件之一。传统的单一缓存方案往往难以同时满足高性能和高可用性的需求。本文将介绍如何结合Redis和Caffeine构建一个高效的两级缓存系统，并通过三个版本的演进展示如何逐步优化代码结构。项目源代码：github地址、gitee地址两级缓存架构概述两级缓存通常由本地缓存（如Caffeine）和分布式缓</div> </li> <li><a href="/article/1950209368356089856.htm" title="AI模型训练中过拟合和欠拟合的区别是什么？" target="_blank">AI模型训练中过拟合和欠拟合的区别是什么？</a> <span class="text-muted">workflower</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>在AI模型训练中，过拟合和欠拟合是两种常见的模型性能问题，核心区别在于模型对数据的学习程度和泛化能力：欠拟合（Underfitting）-定义：模型未能充分学习到数据中的规律，对训练数据的拟合程度较差，在训练集和测试集上的表现都不好（如准确率低、损失值高）。-原因：-模型结构过于简单（如用线性模型解决非线性问题）；-训练数据量不足或特征信息不充分；-训练时间太短，模型尚未学到有效模式。-表现：训练</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950208359722446848.htm" title="元宇宙中的视觉技术：虚拟化身与场景生成" target="_blank">元宇宙中的视觉技术：虚拟化身与场景生成</a> <span class="text-muted">xcLeigh</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89CV/1.htm">计算机视觉CV</a><a class="tag" taget="_blank" href="/search/%E5%85%83%E5%AE%87%E5%AE%99/1.htm">元宇宙</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E5%8C%96%E8%BA%AB/1.htm">虚拟化身</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E7%94%9F%E6%88%90/1.htm">场景生成</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a> <div>元宇宙中的视觉技术：虚拟化身与场景生成前言一、元宇宙与视觉技术的深度关联1.1元宇宙概念深度剖析1.2视觉技术：元宇宙的“灵魂之窗”二、虚拟化身：数字世界的“第二自我”2.1虚拟化身技术的深度解析2.1.1核心技术构成2.1.2技术实现原理与流程2.2虚拟化身的应用领域及案例展示2.2.1游戏娱乐领域2.2.2教育培训领域三、场景生成：构建元宇宙的虚拟天地3.1场景生成技术全景透视3.1.1关键技</div> </li> <li><a href="/article/1950207097023033344.htm" title="Pktgen-DPDK：开源网络测试工具的深度解析与应用" target="_blank">Pktgen-DPDK：开源网络测试工具的深度解析与应用</a> <span class="text-muted">艾古力斯</span> <div>本文还有配套的精品资源，点击获取简介：Pktgen-DPDK是基于DPDK的高性能流量生成工具，适用于网络性能测试、硬件验证及协议栈开发。它支持多种网络协议，能够模拟高吞吐量的数据包发送。本项目通过利用DPDK的高速数据包处理能力，允许用户自定义数据包内容，并实现高效的数据包管理与传输。文章将指导如何安装DPDK、编译Pktgen、配置工具以及使用方法，最终帮助开发者和网络管理员深入理解并优化网络</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950206970766094336.htm" title="C++编程基础与面向对象概念解析" target="_blank">C++编程基础与面向对象概念解析</a> <span class="text-muted">侯昂</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/1.htm">面向对象编程</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E8%AF%AD%E6%B3%95/1.htm">C++语法</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E4%B8%8E%E5%AF%B9%E8%B1%A1/1.htm">类与对象</a><a class="tag" taget="_blank" href="/search/%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%A4%9A%E6%80%81%E6%80%A7/1.htm">继承与多态性</a> <div>C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面</div> </li> <li><a href="/article/1950202938265759744.htm" title="你竟然还在用克隆删除？Conda最新版rename命令全攻略！" target="_blank">你竟然还在用克隆删除？Conda最新版rename命令全攻略！</a> <span class="text-muted">曦紫沐</span> <a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">Python基础知识</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E7%AE%A1%E7%90%86/1.htm">虚拟环境管理</a> <div>文章摘要Conda虚拟环境管理终于迎来革命性升级！本文揭秘Conda4.9+版本新增的rename黑科技，彻底告别传统“克隆+删除”的繁琐操作。从命令解析到实战案例，手把手教你如何安全高效地重命名Python虚拟环境，附带版本检测、环境迁移、故障排查等进阶技巧，助你提升开发效率10倍！一、颠覆认知：Conda居然自带重命名功能？很多开发者仍停留在“Conda无法直接重命名环境”的认知阶段，实际上自</div> </li> <li><a href="/article/1950202684451647488.htm" title="[spring6: Mvc-网关]-源码解析" target="_blank">[spring6: Mvc-网关]-源码解析</a> <span class="text-muted"></span> <div>推荐阅读：[spring6:Mvc-函数式编程]-源码解析GatewayServerMvcAutoConfiguration@AutoConfiguration(after={HttpClientAutoConfiguration.class,RestTemplateAutoConfiguration.class,RestClientAutoConfiguration.class,FilterAu</div> </li> <li><a href="/article/1950201171369062400.htm" title="Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具" target="_blank">Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具</a> <span class="text-muted"></span> <div>Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具文章来源：PoixeAI文章目录Zread.AI工具概述核心功能优势亮点典型应用场景上手指南注意事项官网地址Zread.AI由智谱Z.ai推出，是一款面向开发者的AI代码维基工具，可在几秒内把任何公开GitHub仓库转化为结构化中文手册，并通过独家Buzz面板聚合commits、issues与相关新闻，让项目脉搏一目了然</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950199279641489408.htm" title="Android通知(Notification)全面解析：从基础到高级应用" target="_blank">Android通知(Notification)全面解析：从基础到高级应用</a> <span class="text-muted"></span> <div>一、Android通知概述通知(Notification)是Android系统中用于在应用之外向用户传递信息的重要机制。当应用需要告知用户某些事件或信息时，可以通过通知在状态栏显示图标，用户下拉通知栏即可查看详细信息。这种机制几乎被所有现代应用采用，用于推送新闻、消息、广告等内容3。与Toast相比，Notification的优势在于：可以长时间停留在通知栏，适合内容较多且需要持久展示的信息支持丰</div> </li> <li><a href="/article/49.htm" title="辗转相处求最大公约数" target="_blank">辗转相处求最大公约数</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a> <div>无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &</div> </li> <li><a href="/article/176.htm" title="F5负载均衡会话保持技术及原理技术白皮书" target="_blank">F5负载均衡会话保持技术及原理技术白皮书</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a> <div>一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下</div> </li> <li><a href="/article/303.htm" title="Object.equals方法：重载还是覆盖" target="_blank">Object.equals方法：重载还是覆盖</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/generics/1.htm">generics</a><a class="tag" taget="_blank" href="/search/override/1.htm">override</a><a class="tag" taget="_blank" href="/search/overload/1.htm">overload</a> <div>本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu</div> </li> <li><a href="/article/430.htm" title="初始线程" target="_blank">初始线程</a> <span class="text-muted">15700786134</span> <div>      暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr</div> </li> <li><a href="/article/557.htm" title="Linux的tcpdump" target="_blank">Linux的tcpdump</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/tcpdump/1.htm">tcpdump</a> <div>用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直</div> </li> <li><a href="/article/684.htm" title="安卓程序listview优化后还是卡顿" target="_blank">安卓程序listview优化后还是卡顿</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb</div> </li> <li><a href="/article/811.htm" title="扩展easyUI tab控件，添加加载遮罩效果" target="_blank">扩展easyUI tab控件，添加加载遮罩效果</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&</div> </li> <li><a href="/article/938.htm" title="gradle上传jar到nexus" target="_blank">gradle上传jar到nexus</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a> <div>原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon</div> </li> <li><a href="/article/1065.htm" title="千万条数据外网导入数据库的解决方案。" target="_blank">千万条数据外网导入数据库的解决方案。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec</div> </li> <li><a href="/article/1192.htm" title="JAVA IO InputStreamReader和OutputStreamReader" target="_blank">JAVA IO InputStreamReader和OutputStreamReader</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA.io%E6%93%8D%E4%BD%9C+%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">JAVA.io操作 字符流</a> <div>这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据</div> </li> <li><a href="/article/1319.htm" title="MO、MT解读" target="_blank">MO、MT解读</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/GSM/1.htm">GSM</a> <div>MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP</div> </li> <li><a href="/article/1446.htm" title="五个JavaScript基础问题" target="_blank">五个JavaScript基础问题</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/call/1.htm">call</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/Hoisting/1.htm">Hoisting</a> <div>下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs</div> </li> <li><a href="/article/1573.htm" title="【Thrift二】Thrift Hello World" target="_blank">【Thrift二】Thrift Hello World</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency> </div> </li> <li><a href="/article/1700.htm" title="【Avro一】Avro入门" target="_blank">【Avro一】Avro入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8/1.htm">入门</a> <div>本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj</div> </li> <li><a href="/article/1827.htm" title="安装nginx+ngx_lua支持WAF防护功能" target="_blank">安装nginx+ngx_lua支持WAF防护功能</a> <span class="text-muted">ronin47</span> <div>需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb</div> </li> <li><a href="/article/1954.htm" title="java-5.查找最小的K个元素-使用最大堆" target="_blank">java-5.查找最小的K个元素-使用最大堆</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void</div> </li> <li><a href="/article/2081.htm" title="TCP的TIME-WAIT" target="_blank">TCP的TIME-WAIT</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA</div> </li> <li><a href="/article/2208.htm" title="jquery ajax 序列化表单" target="_blank">jquery ajax 序列化表单</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/Jquery+ajax+%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">Jquery ajax 序列化</a> <div>   checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo</div> </li> <li><a href="/article/2335.htm" title="Apache集群乱码和最高并发控制" target="_blank">Apache集群乱码和最高并发控制</a> <span class="text-muted">cuisuqiang</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E7%A0%81/1.htm">乱码</a> <div>都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot</div> </li> <li><a href="/article/2462.htm" title="websocket" target="_blank">websocket</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a> <div>一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长</div> </li> <li><a href="/article/2589.htm" title="菜鸟分析网络执法官" target="_blank">菜鸟分析网络执法官</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>  最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. </div> </li> <li><a href="/article/2716.htm" title="Android相对布局属性全集" target="_blank">Android相对布局属性全集</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的</div> </li> <li><a href="/article/2843.htm" title="Tomcat内存设置详解" target="_blank">Tomcat内存设置详解</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/tomcat%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat内存设置</a> <div>Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提</div> </li> <li><a href="/article/2970.htm" title="Java6 JVM参数选项" target="_blank">Java6 JVM参数选项</a> <span class="text-muted">greatwqs</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/JVM+Options/1.htm">JVM Options</a> <div>Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: ken.wug@gmail.com 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt</div> </li> <li><a href="/article/3097.htm" title="weblogic创建JMC" target="_blank">weblogic创建JMC</a> <span class="text-muted">i5land</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers</div> </li> <li><a href="/article/3224.htm" title="基于 DHT 网络的磁力链接和BT种子的搜索引擎架构" target="_blank">基于 DHT 网络的磁力链接和BT种子的搜索引擎架构</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/DHT/1.htm">DHT</a> <div>上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使</div> </li> <li><a href="/article/3351.htm" title="sql添加、删除表中的列" target="_blank">sql添加、删除表中的列</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO</div> </li> <li><a href="/article/3478.htm" title="PHP中二维数组的排序方法" target="_blank">PHP中二维数组的排序方法</a> <span class="text-muted">abc123456789cba</span> <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div><?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level </div> </li> <li><a href="/article/3605.htm" title="hive优化之------控制hive任务中的map数和reduce数" target="_blank">hive优化之------控制hive任务中的map数和reduce数</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E4%BC%98%E5%8C%96/1.htm">hive优化</a> <div>一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. </div> </li> <li><a href="/article/3732.htm" title="Spring Boot 1.2.4 发布" target="_blank">Spring Boot 1.2.4 发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a> <div>Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>