html学习

    最近闲的无聊，从新学了一遍html表格和表单,把自己学的知识总结一遍，为了方便以后参考（好记性，不如烂笔头！）

一、html的文档结构

doctype 文档类型

　　Strict：包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

　　Transitional：包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

　　Frameset：等同于Transitional但允许框架集内容。如果要写框架就要声明这一种。

head

　　title：浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题

　　meta：元数据不会显示在页面上，但是对于机器是可读的。

　　　　　规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

　　　　 标签始终位于 head 元素中。

　　　　元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

　　style：标签用于为 HTML 文档定义样式信息。

body 主要就是div和各类标签

二、用div来控制布局

　　布局原则：从大到小、从上到下、从左到右

　　盒子模型：有宽（width）高（height），有边框（border）、有外边距（margin）、有内边距（padding）

　　浮动布局：div可以”飘“起来（float）、也可以清除浮动（clear）

　　自己可以尝试用简单的div+背景色，来试着布局，增强自己的”大局观“。

三、用CSS来控制显示效果

　　先了解各类选择器：di、class、标签、派生、伪类、通配

　　再了解各类效果如何控制

　　　　段落控制

　　　　　　text-align 文本水平对齐设置
　　　　　　text-decoration 划线方式
　　　　　　letter-spacing 文本中单字的间隔
　　　　　　text-transform 大小写转换

　　　　文字控制

　　　　　　color 颜色设置 font-style 斜体设置 font-weight 文字粗细 font-size 文字大小 font-family 文字字体

　　　　背景控制

　　　　　　background-color 颜色
　　　　　　background-image 图片
　　　　　　background-repeat 图片平铺
　　　　　　background-attachment 滚动
　　　　　　background-position 图像在背景中的位置

　　CSS的引入方式：页内style标签、外部CSS文件、行内style标签、import导入

　　CSS的初始化

　　　　原因：浏览器对元素有默认的CSS参数，且可能不一致，导致浏览器之间显示效果不一样

　　　　解决方法：统一对常用元素常用CSS参数，手动设定统一效果

四、html标签

　　块级元素：div 、p 、ul、li 等
　　行内元素 ：span 、labl 等
　　　　h1-h6 标题
　　　　p 段落
　　　　img 图片
　　　　a 超链接和锚点
　　　　ul 无序列表
　　　　ol 有序列表
　 em 斜体

        strong 加粗

四、form 表单

  说明：          <form> 标签用于创建 HTML 表单。          表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。          表单还可以包含 menus、textarea、fieldset和 label 元素 等。  属性 :         1. action {URL}：一个URL地址；指定form表单向何处发送数据。          enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。            指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；

　　　　　3.multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值

          4.  method {get/post}：指定表单以何种方式发送到指定的页面。              指定的值有：get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。

　　　　　　 post ：form表单里所填的值，附加在HTML Headers上。
示列：

账号： 密码：

  表单标签属性：         type="text" 文本标签         type="password" 密码         type="submit" 提交         type="reset" 重置         type="checkbox" 复选框         <selection></selection> 下拉框         <textarea></textarea> 文本区域标签

五、get 与 post 的区别
①数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。

　　②敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。

　　③大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。
　　
六、表格
说明
在HTML 中定义表格布局。

  <table border="1" cellpadiing="0px";cellspaing="0px"> 　　<caption>综合成绩表</caption> 　　<tr> <th></th></tr> 　　<tbody> 　　　　<tr><td></td></tr> 　　　　<tr><td></td><tr> 　　<tbody></table>

包含的元素

<caption></caption>：表头信息。  <tr></tr> ：定义一个表格行；   <th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。 <tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加

：定义一个单元格；
属性:
table 属性：

　　border ：定义表格的边框宽度，默认为0，即无边框。

　　title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。

th、td 属性：

　　colspan : 表示横向合并单元格 ( )

　　rowspan ：表示纵向合并单元格 ( )
　示例

 <table border=0 title="测试">           <caption> 姓名介绍</caption>            <tr>                <th>姓名</th>                <th>年龄</th>            </tr>            <tr>                <td>张三</td>                <td>22</td>            </tr>            <tr>                <td><input type=text /></td>                <td><input type=text /></td>            </tr> </table>