第2章 HTML入门

第2章HTML入门HTML（HyperTextMarkedLanguage，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超本文文档称为HTML文档，它独立于各种操作系统平台（如UNIX、Windows等）。最初的HTML语言功能是很有限的，仅仅能够实现静态文本的显示。但是人们远远不满足于死板的类似于文本文件的Web页。随着Internet的飞速发展，HTML语言也不断扩展，逐渐开始支持图片、声音、视频、动画等。2.1HTML概述通过浏览器访问的到的Web页面，通常是基于HTML的基础上形成的，那么，什么是HTML呢？下面将介绍HTML的概念及其基本语法。2.1.1HTML的概念HTML语言是构建任何网站的基础语言。当畅游Internet时，通过浏览器看到的网页是由HTML语言编写的。HTML是一种建立网页文件的语言，通过标记式的指令（Tag），将文字、图片、声音、视频等连接并显示出来。HTML网页文件可以使用记事本、写字板或Dreamweaver等编辑工具来编写，以.htm或.html为文件后缀名保存。对于网站设计师来说，掌握HTML标记语言是基础。2.1.2HTML的基本语法HTML标记是由“”和“”所括住的指令标记，用来向浏览器发送标记指令。主要分为单标记指令和双标记指令。2.2HTML头标记HTML头标记指的是head标签。在浏览器窗口中，头部信息是不显示在正文中的，在标记中可以插入其他的用来说明文件的标题或公共属性的标记。head和/head标签中包含了许多信息，如文档类型、语言编码、JavaScript和Vbscript的函数和变量、搜索引擎的关键字和内容提示等。2.2.1HTML标题标签titletitle标签定义页面标题，在title和/title之间加入页面的标题文字就会在浏览器的标题栏显示出来，如果与动态程序相结合，可以实现实时显示文章标题。例如，在ASP编程时，在文章显示页的title和/title标签中加入News_rs（“News_Title”），当浏览者单击新闻标题时，文章显示页面的标题栏上就会显示这条新闻的标题。2.2.2HTML元信息标签metameta标签是一个辅助性标签，位于HTML文档头部的head标记和title标记之间，所提供的信息是不可见的。meta标签可以用来为搜索引擎定义页面描述，或定义浏览器上的Cookie；也可以用来鉴别作者，标注内容提要和文字，设置页面格式；还可以设置页面，比如可以使其根据定义的时间间隔刷新页面。meta标签分为两大部分：HTTP标题信息（http-equiv）和页面描述信息（name）。2.2.3HTML基链接标签base使用基链接标签可以确保文档中所有的相对URL都可以被分解成正确的文档地址。即使文档本身被移动过或被重命名，也可以正确解析。在创建文档集合时，base标签的使用尤为重要。通过在每个文档中放置正确的base标签，就可以在目录之间、服务器之间移动整个文档集合，而不会破坏文档中的任何链接。2.2.4HTML链接标签linklink标签可以设定外部文件的链接，可定义当前文档和其他文件之间的关系。Href：指定要定义关系文件的URL。ID：指定某个链接的标识符。Title：说明链接的关系。Rel：指定当前文档和Href域中文档之间的关系。例如：linkrel=stylesheethref=style.css!--调入样式表，链接样式表文件”style.css”--linkrel=shorthref=tubiao.ico!--地址栏图标，图标文件tubiao.ico--linkrel=bookmarkhref=tubiao.ico!--在收藏夹中显示网站图标，图标文件tubiao.ico--2.3HTML主体标记body和/body是HTML文档的主体标签。主体标签中包含了网页中所有显示内容的标签。body有自己的属性，如表2.1所示。2.3.1文本颜色body标签的文本属性只是页面中默认文本的颜色属性，即没有对文本进行特定设置时的文本。如果对一段文本单独设置了属性，则在body中设置的文本颜色就不会对此段文本起作用。基本语法如下：bodytext=colorvalue其中colorvalue可以是色值的英语单词，也可以是十六进制。2.3.2背景属性body的背景属性包括背景颜色属性（bgcolor）和背景图像属性（background）。1．bgcolor用来设定整个前台页面的背景颜色。基本语法如下：bodybgcolor=colorvalue2．background用来设定页面的背景图像。为了提高页面的打开速度，应该将图片的尺寸和大小处理的尽量小，背景图像的显示一般是对图像进行不断的重复平铺。基本语法如下：bodybackground=URL其中URL是背景图像文件的路径。2.3.3超链接属性body的超链接属性只对默认的没有运用样式的链接起作用。现在CSS样式表的应用十分流行，因此在页面编辑中一般很少用到body的超链接属性。基本语法如下：bodyalink=colorvaluelink=colorvaluevlink=colorvalue语法说明：alink是指鼠标在超链接上按下时文本的显示颜色。link是指默认的超链接文本颜色，即超链接没有被单击过的状态。vlink是指连接过的超链接文本的显示颜色。其中colorvalue是颜色值。2.3.4边距属性BODY的边距属性包括上边距、下边距、左边距和右边距。边距属性定义页面内容与浏览器边界留白的距离。基本语法如下：bodybottommargin=valueleftmargin=valuerightmargin=valuetopmargin=value其中value为边距的值，且为正数数值。一般情况下，将边距设为0，使得页面内容能充满浏览器的空间，以充分利用空间。2.4文字排版相关的标记前面已经讲述了HTML的主体标签，相信读者对HTML的结构有了基本的了解。但是，仅有这些是不够的，本节将介绍与文字排版相关的HTML标记。2.4.1标题字标记标题字就是以几种固定的字号显示文字。它的设置是通过h#实现的，将要显示的标题文字包含在h#和/h#即可。在HTML中定义了六级标题，从一级到六级，每级的标题字体从大到小递减。基本语法如下：h#align=left|center|right标题文字/h#其中，#用来指定标题文字的大小，#可以取1~6的数值，从1到6字体逐渐变小。标题标记本身具有换行的功能。Align用来设置标题字的对齐属性。2.4.2字体标记字体标记font是专门定义网页文字的字体、字号、颜色等属性的标签。基本语法如下：fontface=size=””color=…/font语法说明：face：用来设定文本所使用的字体，任何安装在操作系统中的字体都可以显示在浏览器中。在face的值中可以设定多个字体，相邻字体名称间用逗号隔开。size：用来定义文本字号，取值范围为+1~+7，-1~-7。color：用来设定字体颜色，其值为该颜色的英文单词或十六进制数值。2.4.3文字修饰标记除了用font标记外还有其他多种方法来实现对文字的修饰。对文字修饰的标记分为两种类型：物理类型（PhysicalStyle）（表2.3）和逻辑类型（LogicalStyle）（表2.4）。2.4.4段落排版标记文字的组合是段落，段落就是格式上统一的文本。HTML的段落排版标记是对网页元素进行排版的重要标记，运用这些标记可以使文字和图片变得整齐美观。段落排版标记主要有：段落标记p、换行标记br、居中标记center、水平分割线标记hr、预格式化标记pre、忽略html标记xmp和段落缩进标记blockquote。2.5.1超链接简介超链接是HTML文档的显著特色，是区别于其他文档的重要标记。超链接是一个网站的精髓，它允许一个网页同其他页面或站点之间进行链接，从而将各个网页、网站链接起来。超链接不仅可以链接文本，也可以链接各种媒体，如声音、图像和动画等。正是由于超链接的存在，将我们的网络变成了丰富多彩的多媒体世界。2.5.2创建超链接创建超链接的标记是a，以a开始，以/a结束，能指向一个HTML页面、一副图像、一个视频文件等任何网络上的资源。基本语法如下：ahref=“url”title=“指向链接显示的文字”target=”窗口名称”超链接名称/a2.6表格标记表格是网页制作中一种常用的页面布局工具。通过表格的嵌套运用可以对网页进行细化管理，使各个元素各司其职、互不冲突，从而精确地把握页面的排版和布局。2.6.1表格简介表格的应用非常广泛，几乎所有的HTML文件都或多或少地使用表格，因此，熟练掌握和运用表格是非常有必要的。2.6.2表格属性表格是网页中必不可少的重要元素，它有丰富的属性，可以进行相关的设置。基本语法如下：table属性1=“属性值”属性2=“属性值”……/table2.6.3表格行标记tr表格行标记tr用于定义表格的某一行。基本语法如下：tr属性1=“属性值”属性2=“属性值”……/tr2.6.4表格单元格标记td表格单元格标记td用于定义表格中某一单元格的属性。基本语法如下：td属性1=“属性值”属性2=“属性值”……/td2.6.5表格的标题与表头一个完整的表格还包括表格的标题与表头。下面我们将介绍如何添加表格标题与表头。1.表格标题表格标题是对表格内容的说明，一般放在表格的外部上面。基本语法如下：caption…/captioncaption与/caption之间的内容就是表格标题。2.表格表头表头也是对表格内容的说明，较标题要详细，通常在表格的第一列或第一行。基本语法如下：trth…/thth…/th…/tr其中，表头的文字样式为居中、加粗显示。2.7表单标记表单的用处广泛，在互联网上随处可见，几乎所有的网站都离不开表单。表单在网页中用来给浏览者填写信息，从而获得用户信息，使网页具有交互功能。表单还可以与数据库相关的程序（ASP等）配合使用，能形成功能强大的用户交互系统。2.7.1表单的结构表单有两个组成部分：一是描述表单的HTML源代码；一是用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如ASP.NET、JSP等。表单的基本语法如下：formname=action=method=input…select…/select…textarea…/textarea/form2.7.2输入标记input输入标记input是一个单标记，必须嵌套在表单标记中使用，用于定义用户的输入项。基本语法如下：forminputname=””type=””/form其中，input标记有6个属性：type、name、size、value、maxlength和check。其中，name和type是必选的两个属性。input标记的type属性有很多选择，不同的选择对应不同的输入方式，参数也不相同。type的类型有：text、radio、checkbox、password、submit、reset、image、hidden和file。2.7.3文本输入区域标记textareatextarea是表单的文本输入区域标记，可以定义多行，常用于备注、留言等需要填写大量文字资料的表单。基本语法如下：formtextareaname=textareacols=rows=wrap=初始文字内容/textarea/form2.7.4下拉列表标记selectselect是下拉列表标记，每一个选项