计算机网络应用基础 国家精品课程配套教材 教学课件 冯博琴 ch5-1.ppt

计算机网络应用基础 第5章 网页设计与编程 (Ⅰ) 本章内容 5.1 HTML概述 5.2 HTML文档结构和常用元素 5.3 HTML标准单位 5.4 动态文档的工作原理 5.5 PHP的基本元素 5.6 表单与PHP处理程序 5.7 网页的设计与测试环境 5.1 HTML概述 为了在世界范围内发布信息，一种能为所有的计算机作为信息发布用的母语 这就是万维网使用的超文本标记语言（Hypertext Markup Language，HTML) 了解HTML，在开始时会觉得有些枯燥，一旦熟悉以后，可以感觉其中的乐趣 HTML对学习和掌握“动态网页”工作原理和后两章的内容，意义重大 Google首页部分HTML源代码 HTML文档首部 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基本文件和若干其他相关文件（如图片等）组成，统称文档（Document） 一个HTML基本文件是普通的文本文件，它包含两类内容：普通的文本、标记 标记(Tag)是用一对尖括号“”括起来的文本串，例如第一行的html。标记通常具有如下结构： tagneme attribute1=value1 attribute2=value2… 标记定义中，“tagname”是标记名，定义标记的类型 “attributes”为属性 标记的属性是一种选项，表示元素的附加信息 HTML标记和属性举例 在一般head标记中，head是标记名，没有属性 在文档主体body定义中，Google主页定义了若干属性和属性值： “bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()” 标记、属性名和属性值的大小写 需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感 例如，在超链中访问的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件 重要提示：在网页设计须统一命名方案 元素：容器、空元素 标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象 比如文档头、段落或图片 一个元素可具有一个或一对标记（尾标记在标记名前加“/” ） 通常具有一些相关的属性 元素有两种类型：容器（container）元素和单个元素（空元素） 容器和空元素的区别 容器元素包含文本内容 表达一个文本段、它由文本主体或其他元素组成 文本主体在开头和结尾处用一对标记来确定边界 例如，titleMy First WebPage/title 把两个标记之间的文本定义成一个文档标题 而空元素是不影响任何文本的单个标记，在文档中插入对象来修饰网页 例如img src=…在文档中插入图像 5.2 HTML文档结构和常用元素 1.HTML文档结构 2.HTML常用元素 3.表单 （form） 4.表格（table） HTML文档结构 三个元素构成HTML文档的基本结构： HTML HEAD Header element /HEAD BODY body of Document /BODY /HTML 常用元素： TITLE HEAD容器元素中最为常用元素： TITLEtext/TITLE：这个元素是文档的抬头，类似书籍的页眉 在浏览器中，text会在视窗口标题栏上 抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意 BODY中常用元素（一） H#text/H#：标题标记，把标记中的文本作为标题 从标记H1、H2直到H6，可以有六个层次的标题（较小的数字标记较重要的标题） 标题通常用较大的字型编排，并且在该标题的上下各有一个空行 P：段落标记在两个段落之间插入空行 IMG SRC=“URL”：图像标记，把图像插入到文档中 图像可以在SRC属性中给出的URL处找到 BODY中常用元素（二） ULLItextLItext/UL：无序列表； 每个条目以LI标记开始。通常在显示出的各条目项前置一个实心的圆点 A HREF=URLtext/A：超文本标记，也称为超链接。文本用某种特殊方式来显示（颜色、下划线） 当点击链接时，Web