千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素
来源:互联网 发布:淘宝拍照用什么软件 编辑:程序博客网 时间:2024/05/21 22:52
原文地址:http://www.cnblogs.com/webabcd/archive/2011/09/15/2176955.html
作者: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>
- 千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素
- 千呼万唤 HTML 5 (2) - 区块元素
- 千呼万唤 HTML 5 (3) - 内容分组元素
- 千呼万唤 HTML 5 (4) - 文本语义元素
- 千呼万唤 HTML 5 (7) - 表单元素
- 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
- 千呼万唤 HTML 5 (5) - 元素的通用属性
- 创建html文档——html的文档元素和元数据元素
- 1.1.1脚本元素
- 脚本元素
- HTML 5 表单元素
- 1HTML元素
- HTML 元素
- HTML元素
- Html元素
- html元素
- HTML 元素
- HTML元素
- spserver学习之三__通讯模型
- 俄罗斯方块
- linux grep用法
- C语言数据结构中链表的具体实现
- 2012年3月8日C++学习笔记
- 千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素
- C++中虚继承防止二义性
- 千呼万唤 HTML 5 (2) - 区块元素
- java解析xml(JDOM)配置环境
- 变量声明和定义的区别
- ehcache.xml 的配置详解和示例
- 千呼万唤 HTML 5 (3) - 内容分组元素
- android ListView 几个重要属性
- 千呼万唤 HTML 5 (4) - 文本语义元素