HTML语言与网页设计分析

1、12.HTML语言与网页设计语言与网页设计复习要点：复习要点：HTML通用标记结构、通用标记结构、HTML文档的基本结构、文档的基本结构、meta标记、超链接标记、字符实体、各种表单标记标记、超链接标记、字符实体、各种表单标记什么是什么是CSS样式表定义语法、样式表定义语法、CSS选择符选择符样式引用的基本方式样式引用的基本方式样式的优先级样式的优先级html与与xhtml的主要区别的主要区别22.HTML语言与网页设计语言与网页设计2.1 HTML语言简介语言简介HTML，即超文本标记语言，是英文HyperText Markup Language的缩写，是一种独立于操作系统的网页编写语言。H

2、TML的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，为： 内容内容 元素名即预定义的标记（签）属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。32.2 HTML文档的基本结构

3、的基本结构HTML文档包含定义文档内容的文本和定义文档结构及外观的标记，基本结构如下： ：容器标记：容器标记 头标记，用于定义文档标题及其它可能会用于控制文档显示或访问的参数，如、等 正文，包括要显示的文本和文档的控制标记 ：容器结束标记：容器结束标记42.3 HTML的常用元素和标记的常用元素和标记（1）标记 功能：界定一个完整的HTML文档 属性：dir, lang, version 结束标记： 包含: head_tag, body_tag, frames dir属性：内容的显示方式，用于本标记用于决定整个文档的显示方向，默认为”ltr”，用于其它标记则用于决定该标记内的内容的显示方向 l

4、ang属性：文档或文本的显示语言 version属性：说明支持的html标准的版本，在HTML4中已弃用，并用标记来代替.例： ,如yahoo5（2）标记标记功能：定义文档头区属性：dir, lang, profile结束标记：包含: head_content，如base、object、link、style、script、meta使用范围：html_tag6（3）标记标记功能：定义文档标题属性：dir, lang结束标记：包含: plain_text使用范围：head_content说明：此标记只能在head标记内出现. title的内容通常在浏览器的标题栏中显示. 浏览器中收藏夹内书签的名称

5、是title的内容. title的内容可以方便搜索引擎索引页面. 从搜索引擎搜索到的内容的标题往往是网页title的内容. 示例：当当7标记标记功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信息属性：meta属性主要分为两组属性主要分为两组 name属性与属性与content属性属性 name属性用于是以名称/值形式的名称描述网页,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description, keywords和robots. http-equiv属性与属性与content属性属性 http-equiv属性用于

6、提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-type charset 提供编码信息,refresh刷新与跳转页面,no-cache 页面缓存,expires网页缓存过期时间.结束标记：无使用范围： head_content8标记应用：标记应用：name属性与content属性组合定义网页关键词 阿里巴巴定义网页简短描述 定义搜索引擎索引要求 robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，n

7、oindex，nofollow，all，index和follow。sciencedirect9标记应用：标记应用：http-equiv属性与content属性组合 定义文件内容类型及编码信息 type的常见取值为application, audio, image, message ,multipart, text, video 示例：阿里巴巴Alibaba10 设置网页缓存过期时间 用法：说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。 注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。 11 定义页面缓存 说明:为了提高速度一些浏览器会缓存浏览者

8、浏览过的页面,通过上面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览. 重定向:刷新与跳转页面 12标记标记功能:定义基URL用于页面的链接与引用 属性:href,target结束标记:单独出现使用范围:head区href属性:当前文档的完整URLtarget属性:指定目标窗口或框架 网易说明:当使用相对路径定义链接时，可以使用base标记定义基URL解析所有文档中定义的相对路径的URL。 Our Products Have you seen our Bird Cages? 13其它常用其它常用head区标记区标记 :在文档中声明使用外部资源 阿里巴巴 :声明样式 ,用来创建CSS属性

9、，以控制整个文档主体内容的显示特性 :在文档中使用脚本 :定义浏览器输出非标准对象的方法,在网页中嵌入除图片外的多媒体 14标记标记 功能：定义文档主体 属性：控制文档外观的属性；将文档自身与其它可编程功能相联系的属性；标记和说明文档主体以供将来参考的属性 结束标记： 包含: body_content 使用范围：html_tag15注释标记注释标记: 描述文档的各个部分要做什么 解释为什么要这样编写某段代码 包含不想在文件中显示的信息 标示文件的禁用部分162.3.2 字符实体字符实体用于标识特殊字符：不可见字符和特殊用途字符格式格式： font-family:楷体楷体_GB2312使用使用C

10、SS方式方式 一级标题一级标题 .其他正文其他正文. 一级标题一级标题612.4.1 样式表定义语法样式表定义语法样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于.css文件中。基本结构为：Selectorproperty1:value1;property2:value2;property3:value3;Selector定义样式作用的对象，称为选择器，花括号中为样式声明块，其中property为CSS属性，value为属性对应的值，各样式声明之间用分号隔开。 H1 text-align:center; font-family:黑体选择器样式定义样式属性属性取值62常用常用Sele

11、ctor类型类型 HTML标记符 用户定义的类 用户定义的ID 伪类63HTML Selector不带尖括号的标记名作选择符 HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1text-align:center;color:red 使所有用H1标记符修饰的内容都居中和用红色显示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;ul,ollist-style-type:none;64选择符应用示例基本清单选择符应用示例基本清

12、单 New Port Richey The New Port Richey Dog Show Show Date: 7/31/2001 New Port Richey, FL Best In Show: CH Sarahs Razzle Dazzle (Yorkshire Terrier) Complete results Herding Group: German Shepherd Dog CH Sabre Dawn Toy Group: Yorkshire Terrier CH Sarahs Razzle Dazzle Sporting Group: Golden Retriever CH

13、 Chases Golden Chance Non-Sporting Group: Tibetan Terrier CH Winston of Sunny Brook Lane 65选择符应用示例基本清单代码运行页面选择符应用示例基本清单代码运行页面66标记选择符应用示例清单标记选择符应用示例清单. * font-family: Verdana . 67标记选择符应用示例运行结果标记选择符应用示例运行结果68Selector:用户定义类用户定义类 .classnameproperty:value 表示任何class属性为classname的标记符都采用所定义的样式。 类选择符的语法是在类名前面

14、加一个点号（.） 类是一种增强页面可管理性的出色方法，因为只需定义和修改样式表，就可以对站点的外观进行全面定义和修改。 69类选择符应用示例清单类选择符应用示例清单. font-family: Verdana td font-size: 10pt . 70类选择符应用示例运行结果类选择符应用示例运行结果71Selector:用户定义的用户定义的ID #idnameproperty:value 表示任何ID属性为idname的标记符都采用所定义的样式。 ID选择符的语法是在类名前面加一个#号（#） 用户定义ID与class的作用完全相同，但ID 在一个文档中应该是惟一的。 72ID选择符应用示例

15、选择符应用示例. font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic . 73ID选择符应用示例运行结果选择符应用示例运行结果74Selector:伪类伪类伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property: value（选择符:伪类 属性: 值）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（

16、伪类）的样式。 常用的伪类 :link 未访问过的超链接 :visited 访问过的超链接 :hover 悬停状态的超链接 :active 活动超链接75伪类选择符应用示例清单伪类选择符应用示例清单. * font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinshow color: red . 76伪类选择符应用示例运行结果伪类选择符应用示例运行结果77Selector:后代、子、同胞后代、子、同胞 CSS 不但允许根据元素名应用规则，

17、还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。 继承继承：嵌套的子对象（嵌套元素）继承外部元素或父元素的格式，除非子对象另有格式定义 后代：空格连接 子：大于号连接 同胞：加号连接78层次结构关系选择符应用示例清单层次结构关系选择符应用示例清单. font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinshow color: red :hover background-color: red . 79后

18、代后代同胞同胞802.4.2 样式引用样式引用n嵌入式样式嵌入式样式 ：内联引用n样式表样式表 全局样式表：全局样式表：内部引用 链接的格式页：链接的格式页：外部引用81嵌入式样式使用style属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记style=”单个或以分号分隔的若干样式声明（声明块）”样式声明:属性：属性值Listing 11-2This text is in a SPAN.This text is not in a SPAN.82全局样式表通过将样式表嵌入标记内的标记对内实现，控制文档中相应标记的样式标记的格式样式

19、表83Listing 11-7 H1 font-size: 16pt; font-weight: bold; color: red H2 font-style: italic; font-size: 24pt; color: green SPAN font-weight: bold; font-style: italic.adivheight:52px;width:145px :hoverbackground-color:red / /本文档悬停状态的超接链的背景色为红色本文档悬停状态的超接链的背景色为红色This text is in a SPAN.This text is in an H1

20、.This text is in an H2. /本块的高度为本块的高度为52px,52px,宽度为宽度为145px145pxHerding Group: Toy Group: This is modified H2 text./本块的高度为本块的高度为52px，宽度为宽度为145px84全局样式表示例85链接的样式表 以.css为扩展名的包含格式定义的文本文件，可用来控制若干个网页或整web站点的样式。使用方法为在文档的区使用标记引用： nH1 font-size: 16pt; font-weight: bold; color: red （styles.css）nH2 font-style:

21、 italic; font-size: 24pt; color: greennSPAN font-weight: bold; font-style: italicListing 11-8This text is in a SPAN.This text is in an H1.This text is in an H2.This is modified H2 text.import命令: 格式页包含命令，即在格式页中加载其它格式页86链接的样式表示例872.4.3 样式的优先级样式的优先级 样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。 样式如果冲突，则采

22、用高优先级样式；如果不冲突，则采用叠加的样式效果。882.4.4 CSS+DIV：模块化、结构化设计：模块化、结构化设计l模块化设计要求相对封闭独立性、可重复性、可修改性、统一性等 l结构化设计的意思是你需要分析网站的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 l仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 89我们通常采用DIV元素来将这些结构定义出来，例如： div id=“header”/div div id=“conte

23、nt”/div div id=“globalnav”/div div id=“subnav”/div div id=“search”/div div id=“shop”/div div id=“footer”/div 起类似作用的还有span,通常与类选择符、ID选择符一起使用例：新浪90新浪新浪DIV示例示例 91新浪样式表部分规则新浪样式表部分规则:导航栏导航栏(主莱单主莱单).logonav BORDER-RIGHT: #e0e0e0 1px solid; BORDER-TOP: #e0e0e0 1px; BACKGROUND: url(http:/ #f9f9f9 repeat-x 0

24、px -400px; MARGIN-BOTTOM: 8px; OVERFLOW: hidden; BORDER-LEFT: #e0e0e0 1px solid; BORDER-BOTTOM: #e0e0e0 1px solid; POSITION: relative; HEIGHT: 85px.logo LEFT: 10px; WIDTH: 145px; POSITION: absolute; TOP: 0px; HEIGHT: 52px.logo H1 LEFT: 13px; OVERFLOW: hidden; WIDTH: 117px; POSITION: absolute; TOP: 1

25、0px; HEIGHT: 42px.weather Z-INDEX: 98; LEFT: 6px; OVERFLOW: hidden; POSITION: absolute; TOP: 57px; HEIGHT: 20px.nav RIGHT: 0px; OVERFLOW: hidden; WIDTH: 790px; POSITION: absolute; TOP: 0px; HEIGHT: 85px.nav_2 FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block.nav_3 FLOAT: left;

26、 OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block.nav_2 DISPLAY: inline; BACKGROUND: url(http:/ no-repeat 106px -287px; MARGIN-LEFT: 3px; WIDTH: 107px.nav_3 WIDTH: 125px.nav UL CLEAR: both; HEIGHT: 23px.nav LI PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: url(http:/ no-repeat 0px -25

27、0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: -1px; LINE-HEIGHT: 14px; PADDING-TOP: 0px; TEXT-ALIGN: center.nav A COLOR: #000; TEXT-DECORATION: none.nav A:visited COLOR: #000; TEXT-DECORATION: none.nav A:hover COLOR: #c00; TEXT-DECORATION: none.nav A:active COLOR: #c00; TEXT-DECORATION: none92

28、新浪新浪导航莱单导航莱单DIV 932.4.5 CSS属性属性CSS盒模式盒模式CSS视觉格式模型视觉格式模型CSS视觉效果视觉效果CSS列表列表CSS背景背景CSS字体字体CSS文本文本CSS颜色颜色CSS听觉样式听觉样式CSS表格表格CSS翻页翻页(打印打印)UI(用户接口用户接口)CSS内容内容CSS自动计数自动计数CSS引号引号94CSS list-style-type属性值属性值disc:点 circle: 圆圈 square: 正方形 decimal: 数字 decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ., 98, 99 lower-roman: 小写罗马文字i, ii, iii, iv, v, etc. upper-roman: 大写罗马文字I, II, III, IV, V, etc. lower-greek: 小写希腊文字, , , . lo