HTML基础知识.ppt

1、第2章 HTML基础知识,网络程序设计-ASP配套课件 支持网站：,本章内容简介,2.1 什么是HTML,2.1.1 HTML简介 2.1.2 Web浏览器 2.1.3 HTML开发工具 2.1.4 制作一个简单的HTML文件,2.1.1 HTML简介,HTML(Hyper Text Markup Language )即“超文本标记语言”，是用特殊标记来描述文档结构和表现形式的一种语言。 目前，HTML已经发展到了4.0版本。 严格地说，HTML并不是一种程序设计语言，它只是一些由标记和属性组成的规则，这些规则规定了如何在页面上显示文字、表格、超链接等内容。,2.1.2 Web浏览器,用户浏览

2、网页实际上是通过Web浏览器实现的。 目前主流的浏览器有微软公司的IE（Internert Explorer）和开源的Firefox以及遨游、腾讯TT等浏览器。 我们以IE 6.0为例。,2.1.3 HTML开发工具,HTML文件和ASP文件一样，实际上也是文本文件，因此可以使用记事本、FrontPage、Dreamweaver等任何文本编辑器编辑，编写完毕后保存成扩展名为.htm或.html的文件就可以了。 我们仍然推荐使用1.3节讲过的EditPlus软件 。,2.1.4 制作一个简单的HTML文件,新建、保存和浏览HTML文件的方法和ASP文件的方法是完全类似的 。 输入如下图中的代码，

3、然后保存到文件夹C:inetpubwwwrootasptempchapter2中，最后在IE浏览器中输入http:/localhost/asptemp/chapter2/2-1.htm 即可访问该HTML文件。,2.2 HTML基本语法,2.2.1 HTML标记 2.2.2 标记属性 2.2.3 文档头部 2.2.4 文档主体 2.2.5 注释语句,2.2.1 HTML标记,在HTML文档中，标记（tag）实际上就是规定了各种内容的显示方式，例如有标记、. 标记在使用时必须用尖括号“”括起来，而且大部分都是成对出现的，起始标记无斜杠，终止标记有斜杠,当然也有少数标记是单独出现的。 起始标记和终

4、止标记之间的部分，连同标记在内，称为HTML的元素 。,2.2.2 标记属性,所谓标记属性，是指为了明确元素功能，在标记中描述元素的某种特性的参数及其语法。 标记的语法格式为： 。 在HTML标记中，可以有多个属性，中间用空格隔开即可。另外，不同的标记一般有不同的属性，但也有一些属性是通用的 。,2.2.3 文档头部,文档头部就是包含在和之间的所有内容，它不显示在页面中，但它会告诉浏览器要如何处理文档主体内的内容 。 主要标记 ： 与标记 标记 标记 其他标记（比如和标记 ）,2.2.4 文档主体,文档主体是指包含在和之间的所有内容，它们将显示在浏览器窗口内 。 文档主体可以包含文字、图片、表

5、格等各种标记 。 在文档主体中还可以添加许多属性（如background、text 、leftmargin 等），用来设置网页背景、文字、页边距等。,2.2.5 注释语句,注释语句又称为注释标记，这些标记在浏览网页时不会显示，只是在编辑文件时可以看到。适当使用注释语句，可以让网页的维护和更新变得十分方便。 注释语句的格式： ,2.3 HTML基本元素,2.3.1 文字 2.3.2 列表 2.3.3 图像 2.3.4 表格 2.3.5 超链接 2.3.6 字符实体,2.3.1 文字,文字设置： 一般包括文字格式和文字样式的处理，文件格式即文字的位置、段落等属性，文字的样式指文字的颜色、字体大小等

6、 。 常用的文字处理标记 ： 和标记 标记 和标记 和标记 和标记 文字样式标记(如),2.3.2 列表,在HTML中，可以使用符号列表或排序列表标记，以使得文档更具有条理性。 符号列表：符号列表又称为无序列表，每一个列表项目的前面可以是空心原点、实心方块或实心圆点等符号。具体用法如下： 列表项 排序列表 ：与符号列表不同，每个列表项目前面都是一个编号字符，可以是数字也可以是字母。具体用法如下： 列表项 ,2.3.3 图像,在HTML中，用标记插入图片。这是一个单独标记，用法如下： 在HTML中最常用的图像文件类型主要有JPG文件和GIF文件，其他文件类型有的也可以用，但由于文件太大或者显示效

7、果不好，一般在网页设计中不采用。,2.3.4 表格,表格有两个主要功能： 一是用来展示文字或图像等内容；二是用来实现版面布局，使网页更规范更美观。 表格是可以嵌套使用的。,表格的标记(1),与标记 标记用来声明表格，和标记之间就是整个表格的内容。 该标记有许多属性用来设置表格背景、表格边框宽度等 bgcolor background width、height border align,表格的标记(2),与标记 该标记用来设置表格的标题，它有align和valign两个属性，其中align属性表示水平对齐方式，与标记相似 。,表格的标记(3),和标记 表格是由行和列组成的，一个标记就表示一行 标

8、记事实上也有bgcolor、background、width、height和align属性，其属性及属性值和标记类似，只不过是针对该行进行设置的。 align和valign属性：align属性表示单元格内容在单元格中的水平对齐方式；valign属性则表示垂直对齐方式。,表格的标记(4),与标记 一个标记表示一列，准确地说，是一行中的一列，也就是一个单元格。 该标记也有bgcolor、background、width、height、align、valign属性，其属性及属性值也与标记和标记类似（参见表2-10），只不过是针对该单元格进行设置的。 标记还有两个非常重要的属性：rowspan和col

9、span ， rowspan指定当前单元格跨越行的数量； colspan指定当前单元格跨越列的数量,表格的标记(5),与标记 该标记用来设置一个单元格为标题栏，用法和标记相似，只是自动将单元格内容以粗体显示。,2.3.5 超链接,超链接的作用： 实现从一个页面链接到另一个页面的功能。 超链接的用法如下： 搜狐 超链接可以实现链接到另一个文件、邮箱、普通压缩文件等。,2.3.6 字符实体,为什么要使用字符实体？ 有些字符是无法在HTML中直接显示的 ，那么就要用到字符实体 来代替显示。 实体的组成：一般包括三个部分，一个and符号(,2.4 HTML高级元素,2.4.1 表单 2.4.2 框架网

10、页,2.4.1 表单,表单（Form）：就是将要填写的文本框、下拉列表框等元素组合在一起就形成了表单。,表单的主要标记(1),与标记 该标记用于定义一个表单，任何一个表单都是以开始，以结束。,在其中包含了一些表单元素，如文本框、按钮、下拉列表框等。 属性主要有： name action method,表单的主要标记(2),与标记 该标记用于在表单中定义单行文本框、密码框、单选框、复选框、按钮等表单元素。不同的元素有不同的属性。 标记的常用属性 ： type （text 、password 、radio 、checkbox 、submit、image等 ） name value,表单的主要标记(

11、3),与标记 该标记用来定义一个列表框，其中的一个标记就是列表框中的一项。 主要属性： name size multiple value selected,表单的主要标记(4),与标记 该标记用于定义一个多行文本框（也叫文本区域），常用于需要输入大量文字内容的网页中，如留言板、BBS等。 主要属性： name rows cols 多行文本框和单行文本框略有不同，它没有value属性，和之间的内容实际上就是它的值。,2.4.2 框架网页,所谓框架网页，就是指在一个浏览器窗口内同时显示几个不同的HTML文档。,框架的重要标记(1),与标记 该标记就用来定义框架的结构，是左右还是上下结构。 属性如下： cols rows frameborder border bordercolor,框架的重要标记(2),标记 一个标记表示一个框架窗口，标记的个数应该与框架数相当。 属性如下： name src