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

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    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网页如何让所有的浏览器都能识别语义元素标签样式

关键字词:建站教程,教程,Html5,学习Html5,语法,规则