您现在的位置是:首页 > 网站制作 > 前端设计

前端设计

学习Html5建站教程(二)Html5 语法与规则

杨青 2013-07-07前端设计

Html5 语法与规则

1、Html5不区分大小写,<P>This is <EM>my</eM><blog</p>

2、Html5 省略关闭空元素的斜杠;空元素,就是不会嵌套内容的元素,例如:<img>、<br>、<hr>

3、属性的语法规则,属性值中只要不包含(> = 或者空格)等受限的字符,就可以不用加引号。

例如:

<img alt="杨青个人网站-杨青个人博客" src=/skin/blog/images/logo.jpg>

只有属性没名没有属性值也可以。

PS:如果能做到以下几点,基本上可以算是良好的html5风格了

1、虽然<html>、<body>、<head>可有可无,不使用只是代表一种风格而已。但是使用的话会有助于页面内容与其他信息分开,所以应该包涵<html>、<body>、<head>这三个元素。

2、标签全部小写。

3、为属性值添加引号,加引号的理由是防止犯一些低级的错误,有时候不经意的一个错误,一个无效的字符就会破坏整个页面。

4、验证。验证工具可以帮你抓住那些与html5推荐标准不相符的标记。例如缺少必须的元素,有开始标签但没有结束标签,标签嵌套错误,元素或者内容放错了地方等。Dw和Expression Web等都自带有验证工具,推荐一个在线验证网址:http://jigsaw.w3.org/css-validator/

Html5新增的元素:

1、用于构建页面的语义元素 <article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、<summary>

2、用于标识文本的语义元素 <mark>、<time>、<wbr>(表示可以在某处断开)

3、Web表单及交互 <input>(不是新元素,但增加了很多了类型)、<datalist>、<keygen>、<meter>、<progress>、<command>、<menu>、<output>

4、音频、视频及插件 <audio>、<video>、<source>、<embed>

5、Canvas <canvas>

浏览器的支持情况:

http://caniuse.com/这个网站可以详细的列出每一款主流浏览器对html5的支持情况。总会有些访客的浏览器不支持html5,但这并不影响你使用html5的功能,检测支持通常需要检查某个可编程对象的属性,或者创建一个对象并以其他方式来使用它。

那么如何让所有浏览器都支持html5语义元素标签?

以下列举常用的方法:

1、在<header>区块中引用

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

注:html5.js脚本应该是有条件执行的——只在你使用旧版本IE的情况下才会执行。为了避免不必要的加载js文件,可以像下面这样引用脚本代码放在IE的条件注释中,这样其他浏览器(IE9以及更高版本)就会忽略这行脚本,为你的页面节省毫秒的加载时间。

<!--[if lt IE 9]>

 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

2、使用Modernizr

Modernizr会自动替你解决上述问题,不用使用html5.js或者样式规则。

1、打开www.modernizr.com,找到 Download Modernizr 区域,单击其中的Development按钮,下载Modernizr的js文件。

2、把下载到的js文件放到你的网页所在文件夹,例如js文件夹。

3、在页面<head>区块中添加对这个js文件的引用。

示例:

<head>

<meta charset="gb2312"> 

<title>学习Html5建站教程(二)Html5 语法与规则 - 杨青个人博客网站</title> 

<script src="/skin/blog/js/modernizr.js"></script> 

...

</head> 

原文:《HTML5网页如何让所有的浏览器都能识别语义元素标签样式

文章评论