posts - 615, comments - 10478, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素

Posted on 2011-09-15 09:42 webabcd 阅读(...) 评论(...) 编辑 收藏

[索引页]
[源码下载] 


千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素



作者:webabcd


介绍
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>

 

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>

 

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>

 


OK
[源码下载]