【计算机网络与应用技术】 网页设计与编程（二）.pptVIP

西安交通大学 程向前 第11讲 HTML基础 75- 第11讲 网页设计与编程（二） HTML基础 第11讲 HTML基础 本讲内容 HTML句法结构 HTML文档结构和常用元素 HTML标准单位 HTML基本元素的使用 HTML的其他元素 第11讲 教学目标 理解和掌握HTML句法、文档结构、基本元素，其中列表、表单、表格等与后续课程有重要联系的HTML元素尤为重要； 掌握和熟练使用基于文本的HTML编辑工具，学习使用Web服务器发布网页； 学习使用浏览器查看网页的源代码。 HTML基础 为了在世界范围内发布信息，需要一种能够被普遍理解的语言，一种能为所有的计算机作为信息发布用的母语，这就是万维网使用的超文本标记语言（Hypertext Markup Language，HTML)。 HTML基础 使用HTML的可以创建： 发布包括标题、正文、表格甚至照片的联机文档； 可以通过超链标记将所建的文档与其他联机文档建立访问关联； 设计浏览器表单进行远程交互服务，如查找信息、进行预订、购置产品等； 可以将电子表格、视频剪辑，声音节目和其他多媒体信息包括在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句法结构 所谓元素（Element），是HTML中的主要构件，一般元素都是由成对的标记组成，例如 ： titleGoogle/title 单个出现的标记成为“空元素”，例如：br 可以容纳其他元素的元素也称为“容器元素”，例如：head META HTTP-EQUIV=content-type CONTENT=text/html; charset=GB2312 titleGoogle/title ... /head 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 标记把这两个标记之间的文本定义成一个文档标题。 而空元素是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。例如img src=…标记就是一个可以在文档中插入图像的单个元素。 HTML句法结构 容器元素与空元素一起完整地定义了文档的格式或显示形式。其它一些普通文本格式符号（如Tab、连续的空格、回车等）在HTML中都被当做单一的空格。 例如，在输入HTML文件时，可以在每个标记后有若干个空行，或在每个单词之间有10个