html网页标签基础知识课件.pptx

1、本次课题：()第一章第一章 认识认识 HTML第三章第三章 学习学习 HTML 标签标签第四章第四章 有序和无序列表有序和无序列表第二章第二章 HTML 的页面结构的页面结构第一章 认识HTML 什么是什么是HTML HTML是“超文本标记语言”（Hypertext Markup Language）的缩写。是一种专门用来设计网页的计算机语言，用它可以制作万维网页面。用HTML编写的超文本文件称为HTML文件，也称Web文件。HTML 简介 HTML 是一种标记语言是一种标记语言控制页面和内容的外观控制页面和内容的外观发布联机文档发布联机文档使用使用 HTML 文档中插入的链接检索联机信息文档中

2、插入的链接检索联机信息创建联机表单，收集用户的信息、执行事务等等创建联机表单，收集用户的信息、执行事务等等插入动画插入动画开发帮助文件开发帮助文件 HTML的格式 用HTML生成的文档HTML文档，是ASCII码格式文件，你可以使用任何普通的文字编辑器来编辑它，普通的文字编辑器只能用来编辑HTML文档，但要看到网页的实际效果还要在浏览器中打开HTML文档。HTML网页文件都以.html为扩展名。第二章 HTML页面基本结构 标题设定区（第二层）标题设定区（第二层）HTML网页文本区（第三层）网页文本区（第三层）最外层最外层 标记 一个完整的HTML文件是以标记开始的，用来告知浏览器这个文件是使

3、用HTML格式编写的；最后使用标记告知浏览器此处是HTML文件的结束点。标记 在此标签包围中的文字是网页的开场白，即页面标题。一般来说只有很少几个标记可以放在里（如）。你千万不要把文章的正文放在里面，否则，将无法看到你的正文了。用法如下：欢迎光临快乐天地欢迎光临快乐天地 标记 用于包含那些作为页面标题显示的文字。这些标签始终用于包含那些作为页面标题显示的文字。这些标签始终是包含在是包含在标签之内，标签之内，标记的长度最好不要太长，以不超过标记的长度最好不要太长，以不超过20个字符为原则。其个字符为原则。其中内容将出现在浏览器的标题栏中。中内容将出现在浏览器的标题栏中。标记 标记能提供文档的字符

4、编码、描述、关键字、标记能提供文档的字符编码、描述、关键字、作者、自动刷新等多种信息作者、自动刷新等多种信息。v 指定文档的描 述，阐明整个网站的宗旨及吸引人的地方v 标记搜索引擎在 搜索页面时取出的关键词v 标记文档的作者v定义页面n秒后自动刷新页面v 定义页面打开3秒钟后自动跳转到http:/ 练习网页自动刷新与练习网页自动刷新与跳转跳转。标记 你所制作的网页的正文内容连同链接和图片等等都要放在此标记里面。把它同和标记结合起来就构成了网页结构的主框架。可以设定一些属性，如背景色，背景图形等。语法如下：BGCOLOR：指定：指定HTML的背景色。的背景色。TEXT：指定：指定HTML文件中文

5、字色彩属性。文件中文字色彩属性。BACKGROUND：指定：指定HTML背景图形背景图形。在记事本下撰写在记事本下撰写HTML的语法就可以了。如图：的语法就可以了。如图：如何编写如何编写HTML文件文件 在记事本窗口下单击在记事本窗口下单击“文件文件保存保存”，在另存为对话框中，在另存为对话框中的文件名栏中输入：文件名的文件名栏中输入：文件名.html.html。一个简单的一个简单的HTML例子例子和和一个用HTML编写的网页添加背景颜色以后的网页效果Html小练习 练习1：创建你的第一个网页，内容自定。第三章 学习 HTML 标签语法：功能：设定段落说明：说明：1.每一个段落都括在每一个段落

6、都括在标签之内。结尾标记标签之内。结尾标记可以省略。可以省略。2Align属性用来设定文字的对齐方式，其属性用来设定文字的对齐方式，其value属性值可设为：属性值可设为：left：设定文字左对齐设定文字左对齐 right：设定文字右对齐设定文字右对齐 center：设定文字置中对齐：设定文字置中对齐 段落标记符段落标记符段落标记 段落标记运行结果运行结果学习学习HTML这会是一种很有趣的体验这会是一种很有趣的体验另一个段落元素另一个段落元素 学习学习HTML这会是一种很有趣的体验这会是一种很有趣的体验 运行结果运行结果右对齐右对齐Left：左对齐左对齐Center：居中居中Right：右对齐

7、右对齐 换行标记换行标记 用于在文档中强制换行，是属于非成对标记，也就是它只有一个单独的标记符，没有结束符。换行标记欢迎使用欢迎使用 HTML这会是一种很有趣的这会是一种很有趣的体验体验 另一个段落元素另一个段落元素 运行结果运行结果特殊符号句柄特殊符号句柄 在网页中要显示特殊符号，需要使用句柄并且在句柄的前面必须加上&作开头，其写法如下表：句柄句柄 显示结果显示结果 句柄句柄 显示结果显示结果 空一格÷<©"“®×&&颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Re

8、d=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码见附录见附录插入水平线插入水平线 格式：格式：其中：其中：v align 用来控制分隔线的对齐方式，其属性值有：用来控制分隔线的对齐方式，其属性值有：center、left、right。v SIZE 用于指定分隔线的厚度。用于指定分隔线的厚度。v Color 用来指定分隔线的颜色。用来指定分隔线的颜色。v Width 用来指定分隔线的宽度。用来指定分隔线的宽度。v NOSHADE 指定分隔线是

9、不透明的；指定分隔线是不透明的；水平线欢迎使用欢迎使用HTML我的第一个我的第一个HTML文档文档这将会是一种很有趣的体验这将会是一种很有趣的体验 水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标记，没有结束标记，且不包含任何内容。它只有开始标记，没有结束标记，且不包含任何内容。标记 标记标记 它能让文字的编排，比如：空格、换行都能按照自己的设定显示，也就是说屏幕上显示的文字排列和在编辑HTML文件的版面一模一样。书写时要记得是成对出现的。上面“露天电影”网页修改代码以后的页面效果修改后的代码见

10、下页标题标签标题标签 HTML可以使用设置章节标题的标注：，n=1，26，n表示主体区显示的正文章节标题的级别。它就像我们平时阅读的小说章节一样，将不同级别的标题设置为不同的字体。HTML提供六级标题：一级：二级：三级：四级：五级：六级：说明：最大、最小此标记后面可加入align属性来控制文字的对齐方式举例：使用举例：使用H H标签编写下列网页标签编写下列网页字号设置技巧第二章 用HTML制作文本页面2.1 控制字的字号颜色2.1.1 字号设置技巧1.设置页面正文章节的标题HTML中设置字号的标注有多种，我们可以使用设置章节标题的标注：1.1.设置页面正文的字体与字号设置页面正文的字体与字号

11、格式：格式：，字号，字号n=1，27 SIZE用“+n”，“-n”设置成一个相对值。所有的字体大小都是相对于一个缺省大小值。如：SIZE=+2，表示比缺省字体大2个单位，而SIZE=-2表示比缺省字体小2个单位。其中：其中：SIZE的缺省值是的缺省值是3。设置文本的字体、字体尺寸、字体颜色。设置文本的字体、字体尺寸、字体颜色。2.字符颜色的设置字符颜色的设置格式：格式：其中：RR、GG、BB为两位16进制数，设置颜色值的范围是 1，2，255；指定颜色的另一种方法是使用HTML中定义的颜色常量，即使用下表预设的常用颜色名称（color=”green”）如下页表所示。代表颜色代表颜色 颜色名称颜

12、色名称 代表颜色代表颜色 颜色名称颜色名称 代表颜色代表颜色 颜色名称颜色名称 水蓝色 Aqua 黑色 Black 蓝色 Blue 紫红色 Fuchsia 灰色 Gray 绿色 Green 石灰色 Lim 栗色 Maroon 藏青色 Navy 橄榄色 Olive 紫色 Purple 红色 Red 银色 Sliver 茶色 Teal 白色 white 黄色 Yellow 粉红色 Pink 常用颜色名称常用颜色名称3.设置字体风格设置字体风格HTML段落与分行控制 居中-元素 元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似 例如：居中段落插入图片插

13、入图片 标记标记语法：语法：功能：在当前网页的位置显示一张图片功能：在当前网页的位置显示一张图片下面对其中的几个属性说明如下：下面对其中的几个属性说明如下：M SRC 指定要嵌入的图片的文件名；指定要嵌入的图片的文件名；M ALT 在图形下载显示前或使用无法显示图形的浏览器，在该图形位置上就会出现在图形下载显示前或使用无法显示图形的浏览器，在该图形位置上就会出现 ALT 后面的文字；后面的文字；M ALIGN 指定图形的位置，图形可以出现在文字的左（指定图形的位置，图形可以出现在文字的左（LEFT）、右（）、右（RIGHT）、）、上端（上端（TOP）、下端（）、下端（BOTTOM）、和中间（）

14、、和中间（MIDDLE）；）；M HEIGHT和和WIDTH 指定图形的高和宽。指定图形的高和宽。M VSPACE 设定文字、图片与图片上下之间的间隔。设定文字、图片与图片上下之间的间隔。M HSPACE 设定文字、图片与图片往右之间的间隔。设定文字、图片与图片往右之间的间隔。MBorder 设定图片的边框大小，突出图片显示。设定图片的边框大小，突出图片显示。IMG属于非成对标记插入图片以后的网页效果插入图片以后的网页效果要使文本围绕图像环绕，应将语句改为：要使文本围绕图像环绕，应将语句改为：例：插图例：插图创建超链接标记 用于作超链接的文本或图像等 文字或图片设置电子邮件。备注：name是用

15、来创建锚文本的。例如：同一个网页 开始内容 返回开始内容 不同的网页 A 目标处 书信格式书信格式格式：格式：说明：说明：以书信内容的方式显示文字。在距页面的左右两边分别留出一段页边距。表格(TABLE)标记 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记 表格的基本结构 定义表头 定义表头定义单元格定义

16、单元格 表格(TABLE)标记-1 表格的属性 1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细表格(TABLE)标记-2 表格的属性 2 bgcolor属性：指定表格或某一个单元格的背景颜色。background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。Top middle bottom 属性：让表格中的内容都水平垂直居中。属性：合并表格行里面的单元格 属性：合并表

17、格列里面的单元格 注：数值等于多少就相当于合并多少个单元格练习 用表格做一个职工信息表：要求如图1无顺序列表（无顺序列表（UnorderList）格式：格式：第一项第一项第二项第二项第三项第三项第四章 无序列表和顺序列表例1：在记事本中输入下列代码：目前世界上最主要的三大宗教是：基督教伊斯兰教佛教在浏览器中的显示结果为：在浏览器中的显示结果为：2顺序列表（顺序列表（OrderList）格式：格式：第一项第一项第二项第二项第三项第三项在浏览器中的显示结果为：在浏览器中的显示结果为：例2：输入如下代码：吃罐装橘子：去超级市场买一些橘子罐头打开罐头吃罐头里的橘子可加上可加上TYPE=#来定义每一项前

18、面的符号或序号。来定义每一项前面的符号或序号。v 对于无序列表，定制符号的标记为：对于无序列表，定制符号的标记为：其中其中“#”代表：代表：DISC（实心圆）（实心圆）CIRCLE（空心圆）（空心圆）SQUARE（方块）（方块）缺省时为实心圆。缺省时为实心圆。v 对于顺序列表，定制符号的标记为：对于顺序列表，定制符号的标记为：TYPE属性用来选择以英文字母或是罗马数字作为项目的编号；属性用来选择以英文字母或是罗马数字作为项目的编号；START=n 指定从哪一个字母或数字开始；指定从哪一个字母或数字开始；其中：其中：A表示按表示按A、B、C、D、编号；编号；a表示按表示按a、b、c、d、编号；编

19、号；I表示按表示按I、编号；编号；1表示按数字编号，这是缺省属性设置。表示按数字编号，这是缺省属性设置。3.定制列表元素定制列表元素举例：制作如下页面。文件名为test.htm。对应的对应的HTML文档见下页文档见下页 网页制作丛书网页制作丛书 Internet 实务实务-无序列表无序列表 快快乐乐畅游快快乐乐畅游 Internet Internet 信息查询技巧信息查询技巧 Web 网页制作大放送网页制作大放送-有序列表有序列表 WWW 文件设计文件设计 Web 网页设计入门网页设计入门 若将上例页面修改为如下页面，并存为test1.htm，应如何更改代码。总结 通过介绍了HTML语言的基础知识，并学习使用HTML设计和制作图文并茂的网页。讲解了HTML语言的各种元素标签，包括文字、页面、表格、超链接以及插入图像等技术，通过几个实例进一步了解了HTML在网页中的应用。大练兵 综合今天所讲的所有标签，做一个个人的主页，要求图文并茂、所学的标签都运用到自己的个人主页上。（）