第二章
HTML的基本标签
本章案例
文本的排版布局、美化修饰
制作图文混排、有超级链接的网页
网页的其他特效
案例演示
教员演示本章的三个案例
本章目标
掌握HTML的基本架构
掌握文本在网页中的排版格式
会使用超级链接实现页面的跳转
会使用图像标签制作图文并茂的网页
认识HTML
HTML是超文本标记语言。
英文全称是Hypertext Markup Language 。
HTML是用来设计网页的。就这么简单！
演示：如何用记事本创建网页
小新是本书的主人公，他和学员一起学习HTML。小新在学习过程中，会总结一些经验，也会遇到一些问题。
教员课堂现场演示源代码中的文档编写，讲解保存文件的注意事项，并使用IE浏览器演示效果。
标记语言
计算机标记语言是指在普通文本中加入一些具有特定含义的标记，以对文本的内容进行标识和说明的一种文件表示方法。
常用的计算机标记语言：SGML、HTML、XML、XHTML；
HTML
CERN的Tim Berners Lee于1989年在SGML的基础上提出了HTML。
HTML是超文本标记语言。
英文全称是Hypertext Markup Language 。
HTML是用来设计网页的。就这么简单！
缺点：
标准不统一;
没有严格的语法规则;
XML
XML(eXtensible Markup Language）即可扩展标记语言由W3C组织发布，目的是定义一种互联网上交换数据的标准。
HTML着重在如何描述将文件数据显示在浏览器中；
XML着重在如何将文件数据以结构化的方式来表示；
XHTML
XHTML：以为范本，再以XML的语法规范重新对HTML作一规范的制定，来产生新的标记语言XHTML；
W3C的最终目的是要以XHTML来取代HTML；
最简XHTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
HTML的基本架构
<html>
<head>
<title>新手上路</title>
</head>
<body>
<p align="left">我是小新！这是我制作
的第一个网页！</p>
</body>
</html>
<head区>
<html区>
<body区>
元素(element)、标签（tag）
和属性（attribute）
<p align="left">我是小新！我制作的第一个网页</p>
首标签
内容
尾标签
元素
元素用于结构化HTML文档。
告知浏览器如何呈现网页。
一般说来，标签成对出现。
首、尾标签的区别：尾标签多一条斜杠“/” 。
元素可以拥有属性，属性用来丰富元素的显示效果。
属性应写在元素的首标签上。
属性
标签及XHTML代码规范
标签及其属性格式
<标签 属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签>
<标签 属性1=“属性值1” 属性2=“属性值2” … />
★1. “<“、“>”与标签名之间不能有空格或其它字符。
2. 有的标签没有属性。
XHTML代码规范
（1）所有标签和属性的名字都必须使用小写；
（2）所有标签都有一个相应的结束标签；
（3）属性值必须加双引号；
（4）显式定义属性值；
（5）标签合理嵌套；
文本相关标签
文本相关标签
标题
段落、文字颜色
文字缩进
换行
演示：文本相关标签
本章的第一个案例
标题标签
……
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
……
可以是1到6之间的任意数字
标题标签会将字体变成粗体字，并且会自成一段。
查看源代码
使用了<h1>
使用了<h6>
教员要提醒学员：标题标签会将字体变成粗体字，并且会自成一段。
align属性
align属性在其他标签（如<p>、<img>、<div>、<td>等等）也会用到。
align属性
标题使用了align属性
HTML代码 网页呈现效果
<h2 align="left">文字靠左</h2> 文字靠左
<h2 align="center">文字置中</h2> 文字置中
<h2 align="right">文字靠右</h2> 文字靠右
为什么要使用段落标签和换行标签
小新写的代码
我分段换行了哟
文字缩进
我也换行了
天啊！不是在HTML文档里排版分段换行了吗，结果怎么都走了样？
段落标签
在HTML文档里，文章分段并不像WORD一样，只要拼命按Enter键或空格键，便能完成分段或分行。
嵌入文本中的换行符将被浏览器忽略；
多个空格被一个空格替换；
在HTML文档里，文章段落的开始由<p>来标记，段落的结束由</p>来标记。
演示：在中加入<p>标签
终于实现分段了
此处换行还没实现？
换行标签
当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。
注意到区别了吗？
段落标签
换行标签
HTML代码 网页呈现效果
这是一个断行的范例<br>看出来了吗？ 这是一个断行的范例
看出来了吗？
这是一个分段的范例<p>他会比
断行还多空出一行</p> 这是一个分段的范例
他会比断行还多空出一行
如何使用段落标签和换行标签
小新修改后的代码
段落标签
换行标签
段落尾标签
这儿分段了
这儿换行了
字体能不能加上颜色啊？
字体标签
字体标签
字体名称
字号大小
字的颜色
字体尾标签
字号大小：1～7 （1号最小，7号最大）。
color属性值可以使用颜色名称 ，如color="red"
也可以使用十六进制，如color="#FF0000"
经常使用“宋体 ”或“黑体”，默认就是“宋体”。
差点忘了，缩进还没实现呢？
字体加了颜色
特殊符号
一个字符实体分成三部分：&符号，实体名字和分号。
字符实体是区别大小写的。
在HTML文档里，空格是个特殊符号，必须使用字符实体。
特殊符号 字符实体 示例代码 网页呈现效果
空格 前边有两个空格 前边有两个空格
" " "淘宝网" "淘宝网"
© © 版权©2009 版权©2009
其他文本标记
原样显示文本标签
格式：<pre>文档内容</pre>
把文档内容按照在编辑器中的格式显示出来；
主要用于显示程序；
pre元素几乎可以嵌套任何标签，p除外；
其他文本标记
字体样式与大小
<em>文本</em>：强调文本，斜体显示；
<strong>文本</strong>：进一步强调，粗体显示；
<sup>文本</sup>：显示上标；
<sub>文本</sub>：显示下标：
课堂练习
<html>
……
如何加入“消费者保障服务”？
您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请加入。在申请加入之前请先确认自己是否符合加入消费者保障服务的条件，如果符合申请要求，您可以点击“申请加入”按钮提交申请。
……
</html>
查看源代码
<h2 align="center">
</h2>
<p><font size="2" color="#0000ff">
</font> </p>
标题、居中
段落，字号1，颜色#0000ff
缩进
列表、链接、图像
列表、链接、图像
无序列表，模样和Word中的项目符号差不多
图像显示
超级链接如何创建的
案例演示：列表、链接、图像
无序列表和有序列表
无序列表
有序列表
以条列方式呈现资料；
各条列间并无顺序关系；
前面均有一符号以示区隔 。
各条列之间是有顺序的，从1、2、3…一直延伸下去。
无序列表标签
无序列标签
无序列尾标签
列表项标签
<UL>
<UL type="circle" >
5
5
5
5
5
○
○
○
○
○
空心圆
实心圆
HTML代码 网页呈现效果
<LI>深秋护肤10大秘决</LI>
<LI>国内药妆销售排行</LI>
<LI>惊人相似山寨淘宝</LI>
<LI>淘宝5年购物心得</LI>
<LI>明星情侣大晒甜蜜</LI>
</UL> 深秋护肤10大秘决
国内药妆销售排行
惊人相似山寨淘宝
淘宝5年购物心得
明星情侣大晒甜蜜
5
5
5
5
5
5
5
5
5
5
有序列表标签
有序列标签
有序列尾标签
列表项标签
<OL>
<OL type="A" >
大写字母
数字
HTML代码 网页呈现效果
<LI>深秋护肤10大秘决</LI>
<LI>国内药妆销售排行</LI>
<LI>惊人相似山寨淘宝</LI>
<LI>淘宝5年购物心得</LI>
<LI>明星情侣大晒甜蜜</LI>
</OL> 深秋护肤10大秘决
国内药妆销售排行
惊人相似山寨淘宝
淘宝5年购物心得
明星情侣大晒甜蜜
图像标签
图像标签，没有尾标签哟！
图像文件
替换文本
网页中常用的图像格式：jpg或jpeg、gif、png。
alt属性作用有两个。
为页面上的图像都加上替换文本属性是个好习惯 。
图像显示
图像标签
迄今为止，align属性在哪些标签使用过？
align="left"
align="bottom"
align="middle"
align="top"
看清位置关系了吗？
align="right"
图像宽度
图像高度
查看源代码
链接标签
如何创建超级链接呢？
链接标签
<a href=“链接的目标文档” target=“打开窗口方式”>超链接显示文本</a>
href:链接的目标文档
target：定义浏览器打开目标资源的方式，同一窗口或新窗口（_blank）
超链接
分类：
1. 链接到本网站的其他网页
2. 同一个网页中的链接
3. 链接到其他站点
4.电子邮件链接
5.为图像创建超级链接
1. 链接到本网站的其他网页
链接到同一目录中的网页文件
href的值为：文件名，如
链接到下一级目录中的网页文件
href的值为：子目录名/文件名，如link1/
链接到上一级目录中的网页文件
href的值为：../文件名，如../
链接到同级目录中网页文件
href的值为：../子目录名/文件名，如../link2/
2. 链接到其他站点
使用http协议，可以链接到其他网站的网页；
格式：
<a href=“URL地址”>超链接显示文本</a>
2. 链接到其他站点
超级链接的对象是一般是其他的一个网页，单击此链接，浏览器就会显示目标网页。
链接标签
链接尾标签
href属性指示链接指向目标网页的地址
3.电子邮件的链接
属性href的值为：
mailto：lyxzp2008@
电子邮件链接
超级链接除了链接其他网页外，有时候还会链接电子邮件。
电子邮件链接
电子邮件链接
和普通链接有什么区别？
4. 用图像作为超链接
格式：
<a href=“链接的目标文档”>
<img src=“图片文件名” />
</a>
图像添加超链接后，会多了个边框，可以为图像设置：border=“0”；
为图像创建超级链接
border="0"
给图像添加超级链接
图像加了超级链接后，有了蓝色外边框，如何去掉呢？
图像添加链接后，
一定要设置border="0"
查看源代码
5. 同一个网页中的链接
需要定义两个标记：
超链接标记（源点）
<a href=“#锚点名称”>超链接显示文本</a>
书签标记（目标点）
<标签名称 id=“锚点名称”>…</标签名称>
若要链接到其他页面的某处
<a href=“链接的目标文档#锚点名称”>超链接显示文本</a>
<元素名称 id=“锚点名称”>…</元素名称>
网页特效
网页特效
文字“走马灯”效果
图像“走马灯”效果
水平线
案例演示：网页特效
水平线
<hr align=“left|center|right” size=“像素” width=“像素|百分比” color=“英文单词|#FFFFFF” />
作用：
结束当前行，并在屏幕上绘制一条水平线。
水平线标签
水平线标签
水平线标签
颜色
宽度
对齐方式
全屏如何实现的呢？
默认居中
水平线居左如何实现的呢？
查看源代码
滚动标签
滚动标签
滚动尾标签
滚动方向
direction属性，值可以是left、right、up、down，默认为left。
behavior 属性 ，值可以是scroll（连续滚动）、slide（滑动一次）、alternate（来回滚动）。
scrollamount 属性：值是正整数，默认为6。
scrolldelay 属性，值是正整数，默认为0，单位是毫秒。
滚动方式
滚动速度
停顿时间
查看源代码
课堂练习
网页标题
字号2
查看源代码
模拟制作“百度”网页
注意HTML文档的整体结构
使用合适的标签
总结
文本相关的标签哪些？
align属性可以哪几个标签中使用？
链接有哪几种？
常用的特殊符号有哪些？分别用什么字符实体表示？
教员演示本章的三个案例
小新是本书的主人公，他和学员一起学习HTML。小新在学习过程中，会总结一些经验，也会遇到一些问题。
教员课堂现场演示源代码中的文档编写，讲解保存文件的注意事项，并使用IE浏览器演示效果。
本章的第一个案例
教员要提醒学员：标题标签会将字体变成粗体字，并且会自成一段。
