HTML基本标记(精品).ppt

《HTML基本标记(精品).ppt》由会员分享，可在线阅读，更多相关《HTML基本标记(精品).ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Version 3.0基本标记基本标记第第 二二 章章回顾：回顾：了解互联网了解互联网编写简单的编写简单的 HTMLHTML 文档文档在在 HTMLHTML 文档中使用超链接文档中使用超链接使用使用 META 标记标记了解网站的布局结构了解网站的布局结构2 2目标目标使用基本标记使用基本标记在在 HTML 文档中插入图像文档中插入图像3 3基本基本 HTML 元素元素1.标题标记标题标记2.段落级标记段落级标记3.块标记块标记4.字符级标记字符级标记5.列表列表6.水平标尺标记水平标尺标记7.字体标记字体标记 8.IMG 标记标记4 4标题标记标题标记HTML 简介简介 HTML 简介简介 H

2、TML 简介简介 HTML 简介简介 HTML 简介简介 HTML 简介简介 HTML 简介简介 可显示六种大小的标题，即可显示六种大小的标题，即到到，为最大，为最大，为最小为最小 5 5段落级标记：段落级标记：标记标记它可以包含下列内容：它可以包含下列内容：到主页的链接到主页的链接,搜索字符串功能搜索字符串功能,版权版权信息信息,文档的作者、地址、签名等信息文档的作者、地址、签名等信息,欢迎学习欢迎学习 HTML我的第一个我的第一个 HTML 文档文档这将是一种很有趣的体验这将是一种很有趣的体验使用另一个标题使用另一个标题 另一个段落元素另一个段落元素单单击击此此处处访访问问北北京京阿阿博博

3、泰泰克克北北大大 青青 鸟鸟 信信 息息 技技 术术 有有 限限 公公 司司 的的 主主 页页 6 6段落级标记：段落级标记：标记标记学习学习HTMLblockquote元元素素用用于于以以文文本本块块的的形形式式设置内容格式。设置内容格式。汉普蒂汉普蒂邓普蒂坐在墙上邓普蒂坐在墙上汉普蒂汉普蒂邓普蒂摔了一大跤邓普蒂摔了一大跤国王所有的马国王所有的马和所有的人和所有的人也也无无法法再再把把汉汉普普蒂蒂邓邓普普蒂蒂拼拼起来起来请注意，上述内容显示为一个文本块。请注意，上述内容显示为一个文本块。可以使用可以使用BLOCKQUOTE元素显示文档中的引用文本。元素显示文档中的引用文本。BLOCKQUOT

4、E用于较用于较长的引用且显示为缩进式段落。长的引用且显示为缩进式段落。7 7段落级标记：段落级标记：标记标记学习学习HTML汉普蒂汉普蒂邓普蒂坐在墙上邓普蒂坐在墙上 汉普蒂汉普蒂邓普蒂摔了一大跤邓普蒂摔了一大跤国王所有的马国王所有的马 和所有的人和所有的人也无法再把汉普蒂也无法再把汉普蒂邓普蒂拼起来邓普蒂拼起来如果希望文本以预定义的格式显示，可以使用如果希望文本以预定义的格式显示，可以使用PRE元素。此元素用于定义文本的元素。此元素用于定义文本的格式。文本在浏览器中显示时遵循在格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。源文档中定义的格式。8 8块标记块标记、可以定义跨段落的内

5、容块；定义段落内的内容块学习学习HTML第第1部分部分元素用于组织元素元素用于组织元素DIV通常用于块级元素通常用于块级元素第第2部分部分这是第二部分这是第二部分您觉得有意思吗？您觉得有意思吗？第二部分向右对齐。第二部分向右对齐。公共格式公共格式应用于这一部分中的所有元素应用于这一部分中的所有元素 9 9字符级标记字符级标记.粗体文本粗体文本.固定宽度的字体固定宽度的字体./SUP上标文本上标文本./SUB下标文本下标文本.强调文本强调文本.用于显示编程代码用于显示编程代码.用于引用用于引用1010字符级标记（示例）字符级标记（示例）字符级标记示例字符级标记示例字符级标记示例字符级标记示例 圆

6、的面积圆的面积=pi*r2 水的化学符号：水的化学符号：H2O 这是一种很有趣的体验这是一种很有趣的体验 1111列表列表无序列表无序列表有序列表有序列表定义列表定义列表1212无序列表无序列表学习学习 HTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五无序列表是一种无序列表是一种“项目符号列表项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列。其中的项目都带有项目符号前缀。该列表包含在无序列表标记表标记.内。列表中的每个项目都使用列表标记内。列表中的每个项目都使用列表标记进行标记，其中进行标记，其中LI表示表示List Item（列表项）。关闭标记列表项）。关

7、闭标记是可选的。是可选的。1313自定义项目符号自定义项目符号方形项目符号方形项目符号实心圆项目符号实心圆项目符号空心圆项目符号空心圆项目符号 1414有序列表有序列表学习学习 HTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五 有序列表包含在有序列表包含在.标记内。有序列表也显示列表项目。它与无序列表的区标记内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。别在于有序列表项前面的编号是可设置的有序编号。1515自定义编号自定义编号大写罗马数字大写罗马数字 小写罗马数字小写罗马数字 大写字母大写字母 小写字母小写字母 从第从第n个值开始

8、编号个值开始编号 学习学习HTML 星期一星期一简介简介HTML创建列表创建列表星期二星期二创建表创建表插入图像插入图像星期三星期三星期四星期四星期五星期五 1616定义列表定义列表学习学习 HTML 星期日星期日 一周的第一天一周的第一天 HTML 超文本标记语言超文本标记语言 互联网互联网 网络的网络网络的网络 定义列表用于生成术语列表（术语和定义）。定义列表包含在定义列表用于生成术语列表（术语和定义）。定义列表包含在.标记内。标记内。标记用于指定要定义的术语，而标记用于指定要定义的术语，而标记用于对术语的定义。标记用于对术语的定义。1717水平标尺水平标尺欢迎使用欢迎使用HTML我的第一

9、个我的第一个HTML文档文档这将会是一种很有趣的体验这将会是一种很有趣的体验 水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标记，没有结束标记，且不包含任何内容。它只有开始标记，没有结束标记，且不包含任何内容。1818使用使用FONT标记标记欢迎使用欢迎使用HTML我我的第一个的第一个HTML文档文档这这将会将会是一种很有趣的是一种很有趣的体验体验标记用于控制文本在网页上的显示。可以指定标记用于控制文本在网页上的显示。可以指定size（大小）、大小）、color（颜色）颜色）style（样式）等

10、属性。样式）等属性。1919添加颜色添加颜色学习学习 HTML欢欢迎迎使使用用 HTML这这是一种很有趣的体验是一种很有趣的体验可以为页面和页面上的元素添加颜色。可以为页面和页面上的元素添加颜色。COLOR是多个元素（如是多个元素（如FONT和和BODY）都可以都可以使用的属性。使用的属性。2020HTML 文档中的图片文档中的图片GIF（Graphics Interchange Format）图像）图像(.GIF)支持图形渐近透明 GIF 图像支持动画支持无损压缩JPEG（Joint Photographic Experts Group）图像）图像(.JPG)PNG（Portable Net

11、work Graphics）2121插入图像插入图像插入图像插入图像 插入图像插入图像底部对齐底部对齐图图2.15：示例：示例15的输出结果的输出结果顶部对齐顶部对齐居中对齐居中对齐 IMG标记用于将图像插入到标记用于将图像插入到HTML文档中。可以将文档中。可以将IMG标记放置在要显示图像的位置。语法为：标记放置在要显示图像的位置。语法为：其中其中SRC是属性，而值是指定图像文件位置的是属性，而值是指定图像文件位置的URL。IMG标记的标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为：属性可以用于调整图像相对于周围文本的对齐方式。语法为：2222总结：总结：ADDRESS元元素素用用于于显显示示HTMLHTML文文档档的的作作者者、地地址址和签名等信息。和签名等信息。可使用可使用BLOCKQUOTEBLOCKQUOTE元素显示文档中的引用文本。元素显示文档中的引用文本。使用字符级标记，控制字符的格式。使用字符级标记，控制字符的格式。使用块标记使用块标记和和。列表用于从逻辑上组织数据。列表用于从逻辑上组织数据。使用使用FONTFONT标记控制字体相关属性。标记控制字体相关属性。IMGIMG标记用于将图像插入到标记用于将图像插入到HTMLHTML文档中。文档中。2323