西安交通大学：《计算机网络与通讯》课程教学资源（PPT课件讲稿）第11讲 网页设计与编程（2/3）

第11讲网页设计与编程(=) HTML基础 西安交通大学程向前第11讲HIM基础75-

西安交通大学 程向前 第11讲 HTML基础 75- 1 第11讲 网页设计与编程（二） HTML基础

第11讲HTML基础 本讲内容 HTML句法结构 口HTML文档结构和常用元素 口HTML标准单位 HTML基本元素的使用 口HTML的其他元素 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 2 第11讲 HTML基础 ◼ 本讲内容 ❑ HTML句法结构 ❑ HTML文档结构和常用元素 ❑ HTML标准单位 ❑ HTML基本元素的使用 ❑ HTML的其他元素

第11讲教学目标 ■理解和掌握HTML句法、文档结构、基本元素 其中列表、表单、表格等与后续课程有重要联 系的HTML元素尤为重要; ■掌握和熟练使用基于文本的HTML编辑工具, 学习使用Web服务器发布网页 学习使用浏览器查看网页的源代码。 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 3 第11讲 教学目标 ◼ 理解和掌握HTML句法、文档结构、基本元素， 其中列表、表单、表格等与后续课程有重要联 系的HTML元素尤为重要； ◼ 掌握和熟练使用基于文本的HTML编辑工具， 学习使用Web服务器发布网页； ◼ 学习使用浏览器查看网页的源代码

HIML基础 为了在世界范围内发布信息,需要一种能够被 普遍理解的语言,一种能为所有的计算机作为 信息发布用的母语,这就是万维网使用的超文 本标记语言( Hypertext Markup Language HTML)。 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 4 HTML基础 ◼ 为了在世界范围内发布信息，需要一种能够被 普遍理解的语言，一种能为所有的计算机作为 信息发布用的母语，这就是万维网使用的超文 本标记语言（Hypertext Markup Language， HTML)

HIML基础 使用HTML的可以创建 口发布包括标题、正文、表格甚至照片的联机文档; 口可以通过超链标记将所建的文档与其他联机文档建 立访问关联; 口设计浏览器表单进行远程交互服务,如査找信息 进行预订、购置产品等: 可以将电子表格、视频剪辑,声音节目和其他多媒 体信息包括在HTML文档中。 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 5 HTML基础 ◼ 使用HTML的可以创建： ❑ 发布包括标题、正文、表格甚至照片的联机文档； ❑ 可以通过超链标记将所建的文档与其他联机文档建 立访问关联； ❑ 设计浏览器表单进行远程交互服务，如查找信息、 进行预订、购置产品等； ❑ 可以将电子表格、视频剪辑，声音节目和其他多媒 体信息包括在HTML文档中

HTML句法结构 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 6 HTML句法结构

HTML句法结构 Google首页的部分源代码 Google 另外还有HTML文档主体部分的声明。 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 7 HTML句法结构 ◼ Google首页的部分源代码 Google ... ◼ 另外还有HTML文档主体部分的声明

HTML句法结构 个HTML文档是普通的ASC文本文件,它包含两 类内容:普通的文本、代码或标记。标记(Taq是用 对尖括号“<>”括起来的文本串,例如第一行的 。标记通常具有如下结构: 在标记定义中,“ tagname”是标记名,定义标记的类 型;而“ attributes”为属性,一般标记即可以不定义 属性,也可以定义若干个属性,属性给出了这个元素 的附加信息 西安交通大学程向前第11讲HIM基

西安交通大学 程向前 第11讲 HTML基 础 75- 8 HTML句法结构 ◼ 一个HTML文档是普通的ASCII文本文件，它包含两 类内容：普通的文本、代码或标记。标记(Tag)是用一 对尖括号“<>”括起来的文本串，例如第一行的 。标记通常具有如下结构： ◼ 在标记定义中，“tagname”是标记名，定义标记的类 型；而“attributes”为属性，一般标记即可以不定义 属性，也可以定义若干个属性，属性给出了这个元素 的附加信息

HTML句法结构 ■所谓元素( Element),是HTML中的主要构件, 般元素都是由成对的标记组成,例如: Google 单个出现的标记成为“空元素”,例如: ■可以容纳其他元素的元素也称为“容器元素”,例如: Google 西安交通大学程向前第11讲HIM基 出75

西安交通大学 程向前 第11讲 HTML基 础 75- 9 HTML句法结构 ◼ 所谓元素（Element），是HTML中的主要构件，一 般元素都是由成对的标记组成，例如 ： Google ◼ 单个出现的标记成为“空元素”，例如： ◼ 可以容纳其他元素的元素也称为“容器元素”，例如： Google

HTML句法结构 ■在元素的起始标记中可以填入相关的元素属性 在 Google主页文档第二行的标记中, head是标记名,没有相关属性。 在文档主体定义中,定义了若干属性, 属性值为“ bgcolor=# ffffff text=#000000 ink=#0000ccⅦink=551a8bank≡#f0000 onload=sf0”。 西安交通大学程向前第11讲HIM基 出75 10

西安交通大学 程向前 第11讲 HTML基 础 75- 10 HTML句法结构 ◼ 在元素的起始标记中可以填入相关的元素属性 ◼ 在Google主页文档第二行的标记中， head是标记名，没有相关属性。 ◼ 在文档主体定义中，定义了若干属性， 属性值为“bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()