快速学会HTML第三天:常用的HTML标记(三)

2017-02-19 21:34 阅读 2,275 次 评论 0 条

有段时间没有分享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属性

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:快速学会HTML第三天:常用的HTML标记(三) | 淮安SEO杨大伟博客—专注网站搭建SEO网站优化服务互动营销知识

发表评论


表情