第0章_HTML基础_1.ppt

1、第0章 HTML基础,0.1 HTML概述 0.2 HTML标记 0.3 HTML表单的设计,第1节 HTML概述,用HTML编写的超文本文件称为HTML文件，扩展名可以是htm、html、shtm或shtml。,一、 HTML的特点 HTML语言独立于操作系统平台（如Unix，Linux，Windows等）。自1990年以来，HTML就一直被用作Word Wide Web，即万维网WWW的信息表示语言。,HTML语言与其它编程语言（如C和Java）不同，具有以下特点：（1）超文本性 ；（2）标记性 ；（3）简单性； （4）可扩展性 ；（5）平台无关性,二、 HTML基本结构1）HTML基本语

2、法 HTML文件表现力十分丰富，语法结构却比较简单。HTML文件是由标记和内容组成，形式如下： 文本或超文本内容 ,2) HTML文件基本结构 HTML文档结构可以划分为两个基本部分：文件头(head)和文件体(body)。一个典型的HTML文档结构如图所示。,图0-2 HTML文档结构,图 HTML文档结构,图 一个说明HTML结构的网页,HTML基本结构： 这是标题部分 你好，这是正文部分！ ,实例1： HTML基本结构.html,三、 HTML文档的编写 HTML文档的编写是非常容易的，可以使用任何文本编辑工具来编写，保存时的文件扩展名可以是htm、html、shtm或shtml。,标记

3、(Tags)，通常又叫着标签，它是HTML文档的重要组成部分。可以说没有标记就没有形式多样化的Web页面效果。一、 基本标记1）标记放在HTML文档的最前面，用来表示HTML文档的开始，而标记放在HTML文档的最后，用来表示HTML文档的结束，这两个标记必须一起使用。,第2节 HTML标记,2） 和是HTML文档头部标记，在此标记对之间可以使用、等标记 。, 有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表所示。,3) 是HTML文档的主体部分，在此标记对之间可包含、等众多的标记,表 BODY标记属性值,用法示例：

4、,4） 是标题标记，这一对标记包含的内容将显示在浏览器的标题栏上。 5） 附加信息标记，这一标记包含的内容将不显示。 主要包括name 和content属性以及HTTP头信息。,注意：标志对只能放在标志对之间。 下面是一个综合的例子，说明了HTML文档中最基本标志的使用。 显示在浏览器最上边蓝色条中的文本 红色背景、蓝色的文本 实例2：title.html,二、 格式标记 格式标记主要用于修饰如何显示文本之类的信息，这些标记都被用于标记对之间。1） 标记对是用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。标记也可以没有结束标记，可单独使用。 标志还可以使用align属

5、性，它用来说明对齐方式，语法是。align可以是Left （左对齐）、Center（居中）和 Right（右对齐）三个值中间的一个。 如：表示标志对中的文本使用居中对齐方式。,2）文字居中对齐3)是在显示内容中产生一个换行的标记，它没有结束标记。4） 标记对用来排版大块Html段落，是分区显示标记,也用于格式化表。此标志对的用法与标志对非常相似，同样有align对齐方式属性., 格式标志 一个格式标志的例子 芒果网与深航国旅战略联盟，打造深圳旅游新亮点! ,SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也

6、能接受STYLE、CLASS和ID属性。 SPAN是一个内联元素，但SPAN就没有的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。 SPAN 和 DIV 的区别在于，DIV是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN,5）*,三、文本标记 文本字体格式如斜体、黑体字、下划线等由文本标记控制。1）此标志是在浏览器中浏览时，按照文档中预先排好的形式显示内容。 2）标题标记，i取值范围为16。是字号最大的标题，而则是字号最小

7、的标题。,实例3：预定义格式标记, 显示的区别 春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 ,实践训练：标题实例, 标题示例！ 。 。 ,3）、用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出；使用文本字体加粗; 用于文本加删除线。4）是字体标记，它可以对输出文本的字体大小、颜色等进行设置。font标记主要有size 、color和face三个属性。,属性值,图 字符格式设置标记的使用,实践训练：,5） 使网页的文字进行滚动，滚动方式可以横向，也可纵向。,属性值,实例：,表属性值

8、,四、水平线标记标记是在HTML文档中加入一条水平线。, 图像与水平线的标记示例 ,五、建立列表,1有序列表 格式： 功能：建立有序列表。 Type可取：A、a、1、i和I,2无序列表 格式： 功能：建立无序列表。 Type可取：disc(实心圆点)、circle(空心圆点)和square(实心方块),标志对用来创建一个表有数字的列表 标志对用来创建一个标有圆点的列表 标志对只能在或标志对之间使用，此标志对用来创建一个列表项，若放在之间则每个列表项加上一个数字，若放在之间则每个列表项加上一个圆点。 实例：有序与无序 中国城市 北京 上海 广州, 美国城市 华盛顿 芝加哥 纽约 ,实践训练：,3

9、自定义列表 除了上述两种列表以外，还可以根据需要自定义列表样式。格式为： . ,用来创建一个普通的列表 用来创建列表中的项目名称 用来创建列表中对项目的解释 和都必须放在标志对之间。, 一个普通的列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥dd 纽约 ,实例：,六、注释标记,格式：功能：注释标记。,实例：注释标记, 标记的使用 三种标记的使用！ 我在中间！中间 我在左边！左边 我在右边！右边 ,七、 图像标记 图像在网页制作中是非常重要的一个方面，HTML语言也专门提供了标记来处理图像的输出。图像标记的基本格式是：,当使用插入图像时，含有的属性如表所示,八、表格标记 表格标记是H

10、TML中非常重要的标记之一。多数网页都是使用表格或多重表格来设计，主要是因为表格可以固定文本或图像等网页元素的输出。 1）标记对用来创建一个表格。,标志对用来创建一个表格，下表所示的是属性：,属性,用途,设置表格的背景色,设置边框的宽度，若不设置宽度默认值为0,设置边框的颜色,设置表格的宽度，单位用绝对像素值或总宽度的百分比,表 属性值,2）， 标记对用来创建表格中的行，只能放在标记对之间使用。标记对用来创建表格中行中的每一个单元格 。3）标记对用来设置表格头，通常是黑体居中文字。,、和标志对之间的关系,行的属性,align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。 valign是垂直对齐方式，取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。,/的主要属性,width是单元格的宽度，单位用绝对像素值或总宽度的百分比。 colspan设置一个表格单元格跨占的列数（缺省值为1）。 r