html, css和js
1，html标签
块级标签（block）：每个块元素独立显示，好像前后有换行 （特立独行）
内联标签（incline）：内联元素随着文字出现在行内，相互依靠在一起 （随波逐流）
Block： <h1>....<h6>, <p>, <blockquote>，<ol>, <ul>, <li>，<div>、<dl>、<table>、<address>、<form>
Incline: <q>, <a>, <em>，<img>、<span>、<i>、<strong>、<label>、<var>、<cite>、<code>
1.1 <!DOCTYPE html>: DOCTYPE标签是一种标准通用标记语言的文档类型声明，告诉浏览器如何处理网页
参考：https://www.cnblogs.com/alwaysblog/p/5822834.html 1、定义： DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 2、作用： 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.compatMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat， 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。 如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式 那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。 这就是<!DOCTYPE html>的作用。 3、使用方式： HTML 5： <!DOCTYPE html> HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset 该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
参考：https://www.cnblogs.com/btgyoyo/p/6218506.html SGML SGML 是一种很强大但很复杂的标记语言，HTML、XML 就是从中衍生出来的。 SGML 的例子如下： <QUOTE TYPE="example"> typically something like <ITALICS>this</ITALICS> </QUOTE> SGML 最为强大和古老，XML 是 SGML 的一个子集，HTML 最初也试图成为 SGML 的一个子集。 实际上 W3C 下与网页（超文本）相关的标准有两个系列：HTML 系列和 XHTML 系列。前者从 HTML 第一版一直发展到 HTML 4.x、HTML5，而 XHTML 系列从 XHTML 1.0、1.1、2.0 跳跃到 HTML5 的一部分：所谓的“XHTML5”。HTML 系列的工作重点在于丰富与超文本相关的功能、标记，提供较好的兼容性，更加面向“人”；而 XHTML 系列的工作重点在于将 HTML 改为更加符合 XML 严格规范的格式，更加面向“机器”。 XML 的语法很严格，是 W3C 的宝贝，所以 W3C 试图把各种东西都变成 XML 的子集或应用，比如 MathML，SVG 等。可是其地位逐渐受到其他一些轻量标记语言的威胁。 从IETF到W3C：HTML 4之路 HTML 1并不曾存在，HTML的第一个官方版本就是由IETF（互联网工程任务组）推出的HTML 2.0。问世之前，这个版本中的很多细则已经被实现，比如，1994年的Mosaic浏览器已经实现了在文档中嵌入图片的方法，后来HTML 2.0便吸纳了img这个标签。 后来，W3C取代IETF的角色，成为HTML的标准组织，1990年代的后半页，HTML的版本被频繁修改，直到1999年的HTML 4.01， 至此，HTML到达了它的第一个拐点。 XHTML1.0:XML风格的HTML 浏览器的兼容性问题，有很大一部分的原因是，html标签书写的不规范，导致了各自解释的不同。xhtml的出现，就是要以xml的规范来重新改写html。 HTML在HTML 4.01之后的第一个修订版本就是XHTML 1.0。 XHTML 1.0是基于HTML 4.01的，并没有引入任何新标签或属性，唯一的区别是语法，HTML对语法比较随便，而 XHTML则要求XML般的严格语法。 使用严格的语法规范并非坏事，要求开发者使用单一的代码风格，比如，HTML4.01允许你使用大写或小写字母标识标记元素和属性，XHTML则只 允许小写字母。XHTML1.0的推出刚好碰上了CSS的崛起，Web开发设计者们开始意识到Web标准问题，基于XHTML的严格语法规范被视为编写 HTML代码的最佳实践。 W3C推出XHTML 1.1 如果说XHTML 1.0是XML风格的HTML，XHTML 1.1则是货真价实的XML。这意味着XHTML 1.1无法使用 text/htmlmime-type直接输出，然而，如果Web开发者使用XMLmime-type，则当时的主流浏览器，IE则压根不支持。看上去，W3C似乎正在与当时的Web脱节。 从WebApps1.0到HTML 5 从一开始，WHATWG就和W3C走不同的路线，W3C对问题的讨论是集体投票，而WHATWG则由主笔IanHickson定度。表面上看，W3C更民主，然而事实上，各种内部纷争会使一些决议限于泥潭，在WHATWG，事情的进展会更容易，不过，主笔的权力并非无限大，他们的委员会可以 对那些过于偏执的主笔进行弹劾。 一开始，WHATWG的主要工作包括两部分，Web Forms 2.0和Web Apps 1.0，它们都是HTML的扩展，后来，他们合并到一起成为现在的HTML 5规范。在WHATWG致力于HTML 5的同时，W3C继续他们的XHTML 2.0，然而，他们慢慢地陷入困境。 2006年10月，Web之父Tim Berners-Lee发表了一篇博客文章，表示，从HTML走向XML的路是行不通的，几个月后，W3C组建了一个新的HTML工作组，他们非常明智地 选择了WHATWG的成果作为基础。这一转变带来一些困惑，W3C同时进行这两套规范，XHTML2和HTML 5（注意，W3C的HTTML5在5之前有个空格，而WHATWG的HTML 5则没有空格），而WHATWG也在进行着同样的工作。 XHTML已死：XHTML语法永存 这一混乱局面到了2009年开始变得清晰，W3C宣布终止XHTML2的工作，这是一份关于XHTML2的迟到的讣告。这一消息被那些XML的反对 者视为珍宝，他们借此嘲笑那些使用XHTML1规范的人，然而他们似乎忘记了，XHTML1和XHTML2是截然不同的东西。于此同时，XHTML1规范的制定者担心，XHTML1中的严格语法规范会被HTML 5弃用，这种担心后来证明是多余的，HTML 5既支持松散语法，也支持XHTML1般的严格语 法。 <!DOCTYPE> 文档类型通常会出现在文档的第一行,它不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 如果文档头的文档类型没有书写或者书写错误，浏览器都会采用兼容模式来解析。兼容模式会 兼容一些老的浏览器的标准。quirks mode(怪异模式) 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。 常用的 DOCTYPE 声明: HTML 5： <!DOCTYPE html> HTML 4.01 Strict： 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset 该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1.2 <meta>：位于<head></head>标签中，告诉浏览器文件的类型和字符格式等信息
<meta http-equiv="content-type" content="text/html; charset=utf-8"> http-equiv="content-type"：表示为http请求头中的content-typ属性提供信息（如请求头中Content-Type：text/html; charset=utf-8） content="text/html; charset=utf-8" : html文件，编码格式为utf-8
1.3 <img/>标签：显示图片
1 <img src="../images/red.jpg" alt="the default text" width="48" height="100"/> <!-- .. 表示当前路径的父路径 --> <!-- src属性：../images/red.jpg表示当前路由的相对路径，也可以为url绝对路径--> <!-- alt属性：图像不能显示时，加载的文字内容--> <!-- width="48" height="100": 不添加时浏览器会自动决定，添加时保证和图片像素一致--> 2 <a href="image.html"><img src="../images/red.jpg" alt="the default text" /> </a> <!--图片变为连接，点击图片时跳转--> 3 <img src="../images/red.jpg" /> 加载完当前网页文件后，再向服务器请求red.jpg图片 JPEG图片：可以用1600中颜色显示图像；“有损”格式，文件缩小时丢失部分图像信息；不支持透明； 多用于照片显示 GIF图片： 256中颜色显示图像；“无损格式”，文件缩小时不丢失图像信息；允许背景色设为“透明”，即图像背景可以穿透显示； 多用于logo图片显示
1.4 <a></a>标签：建立超链接
1 <a href="https:www.starbuzzcoffee.com/index.html" target="_blamk" title=" 提示信息"> coffee</a> <!--title属性：鼠标悬停时显示的信息--> <!--target=“item”属性：在名为item的窗口中打开连接，若target="_blamk"则总是打开新窗口--> 2 <a href="index.html#chai" title=" 提示信息"> coffee</a> <!--在index.html页面中设置<a id="chai">The Tea</a>, 则点击coffee时定位到index.html中id=“chai“”的a标签--> 3 (https:www.starbuzzcoffee.com/index.html, 其中https为接受资源的协议，中间为网站名，index.html为网站根目录到该资源的绝对路径) (www.baidu.com为网站名，baidu.com为域名，一个域名上可以建立多个网站，如fanyi.baidu.com)
（div: 把块级内容分成不同的逻辑部分，span：把内联内容分成不同的逻辑部分）
1.5 <table></table> 表格标签
常用标签
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格的单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义表格的列属性 |
简单表格：
1,<th>为标题，在第一行，若将每一行的第一项<td>换为<th>,则标题列在左边第一列。2，设置border宽度后表格线条才能显示出来 3,设置标题可以用<caption>标签（属性caption-sied:bottom;可以将标题放到下面） 4，对于table, td, th, caption等标签都可以通过样式表设置其属性（border,magin, padding,font等） <table border="1"> <caption>xxx表</caption> <tr> <th>人物</th> <th>介绍</th> <th>产品</th> </tr> <tr> <td>史蒂夫·保罗·乔布斯</td> <td>苹果CEO</td> <td>Apple系列</td> </tr> <tr> <td>丹尼斯·里奇</td> <td>C语言之父</td> <td>C语言</td> </tr> <tr> <td>比尔·盖茨</td> <td>微软CEO</td> <td>Windows系统</td> </tr> </table> ----------------------------------------------------------------------------- <table border="1" cellpadding="10" cellspacing="10" bgcolor="red" align="center"> 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离。 align:单元格对齐方式，包括center，left，right ---------------------------------------------------------------------------------- 合并单元格(rowspan, colspan) rowspan 合并同行 <table border="1"> <caption>xxx表</caption> <tr> <td rowspan="2" >xxx</td> <td>xxx</td> <td>xxx </td> </tr> <tr> <td>xxx</td> <td>xxx</td> </tr> </table> colspan 合并同列 <table border="1"> <caption>xxx表</caption> <tr> <td colspan="2">xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr> </table> ------------------------------------------------------------------------------- 表格嵌套 <table>标签可以嵌套在<td>中 <table border="1"> <caption>xxx表</caption> <tr> <td >xxx</td> <td>xxx</td> <td>xxx </td> </tr> <tr> <td>xxx</td> <td> <table> <tr> <th>内嵌表格标题</th> </tr> <tr> <td>内嵌表格内容</td> </tr> </table> </td> <td>xxx</td> </tr> </table>
1.6<form></form>表单标签
表单用于用户输入数据，创建HTML表单，向服务器提供数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单属性：
<form action=" " method="post" ></form>
action [URL]: 规定当提交表单时向何处发送表单数据，为空时表示当前url路径。
method [get/post]: 规定用于发送 form-data 的 HTTP 方法。
get: from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
post:from表单里所填的值，附加在HTML Headers上。
enctype [string]:规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值：
1.application/x-www-form-urlencoded ：在发送前编码所有字符（默认方式）（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
2.multipart/form-data ：不对字符编码，包含文件上传控件的表单时，必须使用该值
3.text/plain ：空格转换为 "+" 加号，但不对特殊字符编码
title：设置网站访问者的鼠标放在表单上的任意位置停留时，浏览器用小浮标显示的文本。
name:表单的名称。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
表单元素：
参考：https://www.cnblogs.com/yangxiaolan/p/5617606.html 文本框input <input type="" name="" /> （设置属性包括type，name,size,value,disabled,malength,readonly等） type 取值: text -- 文字输入域(输入型) password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型) file -- 可以输入一个文件路径(输入型) checkbox -- 复选框.可以选择零个或多个(选择型) radio -- 单选框.只可以选择一个而且必须选择一个(选择型) hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器 button -- 按钮(点击型) image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型) submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型) reset -- 重置按钮,可以把表单中的信息清空(点击型) name:向服务器提交表单时的 key 值 size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。 value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。 maxlength：指定用户输入的最大字符长度。 readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。 disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。 ---------------------------------------------------------------------------------------- label标签： <label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 <label for="username">用户名：</label> <input type="text" id="username" name="username" value="用户名"/> ------------------------------------------------------------------------------------- 单选按钮：<input type="radio"/> 注意：下面两个单选按钮的name属性必须相同才能关联起来 <form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data"> <label for="male">男</label> <input type="radio" id="male" name="gender" checked="checked"/> <label for="felmale">女</label> <input type="radio" id="felmale" name="gender"/> </form> checked="checked" 设置默认被选中 ------------------------------------------------------------------------------------- 复选框：<input type="checkbox"/> name属性必须相同才能关联起来 <form> <label for="b">篮球</label> <input type="checkbox" name="sport" id="b"/> <label for="f">足球</label> <input type="checkbox" name="sport" id="f"/> <label for="c">棒球</label> <input type="checkbox" name="sport" id="c"/> <label for="d">兵乓球</label> <input type="checkbox" name="sport" id="d"/> </form> checked="checked" 设置默认被选中 ------------------------------------------------------------------------------------- 下拉框：<select></selected> 下拉选标签属性： name:表单提交项的键. size：选项个数 multiple：multiple 支持多选 <option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中 <optgroup>为每一项加上分组 <form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> 下面的select 写在表单之外，但仍属于表单的一部分（select的form属性，form的id属性 <form action="127.0.0.1" enctype="multipart/form-data" method="post" id="fname"> </form> <select name="carlist" form="fname"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 下面用<optgroup>为每一项加上分组 <form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <optgroup label="car"></optgroup> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <optgroup label="fruit"></optgroup> <option value="orange">Orange</option> <option value="apple">Apple</option> </select> </form> ------------------------------------------------------------------------------------- 多行文本框<textarea></textarea> 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。 注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。 <form action="127.0.0.1" enctype="multipart/form-data" method="post"> <textarea cols="20" rows="10" name="textarea">写点啥呢</textarea> </form>
表单提交：
<input type="submit" value="提交">
<button type="button" onclick='doSubmitForm()'>提交<button/>
<form id='test_form' action='' method='' omsubmit='return checkForm()'></form>
参考：https://www.cnblogs.com/web-wjg/p/7894657.html 通常表单的提交有两种方式，一是直接通过html的form提交，代码如下： <form action="" method="" id="forms"> <input type="text" name="username" value="" /> <input type="password" name="pwd" value="" /> <input type="submit" value="提交"/> </form> 但有时候我们会出于安全角度考虑，给用户输入的密码进行加密，方法一就没办法解决这个问题，这时候我们同常会选择另一种方法，使用javaScript来进行表单提交，代码入下： 复制代码 <!--HTML--> <form action="" method="" id="test_form"> <input type="text" name="username" value="" /> <input type="password" name="pwd" value="" /> <button type="button" onclick='doSubmitForm()'>提交<button/> </form> <script> var form = document.getElementById('test_form'); //再次修改input内容 form.submit(); </script> 这种方法有个缺点就是，打乱正常的表单提交程序，通常用户输入完成后点击回车键就可以提交，但是这个方法实现不了，所以，使用下面的方法便可以解决这个问题,，通过form自身的onsubmit方法，来触发提交，然后进行input的修改： <!--HTML--> <form id='test_form' action='' method='' omsubmit='return checkForm()'> <input type='text' name='username' value=''/> <input type='password' name='pwd' value =''/> <button type='submit'>提交<button/> <form/> <script> function checkForm(){ var form = document.getElementById('test_form'); //可在此修改input //进行下一步 return ture; } <script/> 注意，checkForm()方法中，return true时，表单才会正常提交，为false时，浏览器将不会提交，通常是用户的密码输入错误时，终止提交。 之前说过，为安全考虑用户提交时，一般对密码进行加密处理，代码如下： <!--HTML--> <form id='test_form' action='' method='' omsubmit='return checkForm()'> <input type='text' name='username' value=''/> <input type='password' name='pwd' id='pwd' value =''/> <button type='submit'>提交<button/> <form/> <script> function checkForm(){ var pwd= document.getElementById('pwd'); pwd.value= toMD5(pwd.value); //进行下一步 return ture; } <script/> 这种做法看上去没问题，但是当用户输入完成后，提交会发现密码框的 * 会由几个瞬间变成 32个，这是由于MD5加密造成的（MD5有32个字符）；如果想避免出现这种情况，需要充分利用到<input type='hidden'>,代码如下： <!--HTML--> <form id='test_form' action='' method='' omsubmit='return checkForm()'> <input type='text' name='username' value=''/> <input type='password' id='input_pwd' value =''/> <input type='hidden' name='pwd' id='md5_pwd' value=''/> <button type='submit'>提交<button/> <form/> <script> function checkForm(){ var input_pwd= document.getElementById('input_pwd'); var md5_pwd= document.getElementById('md5_pwd'); md5_pwd.value= toMD5(input_pwd.value); //进行下一步 return ture; } <script/> 注意，<input type='password'/>是用户输入密码的input框并，没有设置 name 属性，而是给 <input type='hidden' /> 设置了 name='pwd'，这样表单提交只会提交带有name属性的输入框，从而解决了上面的那个问题。
表格排版表单：将form表单嵌套在table里，可以对表单元素进行排版
参考 https://www.c-sharpcorner.com/UploadFile/867331/create-a-form-using-html-tables/
https://stackoverflow.com/questions/5967564/form-inside-a-table
<body>
<form id="form1" runat="server">
<div>
</div>
<h2 align="center"> Job Details:</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">Job Title:</td>
<td class="style1"><input type="text" name="Job Title" /></td>
</tr>
<tr>
<td align="right">Description:</td>
<td><textarea rows="3" cols="15" name="Description"></textarea>
<p>Brief Description should have atmost 500 characters</p>
</td>
</tr>
<tr>
<td align="right">Company Name:</td>
<td><input type="text" name="Company Name" /></td>
</tr>
<tr>
<td align="right">Contact number:</td>
<td><input type="text" name="Contact number" /></td>
</tr>
<tr>
<td align="right">Contact person:</td>
<td><input type="text" name="Contact person" /></td>
</tr>
<tr>
<td valign="top" align="right">Email:</td>
<td><input type="text" name="Email" /></td>
</tr>
<tr>
<td align="right">Work Status</td>
<td><input type="checkbox" name="vehicle" value="Bike" />Full Time
<input type="checkbox" name="vehicle" value="Bike" /> Part Time
<input type="checkbox" name="vehicle" value="Bike" />Per Dim
<input type="checkbox" name="vehicle" value="Bike" />Others
</td>
</tr>
<tr>
<td align="right">Salary</td>
<td><input type="text" name="Email" />
<select name="cars">
<option value="Rupees">Rupees</option>
<option value="Euro">Euro</option>
<option value="US Dollar" selected="selected">US Dollar</option>
</select>
<select name="time">
<option value="Yearly" selected="selected">Yearly</option>
<option value="Half Yearly">Half Yearly</option>
</select>
</td>
</tr>
<tr>
<td align="right">Experience(Years)</td>
<td><input type="text" name="Experience" /></td>
</tr>
<tr>
<td align="right">Locations</td>
<td><input type="text" name="locations" /></td>
</tr>
<tr>
<td align="right">Qualifications:</td>
<td>
<select name="drop1" size="4" id="Qualifiation" size="4" multiple="multiple" >
<option value="1" >Any</option>
<option value="2">High School</option>
<option value="3">Associate</option>
<option value="4">Pre Bachelors</option>
<option value="5">Bachelors</option>
</select>
<input type="button" value="ADD>>" /><input type="button" value="<<Remove"/>
<select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">
<option value="1">Any</option>
</select></br>
</td>
</tr>
<tr>
<td> <input type="button" value="Submit" align="right"/>
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
2. CSS
2.1 引入CSS
1外部引入： <link type="text/css" rel="stylesheet" href="layout.css" /> 2嵌入式 <style type="text/css"> p{ color:sliver; } </style> 3.内联式 <div style="color:sliver"> media属性设置 <link type="text/css" rel="stylesheet" href="layout.css" media="screen"/> media属性表示该样式适用的设备，默认为空，还可以为screen（电脑屏幕）， print（打印），handheld（小屏幕移动设备） css注释：/* 注释内容 */
2.2 CSS特性
- 继承性：css的某些样式具有继承性，父元素的样式作用于子元素，但若子标签设置了相同的属性，会覆盖父标签的属性。
- 特殊性：浏览器是根据权值来判断使用哪种css样式的，权值越高优先级越高（标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100）（还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。）
- 层叠性：当拥有相同权重的时候，后面的样式会覆盖前面的样式应用。
- 重要性：为默写样式设置最高权值，使用!imporant
2.3 字体属性
font-family ： 字体，一共有五种字体系列（sans-serif，serif，monospace, cursive, fantasy）,每个系列又包括许多类型。 （具体字体首字母大写，字体系列小写）
body{ font-family: Verdana, Geneva, Arial, sans-serif; } 对于上面的规则，浏览器会从左到右查找计算机是否有该字体，有是就采用该字体，若前三中字体都没有，就采用浏览器默认的 sans-serif字体系列中的一种 2 通用字体系列： Serif 字体：包括 Times、Georgia 和 New Century Schoolbook Sans-serif 字体：包括 Helvetica、Geneva、Verdana、Arial 或 Univers Monospace 字体：包括 Courier、Courier New 和 Andale Mono Cursive 字体：包括 Zapf Chancery、Author 和 Comic Sans Fantasy 字体：包括 Western、Woodblock 和 Klingon 参考：http://www.w3school.com.cn/css/css_font-family.asp
font-size : 字体大小，可以为px，em, %, xx-small, x-small, small, medium, large, xx-large
font-size:10px; 字体大小为10个像素 font-size:1.2em; 相对于继承字体大小的1.2倍 （如父标签设置10px，则该标签为12px） font-size:150%; 相对继承标签字体大小的150%(1.5倍) font-size: small; （一般small大概12px，xx-small，x-small，small，medium，large，xx-large中每种尺寸比前一种大20%）
color: 字体颜色, 可以为名字（sliver），
color: sliver; 银色。（有17中标准颜色名字： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow） （rgb(100%, 100%, 100%)为白色，rgb(0%, 0%, 0%)为黑色，比例越大，颜色越浅） color: rgb(80%, 40%, 0%)； 依次代表红色，绿色，蓝色的百分比 color: rgb(204, 102, 0)； 依次代表红色，绿色，蓝色的比例（0-255之间，数值越大，比例越大，颜色越浅） color: #cc6600； 十六进制数，cc表示204，66表示102, 00表示0， 对于两位十六进制数都相同的可以简写为#c60
font-weight： 字体粗细, 可以设置为normal(不加粗)，bold(加粗)
font-style: 字体是否斜体。可以为italic, not italic, oblique, not oblique
font-style: italic; 斜体 font-style: not italic; 不用斜体 font-style: oblique; 斜体 font-style: not oblique; 不用斜体
text-decoration：添加文本样式, 下划线等。可以为none, underline, overline, line-through, blink
text-decoration:none; 清楚样式 text-decoration:underline; 文本添加下划线 text-decoration: overline ; 文本上方划线 text-decoration: line-through; 文本中间划线 text-decoration: blink; 文本闪烁
line-height: 1.6em; 行间距为字体大小的1.6倍
font格式设置也可以简写：
font: font-style font-variant font-weight font-size/line-height font-family;
如 font: small/1.6em Verdana, Helvetica, Arial, sana-serif; 表示字体大小为samll，1.6倍行间距，字体为Verdana, Helvetica, Arial, sana-serif
2.4 盒模型
css把每一个html标签当做一个盒子来看待，由里向外content(内容),padding(内边距),border(边框),margin(外边距)。盒模型有两种，一个是标准模型，一个是IE模型。
对于标准盒模型，标签元素的高度和宽度如下：
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度
CSS外边距的合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
padding, border, margin设置
1.padding:padding-top，padding-right, padding-bottom, padding-left padding-left：0px; padding-right：20px; padding-bottom：30px; padding-left:10px; 上面设置相当于下面： padding:0px 20px 30px 10px; 依次表示上，右，下和左内边距像素 ------------------------------------------------------------------------- margin: 0px 20px; 表示上下为0px， 左右为20px； padding: 20px； 表示上下左右都为20px ------------------------------------------------------------------------ padding: 20px； padding-left: 40px； 上面两句设置，下面一句会覆盖上面一句的左边距，即最后上，下，右边距为20px，左边距为40px 2. margin: margin-top, margin-right, margin-bottom, margin-left； 设置格式同padding
border: 边框设置，包括border-style，border-width，border-color。
border-style: solid; 实线边界， 共有八种边框样式：solid， dotted，double，dashed，groove，inset，outset，ridge border-width: 5px; 宽度为5像素，（也可以设置为thin, medium, thick） border-color:#ff00dd; (名字，rgb，十六进制数) border：solid，5px，red； 同时设置样式，宽度和颜色
2.5背景图片
背景图片属性设置，包括background-image, background-position, background-repeat.
background-image:url(image/background.gif); 也可以为绝对路径url（https://..） background-position: top left; 放置在当前元素的左上方。（可以用像素，%，top,left,right,bottom） background-repeat:no-repeat; 图像只显示一次，不重复；还可以为repeat(水平和垂直方向都重复), repeat-x（只在水平方向重复），repeat-y（只在垂直方向重复），inherit（继承父元素的值） ---------------------------------------------------------------------------------------- 简写 background:white url(image/back.gif) repeat-x;
2.6 伪类和伪元素
伪类：active, focus, visited, hover, link, first-child, lang
伪元素：first-letter，first-line，before，after
参考：https://www.cnblogs.com/ghost-xyx/p/3763669.html 伪类 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。 伪元素 :first-letter 向文本的第一个字母添加特殊样式。 :first-line 向文本的首行添加特殊样式。 :before 在元素之前添加内容。 :after 在元素之后添加内容。
2.7 CSS层叠规则
CSS（cascading styling sheet）：层叠样式表，对于网页上的一个元素，有多个选择器和样式表来设置其显示的属性，浏览器需要根据一定的规则来选择特定的一种样式进行显示，即样式表的层叠效果。（CSS中的层叠就是让多个来源的样式叠加在一起，然后结合样式的特殊性（后面详细介绍）、继承性，确定最终应用的样式。）
参考：https://www.cnblogs.com/thislbq/p/5880128.html 样式的来源分五种： 1、浏览器默认的样式； 2、用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键； 3、外部样式，即<link>引用的CSS后缀文件； 4、内部样式，即写在<style></style>标签内的样式； 5、内联样式，即直接写在style属性内的样式（现在的网页设计强调结构、表现、行为三者分离，所以这个还是少用为好。我会强迫性移除内联样式的，哈哈）； CSS权威指南中对样式来源的分类分成三种： 1、创作人员（上面提到的第3、4、5点都可归到这一点） 2、读者（用户自定义样式） 3、用户代理（这个就是上面所说的浏览器默认样式了） ---------------------------------------------------------------------------------------- CSS2.1层叠规则是： 1、找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。 2、按显式权重对应用到该元素的所有声明进行排序，有!important标志的声明的权重要高于不带!important标志的声明。 3、按来源对应用到给定元素的所有声明进行排序。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的的读者样式要强于所有其他样式，包括有!important标志的创作人员样式。创作人员的样式和读者样式斗都比用户代理的默认样式强。 4、按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素。 5、按出现顺序对应用到给定元素的所有声明进行排序，后面出现的声明权重要大于前面出现的声明，即后定义的样式会覆盖前面定义的样式。 简单总结：找出一个给定元素的所有声明后，先按显式权重和来源进行排序。如果相同，则比较特殊性。若再相同，则比较顺序。 -------------------------------------------------------------------------------------- 选择器的特殊性计算： 1、对于内联样式，特殊性首位加1，即1，0，0，0。 2、对于选择器中出现的ID属性值，加0，1，0，0， 有多少个ID值就在第二位加几位。 3、对于选择器中出现的类属性值，属性选择及伪类，加0，0，1，0，共出现多少个就在第三位加几位。 4、对于选择器中出现的元素，以及伪元素，加0，0，0，1，共出现多少个就在第四位加几位。 5、通配符对特殊性没有任何贡献，即特殊性是0，0，0，0。 6、结合符没有特殊性，连0特殊性也没有。 7、继承的CSS完全没有特殊性，连0特殊性也没有（CSS中的继承是有选择性的，并不是全部CSS都继承，像边框属性就不会继承）。
注意：当样式设置最高权值的时候（! important），层叠性将不再在该样式上起作用，如下：
p{color:red!important}
p{color:green;}
结果为red
2.8 CSS选择器
CSS选择器包括：标签选择器，类选择器，id选择器，组合选择器，伪类和伪元素选择器等。
（id和class选择器：id为唯一的，一个id只能对应一个标签元素；class可以对应多个元素；因此id用来为单独的样式，类用来设置许多元素共有的属性）
1通用选择器 *{样式} 2标签选择器 E{样式} 3 class选择器 .class名{样式} 4 ID选择器 #ID名{样式} 5多元素的组合选择器 5.1 多元素选择器 E,F{样式} 匹配所有的E,F元素 p,a{background:red;}p,a元素背景都为红色 5.2 后代元素选择器 E F{样式} 匹配所有属于E元素的后代F元素 p a{color:red;}p元素的后代a元素颜色为红色 5.3 子元素选择器 E>F{样式} 匹配所有的E元素的子一代F元素（第一层后代） p>a{color:red;} a只能属于p的子一代，不能是其他 5.4 毗邻元素选择器 E+F{样式} 匹配紧随E元素之后的一个同级F元素 5.5 同级通用元素选择器 E~F{样式} 匹配E元素之后的所以同级F元素（中间允许有其他元素间隔） 6 伪类及伪对象选择器 6.1 :link,设置未被访问前的状态 6.2 :hover, 设置鼠标悬停是的状态 6.3 :visited, 设置访问后的状态 6.4 :active, 设置点击是的状态 6.5 :after, 用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。 6.6 :before, 用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。 6.7 :first,设置页面容器第一页使用的样式。仅用于 @page 规则 @page :first { margin: 4cm } 6.8 :first-letter, 设置对象的第一个字符的样式 6.9 :first-child, 设置E的第一个子对象元素 p:first-child{background-color:red;}第一个P标签背景为red. 6.10 :first-line,设置第一行的样式 6.11 E:not(s) 匹配所以不匹配选择符s的元素E 6.12 E:target对页面中的某个target元素指定样式，在用户单击了页面中的链接并且跳转到了target元素才会生效 匹配相关url指定的E元素 <style> :target{background-color:red}; </style> </head> <body> <a href="#one">one</a> <a href="#two">two</a> <a id="one">A部分</a> <a id="two">B部分</a> </body> 当单击one时A部分显示红色，当单击two时B部分显红色 7 结构性伪类选择器 7.1 E:root 匹配文档的根元素。在HTML中，根元素永远是HTML 7.2 E:empty 匹配没有任何子元素（包括text节点）的元素E 7.3 E:last-child 匹配父元素中最后一个E元素 7.4 E:nth-child(n) 匹配父元素中的第n个子元素E 7.5 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E 7.6 E:first-of-type 匹配同级兄弟元素中的第一个E元素 7.7 E:only-child 匹配属于父元素中唯一子元素的E 7.8 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素(同种元素只存在一个) 7.9 E:nth-of-type(n) 匹配同类型中第n个同级兄弟元素E 7.10 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E 8 UI元素状态伪类 8.1 E：enable 匹配所有用户界面（form表单）中处于可用状态的元素E 8.2 E：disable 匹配所有用户界面（form表单）中处于不可用状态的E元素 8.3 E：checked 匹配所有用户界面（form表单）中处于选中状态的元素E 8.4 E::selection 匹配E元素中被用户选中或处于高亮状态的部分 9 子串匹配的属性选择器 9.1 E[att^="val"] 匹配具有att属性、且值以val开头的E元素 9.2 E[attr$="val"]匹配具有att属性、且值以val结尾的E元素 9.3 E[attr*="val"]匹配具有att属性、且值中含有val的E元素 9.4 E[attr]匹配具有attr属性的所以E元素
2.9 CSS布局模型
CSS有三种布局模型：流动模型（Flow）, 浮动模型（Float），层模型（Layer：absolute, relative,fixed），默认为流动模型。
参考：https://blog.csdn.net/dwr_hjf/article/details/80541883 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 （每一个便签都显示着自己本来默认的那个宽高） 第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动 div{float:left;} div{float:right;} 可以为不同的div设置不同的浮动方式来布局。 3、层模型（Layer） 层模型有三种形式： 1、相对定位(position: relative) 2、绝对定位(position: absolute) 3、固定定位(position: fixed) 3.1相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。 相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。 3.2 绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除； 我们可以通过 z-index 来设置它们的堆叠顺序 。 绝对定位使元素脱离文档流，因此不占据空间 ，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。 浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。 3.3 固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。 #div1{ position:fixed; bottom:0; right:0 } (始终在屏幕由下端有一个div框，会一直跟着滚动条走) 相对定位可以和绝对定位混着使用 原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位 4. 关于Z-index 利用z-index，可以改变元素相互覆盖的顺序。 z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
2.10 布局示例
a，利用float进行布局，下面代码布局设置了上中下三部分，中间通过float分成了两部分,代码及效果如下：
(注意：float布局1-1和float布局1的效果一样，但float布局1-1允许左侧主内容的宽度任意扩展，但浏览缩放时显示效果更好。float布局1-2在1-1的基础上增加了一层容器，限制其宽度为800px，当缩放浏览器时，左侧和右侧的比例会保持不变）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>布局1</title>
<style type="text/css">
#header{
margin:10px;
height: 60px;
background-color:gray;
text-align:center;
}
#main{
background-color:green;
padding:15px;
margin: 0px 10px 10px 10px;
float:left;
width:800px; /*浮动必须设置宽度*/
height:400px;
text-align:center;
}
#sidebar{
background-color:yellow;
padding:15px;
margin: 0px 10px 10px 850px;
height: 400px;
text-align:center;
}
#footer{
background-color:blue;
height: 60px;
margin:10px;
padding:15px;
clear: left; /* 使左侧没有浮动元素，保证footer在main下方*/
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<p>上方导航条</p>
</div>
<div id="main">
<p>左侧主要内容</p>
</div>
<div id="sidebar">
<p>右侧广告区</p>
</div>
<div id="footer">
<p>下方页脚</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>布局1</title>
<style type="text/css">
#header{
margin:10px;
height: 60px;
background-color:gray;
text-align:center;
}
#main{
background-color:green;
padding:15px;
margin: 0px 330px 10px 10px;
height:400px;
text-align:center;
}
#sidebar{
background-color:yellow;
padding:15px;
margin: 0px 10px 10px 10px;
height: 400px;
width:280px; /*浮动必须设置宽度*/
float:right;
text-align:center;
}
#footer{
background-color:blue;
height: 60px;
margin:10px;
padding:15px;
clear: right; /* 使左侧没有浮动元素，保证footer在main下方*/
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<p>上方导航条</p>
</div>
<div id="sidebar">
<p>右侧广告区</p>
</div>
<div id="main">
<p>左侧主要内容</p>
</div>
<div id="footer">
<p>下方页脚</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>布局1</title>
<style type="text/css">
#container{
width:800px; /*固定容器的宽度*/
padding-bottom:5px;
padding-top:5px;
margin-left:auto;
margin-right:auto; /*设置成auto，浏览器会根据内容大小自动计算两侧合适的边界*/
}
#header{
margin:10px;
height: 60px;
background-color:gray;
text-align:center;
}
#main{
background-color:green;
padding:15px;
margin: 0px 330px 10px 10px;
height:400px;
text-align:center;
}
#sidebar{
background-color:yellow;
padding:15px;
margin: 0px 10px 10px 10px;
height: 400px;
width:280px; /*浮动必须设置宽度*/
float:right;
text-align:center;
}
#footer{
background-color:blue;
height: 60px;
margin:10px;
padding:15px;
clear: right; /* 使左侧没有浮动元素，保证footer在main下方*/
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>上方导航条</p>
</div>
<div id="sidebar">
<p>右侧广告区</p>
</div>
<div id="main">
<p>左侧主要内容</p>
</div>
<div id="footer">
<p>下方页脚</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>布局2</title>
<style type="text/css">
.body{
background: #f1f1f1;
width: 100%;
height: 100px;
}
.content,
.left,
.right{
box-sizing: border-box;
padding: 10px;
}
.content{
background: #e6e6e6;
height: 100%;
padding: 10px;
overflow: auto;/*可以使content的padding生效*/
}
.left{
width: 150px;
float: left;
background: #f3f3f3;
height: 100%;
}
.right{
width: 150px;
float: right;
background: #f3f3f3;
height: 100%;
}
</style>
</head>
<body>
<div class="body">
<div class="left">left</div>
<div class="right">right</div>
<!-- content必须在最后 -->
<div class="content">content</div>
</div>
<div class="body">
<div class="left">left</div>
<!-- content必须在最后 -->
<div class="content">content</div>
</div>
<div class="body">
<div class="right">right</div>
<!-- content必须在最后 -->
<div class="content">content</div>
</div>
<div class="body">
<div class="right">right</div>
<div class="right">right</div>
<div class="right">right</div>
<!-- content必须在最后 -->
<div class="content">content</div>
</div>
</body>
</html>
b, 利用position:absolute来布局，对上面的float布局1-1改为position进行布局，实现相同效果的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>absolute布局1</title>
<style type="text/css">
#header{
margin:10px;
height: 60px;
background-color:gray;
text-align:center;
}
#main{
background-color:green;
padding:15px;
margin: 0px 330px 10px 10px;
height:400px;
text-align:center;
}
#sidebar{
background-color:yellow;
padding:15px;
margin: 0px 10px 10px 10px;
height: 400px;
width:280px;
position: absolute;
top:85px;
right:0px; /*根据距离父元素top,right的像素来确定位置*/
text-align:center;
}
#footer{
background-color:blue;
height: 60px;
margin: 0px 10px 10px 10px; /* margin: 0px 330px 10px 10px; 可以设置的和main主内容宽度一致*/
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<p>上方导航条</p>
</div>
<div id="sidebar">
<p>右侧广告区</p>
</div>
<div id="main">
<p>左侧主要内容</p>
</div>
<div id="footer">
<p>下方页脚</p>
</div>
</body>
</html>
下面代码利用position:fixed来添加一个固定的元素，该元素不随窗口活动改变其位置。代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>absolute布局1</title>
<style type="text/css">
#header{
margin:10px;
height: 60px;
background-color:gray;
text-align:center;
}
#main{
background-color:green;
padding:15px;
margin: 0px 330px 10px 10px;
height:400px;
text-align:center;
}
#sidebar{
background-color:yellow;
padding:15px;
margin: 0px 10px 10px 10px;
height: 400px;
width:280px;
position: absolute;
top:85px;
right:0px; /*根据距离父元素top,right的像素来确定位置*/
text-align:center;
}
#footer{
background-color:blue;
height: 60px;
margin: 0px 10px 10px 10px; /* margin: 0px 330px 10px 10px; 可以设置的和main主内容宽度一致*/
padding:15px;
text-align:center;
}
#avatar{
position:fixed; /*坐标位置固定后，不会随滑动窗口改变位置*/
top:250px;
left:-40px;
}
</style>
</head>
<body>
<div id="header">
<p>上方导航条</p>
</div>
<div id="avatar">
<img src="avatar1.jpg" alt="固定位置的广告窗口"/>
</div>
<div id="sidebar">
<p>右侧广告区</p>
</div>
<div id="main">
<p>左侧主要内容</p>
</div>
<div id="footer">
<p>下方页脚</p>
</div>
</body>
</html>
position:relative 和absolute,fixed不同，其本身并不从文档流中飘移出来，文档流保持其原有的位置，但实际显示时，将其与原有位置偏移设定的值，如下代码和示例：(虚线处为其在文档流中的位置，显示时向上偏移了30px)
参考：http://web.jobbole.com/94701/ <!--HTML代码--> <div class="box"> <div class="td"> <div class="element1"></div> <h3>使用margin</h3> </div> <div class="td"> <div class="element2"></div> <h3>使用relative</h3> </div> </div> /*CSS代码*/ .element1{ margin-top: -30px; } .element2{ position: relative; top: -30px }
c.float结合BFC布局（圣杯布局和双飞翼布局）
https://www.jianshu.com/p/4c01c7913b40
https://segmentfault.com/a/1190000011358507?utm_source=tag-newest
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>absolute布局1</title>
<style type="text/css">
.wrapper{
overflow: hidden; //清除浮动
}
.middle{
width: 100%;
float: left;
}
.middle .main{
margin: 0 220px;
background: red;
}
.left{
width: 200px;
height: 300px;
float: left;
background: green;
margin-left: -100%; // left紧挨着middle右边界，相对于middle的右边界向左移动100%
}
.right{
width: 200px;
height: 300px;
float: left;
background: yellow;
margin-left: -200px; // left移走后，right紧挨着middle的右边界，相对于middle的右边界向左移动200px
}
</style>
</head>
<body>
<div class="wrapper">
<div class="middle">
<div class="main">中间</div>
</div>
<div class="left">
左栏
</div>
<div class="right">
右栏
</div>
</div
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<style type="text/css">
.left{
float: left;
height: 100px;
width: 300px;
background-color: green;
line-height: 100px;
text-align: center;
}
.right{
overflow: hidden;
height: 100px;
background-color: blue;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="left">I am left</div>
<div class="right">I am right</div>
</body>
</html>
d, flex布局
https://segmentfault.com/a/1190000011358507?utm_source=tag-newest
https://www.jianshu.com/p/967dcacf0220
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>BFC</title>
<style type="text/css">
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">左栏</div>
<div class="middle">中间</div>
<div class="right">右栏</div>
</div>
</body>
</html>
参考：https://www.jianshu.com/p/c46bd5deb3e2
https://www.cnblogs.com/thislbq/p/5880128.html
http://zh.learnlayout.com/
http://www.ycku.com/html5/
浙公网安备 33010602011771号