第9讲 HTML基础.ppt

第9讲 HTML基础 第9讲 HTML基础 《网页设计与编程》 第9讲 HTML基础 本讲内容 HTML句法结构 HTML文档结构和常用元素 HTML标准单位 HTML基本元素的使用 HTML的其他元素 第9讲 教学目标 理解和掌握HTML句法、文档结构、基本元素 注意列表、表单、表格等HTML元素 静态网页设计中值得注意的问题 概 述 为了在世界范围内发布信息，需要一种能够被普遍理解的语言，一种能为所有的计算机作为信息发布用的母语，这就是万维网使用的超文本标记语言（Hypertext Markup Language，HTML)。 HTML句法结构 HTML句法结构 Google首页的部分源代码 html head META HTTP-EQUIV=content-type CONTENT=text/html; charset=GB2312 titleGoogle/title ... /head 另外还有HTML文档主体部分的声明。 body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf() center HTML句法结构 一个HTML文档是普通的ASCII文本文件，它包含两类内容：普通的文本、代码或标记。标记(Tag)是用一对尖括号“”括起来的文本串，例如第一行的html。标记通常具有如下结构： tagneme attribute1=value1 attribute2=value2… 在标记定义中，“tagname”是标记名，定义标记的类型；而“attributes”为属性，一般标记即可以不定义属性，也可以定义若干个属性，属性给出了这个元素的附加信息。 HTML句法结构 在Google主页文档第二行的head标记中，head是标记名，没有相关属性。 在文档主体body定义中，定义了若干属性，属性值为“bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()”。 HTML句法结构 注意：虽标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感。 例如，可以在超链中定义相关的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件。 重要提示：在网页设计须统一命名方案 HTML句法结构 标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象，比如文件头、段落或图片。一个元素可具有一个或一对标记，通常具有一些相关的属性。 元素有两种类型：容器（container）元素和单个元素（空元素）。 HTML句法结构 容器元素含有文本，它由文本主体（或其他元素）组成，文本主体在开头和结尾处用一对标记来确定边界（结尾的标记用标记名前加“/”来表示，并不带任何属性）。 例如，title和/title 标记把这两个标记之间的文本定义成一个文档标题。 HTML句法结构 而单个元素（空元素）是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。 例如img src=…标记就是一个可以在文档中插入图像的单个元素。 HTML句法结构 容器元素与单个元素一起完整地定义了文档的格式或显示形式。其它一些普通文本格式符号（如Tab、连续的空格、回车等）在HTML中都被当做单一的空格。 例如，在输入HTML文件时，可以在每个标记后有若干个空行，或在每个单词之间有10个空格，但浏览器对此却“熟视无睹”，结果显示可能会出乎预料。 HTML文档结构和常用元素 这三个元素一起构成完整的HTML文档结构模板，所有的HTML文档都应该遵循这个模板： HTML HEAD Header element /HEAD BODY body of Document /BODY /HTML HTML文档结构和常用元素 HEAD容器元素中包含的最为常用的元素有： TITLEtext/TITLE：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开显示（例如，在窗口的标题栏中）。 抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。 HTML文档结构和常用元素 BODY容器元素中包含以下几个常用元素： H#text/H#：标题把括起来的文本作为标题。从标记H1、H2直到H6，可以有六个层次的标题（较小的数字标记较重要的标题）。标题通常用较大的字型编排，并且在该标题的上下各有一个空行。 P：段落标识文本主体中两个