HTML+CSS+JavaScript网站开发实用技术第2章.pptxVIP

第2章 静态网页制作—使用HTML技术 小结 2.1 HTML概述 HTML简介 HTML含义 HTML是英文Hypertext Markup Language的缩写，即超文本标记语言（或超文本标签语言），是用于描述网页文档的一种标记语言。 HTML历史 HTML3.2 W3C REC:1996.4 HTML4.0 W3C REC:1997.12 HTML4.01 W3C REC:1999.12 HTML5 2012年12月定稿 2.1 HTML概述 用记事本创建一个HTML文件 实例 HTML文档结构与书写规范 HTML文档结构如下。 html head …… /head body …… /body /html HTML文档 文档头 文档体 2.1 HTML概述 标记 HTML中用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“”括起来，比如html、head、body等，都是标记。多数标记必须成对出现，以开头无斜杠的标记开始，以有斜杠的标记结束。标记还可以嵌套使用。 属性 与标记相关的特性称为属性，每个属性总是对应一个属性值，将其称为“属性/值”对。“属性/值”对出现在开始标记的“”之前。 2.1 HTML概述 HTML文件的书写规范 标记要用尖括号括起来 成对出现 标记可嵌套 标记和属性名不区分大小写 空格或回车在代码中都无效 标记中不要有空格 属性值用双引号或单引号括起来。 2.1 HTML概述 建立HTML文件过程 实例 2.2 HTML页面修饰标记 2.2.1 传统HTML页面标记 2.2 HTML页面修饰标记 Demo0203.html Demo0204.htm 2.2 HTML页面修饰标记 2.2.2 HTML5改进的页面标记 在HTML5中，更加提倡使用CSS样式表控制网页的格式。使用CSS样式表可以实现更加丰富的网页效果，更加精确的控制网页格式，定义和使用CSS也有很多种方法。 2.3 列表 HTML还提供了列表，可以对网页文字进行更好的布局和定义。所谓列表，就是在网页中将项目有序或无序的罗列显示。HTML中有3种列表形式：有序列表、无序列表和自定义列表。 2.3 列表 有序列表ol 有序列表是一个项目的序列，各项目前标有数字表示顺序。有序列表的语法格式如下。 ol type= start= li列表信息/li li列表信息/li li列表信息/li …… /ol 属性值 说明 1 数字1、2…… a 小写字母a、b…… A 大写字母A、B…… i 小写罗马数字i、ii、iii…… I 大写罗马数字I、II、III…… 有序列表Type属性及说明 Demo0205.html 2.3 列表 无序列表ul 无序列表也是一个项目的序列，不用数字而采用一个符号标志每个项目。无序列表的语法格式如下。 ul type= li列表信息/li li列表信息/li li列表信息/li …… /ul 属性值 说明 disc 实心圆点（默认） circle 空心圆圈 square 方形 无序列表Type属性值及说明 Demo0206.html 2.3 列表 自定义列表dl 自定义列表不是一个项目的序列，它是一系列项目和它们的解释。自定义列表以dl标记开始，自定义列表项目以dt开始，自定义列表的解释以dd开始。 自定义列表的语法格式如下。 dl dt名称dd说明 dt名称dd说明 dt名称dd说明 …… /dl Demo0207.html 2.4 多媒体 多媒体是组成网页的重要元素，包括文字、图片、声音和动画等。虽然文字在元素中占有重要地位，但是图片、声音和动画也是不可缺少的，因为在网页中最能体现其特色效果的正是这些元素。 2.4 多媒体 图像标记img 在制作网页过程中，可以使用HTML代码中的img标记向网页中嵌入一幅图像，也可以使用CSS设置成某元素的背景图像。利用img标记插入图像是网页中最常用的图像插入方式。 属性名 说明 src 图像地址 alt 添加图像的替代文字 width/height 设置图像宽度/高度 border 设置图像边框 align 设置图像对齐方式 标记img的常用属性 2.4 多媒体 align属性值 说明 top 图像顶部与同行的文字或图像顶部对齐 middle 图像中部与同行的文字或图像中部对齐 bottom 图像底部与同行的文字或图像底部对齐 left 图像在文字左侧 right 图像在文字右侧 absbottom 图像底部与同行最低项的底部对齐，常用于netscape absmiddle 图像中部与同行最大项的底部对齐，常用于netscape baseline 图像底部与文本基准线对齐，常用于netscape texttop 图像顶部与同行最高项顶部对齐，常用于netscape