html网页标签基础知识课件

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

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

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

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

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

6、对齐 right： 设定文字右对齐 center：设定文字置中对齐 段落标记符第三章 学习 HTML 标签语法：P align=“val段落标记段落标记运行结果学习HTML这会是一种很有趣的体验另一个段落元素 段落标记段落标记运行结果使用对齐属性学习HTML这会是一种很有趣的体验 运行结果右对齐Left：左对齐Center：居中Right：右对齐3_3.html使用对齐属性运行结果右对齐Left：左对齐3_3 换行标记 用于在文档中强制换行，是属于非成对标记，也就是它只有一个单独的标记符，没有结束符。 换行标记 用于在文档中强制换行，是属于非换行标记欢迎使用 HTML这会是一种很有趣的体验 另

7、一个段落元素 运行结果3_2.html换行标记运行结果3_2.html特殊符号句柄 在网页中要显示特殊符号，需要使用句柄并且在句柄的前面必须加上&作开头，其写法如下表： 特殊符号句柄 在网页中要显示特殊符号，需要使用句柄并且颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码见附录颜色颜色名和RGB值黑色Black=”#000000”银色S插入水平

8、线 格式：其中： align 用来控制分隔线的对齐方式，其属性值有： center、left、 right。 SIZE 用于指定分隔线的厚度。 Color 用来指定分隔线的颜色。 Width 用来指定分隔线的宽度。 NOSHADE 指定分隔线是不透明的；插入水平线 格式：HR align =value1水平线欢迎使用HTML我的第一个HTML文档这将会是一种很有趣的体验 水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标记，没有结束标记，且不包含任何内容。 水平线水平标尺标记用于在页面上绘 标记 标记 它能让文字的编排，比如：空格、换行都能按照自己的设定显示，也就

9、是说屏幕上显示的文字排列和在编辑HTML文件的版面一模一样。书写时要记得是成对出现的。 标记 标记 它能让文字的上面“露天电影”网页修改代码以后的页面效果修改后的代码见下页上面“露天电影”网页修改代码以后的页面效果修改后的代码见下页html网页标签基础知识标题标签 HTML可以使用设置章节标题的标注：，n=1，26，n表示主体区显示的正文章节标题的级别。它就像我们平时阅读的小说章节一样，将不同级别的标题设置为不同的字体。HTML提供六级标题：一级：二级：三级：四级：五级：六级：说明：最大、最小此标记后面可加入align属性来控制文字的对齐方式标题标签 HTML可以使用设置章节标举例：使用H标签

10、编写下列网页字号设置技巧第二章 用HTML制作文本页面2.1 控制字的字号颜色2.1.1 字号设置技巧1. 设置页面正文章节的标题HTML中设置字号的标注有多种，我们可以使用设置章节标题的标注： 举例：使用H标签编写下列网页1. 设置页面正文的字体与字号 格式：，字号n=1，27 SIZE用“+n”，“-n”设置成一个相对值。所有的字体大小都是相对于一个缺省大小值。如：SIZE=+2，表示比缺省字体大2个单位，而SIZE=-2表示比缺省字体小2个单位。其中：SIZE的缺省值是3。 设置文本的字体、字体尺寸、字体颜色。1. 设置页面正文的字体与字号 格式：FONT FAC2. 字符颜色的设置格式

11、：其中： RR、GG、BB为两位16进制数，设置颜色值的范围是 1，2，255； 指定颜色的另一种方法是使用HTML中定义的颜色常量，即使用下表预设的常用颜色名称（color=”green”）如下页表所示。2. 字符颜色的设置格式：FONT COLOR=”#常用颜色名称常用颜色名称3. 设置字体风格3. 设置字体风格HTML段落与分行控制居中- 元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如：居中段落HTML段落与分行控制插入图片 标记语法：功能：在当前网页的位置显示一张图片下面对其中的几个属性说明如下： SRC 指定要嵌入的图片的文件

12、名； ALT 在图形下载显示前或使用无法显示图形的浏览器，在该图形位置上就会出现 ALT 后面的文字； ALIGN 指定图形的位置，图形可以出现在文字的左（LEFT）、右（RIGHT）、 上端（TOP）、下端（BOTTOM）、和中间（MIDDLE）； HEIGHT和WIDTH 指定图形的高和宽。 VSPACE 设定文字、图片与图片上下之间的间隔。 HSPACE 设定文字、图片与图片往右之间的间隔。Border 设定图片的边框大小，突出图片显示。IMG属于非成对标记插入图片 标记语法：IMG SRC=“文件名”插入图片以后的网页效果插入图片以后的网页效果要使文本围绕图像环绕，应将语句改为：例：插

13、图要使文本围绕图像环绕，应将语句改为：IMG SRC=“.创建超链接标记用于作超链接的文本或图像等文字或图片设置电子邮件。备注：name是用来创建锚文本的。例如：同一个网页开始内容返回开始内容不同的网页A 目标处 创建超链接标记用于作超链接的文本或图像等书信格式格式：说明：以书信内容的方式显示文字。在距页面的左右两边分别留出一段页边距。书信格式格式：BLOCKQUOTEhtml网页标签基础知识表格(TABLE)标记 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不

14、同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记 元素：定义一个表格。每表格(TABLE)标记表格的基本结构 定义表头 定义表头定义单元格定义单元格表格(TABLE)标记表格的基本结构表格(TABLE)标记-1表格的属性 1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细表格(TABLE)标记-1表格的属性 1表格(TABLE)标记-2表格的属性 2bgco

15、lor属性：指定表格或某一个单元格的背景颜色。background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。Top middle bottom 属性：让表格中的内容都水平垂直居中。属性：合并表格行里面的单元格属性：合并表格列里面的单元格注：数值等于多少就相当于合并多少个单元格表格(TABLE)标记-2表格的属性 2练习用表格做一个职工信息表：要求如图练习用表格做一个职工信息表：要求如图1无顺序列表（UnorderList）格式：第一项第二项第三项第四章 无序列表和顺序列表例1：在记事本中输入下列代

16、码：目前世界上最主要的三大宗教是：基督教伊斯兰教佛教在浏览器中的显示结果为：1无顺序列表（UnorderList）第四章 无序列表2顺序列表（OrderList）格式：第一项第二项第三项在浏览器中的显示结果为：例2：输入如下代码：吃罐装橘子：去超级市场买一些橘子罐头打开罐头吃罐头里的橘子2顺序列表（OrderList）在浏览器中的显示结果为：例可加上TYPE= # 来定义每一项前面的符号或序号。 对于无序列表，定制符号的标记为： 其中“#” 代表： DISC（实心圆） CIRCLE（空心圆） SQUARE（方块） 缺省时为实心圆。 对于顺序列表，定制符号的标记为： TYPE属性用来选择以英文字母或是罗马数字作为项目的编号； START=n 指定从哪一个字母或数字开始；其中：A表示按A、B、C、D、编号；a表示按a、b、c、d、编号；I表示按I、编号；1表示按数字编号，这是缺省属性设置。3. 定制列表元素可加上TYPE= # 来定义每一项前面的符号或序号。3. 定举例：制作如下页面。文件名为test.htm。对应的HTML文档见下页举例：制作如下页面。文件名为test.htm。对应的HTMLhtml网页标签基础知识若将上例页面修改为如下页面