HTML基础知识

第2章HTML基础知识《网络程序设计-ASP》配套课件支持网站：•什么是HTML2.1•HTML基本语法2.2•HTML高级元素2.4•其他元素2.5•HTML基本元素2.3•本章小结2.6本章内容简介2.1什么是HTML•2.1.1HTML简介•2.1.2Web浏览器•2.1.3HTML开发工具•2.1.4制作一个简单的HTML文件2.1.1HTML简介•HTML(HyperTextMarkupLanguage)即“超文本标记语言”，是用特殊标记来描述文档结构和表现形式的一种语言。•目前，HTML已经发展到了4.0版本。•严格地说，HTML并不是一种程序设计语言，它只是一些由标记和属性组成的规则，这些规则规定了如何在页面上显示文字、表格、超链接等内容。2.1.2Web浏览器•用户浏览网页实际上是通过Web浏览器实现的。•目前主流的浏览器有微软公司的IE（InternertExplorer）和开源的Firefox以及遨游、腾讯TT等浏览器。•我们以IE6.0为例。2.1.3HTML开发工具•HTML文件和ASP文件一样，实际上也是文本文件，因此可以使用记事本、FrontPage、Dreamweaver等任何文本编辑器编辑，编写完毕后保存成扩展名为.htm或.html的文件就可以了。•我们仍然推荐使用1.3节讲过的EditPlus软件。2.1.4制作一个简单的HTML文件•新建、保存和浏览HTML文件的方法和ASP文件的方法是完全类似的。•输入如下图中的代码，然后保存到文件夹C:\inetpub\中，最后在IE浏览器中输入即可访问该HTML文件。2.2HTML基本语法•2.2.1HTML标记•2.2.2标记属性•2.2.3文档头部•2.2.4文档主体•2.2.5注释语句2.2.1HTML标记•在HTML文档中，标记（tag）实际上就是规定了各种内容的显示方式，例如有标记html、/html、head、/head、body.•标记在使用时必须用尖括号“”括起来，而且大部分都是成对出现的，起始标记无斜杠，终止标记有斜杠,当然也有少数标记是单独出现的。•起始标记和终止标记之间的部分，连同标记在内，称为HTML的元素。2.2.2标记属性•所谓标记属性，是指为了明确元素功能，在标记中描述元素的某种特性的参数及其语法。•标记的语法格式为：标记名属性名＝“属性值”属性名＝“属性值”…………／标记名。•在HTML标记中，可以有多个属性，中间用空格隔开即可。另外，不同的标记一般有不同的属性，但也有一些属性是通用的。2.2.3文档头部•文档头部就是包含在head和/head之间的所有内容，它不显示在页面中，但它会告诉浏览器要如何处理文档主体内的内容。•主要标记：–title与/title标记–bgsound标记–meta标记–其他标记（比如link和style标记）2.2.4文档主体•文档主体是指包含在body和/body之间的所有内容，它们将显示在浏览器窗口内。•文档主体可以包含文字、图片、表格等各种标记。•在文档主体中还可以添加许多属性（如background、text、leftmargin等），用来设置网页背景、文字、页边距等。2.2.5注释语句•注释语句又称为注释标记，这些标记在浏览网页时不会显示，只是在编辑文件时可以看到。适当使用注释语句，可以让网页的维护和更新变得十分方便。•注释语句的格式：–!—这中间是注释的内容--2.3HTML基本元素•2.3.1文字•2.3.2列表•2.3.3图像•2.3.4表格•2.3.5超链接•2.3.6字符实体2.3.1文字•文字设置：–一般包括文字格式和文字样式的处理，文件格式即文字的位置、段落等属性，文字的样式指文字的颜色、字体大小等。•常用的文字处理标记：–p和/p标记–br标记–pre和/pre标记–hn和/hn标记–font和/font标记–文字样式标记(如b/b)2.3.2列表•在HTML中，可以使用符号列表或排序列表标记，以使得文档更具有条理性。•符号列表：符号列表又称为无序列表，每一个列表项目的前面可以是空心原点、实心方块或实心圆点等符号。具体用法如下：ultype=Squareli列表项/ul•排序列表：与符号列表不同，每个列表项目前面都是一个编号字符，可以是数字也可以是字母。具体用法如下：oltype=1start=1li列表项/ol2.3.3图像•在HTML中，用img标记插入图片。这是一个单独标记，用法如下：–imgsrc=flower.jpgwidth=270height=167border=1alt=鲜花align=left•在HTML中最常用的图像文件类型主要有JPG文件和GIF文件，其他文件类型有的也可以用，但由于文件太大或者显示效果不好，一般在网页设计中不采用。2.3.4表格•表格有两个主要功能：–一是用来展示文字或图像等内容；二是用来实现版面布局，使网页更规范更美观。•表格是可以嵌套使用的。表格的标记(1)•table与/table标记–table标记用来声明表格，table和/table标记之间就是整个表格的内容。–该标记有许多属性用来设置表格背景、表格边框宽度等•bgcolor•background•width、height•border•align表格的标记(2)•caption与/caption标记–该标记用来设置表格的标题，它有align和valign两个属性，其中align属性表示水平对齐方式，与table标记相似。表格的标记(3)•tr和/tr标记–表格是由行和列组成的，一个tr标记就表示一行–tr标记事实上也有bgcolor、background、width、height和align属性，其属性及属性值和table标记类似，只不过是针对该行进行设置的。–align和valign属性：align属性表示单元格内容在单元格中的水平对齐方式；valign属性则表示垂直对齐方式。表格的标记(4)•td与/td标记–一个td标记表示一列，准确地说，是一行中的一列，也就是一个单元格。–该标记也有bgcolor、background、width、height、align、valign属性，其属性及属性值也与table标记和tr标记类似（参见表2-10），只不过是针对该单元格进行设置的。–td标记还有两个非常重要的属性：rowspan和colspan，rowspan指定当前单元格跨越行的数量；colspan指定当前单元格跨越列的数量表格的标记(5)•th与/th标记–该标记用来设置一个单元格为标题栏，用法和td标记相似，只是自动将单元格内容以粗体显示。2.3.5超链接•超链接的作用：–实现从一个页面链接到另一个页面的功能。•超链接的用法如下：–ahref==_blanktitle=搜狐网站搜狐/a•超链接可以实现链接到另一个文件、邮箱、普通压缩文件等。2.3.6字符实体•为什么要使用字符实体？–有些字符是无法在HTML中直接显示的，那么就要用到字符实体来代替显示。•实体的组成：一般包括三个部分，一个and符号(&)，一个字符实体名或者实体号和一个封号(;)。•常用字符实体：– –"–<–>2.4HTML高级元素•2.4.1表单•2.4.2框架网页2.4.1表单•表单（Form）：就是将要填写的文本框、下拉列表框等元素组合在一起就形成了表单。表单的主要标记(1)•form与/form标记–该标记用于定义一个表单，任何一个表单都是以form开始，以/form结束。,在其中包含了一些表单元素，如文本框、按钮、下拉列表框等。–属性主要有：•name•action•method表单的主要标记(2)•input与/input标记–该标记用于在表单中定义单行文本框、密码框、单选框、复选框、按钮等表单元素。不同的元素有不同的属性。–input标记的常用属性：•type（text、password、radio、checkbox、submit、image等）•name•value表单的主要标记(3)•select与/select标记–该标记用来定义一个列表框，其中的一个option标记就是列表框中的一项。–主要属性：•name•size•multiple•value•selected表单的主要标记(4)•textarea与/textarea标记–该标记用于定义一个多行文本框（也叫文本区域），常用于需要输入大量文字内容的网页中，如留言板、BBS等。–主要属性：•name•rows•cols–多行文本框和单行文本框略有不同，它没有value属性，textarea和/textarea之间的内容实际上就是它的值。2.4.2框架网页•所谓框架网页，就是指在一个浏览器窗口内同时显示几个不同的HTML文档。框架的重要标记(1)•frameset与/frameset标记–该标记就用来定义框架的结构，是左右还是上下结构。–属性如下：•cols•rows•frameborder•border•bordercolor框架的重要标记(2)•frame标记–一个frame标记表示一个框架窗口，frame标记的个数应该与框架数相当。–属性如下：•name•src•scrolling•noresize–用a标记和base标记中的target属性（有left、right等），可以控制超链接在任意框架或窗口中打开。2.5其他元素•下面用表格列出较为常用的其他标记：2.6本章小结•本章的重点是HTML的主要标记及标记属性的使用。•其中表格、表单、框架的设计尤为重要。