HTML

Hyper Text Markup Language

www.Black-Xstar.com 1

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


HTML是什么
超文本标记语言

 Hyper Text Markup Language

一种专门为网页设计的标记语言

 目前使用最广泛的标记语言之一


HTML的历史
1982 年，Tim Berners-Lee 为使世界各

地的物理学家能够方便的进行合作研究，
建立了使用于其系统的 HTML。
 Tim Berners-Lee 设计的 HTML 以纯文本
格式为基础，可以使用任何文字编辑器处
理，最初仅有少量标记（TAG）且易于掌
握运用。


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…


HTML的现状
推荐使用XHTML来代替HTML

 XHTML比HTML更加标准和规范

到目前为止，XHTML常用以下几个版本：

 XHTML 1.0 Strict（严格版）
 XHTML 1.0 Transitional（过渡版）
 XHTML 1.0 Frameset（框架版）
 XHTML 1.1


HTML的未来
XHTML将代替HTML被广泛使用

 国际标准而不是企业标准
 Firefox 和 Internet Explorer
XHTML 2.0 / HTML 5.0 正在起草和完善

 下一代标记语言的竞争……


HTML的功能
控制页面和内容的外观

 发布和检索联机文档
 创建联机表单
 插入诸如音频剪辑和视频剪辑等对象


简单的HTML页面
<html>

 <head>
○ <title>hello world!</title>
 </head>
 <body>
○ <p>你好，世界！</p>
 </body>
</html>



基本的HTML结构

<head>…</head>
这部分包括标题和其
<html>…</html> 他说明信息。
标记 HTML 文档的开
<body>…</body>
始和结束
正文部分，包含文本、
图像和链接。


常用的HTML标签
<title> <b>
 
<meta> <i>
 
<h1>… <u>
 
<p> <font>
 
<br> <img>
 
<hr> <a>
 
……
<ul><li>
 
<ol><li>



标签：<title>
title标签是用来标记网页标题的。

 例如：
 <title>hello world!</title>
则显示出来的标题为：

 hello world!


标签：<meta>
meta是一个特殊的 HTML 标签，提供有

关网页的各种信息，如作者姓名、公司名
称和联系信息等。
 meta标签的内容是不会在页面显示出来
的，一般是给浏览器或搜索引擎识别的。


举例：<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;>
 告诉搜索引擎，这个网页不要收录。
• 注意：百度不遵守国际标准，此标签无效。


标签：<h1>…
H1 到 H6 标签用于指定不同级别的标题

 <h1>第一级标题</h1>
 <h2>第二级标题</h2>
○ <h3>第三级标题</h3>
 <h4>第四级标题</h4>
- <h5>第五级标题</h5>
- <h6>第六级标题</h6>


标签：<p>
<p>…</p> 标签用于标记段落

 <p>第一段</p>
 <p>第二段</p>
 <p align=quot;leftquot;>左对齐显示</p>
 <p align=quot;centerquot;>居中显示</p>
 <p align=quot;rightquot;>右对齐显示</p>


标签：<br>
<br>是强制换行标签，无论什么情况，

见到此标签就立即换行。
和别的标签不同，不需要</br>来结束！


第一行<br>第二行



标签：<hr>
<hr> 标签用于在页面上绘制水平线

和<br>标签一样，也不需要</hr>来结

束。

第一段<hr>第二段



标签：<ul><li>
这两个标签是列表标签，连在一起使用的。

<ul>

<li>星期日</li>

<li>星期一</li>

<li>星期二</li>

<li>星期三</li>

<li>星期四</li>

<li>星期五</li>

<li>星期六</li>

</ul>



标签：<ol><li>
同样是列表标签。不过和<ul>不同，<ol>是有序列表。

在有序列表中，列表项以自动生成的顺序显示。

<ol>

<li>星期日</li>

<li>星期一</li>

<li>星期二</li>

<li>星期三</li>

<li>星期四</li>

<li>星期五</li>

<li>星期六</li>

</ol>



标签：<b><i><u>
<b><i><u>这三组标签用于对文本应用各

种格式：加粗、倾斜和下划线。
 <b>加粗</b>
 <i>倾斜</i>
 <u>下划线</u>


标签：<font>
<font>可用于控制网页上文本的显示。

 例如用于指定文字的大小，颜色和字体等。
 <font size=quot;8quot;>设置大小</font>
 <font color=quot;#00FF00quot;>设置颜色</font>
 <font face=quot;华文彩云quot;>设置字体</font>


标签：<img>
这个标签是用来给网页插入图片。

 图片必须存在于互联网服务器上。
 <img src=quot;http://www.google.com/intl/zh-
CN_ALL/images/logo.gifquot; />


标签：<a>
超链接标签<a>是超文本的核心。

 通过超链接，无数的网页构成了网站。无
数的网站构成了互联网。


标签：…
HTML标签还有很多很多。

 每个标签的用法可以参考HTML手册。
 大多数情况下，并不需要直接编写
HTML。
 掌握基本HTML标签，有助于网页设计。
 目前流行的网页设计软件：
 Microsoft Frontpage
○ Microsoft Expression Web
 Adobe Dreamweaver


Dreamweaver 介绍
原本由 Macromedia 公司所开发。

 2005年4月18日，Macromedia 被 Adobe
以34亿美元价格收购。
 第一个版本1.0发布于1997年12月，最新
版本CS4发布于2008年9月23日。
 集网页制作和网站管理于一身的所见即所
得网页编辑器，亦有HTML编辑的功能。


Dreamweaver CS3


Dreamweaver 使用
默认 XHTML 1.0 Transitional 规范

 所见即所得！


Dreamweaver 工具


谢谢！
不足之处，敬请指正。


Email：billzhong@gmail.com

 Blog：http://www.black-xstar.com/blog
 本演示文稿可在我的博客获得。


HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (8)

HTML