Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML

2,170 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML

  1. 1. Hyper Text Markup Language www.Black-Xstar.com 1
  2. 2. About… Black-Xstar (Bill Zhong)   billzhong@gmail.com  www.Black-Xstar.com  My Blog and Websites:  http://www.black-xstar.com/blog  http://applife.net  http://www.u3app.com  http://opda.mobi  http://www.3gsurf.com www.Black-Xstar.com 2
  3. 3. HTML是什么 超文本标记语言   Hyper Text Markup Language 一种专门为网页设计的标记语言   目前使用最广泛的标记语言之一 www.Black-Xstar.com 3
  4. 4. HTML的历史 1982 年,Tim Berners-Lee 为使世界各  地的物理学家能够方便的进行合作研究, 建立了使用于其系统的 HTML。  Tim Berners-Lee 设计的 HTML 以纯文本 格式为基础,可以使用任何文字编辑器处 理,最初仅有少量标记(TAG)且易于掌 握运用。 www.Black-Xstar.com 4
  5. 5. HTML的版本 HTML 2.0,1995年11月。   HTML 3.2,1996年1月14日。  HTML 4.0,1997年12月18日。  HTML 4.01,1999年12月24日。 ISO/IEC 15445:2000,2000年5月15日  发布,基于严格的HTML 4.01语法,是国 际标准化组织和国际电工委员会的标准。  XHTML… www.Black-Xstar.com 5
  6. 6. HTML的现状 推荐使用XHTML来代替HTML   XHTML比HTML更加标准和规范 到目前为止,XHTML常用以下几个版本:   XHTML 1.0 Strict(严格版)  XHTML 1.0 Transitional(过渡版)  XHTML 1.0 Frameset(框架版)  XHTML 1.1 www.Black-Xstar.com 6
  7. 7. HTML的未来 XHTML将代替HTML被广泛使用   国际标准而不是企业标准  Firefox 和 Internet Explorer XHTML 2.0 / HTML 5.0 正在起草和完善   下一代标记语言的竞争…… www.Black-Xstar.com 7
  8. 8. HTML的功能 控制页面和内容的外观   发布和检索联机文档  创建联机表单  插入诸如音频剪辑和视频剪辑等对象 www.Black-Xstar.com 8
  9. 9. 简单的HTML页面 <html>   <head> ○ <title>hello world!</title>  </head>  <body> ○ <p>你好,世界!</p>  </body> </html>  www.Black-Xstar.com 9
  10. 10. 基本的HTML结构 <head>…</head> 这部分包括标题和其 <html>…</html> 他说明信息。 标记 HTML 文档的开 <body>…</body> 始和结束 正文部分,包含文本、 图像和链接。 www.Black-Xstar.com 10
  11. 11. 常用的HTML标签 <title> <b>   <meta> <i>   <h1>… <u>   <p> <font>   <br> <img>   <hr> <a>   …… <ul><li>   <ol><li>  www.Black-Xstar.com 11
  12. 12. 标签:<title> title标签是用来标记网页标题的。   例如:  <title>hello world!</title> 则显示出来的标题为:   hello world! www.Black-Xstar.com 12
  13. 13. 标签:<meta> meta是一个特殊的 HTML 标签,提供有  关网页的各种信息,如作者姓名、公司名 称和联系信息等。  meta标签的内容是不会在页面显示出来 的,一般是给浏览器或搜索引擎识别的。 www.Black-Xstar.com 13
  14. 14. 举例:<meta> <meta http-equiv=quot;Content-Typequot;  content=quot;text/html; charset=UTF-8quot; />  告诉浏览器,网页编码为UTF-8。 <meta name=quot;descriptionquot; content=quot;这  是一个例子!quot; />  告诉搜索引擎,网页主要内容是什么。 <meta name=quot;robotsquot; content=quot;noindex,  nofollowquot;>  告诉搜索引擎,这个网页不要收录。 • 注意:百度不遵守国际标准,此标签无效。 www.Black-Xstar.com 14
  15. 15. 标签:<h1>… H1 到 H6 标签用于指定不同级别的标题   <h1>第一级标题</h1>  <h2>第二级标题</h2> ○ <h3>第三级标题</h3>  <h4>第四级标题</h4> - <h5>第五级标题</h5> - <h6>第六级标题</h6> www.Black-Xstar.com 15
  16. 16. 标签:<p> <p>…</p> 标签用于标记段落   <p>第一段</p>  <p>第二段</p>  <p align=quot;leftquot;>左对齐显示</p>  <p align=quot;centerquot;>居中显示</p>  <p align=quot;rightquot;>右对齐显示</p> www.Black-Xstar.com 16
  17. 17. 标签:<br> <br>是强制换行标签,无论什么情况,  见到此标签就立即换行。 和别的标签不同,不需要</br>来结束!  第一行<br>第二行  www.Black-Xstar.com 17
  18. 18. 标签:<hr> <hr> 标签用于在页面上绘制水平线  和<br>标签一样,也不需要</hr>来结  束。 第一段<hr>第二段  www.Black-Xstar.com 18
  19. 19. 标签:<ul><li> 这两个标签是列表标签,连在一起使用的。  <ul>  <li>星期日</li>  <li>星期一</li>  <li>星期二</li>  <li>星期三</li>  <li>星期四</li>  <li>星期五</li>  <li>星期六</li>  </ul>  www.Black-Xstar.com 19
  20. 20. 标签:<ol><li> 同样是列表标签。不过和<ul>不同,<ol>是有序列表。  在有序列表中,列表项以自动生成的顺序显示 。  <ol>  <li>星期日</li>  <li>星期一</li>  <li>星期二</li>  <li>星期三</li>  <li>星期四</li>  <li>星期五</li>  <li>星期六</li>  </ol>  www.Black-Xstar.com 20
  21. 21. 标签:<b><i><u> <b><i><u>这三组标签用于对文本应用各  种格式:加粗、倾斜和下划线。  <b>加粗</b>  <i>倾斜</i>  <u>下划线</u> www.Black-Xstar.com 21
  22. 22. 标签:<font> <font>可用于控制网页上文本的显示。   例如用于指定文字的大小,颜色和字体等。  <font size=quot;8quot;>设置大小</font>  <font color=quot;#00FF00quot;>设置颜色</font>  <font face=quot;华文彩云quot;>设置字体</font> www.Black-Xstar.com 22
  23. 23. 标签:<img> 这个标签是用来给网页插入图片。   图片必须存在于互联网服务器上。  <img src=quot;http://www.google.com/intl/zh- CN_ALL/images/logo.gifquot; /> www.Black-Xstar.com 23
  24. 24. 标签:<a> 超链接标签<a>是超文本的核心。   通过超链接,无数的网页构成了网站。无 数的网站构成了互联网。 www.Black-Xstar.com 24
  25. 25. 标签:… HTML标签还有很多很多。   每个标签的用法可以参考HTML手册。  大多数情况下,并不需要直接编写 HTML。  掌握基本HTML标签,有助于网页设计。  目前流行的网页设计软件:  Microsoft Frontpage ○ Microsoft Expression Web  Adobe Dreamweaver www.Black-Xstar.com 25
  26. 26. Dreamweaver 介绍 原本由 Macromedia 公司所开发。   2005年4月18日,Macromedia 被 Adobe 以34亿美元价格收购。  第一个版本1.0发布于1997年12月,最新 版本CS4发布于2008年9月23日。  集网页制作和网站管理于一身的所见即所 得网页编辑器,亦有HTML编辑的功能。 www.Black-Xstar.com 26
  27. 27. Dreamweaver CS3 www.Black-Xstar.com 27
  28. 28. Dreamweaver 使用 默认 XHTML 1.0 Transitional 规范   所见即所得! www.Black-Xstar.com 28
  29. 29. Dreamweaver 工具 www.Black-Xstar.com 29
  30. 30. 谢谢! 不足之处,敬请指正。  Email:billzhong@gmail.com   Blog:http://www.black-xstar.com/blog  本演示文稿可在我的博客获得。 www.Black-Xstar.com 30

×