第2章HTML基础介绍

1、信息科学与技术学院主讲：马 歌1.熟悉HTML文档的基本结构2.掌握HTML基本语法3.了解编写HTML文件的注意事项 网页的网页的标题标题及及属性属性 文件主体文件主体 2.1 HTML HTML文档结构文档结构头部分头部分 主体部分主体部分 2.1.1 基本结构基本结构 一个简单的一个简单的HTML示例示例 欢迎光临我的主页欢迎光临我的主页 HTMLHTML文档基本结构示例文档基本结构示例文档开始文档开始文档结束文档结束头部分头部分 主体部分主体部分 p文档标记 HTML文档的内容文档的内容2.1.1 基本结构基本结构 标记表示HTML文档的开始，标记表示HTML文档的结束。 目的是告诉浏

2、览器这是一个Web文档，需要按照HTML文档进行解释。p文件头标记2.1.2 头部内容头部内容 头部的内容头部的内容 HTML文档的头部标记，在浏览器窗口中，头部信息是不被显示在正文中的，在此标记中可以插入其它用以说明文件的标题和一些公共属性的标记。 头部分允许的标记：、 、 、 和 。p文件标题标记2.1.2 头部内容头部内容 标题名标题名 如要指定HTML文档的网页标题（它将显示在浏览器窗口顶部标题栏），就要在头部内容中提供有关信息。 用title元素来指定网页标题，即在之间写上网页标题，如程序2-2。2.1.2 头部内容头部内容 我的第一个网站我的第一个网站 网页标题的使用网页标题的使用

3、网页标题网页标题2.1.2 头部内容头部内容网页标题网页标题p标记 meta标记是一个特殊的HTML标记，可提供有关页面的元信息（meta-information）。 meta标签分两大部分：HTTP标题信息(http-equiv)和页面描述信息(name)。 例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。这些定义的内容并不在网页页面中显示。但它们会有一些特殊的作用。2.1.2 头部内容头部内容2.1.2 头部内容头部内容 设置网页字符编码方式设置网页字符编码方式定义搜索关键字，提定义搜索关键字，提供给搜索引擎使用供给搜索引擎使用设定自动刷新页面时间设定自动刷新页面时

4、间（聊天室常用）（聊天室常用）程序程序2-32-3pmeta的属性 content（页面描述）：定义与 http-equiv 或 name 属性相关的元信息。 http-equiv：把 content 属性关联到 HTTP 头部，取值范围包括： content-type（内容类型），expires（有效期限），refresh（刷新），set-cookie（cookie设定，即向客户端发送cookie）。 name：把 content 属性关联到一个名称。取值范围：author（作者）、description（网站内容描述）、keywords（关键字）、generator（生成器）、 robot

5、s（搜索引擎索引方式）等。2.1.2 头部内容头部内容phttp-equiv属性 使用带有http-equiv属性的标签时，服务器将把名称/值添加到发送给浏览器的内容头部。head /head content-type: text/html charset:gb2312 expires:31 Dec 2011 2.1.2 头部内容头部内容有效期限有效期限pname属性 使用带有name属性的标签时，可以自由使用对自己和源文档的读者来说富有意义的名称。head /head 2.1.2 头部内容头部内容文件被检索，且页面文件被检索，且页面上的链接可以被查询上的链接可以被查询p文件主体标记2.1.3

6、 主体内容主体内容 文件主体文件主体 在标记和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素。表表2-1 标记的属性标记的属性 文件主体标记文件主体标记值值说说 明明bgcolor设置网页的背景色。background设置网页的背景图像。text设置文档中所有文本的颜色。link设置尚未被访问过的超文本链接的颜色，默认为蓝色。vlink设置已被访问过的超文本链接的颜色，默认为蓝色。alink设置超文本链接在被访问瞬间的颜色，默认为蓝色。topmargin设置文档中上边距的大小。leftmargin设置文档中左边距的大小。表表2-2 颜色代码表颜色代码表 文件主体标记文件主体

7、标记名称名称英文颜色名英文颜色名1616进制代码进制代码黑色black#000000蓝色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080绿色green#008000乳白色ivory#FFFFF0桔黄色orange#FFA500粉红色pink#FFC0CB红色red#FF0000白色white#FFFFFF黄色yellow#FFFF00深红色crimson#CD061F黄绿色greenyellow#0B6EFF水蓝色dodgerblue#0B6EFF淡紫色lavender#DBDBF8http:/ http:/ 2.1.3 主体内容主体内容

8、我的第一个页面我的第一个页面 这里是文章的标题。这里是文章的标题。 这里是文章的段落。这里是文章的段落。 在在body部分添加了几个关于文本和段落的标记部分添加了几个关于文本和段落的标记一级标题一级标题段落段落pDOCTYPE标记 大多页面的开头，通常使用DOCTYPE标记来声明要使用什么风格的HTML或XHTML。 DOCTYPE使浏览器知道应该如何处理文档，并且让验证器知道按照什么样的标准检查代码的语法。然后，用html标记标出实际代码的起始位置。2.1.4 编写网页的开头编写网页的开头2.1.4 编写网页的开头编写网页的开头表表2-3 HTML版本版本版版 本本年年 份份HTML1991

9、HTML+1993HTML 2.01995HTML 3.21997HTML 4.011999XHTML 1.02000HTML 520121.HTML 4.01 Strict 页面中禁止使用被W3C已经废弃的标记。不允许框架集（Framesets）。2.1.4 编写网页的开头编写网页的开头2.HTML 4.01 Transitional 页面中允许使用被W3C已经废弃的标记。不允许框架集（Framesets）。2.1.4 编写网页的开头编写网页的开头3.XHTML 1.0 Strict 页面中禁止使用被W3C已经废弃的标记。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标

10、记。2.1.4 编写网页的开头编写网页的开头4.XHTML 1.0 Transitional 页面中允许使用被W3C已经废弃的标记。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。2.1.4 编写网页的开头编写网页的开头5. HTML 52.1.4 编写网页的开头编写网页的开头6.XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。2.1.4 编写网页的开头编写网页的开头为教材P18实验添加背景颜色，字符编码设置为简体中文，2秒刷新打开xt1-1.htmlp标记：标记：是HTML的基本元素，

11、可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。p基本的标记可分为两种： 单单标记：只要一个标记就能完成所要表示的功能。 双双标记：需要首标记首标记和尾标记尾标记两部分构成才能完成所需功能。2.2 HTML HTML基本语法基本语法浏览器从这里开始执行该标记所表示的功能浏览器从这里开始执行该标记所表示的功能浏览器在这里结束该标记的执行浏览器在这里结束该标记的执行p单标记 2.2.1 标记语法标记语法：表示换行：表示换行：表示图像：表示图像 p双标记 2.2.1 标记语法标记语法 内容内容 内容内容这是错误的交叉嵌套代码这是错误的交叉嵌套代码告诉浏览器介于标记告诉浏览器介于标记

12、和和之间的文本应以粗体显示之间的文本应以粗体显示标记可以包含标记，即标记可以标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套成对嵌套，但是不能交叉地嵌套pHTMLHTML语言标记语言标记是由英文单词或其缩略字母和一对定界符（）共同组成，每一个标记有一系列属性。p标记约定、描述、标识了信息内容，属性控制了信息内容显示效果。2.2.2 属性语法属性语法2.2.2 属性语法属性语法 标记名、属性名和属标记名、属性名和属性值不区分大小写性值不区分大小写要适当空格要适当空格要适当空格要适当空格属性没有个数限制，顺序任意属性没有个数限制，顺序任意 或或网页中插入网页中插入一条水平线一条水平线p注释

13、标记用于在程序代码中插入注释。p注释内容不会在浏览器中显示出来，仅用于对网页有关内容说明。适当的注释对以后代码的阅读和维护产生很大的帮助。p注释内容不局限于一行，长度也不受限制。 2.3 注释注释 p “”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠“/”；元素必须被关闭。p 标记可以嵌套使用，但不能嵌套标记。p 在源文件中不区分大小写。p 任何回车符和空格在HTML代码中都不起作用。为了代码清晰，建议不同的标记都单独占一行。p 标记中可以放置各种属性，属性值都用“”括起来；p 标签名和属性建议都用小写字母。p 编写代码，一般应该使用缩进风

14、格，以便更好的理解页面的结构，便于阅读和维护。 2.4 编写编写HTMLHTML文件的注意事项文件的注意事项 pHTML文件的命名要注意以下几点：文件的扩展名为.htm或.html结束，建议统一使用html作为文件名的后缀；文件名中只可由英文字母、数字或下划线组成；文件名中不要包含特殊符号，比如空格、$等；文件名区分大小写；网站首页文件名一般是index.html或default.html。 2.4 编写编写HTMLHTML文件的注意事项文件的注意事项 编写一个编写一个HTML文件，在编写的时候要注意编文件，在编写的时候要注意编写的注意事项，养成良好的编码习惯。写的注意事项，养成良好的编码习惯。 2.5 小实例小实例 页面的标题页面的标题 这是我的第一个页面。这是我的第一个页面。这是粗体文本。这是粗体文本。 段落段落粗体粗体插入图像插入