html网页标签基础知识.ppt
HTML基础(一),思百授 郭文静,本次课题：(HTML),第一章 认识HTML,什么是HTML,HTML是“超文本标记语言”（Hypertext Markup Language）的缩写。是一种专门用来设计网页的计算机语言，用它可以制作万维网页面。,用HTML编写的超文本文件称为HTML文件，也称Web文件。,HTML 简介,HTML 是一种标记语言,使用HTML标记和元素可以：,控制页面和内容的外观发布联机文档使用 HTML 文档中插入的链接检索联机信息创建联机表单，收集用户的信息、执行事务等等插入动画开发帮助文件,HTML的格式,用HTML生成的文档HTML文档，是ASCII码格式文件，你可以使用任何普通的文字编辑器来编辑它，普通的文字编辑器只能用来编辑HTML文档，但要看到网页的实际效果还要在浏览器中打开HTML文档。HTML网页文件都以.html为扩展名。,第二章 HTML页面基本结构,标题设定区（第二层）,HTML网页文本区（第三层）,最外层,标记,一个完整的HTML文件是以标记开始的，用来告知浏览器这个文件是使用HTML格式编写的；最后使用标记告知浏览器此处是HTML文件的结束点。,标记,在此标签包围中的文字是网页的开场白，即页面标题。一般来说只有很少几个标记可以放在里（如）。你千万不要把文章的正文放在里面，否则，将无法看到你的正文了。用法如下：,欢迎光临快乐天地,标记,用于包含那些作为页面标题显示的文字。这些标签始终是包含在标签之内，标记的长度最好不要太长，以不超过20个字符为原则。其中内容将出现在浏览器的标题栏中。,标记,标记能提供文档的字符编码、描述、关键字、作者、自动刷新等多种信息。,指定文档的描 述，阐明整个网站的宗旨及吸引人的地方 标记搜索引擎在 搜索页面时取出的关键词 标记文档的作者定义页面n秒后自动刷新页面 定义页面打开3秒钟后自动跳转到http:/练习网页自动刷新与跳转。,标记,你所制作的网页的正文内容连同链接和图片等等都要放在此标记里面。把它同和标记结合起来就构成了网页结构的主框架。可以设定一些属性，如背景色，背景图形等。,语法如下：,BGCOLOR：指定HTML的背景色。TEXT：指定HTML文件中文字色彩属性。BACKGROUND：指定HTML背景图形。,在记事本下撰写HTML的语法就可以了。如图：,如何编写HTML文件,在记事本窗口下单击“文件保存”，在另存为对话框中的文件名栏中输入：文件名.html。,一个简单的HTML例子,和,和,一个用HTML编写的网页,添加背景颜色以后的网页效果,Html小练习,练习1：创建你的第一个网页，内容自定。,第三章 学习 HTML 标签,语法：,功能：设定段落,说明：1.每一个段落都括在标签之内。结尾标记可以省略。2Align属性用来设定文字的对齐方式，其value属性值可设为：,left：设定文字左对齐 right：设定文字右对齐 center：设定文字置中对齐,段落标记符,段落标记,段落标记,学习HTML这会是一种很有趣的体验另一个段落元素,使用对齐属性,学习HTML这会是一种很有趣的体验,右对齐,3_3.html,换行标记,用于在文档中强制换行，是属于非成对标记，也就是它只有一个单独的标记符，没有结束符。,换行标记,欢迎使用 HTML这会是一种很有趣的体验 另一个段落元素,3_2.html,特殊符号句柄,在网页中要显示特殊符号，需要使用句柄并且在句柄的前面必须加上&作开头，其写法如下表：,常见颜色的代码,见附录,插入水平线,格式：,其中：align 用来控制分隔线的对齐方式，其属性值有：center、left、right。SIZE 用于指定分隔线的厚度。Color 用来指定分隔线的颜色。Width 用来指定分隔线的宽度。NOSHADE 指定分隔线是不透明的；,水平线,欢迎使用HTML我的第一个HTML文档这将会是一种很有趣的体验,水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标记，没有结束标记，且不包含任何内容。,标记,标记,它能让文字的编排，比如：空格、换行都能按照自己的设定显示，也就是说屏幕上显示的文字排列和在编辑HTML文件的版面一模一样。书写时要记得是成对出现的。,上面“露天电影”网页修改代码以后的页面效果,修改后的代码见下页,标题标签,HTML可以使用设置章节标题的标注：，n=1，26，n表示主体区显示的正文章节标题的级别。它就像我们平时阅读的小说章节一样，将不同级别的标题设置为不同的字体。HTML提供六级标题：,一级：二级：三级：四级：五级：六级：,说明：最大、最小此标记后面可加入align属性来控制文字的对齐方式,举例：使用H标签编写下列网页,字号设置技巧第二章 用HTML制作文本页面2.1 控制字的字号颜色2.1.1 字号设置技巧1.设置页面正文章节的标题HTML中设置字号的标注有多种，我们可以使用设置章节标题的标注：,1.设置页面正文的字体与字号,格式：，字号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”）如下页表所示。,常用颜色名称,3.设置字体风格,HTML段落与分行控制,居中-元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如：居中段落,插入图片 标记,语法：功能：在当前网页的位置显示一张图片,下面对其中的几个属性说明如下：SRC 指定要嵌入的图片的文件名；ALT 在图形下载显示前或使用无法显示图形的浏览器，在该图形位置上就会出现 ALT 后面的文字；ALIGN 指定图形的位置，图形可以出现在文字的左（LEFT）、右（RIGHT）、上端（TOP）、下端（BOTTOM）、和中间（MIDDLE）；HEIGHT和WIDTH 指定图形的高和宽。VSPACE 设定文字、图片与图片上下之间的间隔。HSPACE 设定文字、图片与图片往右之间的间隔。Border 设定图片的边框大小，突出图片显示。,IMG属于非成对标记,插入图片以后的网页效果,要使文本围绕图像环绕，应将语句改为：,例：插图,创建超链接标记,用于作超链接的文本或图像等文字或图片设置电子邮件。备注：name是用来创建锚文本的。例如：同一个网页开始内容返回开始内容不同的网页A 目标处,书信格式,格式：,说明：以书信内容的方式显示文字。在距页面的左右两边分别留出一段页边距。,表格(TABLE)标记,元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记,表格的基本结构 定义表头 定义表头定义单元格定义单元格,表格(TABLE)标记-1,表格的属性 1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细,表格(TABLE)标记-2,表格的属性 2bgcolor属性：指定表格或某一个单元格的背景颜色。background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。Top middle bottom 属性：让表格中的内容都水平垂直居中。属性：合并表格行里面的单元格属性：合并表格列里面的单元格注：数值等于多少就相当于合并多少个单元格,练习,用表格做一个职工信息表：要求如图,1无顺序列表（UnorderList）格式：第一项第二项第三项,第四章 无序列表和顺序列表,例1：在记事本中输入下列代码：目前世界上最主要的三大宗教是：基督教伊斯兰教佛教,在浏览器中的显示结果为：,2顺序列表（OrderList）格式：第一项第二项第三项,在浏览器中的显示结果为：,例2：输入如下代码：吃罐装橘子：去超级市场买一些橘子罐头打开罐头吃罐头里的橘子,可加上TYPE=#来定义每一项前面的符号或序号。对于无序列表，定制符号的标记为：其中“#”代表：DISC（实心圆）CIRCLE（空心圆）SQUARE（方块）缺省时为实心圆。对于顺序列表，定制符号的标记为：TYPE属性用来选择以英文字母或是罗马数字作为项目的编号；START=n 指定从哪一个字母或数字开始；其中：A表示按A、B、C、D、编号；a表示按a、b、c、d、编号；I表示按I、编号；1表示按数字编号，这是缺省属性设置。,3.定制列表元素,举例：制作如下页面。文件名为test.htm。,对应的HTML文档见下页,若将上例页面修改为如下页面，并存为test1.htm，应如何更改代码。,总结,通过介绍了HTML语言的基础知识，并学习使用HTML设计和制作图文并茂的网页。讲解了HTML语言的各种元素标签，包括文字、页面、表格、超链接以及插入图像等技术，通过几个实例进一步了解了HTML在网页中的应用。,大练兵,综合今天所讲的所有标签，做一个个人的主页，要求图文并茂、所学的标签都运用到自己的个人主页上。（）,
