有段时间没有分享HTML知识，最近一直在忙着做www.zhongwulian.net这网站和自己前端实训没有时间，下面我把快速学会HTML第三天：常用的HTML标记 给大家分享下，可能文章有时间读不通顺，需要Word文件可以淮安seo首页给我留留言。
第三天
十二. HTML5表单
1. 表单标记
语法：
表单的用途很广泛，在网页上几乎无处不在，所以我们在第三天将详细的学习表单的知识，而HTML5也为表单添加了很多新的元素，所以我们认真的对待这一切，用心的去掌握表单的方方面面的知识点。
而表单其实就是一个给表单项的集合体，一个表单，最少有一个表单项，而每一个表单项其实就是一组name和value，也就是变量名和变量值。如果至于值，没有名称，那么只会提交一堆麻乱的数据，只要两者都存在，才会提交了一组组有意义的数据。
2. 提交表单action
语法：
3. 表单的传送方式method
表单的传送方式有两种：GET和POST
GET提交：表单的值直接体现在浏览器的地址栏上
POST提交：直接提交到目标地址，而其本身的地址不会发生改变
GET提交：因为数据在地址栏上体现，所以能够提交的数据大小受到了限制，一般来说，能够提交的数据在2k以内；
POST提交：理论上是没有限制大小的；
GET提交：无法上传文件类型；
POST提交：可以上传文件类型；
下面开始介绍表单项：
4. 文本框text
语法：
说明：这是在网页中最常用的表单项，用户可以在其当中输入文本。而文本框也可以有value，在value中定义文本框的默认值，其实在网页中，表单本身并不可见，同时，在大多数浏览器中文本框的默认宽度是20个字符。
5. 密码框password
语法：
说明：密码框是一种特殊的文字字段，他在表单中是以“*“号的方式显示的，但也仅仅使周边的人看不见输入的文本，本质上它不能使数据安全，为了使数据安全，还是需要浏览器和服务器之间建立一个安全链接，在HTML5新表单中也有关于安全方面的解说，到时候再仔细分析和记忆。
6. 单选框radio
语法：
说明：单选框，顾名思义就是只能单选的框（有且只有一个值），而单选按钮是必须有value值的，比如说我们通常用的性别选择等。而checked这个只能在一个选项中出现，也就是只能出现一次，它的含义是默认的选择带有checked的这个选项的值。而多个选项的name应该也是一样的，不然就会出现错误。
7. 复选框checkbox
语法：
说明：复选框，当然可以选择多个值，所以在这个当中checked=”checked”这个可有可无，每一个复选框都必须带有value值，而至于name值的话，在复选框中可以有每个项的独立的名字，当然也可以是统一的名字，这就是和单选框不同的地方。而如果单选框如果也把每个选项的名字改成不一样，则单选框就变成了复选框。
8. 普通按钮button
语法：
说明：普通按钮在表单中的作用是很广泛的，它通常结合javascript来做出一些判断或者检测等作用，有时候也结合javascript来达到一些点击效果。
9. 提交按钮submit
语法：
说明：这个按钮是用来提交表单的,不需要name
10. 重置按钮reset
语法：
说明：对表单的填写数据进行重置的按钮,不需要name
11. 图片域image
语法：
说明：一般图片域就是和提交按钮的功能时一样的，都是用来提交的，只是图片按钮为了页面的美观而设置的。
12. 下拉列表select—option
语法：
说明：下拉菜单如果在其option标签中加上selected=”selected”,就会使这个选项成为默认值，同时也会第一显示在下拉菜单中，而如果没加selected=”selected”，则默认值为第一个option选项，下拉菜单的宽度是由所有备选项中文本长度最长的来决定的。也可以在下拉菜单的第一个option选项前添加请选择xxxx,这样会形成美观的页面，可以根据实际情况来决定。
13. 文件域file
语法：
说明：这个主要用在注册当中上传头像等其他附件的，当然在网站后台，文档编辑中用的就更广泛了，因为GET传送方式不能上传文件，所以带有文件域的表单只能选择POST提交方式来完成。
14. 文本域textarea
语法：
说明：用途广泛，简单方便；可以通过css控制文本款的大小。
15. 隐藏域hidden
语法：
说明：在一个表单中可以设置任意个隐藏域，主要用于一些选项，已经很明确的，没必要放到页面上的内容。
下面将介绍一些在HTML5当中新增的一些表单元素，以及对旧的表单元素支持的属性更改情况
16. Input 类型 – email
语法：
说明：基本上的浏览器都支持了这个email类型，经过多次的测试，只有SaFari不支持，没有提醒需要输入正确的邮箱地址，而IE是用IE10进行测试的，效果也正常，不像大家说的IE不支持。
17. Input 类型 – url
语法：
说明：基本上的浏览器都支持了这个url类型，经过多次的测试，只有SaFari不支持，没有提醒需要输入正确的URL地址，而IE是用IE10进行测试的，效果也正常，不像大家说的IE不支持。
18. Input 类型 – number
语法：
说明：基本上的浏览器都支持number类型，测试结果只有IE10没有效果，显示的是一个正常是文本框，而其他的显示正常，包括SaFari也支持，其呈现效果如下图：
可以通过上下按钮改变文本框中的数字大小。
而number类型可以添加max(规定允许的最大值)、min（规定允许的最小值）、value（规定默认值）、step（规定合法的数字间隔，如step=”3”,则是从默认值或者规定的最小数开始以+3的方式往上递增，间隔标准默认值优先，没有默认值就从规定最小数开始，如果两者都没设置，则从0为标准往上作+3的递增或者往下作-3的递减。）
19. Input 类型 – range
语法：
说明：出现一条滑动条，每个浏览器的效果略有不同，下面我们截图查看有哪些不同：
FireFor效果
IE10效果
SaFari效果
Chrome效果
具体用法或者意义也没查到相关的资料，有待以后在案例中测试后，再详细描述相关情况给大家，而朋友们也可以自己去实践，一切的真知都来源于实践！
20. Input 类型 – search
语法：
说明：目前看到只出现了一个普通的文本框，没看到其他的效果和作用，留待以后的实验和分析。
21. Input 类型 – color
语法：
说明：目前测试在FireFor和Chrome中会出现一个色块，然后点击会弹出颜色板，而在IE10和SaFari中只显示一个正常的文本框，效果如下：
具体作用和效果留待实验和总结。
22. Input 类型 - Date Pickers（数据检出器）
语法：
说明：date - 选取日、月、年； month - 选取月、年； week - 选取周和年 ；
time - 选取时间（小时和分钟）； datetime - 选取时间、日、月、年（UTC 时间）；
datetime-local - 选取时间、日、月、年（本地时间）
我们可以将data换成其他的类型一一实验，具体效果只有在Chrome中才有，其他浏览器支持都不太友好，下面先看看Chrome中的效果：
点击弹出日历，可以选择日期
而在SaFari中的效果只是出现了一个可以往前翻一天，往后翻一天的文本框格式，具体效果如下：
往下点击变成 因为今天是2015-11-20
往上点击同理就没在做测试了。
而其他浏览器显示的只是一个普通的文本框。
总结出：input的很多类型还是得不到浏览器的支持，所以能够让这些新的类型能得到广泛的应用，还是需要一段时间的过度，我们尽请期待着浏览器的同步发展，迎接HTML的新纪元。
23. datalist 元素
24. keygen 元素
25. output 元素
以上3个元素还得不到浏览器的大量支持，所以我在这里就不做更多的讲解了，大家只要记得有这样的 3个元素就OK。
26. HTML5 的新的表单属性
说明：很多的属性依旧得不到浏览器的支持和解析，所以在这里我就不做详细的解释了，我只是简单的把新的表单属性罗列一二。
1） 新的form属性：
autocomplete ：autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
novalidate：novalidate 属性规定在提交表单时不应该验证 form 或 input 域
2） 新的input属性：
autocomplete：
autofocus: autofocus 属性规定在页面加载时，域自动地获得焦点
form: form 属性规定输入域所属的一个或多个表单
form overrides等: 表单重写属性
height 和 width: height 和 width 属性规定 image 类型的 input 标签的图像高度和宽度
list: list 属性规定输入域的 datalist。datalist 是输入域的选项列表
min, max 和 step:
multiple: multiple 属性规定输入域中可选择多个值
pattern (regexp): pattern 属性规定用于验证 input 域的模式（pattern）
placeholder: placeholder 属性提供一种提示（hint），描述输入域所期待的值
required: required 属性规定必须在提交之前填写输入域（不能为空）
HTML5是一个漫长等待的过程，所以要想HTML5全面通行的话，还有一段时间需要等待，所以在使用HTML5标签、元素、属性时，要格外小心，注意浏览器的解析能力。
十三. XHTML及规范
XHTML是W3C组织制定的一个过度技术，结合了部分XML的强大功能和大多数的HTML简单特性。
1. XHTML简述
HTML是一种网页设计语言，而XHTML是基于XML的标准而发布的一种过度性页面语言，本质是和HTML是没什么区别的，只是比HTML更加的严谨和规范，同时具备了一定的XML的功能。
XML数据转换能力强大，未来完全可以取代HTML的存在，但因为成千上万的HTML设计的网站的存在，直接用XML为时过早，因此W3C在HTML4.0的基础上，用XML的规则进行了扩展，得到了XHTML，借助XHTML来实现HTML到XML过度的目的。
2. 为什么要把HTML升级到XHTML
HTML语言中只有有限的创建要素，无法处理非常规的内容，同时HTML不能很好的支持不断更新的显示产品，如智能手机等，而XHTML是XML的一种应用，可以得到很好的扩展性，XHTML具有以下优点：
1） XHTML提倡使用更加简洁和规范的代码，使得代码的阅读和处理更方便，也便于搜索引擎的检索；
2） XHTML文档在旧的基于HTML的浏览器中能够表现和在新的基于XHTML的浏览器中的表现一样出色；
3） XHTML是可扩展的语言，能够包含其他文档类型，既能够利用HTML的文档对象模型，也能利用XML的文档对象模型，所以其支持更多的显示设备；
4） 在XHTML中，推荐使用CSS样式定义页面的外观，并分离页面的结构和表现，方便利用数据和更换外观；
5） XML是web发展趋势，具有更好的向后兼容性，使用XHTML，只要遵守一定的规则规范，那么就可以设计出即适合XML系统，又适合于当前大部分的HTML浏览器的页面。
3. 简单的XHTML页面结构
包含一个XHTML页面必须具备以下的页面结构：
1） 文档类型声明
2）标签和名字空间 ……..
3） 网页头部标签
无标题文档
4） 网页标题标签
无标题文档
5） 网页主体标签
…….
这里的语法就不做过多的描述了，这和我们开始说的HTML页面结构大同小异。
4. XTHML语法规范
XHTML比较于HTML来说，代码结构更严谨、更规范，这些规则规范大家必须熟记，这是我们以后写代码，建网站的准则：
1） 标签必须完全嵌套
在HTML中或许像这样的代码也可以，被“容错了”：
你是我的宝贝！
而在XHTML中则必须写成：
你是我的宝贝！
完全嵌套，严格前后！
2） 文档格式必须规范
所有标签必须在根标签内，所有标签可以有自己的子标签，但子标签必须在父标签中成对出现、正确嵌套。
3） 标签名必须是小写
XML是区分大小写的，因XHTML是XML的应用程序，所以标签名必须小写，在一些HTML文档中还是存在一些大写标签，所以从现在开始我们的HTML、XHTML文档拒绝大写标签！
4） 所有标签必须闭合
标签分开始标签和闭合标签，所以标签应该是成对出现的，这样可以闭合标签，但对于一些单标签的话，我们可以在开始标签上闭合了，如下：
不需要闭合标签，它是一个声明，它不属于XHTML文档。
5） 用id属性代替name属性
