HTML 5深入浅出教学篇之一-深入浅出html5编程

介绍

HTML 5: 根元素, 元数据元素, 脚本元素

根元素 - doctype, html

元数据元素 - head, title, base, link, meta, style

脚本元素 - script, noscript

示例

1、doctype - 文档类型element/root/doctype.html

<!--  
    <!doctype html> - 声明文档类型为 HTML5 文档  
--> 
<!doctype html> 
<html> 
<head> 
    <title>doctype</title> 
</head> 
<body> 
</body> 
</html>

2、html - 文档的根元素element/root/html.html

<!doctype html> 
 
<!--  
    html - 文档的根元素，如需指定语言，则设置“lang”属性即可  
--> 
<html lang="zh-CN"> 
 
<head> 
    <title>html</title> 
</head> 
<body> 
</body> 
</html>

#p#

3、head - 头容器element/metadata/head.html

<!doctype html> 
<html> 
<!--  
    head - 头容器，可包含如下标签: title, base, link, meta, style, script。其中必须要有 title 标签  
--> 
<head> 
    <title>head</title> 
    <base /> 
    <link /> 
    <meta /> 
    <style></style> 
    <script type="text/javascript"></script> 
</head> 
<body> 
</body> 
</html>

4、title - 文档标题element/metadata/title.html

<!doctype html> 
<html> 
<head> 
    <!--  
        title - 文档标题  
    --> 
    <title>我是标题</title> 
</head> 
<body> 
    <script type="text/javascript"> 
        var title = document.getElementsByTagName("title")[0];  
        alert(title.text);     
    </script> 
</body> 
</html>

5、base - 设置文档的默认地址和链接的默认打开方式element/metadata/base.html

<!doctype html> 
<html> 
<head> 
    <title>base</title> 
    <!--  
        base - 设置一些默认值  
          href - 指定当前文档的默认地址，不指定的话默认地址为当前文档的 url。文档中相对路径的解析后的绝对地址为：默认地址 + 相对路径  
          target - 指定文档中链接的默认打开方式。_blank, _parent, _self, _top  
    --> 
    <base href="http://pic.cnblogs.com/avatar/" target="_blank" /> 
</head> 
<body> 
    <!--  
        a 标签的链接打开方式为 _blank  
        img 标签的图片绝对地址为 http://pic.cnblogs.com/avatar/a14540.jpg  
    --> 
    <a href="http://webabcd.cnblogs.com/"> 
        <img src="a14540.jpg" alt="baby" /> 
    </a> 
</body> 
</html>

6、link - 定义两个文档之间的关系，一般用于引入样式表element/metadata/link.html

<!doctype html> 
<html> 
<head> 
    <title>link</title> 
    <!--  
        link - 定义两个文档之间的关系，一般用于引入样式表，示例如下  
          rel - 指定文档间的关系，对于样式表来说此属性的值为 stylesheet。link 标签必须要有 rel 属性  
          type - link 所接入的文档的类型  
          href - link 所接入的文档的地址  
          title - link 所接入的文档的标题，对于样式表来说，可以在 meta 里指定默认样式表的 title，从而只使用指定 title 的样式表  
          disabled, relList(只读), media, hreflang, sizes(只读)  
    --> 
    <link rel="stylesheet" type="text/css" href="http://www.www.www/css.css" /> 
</head> 
<body> 
</body> 
</html>

7、meta - 文档相关的元数据element/metadata/meta.html

<!doctype html> 
<html> 
<head> 
    <title>meta</title> 
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css1.css" title="css1" /> 
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css2.css" title="css2" /> 
 
    <!--  
        meta - 文档相关的元数据。可用属性如下：name, http-equiv, content, charset  
    --> 
 
    <!--  
        name, content 组合的示例如下（不全）  
    --> 
    <!--定义关键字--> 
    <meta name="keywords" content="html5, flash, silverlight" /> 
    <!--定义文档的描述信息--> 
    <meta name="description" content="介绍 html5 中的 meta 标签" /> 
    <!--定义文档的作者--> 
    <meta name="author" content="webabcd" /> 
    <!--定义文档的生成工具--> 
    <meta name="generator" content="EditPlus" /> 
    <!--如果把此 html5 文档看成一个程序，则此处用于定义程序的名称--> 
    <meta name="application-name" content="meta 标签的介绍" /> 
 
 
    <!--  
        http-equiv, content 组合的示例如下（不全）  
    --> 
    <!--定义文档内容的语言--> 
    <meta http-equiv="content-language" content="zh-CN" />   
    <!--定义文档内容的类型--> 
    <meta http-equiv="content-type" content="text/html" />   
    <!--定义文档所使用的样式表的 title，从而在有多个样式表的时候，只使用指定 title 的样式表。本例中会强制只使用 title 为 css1 的样式表--> 
    <meta http-equiv="default-style" content="css1" />   
    <!--文档每 100 秒刷新一次--> 
    <meta http-equiv="refresh" content="100" /> 
    <!--设置 cookie--> 
    <meta http-equiv="set-cookie" content="author=webabcd;" />   
 
 
    <!--定义文档的编码类型--> 
    <meta charset="utf-8"> 
</head> 
<body> 
    webabcd  
 
    <script type="text/javascript"> 
        // 获取 meta 中设置的 cookie  
        alert(document.cookie);  
    </script> 
</body> 
</html>

css1.css

body  
{  
    color: Red;  
}

css2.css

body  
 {  
    color: Green;  
    font-size: 24px;  
}

8、style - 定义文档的样式信息element/metadata/style.html

<!doctype html> 
<html> 
<head> 
    <title>style</title> 
    <!--  
        style - 定义文档的样式信息。可用属性如下: disabled, media, type, scoped  
          scoped - bool 类型的属性，如果为 true，则代表样式只能应用到 style 元素的父元素及其子元素（对于 scoped 为 false 的 style 只能写在 head 内）  
    --> 
    <style> 
        div { font-size: 24px; }  
    </style> 
</head> 
<body> 
    <div> 
        我和我的子都应该是红色的  
        <style scoped> 
            div { color:Red; }  
        </style> 
    </div> 
    <div> 
        如果我是红色的，也就是说浏览器不支持 style 的 scoped（注：目前所有浏览器都不支持 style 的 scoped）  
    </div> 
</body> 
</html>

#p#

9、script - 用于定义客户端脚本element/script/script.html

<!doctype html> 
<html> 
<head> 
    <title>script</title> 
 
    <!--  
        script - 用于定义客户端脚本，可用属性如下：src, async, defer, type, charset  
          type - 脚本的 MIME 类型，此属性必须要有  
          src - 外部脚本的 url 地址，如果指定了 src，那么 script 标签必须是空的  
          charset - 脚本的编码类型  
          defer - bool 类型。如果为 true 的话，则脚本在页面解析完后执行，即在 DOMContentLoaded 事件之前执行，会按照 script 在页面的出现顺序执行，不阻塞页面解析（界面解析的过程中，并行下载脚本）  
          async - bool 类型。如果为 true 的话，则在页面解析的过程中会异步下载脚本，脚本下载完马上执行（肯定会在 window 的 onload 事件之前执行），不阻塞页面解析（界面解析的过程中，并行下载脚本）  
    --> 
 
    <!--  
        引用两段脚本，无 async 时或 defer 时，必然先执行完 script1 后再执行 script2  
        如果被标记为 async，假设 script2 先下载完，script1 后下载完的话，那么会先执行 script2， 再执行 script1  
    --> 
    <script type="text/javascript" src="http://www.cnblogs.com/assets/script1.js" async></script> 
    <script type="text/javascript" src="http://www.cnblogs.com/assets/script2.js" async></script> 
</head> 
<body> 
</body> 
</html>

script1.js

alert("script1 completed");  
/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
...

script2.js

alert("script2 completed");

10、noscript - 定义当浏览器不支持脚本的时候所显示的内容element/script/noscript.html

<!doctype html> 
<html> 
<head> 
    <title>noscript</title> 
</head> 
<body> 
    <script type="text/javascript"> 
        alert("您的浏览器支持脚本");  
    </script> 
    <!--  
        noscript - 定义当浏览器不支持脚本的时候所显示的内容  
    --> 
    <noscript> 
        您的浏览器不支持脚本  
    </noscript> 
</body> 
</html>

[源码下载]

编者按：“此篇文章可能相比以前HTML来说，并没有太大的差距，总体来说，以上内容相对基础，请继续关注后续文章”

原文链接：http://www.cnblogs.com/webabcd/archive/2011/09/15/2176955.html