Web开发实用技术 HTML课件.pptVIP

*;学习要点 ;HTML基础与层叠样式单CSS ;第3章 HTML基础与层叠样式单CSS ;3.1 HTML基础;3.2 层叠样式单CSS;3.1 HTML基础;3.1.1 HTML文件基本结构; 首先文件中各个标记必须包含在HTML和/HTML之间，HEAD和/HEAD标记是网页头部标识，其中的浏览器窗口标题放在TITLE和/TITLE之间。所有需要在浏览器中显示的标记内容放在BODY和/BODY之间。 HTML文档基本标记演示范例 一个完整的HTML文档是由文档类型、HTML语言标记、头元素标记、网页标题标记、主体元素标记、注释标记组成。 HTML文档基本结构如表3-1所示。 ;表3-1 HTML文档基本结构 ;序号 ;序号 ;HTML页面HEAD元素中META标签介绍;(1) Content-Type和Content-Language (显示字符集的设定) ;(2) Refresh (刷新); 禁止浏览器从本地机的缓存中调阅页面内容。例如：; (6) Content-Script-Type(设置默认脚本语言) 通过Content属性为整个页面设置默认脚本语言。例如设为javascript语言： ;2．Name属性;(3) Robots (机器人向导);3.1.2 文本和格式标记;序号 ;序号; 3.1.3 超链接标记和表格标记超链接标记和表格标记如下表所示： ; 3.1.4 图像、视频与动画、声音处理标记 图像、视频与动画、声音处理标记如下表所示： ;序号; 3.1.5 控件标记 控件标记包括表单标记、按钮标记、文本框、文本区域、复选框、选项按钮、下拉框、文件下载、分组框等标记。它们的介绍如下表所示：;序号;序号;3.1.6 帧标记和IFRAME 标记;序号;3.2 层叠样式单CSS;3.2.1 CSS的特点;使用CSS带来两个方面的好处： （1）简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 （2）只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。;3.2.2 CSS的定义;3.2.3 CSS中的选择符; 本店经营各类毛绒玩具礼品、公仔、靠垫、挂件等等，支持批发零售，欢迎来样看样定做生产。为了赚人气，本店所有商品批发价销售，超低秒杀！虽然我们的信誉不高，但我们会以诚信为本，为您提供质高价廉的商品和优质的服务！祝您购物愉快！ 欢迎大家来逛逛【扬州五亭龙玩具总动员】?99; 具有上下文关系的HTML标记类选择符 ;用户定义的类选择符 ;　ID选择符 ; 虚类; 虚元素;3.2.4 CSS的使用方式 ; 外部样式表不能含有任何像HEAD或STYLE这样的HTML标记，仅仅由样式规则或声明组成，并且只能以.CSS为扩展名。 link标记放置在HTML文档头部，属性主要有rel，href，type，media。 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。同时，大多数浏览器会保存外部样式表在缓冲区，从而浏览时也减少了重复下载代码，避免了在展示网页时的延迟。;导入外部样式表;联入样式表 ;内联样式; 多重样式表的叠加;3.2.5 用CSS控制Web页元素的显示外观;控制颜色和背景属性 ; 方框属性 用于设置元素的边界(MARGIN)、边界补???(PADDING)、边框(BORDER)等属性值。使用方框属性的大多是块元素。 列表属性 用于设置列表标记(OL和UL)的显示特性。包括LIST-STYLE-TYPE、LIST-STYLE-IMAGE、LIST-STYLE-POSITION、LIST-STYLE等。;定位属性; 控制鼠标形状;滤镜 ;（2） BLUR滤镜 ;（3） DropShadow 滤镜 ;（4） GLOW 滤镜 ;（5） Chroma 滤镜 ;（6） FlipH与FlipV滤镜 ;（7） Wave 滤镜 ;（8） SHADOW 滤镜 ;（9） Mask滤镜 ;（10） LIGHT 滤镜 ;（11）GRAY 滤镜、INVERT滤镜、XRAY 滤镜;3.2.6 CSS应用实例;思考练习题