HTML 5 (1) - 根元素, 元数据元素, 脚本元素

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 243 次

HTML5(1)-根元素,元数据元素,脚本元素介绍HTML5:根元素,元数据元素,脚本元素根元素-doctype,html元数据元素-head,title,base,link,meta,style脚

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

根元素 - doctype, html
元数据元素 - head, title, base, link, meta, style
脚本元素 - script, noscript

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

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

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

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

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

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

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

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

css1.css

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

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

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

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

script1.js

  alert("script1 completed");    /*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/  /*上面的信息多复制几行，以便增大 js 的文件大小*/

script2.js

  alert("script2 completed");

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

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。