0

0

html5基础教程常用技巧整理

PHPz

PHPz

发布时间:2016-05-16 15:48:54

|

1560人浏览过

|

来源于php中文网

原创

html5的一些新增属性和功能是让代码变得更简洁,这总归是一件好事,应该值得我们推崇,希望这篇html5的文章对你有一些帮助

1. 新的Doctype声明 

XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。 

HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合 这种格式,都会进入标准模式。 

立即学习前端免费学习笔记(深入)”;

2.

标签
 

About image 
Image of Mars.

看看下面一段简单的代码: 

遗憾的是,这里的h6标签和img标签好像没有什么关系,语义不够明确。HTML5意识到了这一点,于是就采用了

标 签。当
结合
标签的使用,可以让h6标签和img标签组合起来,代码就更具语义化了。

About image
This is an image of something interesting.

3. 重新定义 

不久前,我使用了标签来创建与logo相关的副标题。但是在HTML5中重新定义了标签,使之更能表现语义化,在的字号都会变小,想想如果这个标签用于网站的底部的版权信息还是个不错的做法。 

4. 去掉了Javascript和CSS标签的type属性 

通常你会在

 

在HTML5中,不再需要type属性了,因为这显得有点多余,去掉之后可以让代码更为简洁。

 

5. 是否使用双引号 

这有点让人纠结,HTML5并不是XTHML,你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号,因为这让代码看起来会更标准。不过,这可以根据你的个人喜好来确定是到底要不要双引号。

Start the reactor.

6. 使网页内容可以编辑 

 

To-D0 List

      
  • Break mechanical cab driver
  •   
  • Drive to abandoned factory
  •   
  • Watc

7. 电子邮件输入框

HMTL5中新增了一个输入框的电子邮件属性,可以检测输入的内容是否符合电子邮件的书写格式,功能越来越强大了吧,在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实,但这个属性很多浏览器都还不支持,只会当作普通的文本输入框来处理。 

 

到目前为止,包括现代浏览器在内都不支持该属性,所以这个属性暂时还是靠不住的。 

8. 占位符 

文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验,之前,我们只能依靠JS来实现占位符的效果,在HTML5中新增了占位符属性placeholder,关于此属性的详细介绍你可以点击这里:HTML5表单placeholder属性。

同样,目前的主流现代浏览器对该属性的支持不大好,暂时只有Chrome和Safari支持该属性,Firefox和Opera不支持该属性。  

 

9. 本地存储 

HTML5的本地存储功能,可以让现代浏览器“记住”我们输入的,就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持,但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的,你可以测试下。

 

10. 更有语义的header和footer 

下面的代码在HTML5中将不复存在

 

通常我们都会给header和footer定义一个p,然后再添加一个id,但是在HTML5中可以直接使用

标签,所以可以将上面的代码改写成:

...
...

要注意不要将这两个标签和网站的头部和页脚混淆起来,它们只是代表它们的容器。 

11. IE对HTML5的支持 

IE浏览器目前对HTML5的支持并不好,也是阻碍HTML5的更快普及的一大绊脚石,不过,IE9对HTML5的支持度还是很不错的。 

IE把HTML5新增的标签都解析成内联元素,而实际上它们是块级元素,所以有必要为它们定义一个样式: 

header, footer, article, section, nav, menu, hgroup { 
display: block; 
}

尽管如此,IE还是不能解析这些新增的HTML5标签,这个时候就需要借助Javascript来解决这个问题: 

document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
document.createElement("menu");

你可以借助这一段Javascript代码来修复IE更好的解析HTML5

 
_fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js">" 
_fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js">"

12. 标题群( hgroup) 

这个类似于第二点技巧。如果用h1和h2标签分别表示网站的名称和副标题,但这会让两个本义上密切相关的标题并没有关联起来。这个时候可以使用

标签将它们组合起来,这样代码会更有语义。 

Recall Fan Page

Only for people who want the memory of a lifetime.

13. 必填项属性 

前端人员肯定做过不少表单验证的项目,其中很重要的一点就是有些输入框的内容是必须填写的,这里就需要使用Javascript来检查。在 HTML5中,新增了一个“必须填写”的属性:required。required属性有两种使用方法,第二种方法显得更有结构性,而第一种更简洁。 

Orz企业网站管理系统 双语版
Orz企业网站管理系统 双语版

Orz企业网站管理系统整合了企业网站所需要的大部分功能,并在其基础上做了双语美化。压缩包内有必须的图片psd源文件,方便大家修改。 Orz企业网站管理系统功能: 1.动态首页 2.中英文双语同后台管理 3.产品具有询价功能 4.留言板功能 5.动态营销网络 6.打印功能 7.双击自动滚动 Orz企业网站管理系统安装 1、请将官方程序包解压后上传至您的虚拟主机即可正常使用; 2、后台管理面板登录:

下载
 

有了这个属性,使表单的提交验证变得更简单了,看看下面简单的例子: 

 
 
 
 

 

如果输入框为空,表单将无法提交成功。 

14. 自动获取焦点 

同样的,HTML5也不再需要Javascript来解决输入框的自动获取焦点,如果某个输入框应当被选择或是获取到输入焦点,HTML5新增了自动获取焦点属性autofocus:

autofocus也同样可以写成”autofocus=autofocus”,这样看起来标准些,这个根据自己的个人喜好而定。  

15. 音频播放的支持 

HTML5中提供了

为什么会有两种格式的音频文件?因为Firefox和Webkit浏览器所支持的格式存在差异,Firefox只能支持.ogg文件,而 Webkit只支持.mp3的文件,解决的办法就是创建两个版本的音频文件,这样就可以兼容Firefox和Webkit的浏览器了,需要注意的是IE不 支持该标签。 

16. 视频播放的支持 

需要注意的是,type属性虽然可以省略掉,但是如果加上的话,浏览器就可以更快的准确的解析该视频文件。并不是所有的浏览器都支持HTML5的视频,所以得做好使用Flash版本来代替,当然,这个决定权在于你。 

17. 预加载视频 

预加载属性:preload,首先要确定是否需要预先加载视频,假如,访客在访问一个有很多视频展示的页面,那么就有必要预先加载一段视频,这样可 以节省访客的等待时间,提高用户体验。你可以给

18. 显示控件 

显示控件属性可以给视频添加一个播放暂停的控件,需要注意的是每个浏览器显示的效果可能会有些差异。 

19. 使用正则表达式 

在HTML5中,我们可以直接使用正则表达式。 

20. 检测浏览器对HTML5属性的支持 

由于各浏览器对HTML5属性的支持度不同,这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性,上例中的代码如果要检测pattern属性是否被浏览器识别,可以使用Javascript代码来检测。

alert( 'pattern' in document.createElement('input') ) // boolean;

其实这是确定浏览器兼容常用的方法,jQuery库就经常使用这种方法。上面的代码中创建了一个input标签,并检测pattern属性是否被浏览器支持,如果能支持的话,浏览器就支持这个功能,否则就不支持。

21. Mark标签 

标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字,包裹在此标签里的字符串必须与用户当前的行为相关。 

例如,如 果我在一些博客中搜索“Open your Mind” ,我可以使用在标签里使用JavaScript来包裹每一次动作。 

Search Results

They were interrupted, just after Quato said, "Open your Mind".

22. 该如何正确的使用p标签 

有些人可能会有疑问,有了

等这些标签,

标签在HTML5中还有 用吗?答案是肯定的,比如你想创建一个能包裹特殊内容的容器自由灵活的

肯定是首选,而你要创建一篇文章或者一个导航菜单,建议你使 用更有语义的

很多人认为HTML5可能还是很遥远的事,所以直接无视,其实不然,现在很多网站都已经开始使用HTML5了,事实上,HTML5的一些新增属性和功能是让代码变得更简洁,这总归是一件好事,应该值得我们推崇。最后感谢你阅读了这篇HTML5的文章,希望这篇文章对你有一些帮助。

以上就是本章的全部内容,更多相关教程请访问Html5视频教程

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 4.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

JavaScript
JavaScript

共185课时 | 19.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号