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/1896041849651523584.htm" title="DeepSeek应用场景及其解决的问题" target="_blank">DeepSeek应用场景及其解决的问题</a> <span class="text-muted">杏花春雨江南</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a> <div>DeepSeek是一种基于深度学习的智能技术，能够处理复杂的非结构化数据（如文本、图像、语音等），并在企业级应用开发中发挥重要作用。以下是DeepSeek在企业级应用开发中的典型应用场景及其解决的问题：1.企业知识管理与智能搜索场景：企业拥有大量的文档、报告、邮件、会议记录等非结构化数据，员工需要快速找到相关信息。DeepSeek的作用：通过语义搜索和自然语言处理（NLP），DeepSeek可以理</div> </li> <li><a href="/article/1896040839600205824.htm" title="分布式系统中的关键技术解析：幂等性、负载均衡、限流算法及其实现" target="_blank">分布式系统中的关键技术解析：幂等性、负载均衡、限流算法及其实现</a> <span class="text-muted">guihong004</span> <a class="tag" taget="_blank" href="/search/java%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java面试题</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/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/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>在构建高效、可靠的分布式系统时，确保系统的各个组件能够正确处理重复请求（即实现幂等性）、合理分配工作负载（负载均衡）、以及有效控制访问速率以防止过载（限流），是至关重要的。这些技术不仅影响着用户体验，还直接关系到系统的稳定性和安全性。本文将深入探讨几种关键技术及其具体实现方法，包括如何保证操作的幂等性，常见的负载均衡算法有哪些，限流策略中常用的算法介绍，特别是详细解释了计数器（固定窗口）算法和滑动</div> </li> <li><a href="/article/1896035419930292224.htm" title="学习笔记分享-进阶数据结构与算法-图-并查集-优化" target="_blank">学习笔记分享-进阶数据结构与算法-图-并查集-优化</a> <span class="text-muted">-暮倦-</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%88%86%E4%BA%AB-%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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前言图片上面的personal表示只有图片上面的一行语句是解释图片内容的、local表示这个图片所在标题下的所有语句都是解释图片内容的、global表示有多个标题下的所有语句都是解释图片内容的我是一名大二的学生，学了差不多一年java技术栈了，想记录一下自己对知识点的心得，目前还是个小白，期望大佬们可以指出我笔记中的不足之处、对知识点的认知错误、笔记结构的混乱等这些图片内容都是在观看黑马课程时的视</div> </li> <li><a href="/article/1896034160477270016.htm" title="十、Spring Boot：Spring Security（用户认证与授权深度解析）" target="_blank">十、Spring Boot：Spring Security（用户认证与授权深度解析）</a> <span class="text-muted">伯牙碎琴</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Spring%E6%A1%86%E6%9E%B6/1.htm">Spring框架</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>SpringSecurity：用户认证与授权深度解析在现代Web应用中，安全性是至关重要的。SpringSecurity作为Spring生态系统中的核心安全框架，提供了强大的用户认证和授权功能，能够有效保护应用免受各种安全威胁。本文将深入探讨SpringSecurity的用户认证和授权机制，包括其核心概念、实现方式以及在SpringBoot项目中的集成方法。一、SpringSecurity概述1.</div> </li> <li><a href="/article/1896029243532439552.htm" title="前端架构 —— 脚手架的开发流程" target="_blank">前端架构 —— 脚手架的开发流程</a> <span class="text-muted">mask-li</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、脚手架开发流程详解开发流程创建npm项目创建脚手架入口文件，最上方添加：#!/usr/bin/envnode配置package.json，添加bin属性编写脚手架代码将脚手架发布到npm使用流程安装脚手架npminstall-gyour-own-cli使用脚手架your-own-cli二、脚手架开发难点解析分包：将复杂的系统拆分成若干个模块命令注册：vuecreatevueaddvueinvo</div> </li> <li><a href="/article/1896028864522547200.htm" title="材料仿真软件：VASP_（6）.VASP输入文件详解：KPOINTS" target="_blank">材料仿真软件：VASP_（6）.VASP输入文件详解：KPOINTS</a> <span class="text-muted">kkchenjj</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%AD%90%E5%8A%A8%E5%8A%9B%E5%AD%A6%E4%BB%BF%E7%9C%9F/1.htm">分子动力学仿真</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%AD%90%E5%8A%A8%E5%8A%9B%E5%AD%A6/1.htm">分子动力学</a><a class="tag" taget="_blank" href="/search/%E4%BB%BF%E7%9C%9F%E6%A8%A1%E6%8B%9F/1.htm">仿真模拟</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F%E4%BB%BF%E7%9C%9F/1.htm">模拟仿真</a> <div>VASP输入文件详解：KPOINTS在材料仿真软件中，KPOINTS文件是一个非常重要的输入文件，用于定义布里渊区的k点网格。k点的选择直接影响计算的精度和计算时间。在VASP中，KPOINTS文件的格式和内容决定了k点的分布和数量，从而影响电子结构计算的收敛性和准确性。k点的基本概念在固体物理学中，布里渊区是倒格子空间中的一个基本区域，用于描述晶体的电子状态。k点是布里渊区中的点，用于进行电子结</div> </li> <li><a href="/article/1896028611681513472.htm" title="【线代】《线性代数的几何意义》——摘录笔记（四）" target="_blank">【线代】《线性代数的几何意义》——摘录笔记（四）</a> <span class="text-muted">jingyu404</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0/1.htm">线性代数</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E5%8F%8A%E6%9D%82%E8%A8%80/1.htm">读书及杂言</a> <div>内容：大多是摘录原书，概括、理解是自己总结的。目的：供自己温习使用，有摘录不全或总结不精的部分。他人学习，仅供参考。目录U6线性方程组1.作用于向量的形式2.解的形式3.解的代数形式4.解的结构5.方程组、矩阵与向量的关系U7二次型1.定义2.表示（多项式与向量）3.用途4.几何意义5.二次型合同对角化6.惯性定理7.正定二次型笔记链接汇总U6线性方程组1.作用于向量的形式（1）看成矩阵对向量（x</div> </li> <li><a href="/article/1896028107752665088.htm" title="前端架构设计" target="_blank">前端架构设计</a> <span class="text-muted">weixin_34266504</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95/1.htm">测试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发</div> </li> <li><a href="/article/1896027603450523648.htm" title="ODX（Open Diagnostic Data Exchange）简介" target="_blank">ODX（Open Diagnostic Data Exchange）简介</a> <span class="text-muted">aFakeProgramer</span> <a class="tag" taget="_blank" href="/search/AP/1.htm">AP</a><a class="tag" taget="_blank" href="/search/AUTOSAR/1.htm">AUTOSAR</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/ODX/1.htm">ODX</a> <div>ODX（OpenDiagnosticDataExchange）是一种由ASAM制定的开放标准，用于描述和交换ECU（电子控制单元）诊断数据，广泛应用于车辆诊断。ODX文件采用XML格式，包含通讯参数，如ISO15765-2/3时间参数。ASAM（AssociationforStandardisationofAutomationandMeasuringSystems）ODX文件的结构ODX文件的结构</div> </li> <li><a href="/article/1896026091177439232.htm" title="解析IPD、LTC、ISC" target="_blank">解析IPD、LTC、ISC</a> <span class="text-muted">芊言凝语</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>IPD域（IntegratedProductDevelopment，集成产品开发）含义：IPD是一种先进的产品开发理念和模式，强调从市场需求出发，打破部门壁垒，通过跨部门、跨领域的协同开发团队，采用结构化的流程体系，将产品研发划分为多个阶段，以提高产品研发的效率和质量，快速将产品推向市场。核心要素以市场为导向：产品创新必须基于对市场需求和竞争态势的深入分析，确保研发方向与市场需求相符。跨部门协同：</div> </li> <li><a href="/article/1896024194454450176.htm" title="学习dify第二天-web下篇" target="_blank">学习dify第二天-web下篇</a> <span class="text-muted">一直走下去-明</span> <a class="tag" taget="_blank" href="/search/next.js/1.htm">next.js</a><a class="tag" taget="_blank" href="/search/dify%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/1.htm">dify源码学习</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>学习dify第二天-web下篇引言web目录结构配置入口文件分析下怎么封装的请求最后总结：参考阅读：React基础用next.js写个页面跳转的应用seo搜索引擎优化引言react：ReactFoundations:AboutReactandNext.js|Next.js如果不会next.js可以先看看这个，不看其实也没关系，学下思路也可以。next_web小demoweb目录结构*mocks*:</div> </li> <li><a href="/article/1896023815608135680.htm" title="在nodejs中使用ElasticSearch（二）核心概念，应用" target="_blank">在nodejs中使用ElasticSearch（二）核心概念，应用</a> <span class="text-muted">konglong127</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a> <div>核心概念1、索引（index）索引在Elasticsearch7之后，相当于关系型数据库中的表，之前相当于关系型数据库中的数据库。#创建索引PUT/my_index#获取指定索引GET/my_index#获取所有索引GET/_cat/indices?v#模糊匹配索引POST*index*/_search#删除索引DELETE/my_index#创建索引，同时指定索引结构#number_of_sha</div> </li> <li><a href="/article/1896020284968857600.htm" title="深入理解 JSP：从基础知识到实战技巧的全面解析" target="_blank">深入理解 JSP：从基础知识到实战技巧的全面解析</a> <span class="text-muted">CarlowZJ</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> <div>JSP（JavaServerPages）是一种基于Java的服务器端技术，用于开发动态Web应用。它通过将Java代码嵌入到HTML页面中，简化了Web开发的复杂性。JSP是JavaWeb开发的重要组成部分，与Servlet、JavaBean等技术紧密集成，广泛应用于企业级Web应用开发。本文将从基础知识、核心特性、生命周期、与Servlet的关系、框架支持、最佳实践等方面对JSP进行详细解析，帮</div> </li> <li><a href="/article/1896020283073032192.htm" title="华为战略解码-162页 八大章节 精读" target="_blank">华为战略解码-162页 八大章节 精读</a> <span class="text-muted">智慧化智能化数字化方案</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA%E5%AD%A6%E4%B9%A0%E4%B8%93%E6%A0%8F/1.htm">华为学习专栏</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>该文档主要解读了华为战略解码的过程和内容，强调了领导力在战略管理中的重要性，介绍了华为战略管理的七个关键点以及领导力的七个特质。文档详细阐述了华为在战略解码过程中如何利用BLM模型等工具，以及如何从市场洞察、业务设计等方面制定和执行战略。同时，也介绍了华为干部九条素质与领导力专项素质能力的层级划分，强调领导力对华为战略实施的重要性。目录(一)前四章节总结解析...41.战略成长...4</div> </li> <li><a href="/article/1896018391341264896.htm" title="设计模式之适配器模式" target="_blank">设计模式之适配器模式</a> <span class="text-muted">Forget the Dream</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F/1.htm">适配器模式</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言狂风呼啸，一场强台风正以迅猛之势逼近你所在的城市，带来极大的威胁。而祸不单行，市中心的一座大楼突发火灾，情况万分危急。应急指挥中心里气氛凝重，领导紧盯着屏幕，一边是GIS系统中由气象部门实时更新的降雨量、风速数据以及精准的地图信息，这些数据对于掌握台风的动态和影响范围至关重要；另一边则是CAD系统中结构工程师精心标注的建筑承重参数，这是评估大楼及周边建筑安全状况的关键依据。领导需要在极短时间内</div> </li> <li><a href="/article/1896018264958496768.htm" title="Linux15 数据链路层" target="_blank">Linux15 数据链路层</a> <span class="text-muted">辣椒味番茄</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>数据链路层什么是以太网以太网帧格式MAC地址MTU-以太网最大传输单元网络层IP数据包分包（分片）MTU对UDP协议的影响MTU对于TCP协议的影响ARP协议ARP协议的作用ARP协议的工作流程ARP数据报格式什么是以太网“以太网”不是一种具体的网络,而是一种技术标准;既包含了数据链路层的内容,也包含了一些物理层的内容.例如:规定了网络拓扑结构,访问控制方式,传输速率等例如以太网中的网线必须使用双</div> </li> <li><a href="/article/1896015991305990144.htm" title="HTML学习笔记" target="_blank">HTML学习笔记</a> <span class="text-muted">誓死守护发际线</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录(一)HTML简介一、网页1.什么是网页2.什么是HTML二、常用的浏览器1.常用的浏览器2.浏览器内核（渲染引擎）3.web标准(二)HTML标签一、HTML语法规范1.基本语法概述2.标签的关系二、HTML基本结构标签三、网页开发工具1.VSCode的使用：2.vsCode工具生成骨架标签新增代码1）标签2）lang语言3）charset字符集四、HTML常用标签1.语义化标签：2.标</div> </li> <li><a href="/article/1896013848167641088.htm" title="XSL是指可扩展样式表语言 (EXtensible Stylesheet Language)" target="_blank">XSL是指可扩展样式表语言 (EXtensible Stylesheet Language)</a> <span class="text-muted">万事俱备，就差一个程序员了</span> <div>XSLXSL是指可扩展样式表语言(EXtensibleStylesheetLanguage)，是一种用于以可读格式呈现XML数据的语言。目录简介语法XSL是否与XML相同用途应用简介XSL之于XML,就像CSS之于HTML。它是指可扩展样式表语言(EXtensibleStylesheetLanguage)。这是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容</div> </li> <li><a href="/article/1896013087954235392.htm" title="HTML AI 编程助手" target="_blank">HTML AI 编程助手</a> <span class="text-muted">wjs2024</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>HTMLAI编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTMLAI编程助手的功能、应用场景以及如何利用它提高编程效率。HTMLAI编程助手概述HTMLAI编程助手是一种基于人工智能技术的辅助工具，旨在帮助开发者快速、高效地完成HTML代码编写。通过学习大量的HTML代码，AI编程助手</div> </li> <li><a href="/article/1896011702110056448.htm" title="Linux 程序员必修课：命令、脚本、程序、进程与线程的全貌" target="_blank">Linux 程序员必修课：命令、脚本、程序、进程与线程的全貌</a> <span class="text-muted">内核程序员kevin</span> <a class="tag" taget="_blank" href="/search/Linux%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">Linux程序员</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E7%A8%8B/1.htm">进程</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>Linux程序员必修课：命令、脚本、程序、进程与线程的全貌1.Linux命令、脚本、程序、进程与线程的关系对比表概念定义存储形式执行方式是否需要进程是否支持并发示例命令用户输入给shell的指令，可以是内置命令或外部命令直接输入在shell中（无固定存储）由shell解析并执行仅外部命令需要取决于命令，如&可后台运行ls、cd、echo脚本一组命令的集合，存储在文件中，通常是shell脚本文本文件</div> </li> <li><a href="/article/1896011072146567168.htm" title="如何解析配置文件" target="_blank">如何解析配置文件</a> <span class="text-muted">啊念着倒嘛干</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>如何解析配置文件什么是配置文件？在计算机科学领域，配置文件（英语：configurationfile）是一种计算机文件，可以为一些计算机程序配置参数和初始设置。一个项目中，为什么要设置一个配置文件呢？方便修改参数设置和逻辑代码分离（解耦）（高内聚，低耦合）常见的配置文件格式：aaa.inixxx.xmlxxxxx.jsonxxfada.yaml什么是json文本、字符串、有固定的格式，格式长得像p</div> </li> <li><a href="/article/1896005400419954688.htm" title="XML标记语言简介" target="_blank">XML标记语言简介</a> <span class="text-muted">ozawacai</span> <a class="tag" taget="_blank" href="/search/Notes/1.htm">Notes</a><a class="tag" taget="_blank" href="/search/Of/1.htm">Of</a><a class="tag" taget="_blank" href="/search/Computer/1.htm">Computer</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>XML标记语言简介XML（eXtensibleMarkupLanguage，可扩展标记语言）是一种标记语言，设计用于存储和传输数据。它通过标签结构来描述数据，并且标签是自定义的，这使得XML非常灵活。以下是对XML及其用途、好处和应用场景的详细介绍：什么是XMLXML是一种文本格式，用于表示结构化信息。其设计目标是可读性好、易于理解和扩展。XML文档的基本结构如下：ContentXML的用途数据存</div> </li> <li><a href="/article/1896003255469666304.htm" title="Kotlin 数据类与密封类" target="_blank">Kotlin 数据类与密封类</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Kotlin数据类与密封类引言在编程语言中，数据类和密封类是两种非常有用的特性，特别是在Kotlin中。数据类用于创建不可变的数据持有类，而密封类则用于限制类的继承结构。本文将详细介绍Kotlin中的数据类与密封类，包括它们的定义、使用场景以及它们在Kotlin中的优势。数据类定义数据类在Kotlin中用于创建不可变的值对象，它自动提供构造函数、getter、toString、equals、has</div> </li> <li><a href="/article/1896001867968737280.htm" title="深入解析微服务架构之Spring Cloud" target="_blank">深入解析微服务架构之Spring Cloud</a> <span class="text-muted">一休哥助手</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E7%B3%BB%E7%BB%9F/1.htm">分布式系统</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a> <div>目录微服务架构简介什么是微服务微服务的优势微服务的挑战SpringCloud概述SpringCloud简介SpringCloud的主要特性SpringCloud的模块划分SpringCloud核心组件详解SpringCloudNetflixSpringCloudConfigSpringCloudGatewaySpringCloudSleuthSpringCloudBus实战案例：构建一个简单的微服</div> </li> <li><a href="/article/1896001238248517632.htm" title="完整的 Python 数据分析案例：在线游戏玩家付费预测" target="_blank">完整的 Python 数据分析案例：在线游戏玩家付费预测</a> <span class="text-muted">萧十一郎@</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/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> <div>目录1.案例背景代码实现2.主要的代码难点解析2.1数据清洗-缺失值处理2.2特征工程-新特征计算与独热编码2.3特征选择2.4模型训练与评估2.5数据可视化3.可能改进的代码3.1数据清洗与特征工程改进3.2模型改进3.3可视化改进1.案例背景在在线游戏行业中，准确预测玩家是否会付费以及付费金额，对于游戏运营商制定营销策略、优化游戏设计和提高盈利能力至关重要。本案例将基于玩家的游戏行为数据（如游</div> </li> <li><a href="/article/1896000228062982144.htm" title="太翌氏计算机工程蓝图" target="_blank">太翌氏计算机工程蓝图</a> <span class="text-muted">太翌修仙笔录</span> <a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a><a class="tag" taget="_blank" href="/search/%E5%A4%AA%E7%BF%8C%E6%B0%8F%E6%A0%BC%E7%89%A9%E8%87%B4%E7%9F%A5%E6%96%B9%E6%B3%95%E8%AE%BA/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/%E9%87%8D%E6%9E%84/1.htm">重构</a><a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%AD%90%E8%AE%A1%E7%AE%97/1.htm">量子计算</a> <div>###**太翌氏计算机（TaiyiComputingSystem,TCS）工程蓝图**---####**一、核心架构总览**![太翌氏计算机架构图](https://via.placeholder.com/800x600.png?text=TCS+Architecture+Diagram)*图示说明：三维分形拓扑结构，中心为「太上核心」，辐射出「灵宝量子通道」与「源始流形网络」*---####**</div> </li> <li><a href="/article/1895998715106226176.htm" title="My SQL笔记" target="_blank">My SQL笔记</a> <span class="text-muted">党和人民</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>数据库的使用主要功能：查询数据(SELECT):从一个或多个表中检索数据。插入数据(INSERT):向表中添加新记录。更新数据(UPDATE):修改现有记录。删除数据(DELETE):移除记录。定义数据库结构(CREATE,DROP):创建、修改或删除数据库对象（如表、索引等）。创建数据库创建数据库是通过SQL语句来完成的，通常使用createdatabase语句常用数据类型：整型(int)：用于</div> </li> <li><a href="/article/1895998210002972672.htm" title="第三百七十二节 JavaFX教程 - JavaFX HTMLEditor" target="_blank">第三百七十二节 JavaFX教程 - JavaFX HTMLEditor</a> <span class="text-muted">程序猿小D</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>JavaFX教程-JavaFXHTMLEditorHTMLEditor控件是一个富文本编辑器，具有以下功能。粗体斜体下划线删除线字体系列字体大小前景色背景颜色缩进项目符号列表编号列表对齐水平线复制文本片段粘贴文本片段HTMLEditor类返回HTML字符串中的编辑内容。创建HTML编辑器importjavafx.application.Application;importjavafx.scene.</div> </li> <li><a href="/article/1895997072004411392.htm" title="深入解析 Flutter兼容鸿蒙next全体生态的横竖屏适配与多屏协作兼容架构" target="_blank">深入解析 Flutter兼容鸿蒙next全体生态的横竖屏适配与多屏协作兼容架构</a> <span class="text-muted">淼学派对</span> <a class="tag" taget="_blank" href="/search/flutter_%E9%B8%BF%E8%92%99next/1.htm">flutter_鸿蒙next</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>✅近期推荐：求职神器https://bbs.csdn.net/topics/619384540欢迎大家订阅系列专栏：flutter_鸿蒙next淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！目录写在前面1.Flutter的基本适配机制1.1响应式布局1.2逻辑像素2.横屏与竖屏的适配2.1方向感知2.2针对方向的布局优化3.多屏协作的实现3.1适</div> </li> <li><a href="/article/1895996945772638208.htm" title="基于 ‌MySQL 数据库‌对三级视图（用户视图、DBA视图、内部视图）的详细解释" target="_blank">基于 ‌MySQL 数据库‌对三级视图（用户视图、DBA视图、内部视图）的详细解释</a> <span class="text-muted">huaqianzkh</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E7%90%86%E8%A7%A3%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">架构理解与实践</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/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/dba/1.htm">dba</a> <div>基于‌MySQL数据库‌对三级视图（用户视图、DBA视图、内部视图）的详细解释，结合理论与实际操作说明：一、三级视图核心概念数据库的三级视图是ANSI/SPARC体系结构的核心思想，MySQL的实现逻辑如下：‌层级‌‌别称‌‌核心内容‌‌MySQL中的体现‌‌用户视图‌外模式/子模式用户看到的数据逻辑结构用户权限内的表、视图、可操作字段‌DBA视图‌概念模式/逻辑模式全局逻辑结构、表关系、约束in</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>