首页 > 其他分享 >Web应用开发必知的HTML 5编码实践方法

Web应用开发必知的HTML 5编码实践方法

时间:2022-12-11 20:02:44浏览次数:58  
标签:Web http 必知 HTML HTML5 使用 浏览器 com 开发者



本人作品,转载请注明出处

HTML5 现在的发展相当迅速,越来越多的浏览器开始支持HTML5的新特性,也涌现出越来越多的基于HTML5的App应用,毫无疑问,作为web开发者,必须了解和懂得HTML5的相关特性,因为它很大程度上是今后web开发中的趋势。在本文中,列举了在对HTML5编码开发过程中,一些值得开发者注意的最佳实践方法,这些方法将提高开发者的开发效率和改善开发质量。

1) 使用模板生成器
[img]http://image20.it168.com/201207_500x375/1128/e28102c54680fc46.jpg[/img]

当我们开始着手编写HTML5页面时,可以使用一些已有的模板生成器去生成一些HTML5模板,这样就可以避免开发者都是从头开始徒手编写HTML5代码。使用这些HTML5模板生成器的步骤其实都是很简单的:一般来说,只需要填写一些表单的基本选项,然后点生成的按钮就可以生成一个基本的HTML5基本模板了,现在也有不少优秀的HTML5模板生成器,推荐的是下面的两个:SwitchTOHtml5(地址:http://switchtohtml5.com/)和Shikiryu generator,
  (地址:http://shikiryu.com/html5/ )。而如果需要更高级复杂的生成功能的话,推荐的是使用HTML5 Boilerplate这个模板生成器生成,地址为:
  http://html5boilerplate.com/ ,HTML5 Boilerplate 的核心是用于帮助开发 HTML5 站点和应用程序的组件,包括:
  Modernizr,一个小型实用程序库,支持在 Windows® Internet Explorer® 中设置新的 HTML5 元素样式,并协助在所有浏览器中进行 HTML5/CSS3 特性检测。如果您正在使用 HTML5 进行开发且需要支持 Internet Explorer 版本 9 之前的浏览器版本,那么这个库(或者我稍后将解释的一个替代选项)将是您的项目必不可少的一个组件。
  构建于 HTML5 Doctor Reset 之上的一个 CSS 起始文件,包含几个智能默认值和增强。
  内置 HTML5 语法,以及一些新的语义元素,用于构成您文档的骨架。

2) 使用Cheat sheet备忘录
[img]http://image20.it168.com/201207_500x375/1128/afe2bf113992f83c.jpg[/img]

由于HTML5还在迅速的发展,因此会不断出现很多新的特性,一般的开发者有的时候很难都记得所有这些新的特性,因此最好的办法是使用cheat sheet(备忘录)的方法去查阅这些新特性和用法,下面推荐一个不错的备忘录(上图是其中的一张截图),地址是:http://www.inmotionhosting.com/infographics/html5-cheat-sheet/ ,其中分别有几张备忘录,详细介绍了HTML5中各标签和事件属性,支持的浏览器等详细说明。

3) 关注兼容性问题
[img]http://image20.it168.com/201207_500x375/1128/b45e33a98534e4bb.jpg[/img]
 由于HTML5是新的技术,但是开发者依然不能忘记的是,各大浏览器厂商对其的支持还是不一样的,比如微软的IE就跟其他厂商的很不同,这就要求开发者在使用新的特性时,要注意考虑是否需要在各大浏览器中取得平衡,比如考虑用户群使用的浏览器类型。这里推荐使用http://caniuse.com/这个网站去查看HTML5各个属性或者事件在各浏览器中的兼容情况(上图为其截图),这个网站的特色在于能让开发者一目了然地看到CSS,SVG和Javascript在HTML5中的各项用法以及以表格的形式对比了各浏览器对HTML5标准的支持情况,十分详细,值得参考。

4)针对旧版本IE的兼容考虑
不得不说,大部分的WEB前端开发者都十分讨厌IE,但有的时候,还是得考虑下旧的IE版本,这个时候就需要一些技巧了,在IE 8以及以下的版本,如果要使用一些HTML5的特性,而不让IE报错,可以使用如下的脚本:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  要注意的是,以上脚本只能让旧版本的IE对新的HTML5特性不报错,但不一定能承诺让所有HTML5新特性都能兼容运行。此外,可以使用一个不错的html5 框架:modernizr(下载地址在:http://modernizr.com/),它是一个能最大限度在各浏览器中运行HTML5 CSS3的框架,使用方法也很简单,下载后,将其脚本放在每个HTML页中的head部分引入就可以了,如果某一HTML5新特性被正在使用的浏览器支持,则会自动启用,如果不支持,则会以前缀“no_”的形式被引入以示区别。

5) 正确使用元素
在HTML5之前,开发者需要在页面中使用大量的缺乏语义的标签,比如使用
  等,这将让HTML5变得难以理解(特别是对搜索引擎来说),为此,HTML5引入了大量的新的标签元素,比如header,footer,article,section,aside,nav等等,但开发者要注意正确使用它们,比如下面是一种正确的使用方法:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
...
</header>
<div role="main">
...
</div>
<footer>
...
</footer>
</body>
</html>



6)  校验写好的HTML5代码


[img]http://image20.it168.com/201207_500x375/1128/c1815a7a150e5d45.jpg[/img]


在完成HTML5编码工作后,必须对编码工作进行确认,以校验HTML5编码中是否有正确的语义。除了使用专门的支持HTML5的编辑工具外(比如Visual Studio 2010,Dreamweaver CS 5等),还可以使用如上图所示的W3C的校验工具进行,地址为:http://validator.w3.org/


标签:Web,http,必知,HTML,HTML5,使用,浏览器,com,开发者
From: https://blog.51cto.com/u_14230175/5928567

相关文章

  • HTML5 中fullscreen 中的几个API和fullscreen欺骗
    HTML5中的fullscreen,目前可以在除IE和opera外的浏览器中使用,有的时候用来做全屏API,游戏呀,等都很有用。先看常见的API1element.requestFullScree......
  • What's the blur event in Html?
     What'stheblureventinHtml?InHTML,theblureventistriggeredwhenanelementlosesfocus.Thismeansthattheelementisnolongerselectedoractive,......
  • How many types the input element has in Html?
    HowmanytypestheinputelementhasinHtml?TherearemanytypesofinputelementsinHTML,andtheexactnumbercanvarydependingonhowyoucountthem.......
  • 【博学谷学习记录】超强总结,用心分享。Web重要知识点。
    1.网络通讯部分  1.1TCP与UDP区别?   TCP(TransmissionControlProtocol传输控制协议)是一种面向连接(连接导向)的、可靠的、基于IP的传输层协议。......
  • [BUUCTF][WEB][极客大挑战 2019]Http 1
    打开靶机提供的url右键查看网页源代码发现一个链接(Secret.php),访问看看返回:Itdoesn'tcomefrom'https://Sycsecret.buuoj.cn'这是个题眼通过burpsuite拦截请求......
  • HTML5标签(1)
    Doctype:说明使用的HTML是什么版本。html:包含文件的全部内容。head:网页头部标签。meta:声明使用的字符编码语言。title:表示HTML5文档的标题。body:包含文档的主体内容。......
  • HTML5标签(2)
    图片标签:img:插入图片src:图片的地址align:对齐方式width:宽度heigth:高度border:边框厚度(大小)alt:提示信息(图片不显示时)top:偏上方middle:中间bottom:底端left:左right:右超链......
  • [BUUCTF][WEB][极客大挑战 2019]Knife 1
    这题几乎是送分题目不断暗示,后台存在一句话木马拿个蚁剑连上去就完事了这里用curl连上去,演示一下,理解一下其中的原理#注意phpinfo()后面的分号不能省curl-d"Syc......
  • 使webworker中支持使用import导入模块——threads.js
    threads.js基本使用使用vue-cli创建一个项目(我这里vue--version的版本是3.11.0):vuecreatehello-world添加tool.js文件:exportfunctiongetSuffix(){return......
  • [BUUCTF][Web][极客大挑战 2019]LoveSQL 1
    打开靶机url,页面显示有两个输入框,框中输入123',发现两个框都有sql注入问题爆出一下错误YouhaveanerrorinyourSQLsyntax;checkthemanualthatcorrespondstoy......