HTML 5深入浅出教学篇之一

开发 前端
此篇文章介绍了根元素 - doctype, html;元数据元素 - head, title, base, link, meta, style;脚本元素 - script, noscript。

介绍

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

根元素 - doctype, html

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

脚本元素 - script, noscript

示例

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

  1. <!--  
  2.     <!doctype html> - 声明文档类型为 HTML5 文档  
  3. --> 
  4. <!doctype html> 
  5. <html> 
  6. <head> 
  7.     <title>doctype</title> 
  8. </head> 
  9. <body> 
  10. </body> 
  11. </html> 

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

  1. <!doctype html> 
  2.  
  3. <!--  
  4.     html - 文档的根元素,如需指定语言,则设置“lang”属性即可  
  5. --> 
  6. <html lang="zh-CN"> 
  7.  
  8. <head> 
  9.     <title>html</title> 
  10. </head> 
  11. <body> 
  12. </body> 
  13. </html> 

#p#

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

  1. <!doctype html> 
  2. <html> 
  3. <!--  
  4.     head - 头容器,可包含如下标签: title, base, link, meta, style, script。其中必须要有 title 标签  
  5. --> 
  6. <head> 
  7.     <title>head</title> 
  8.     <base /> 
  9.     <link /> 
  10.     <meta /> 
  11.     <style></style> 
  12.     <script type="text/javascript"></script> 
  13. </head> 
  14. <body> 
  15. </body> 
  16. </html> 

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

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <!--  
  5.         title - 文档标题  
  6.     --> 
  7.     <title>我是标题</title> 
  8. </head> 
  9. <body> 
  10.     <script type="text/javascript"> 
  11.         var title = document.getElementsByTagName("title")[0];  
  12.         alert(title.text);     
  13.     </script> 
  14. </body> 
  15. </html> 

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

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>base</title> 
  5.     <!--  
  6.         base - 设置一些默认值  
  7.           href - 指定当前文档的默认地址,不指定的话默认地址为当前文档的 url。文档中相对路径的解析后的绝对地址为:默认地址 + 相对路径  
  8.           target - 指定文档中链接的默认打开方式。_blank, _parent, _self, _top  
  9.     --> 
  10.     <base href="http://pic.cnblogs.com/avatar/" target="_blank" /> 
  11. </head> 
  12. <body> 
  13.     <!--  
  14.         a 标签的链接打开方式为 _blank  
  15.         img 标签的图片绝对地址为 http://pic.cnblogs.com/avatar/a14540.jpg  
  16.     --> 
  17.     <a href="http://webabcd.cnblogs.com/"> 
  18.         <img src="a14540.jpg" alt="baby" /> 
  19.     </a> 
  20. </body> 
  21. </html> 

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

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

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

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>meta</title> 
  5.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css1.css" title="css1" /> 
  6.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css2.css" title="css2" /> 
  7.  
  8.     <!--  
  9.         meta - 文档相关的元数据。可用属性如下:name, http-equiv, content, charset  
  10.     --> 
  11.  
  12.     <!--  
  13.         name, content 组合的示例如下(不全)  
  14.     --> 
  15.     <!--定义关键字--> 
  16.     <meta name="keywords" content="html5, flash, silverlight" /> 
  17.     <!--定义文档的描述信息--> 
  18.     <meta name="description" content="介绍 html5 中的 meta 标签" /> 
  19.     <!--定义文档的作者--> 
  20.     <meta name="author" content="webabcd" /> 
  21.     <!--定义文档的生成工具--> 
  22.     <meta name="generator" content="EditPlus" /> 
  23.     <!--如果把此 html5 文档看成一个程序,则此处用于定义程序的名称--> 
  24.     <meta name="application-name" content="meta 标签的介绍" /> 
  25.  
  26.  
  27.     <!--  
  28.         http-equiv, content 组合的示例如下(不全)  
  29.     --> 
  30.     <!--定义文档内容的语言--> 
  31.     <meta http-equiv="content-language" content="zh-CN" />   
  32.     <!--定义文档内容的类型--> 
  33.     <meta http-equiv="content-type" content="text/html" />   
  34.     <!--定义文档所使用的样式表的 title,从而在有多个样式表的时候,只使用指定 title 的样式表。本例中会强制只使用 title 为 css1 的样式表--> 
  35.     <meta http-equiv="default-style" content="css1" />   
  36.     <!--文档每 100 秒刷新一次--> 
  37.     <meta http-equiv="refresh" content="100" /> 
  38.     <!--设置 cookie--> 
  39.     <meta http-equiv="set-cookie" content="author=webabcd;" />   
  40.  
  41.  
  42.     <!--定义文档的编码类型--> 
  43.     <meta charset="utf-8"> 
  44. </head> 
  45. <body> 
  46.     webabcd  
  47.  
  48.     <script type="text/javascript"> 
  49.         // 获取 meta 中设置的 cookie  
  50.         alert(document.cookie);  
  51.     </script> 
  52. </body> 
  53. </html> 

css1.css

  1. body  
  2. {  
  3.     color: Red;  
  4. }  

css2.css

  1. body  
  2.  {  
  3.     color: Green;  
  4.     font-size24px;  

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

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>style</title> 
  5.     <!--  
  6.         style - 定义文档的样式信息。可用属性如下: disabled, media, type, scoped  
  7.           scoped - bool 类型的属性,如果为 true,则代表样式只能应用到 style 元素的父元素及其子元素(对于 scoped 为 false 的 style 只能写在 head 内)  
  8.     --> 
  9.     <style> 
  10.         div { font-size: 24px; }  
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div> 
  15.         我和我的子都应该是红色的  
  16.         <style scoped> 
  17.             div { color:Red; }  
  18.         </style> 
  19.     </div> 
  20.     <div> 
  21.         如果我是红色的,也就是说浏览器不支持 style 的 scoped(注:目前所有浏览器都不支持 style 的 scoped)  
  22.     </div> 
  23. </body> 
  24. </html> 

#p#

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

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

script1.js

  1. alert("script1 completed");  
  2. /*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
  3. /*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
  4. /*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/ 
  5. ... 

script2.js

  1. alert("script2 completed"); 

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

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>noscript</title> 
  5. </head> 
  6. <body> 
  7.     <script type="text/javascript"> 
  8.         alert("您的浏览器支持脚本");  
  9.     </script> 
  10.     <!--  
  11.         noscript - 定义当浏览器不支持脚本的时候所显示的内容  
  12.     --> 
  13.     <noscript> 
  14.         您的浏览器不支持脚本  
  15.     </noscript> 
  16. </body> 
  17. </html> 

[源码下载]

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

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

责任编辑:张伟 来源: webabcd的博客
相关推荐

2012-05-31 10:57:06

HTML5

2012-05-30 13:26:12

HTML5

2012-05-31 09:19:22

HTML5

2012-05-31 09:54:13

HTML5

2012-05-30 11:11:42

HTML5

2012-05-30 13:49:52

HTML5

2012-05-30 14:51:09

HTML5

2012-05-30 13:17:46

HTML5

2012-05-31 09:35:43

HTML5

2012-05-30 15:17:54

HTML5

2023-02-14 08:00:00

MySQL索引查询

2022-02-25 08:54:50

setState异步React

2021-08-24 06:36:02

DDD领域驱动微服务

2021-03-16 08:54:35

AQSAbstractQueJava

2011-07-04 10:39:57

Web

2016-10-14 13:53:05

JavascriptDOMWeb

2019-01-07 15:29:07

HadoopYarn架构调度器

2017-07-02 18:04:53

块加密算法AES算法

2021-07-20 15:20:02

FlatBuffers阿里云Java

2012-05-21 10:06:26

FrameworkCocoa
点赞
收藏

51CTO技术栈公众号