html_css_javascript讲义教材.ppt

*;HTML语法标记;Html文档结构;head中的常用标签;body;锚点标签--a;链接标签--a;路径问题;URL URI URN;分隔线--hr;标题字体大小--h#;字体设置; 设置文字显示; 特殊字符;文字的布局;水平对齐 align;垂直对齐 valign;图片;表格—重点掌握;表单—重点掌握;表单基础--form;位于表单中的输入标签;表单中的输入标签;select;button;框架;链接、表单与框架;*;HTML5简介;学习内容; 语义化的标签; 常用的新标签列表; 增强的表单控件;微数据  Microdata;离线存储 Offline Storage; 内置数据库 Indexed DataBase;应用缓存 application cache;拖拽与拖放与文件处理 drag and file;连接 WebSocket;多媒体 audio and video; HTML5 video - 方法、属性以及事件; audio 标签的属性;HTML画布;性能与集成 XMLHttpRequest 2;其他;*; 本章主要内容;基础知识;基础知识; 基础知识;CSS概述;head style type=text/css h2{color:red;font-size:46px;font-family:宋体} #p1{text-indent:10px;background:blue;font-family:黑体} p{text-indent:20px;background:green;font-family:黑体} /style /head body h2通过样式表来改变网页外表/h2 p id=p1欢迎来到CSS世界/p pcss给我们带来丰富多彩的世界/p /body; 实例1;CSS的优势; CSS作用;CSS基础语法; 注意事项;如何使用CSS?;如何使用CSS?;如何使用CSS?;应用次序; CSS选择器;CSS选择器; CSS选择器; CSS选择器;CSS选择器; CSS选择器;主要属性;盒子模型 Box Model;盒子模型概述;盒子模型概述;盒子模型的四个要素;margin: margin-left/margin-right/margin-top/margin-bottom padding: padding-left/padding-right/padding-top/padding-bottom;Demo2 理解盒子模型;Demo2 ; 边框 border; 边框样式 border-style; ;Demo3 ;内边距 padding;设置内边距(填充)的大小;外边距 margin;设置margin的大小; 盒子大小的计算;盒子大小的计算-续;Example2;注意：;盒子外边距合并;合并前; 发生嵌套时,若未设父元素的边框和填充,父元素的上下margin会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，不存在叠加的问题。;合并后;行内元素之间的水平margin不会叠加;盒模型总结;盒模型总结;盒模型总结-续;浏览器的怪异模式与标准模式;怪异模式与标准模式-续;问题;CSS重点和难点-定位与浮动;首先，得把浏览器窗口看成一个坐标系统;(一) 块元素与行元素;1、每个块元素都独占一行;行元素则在一行内显示; 2、可以利用元素的display属性进行转换； 3、块元素一般用作容器,可以容纳其他块元素和行元素,而行元素只能容纳文本或者其他行元素; 4、行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度；;文档流 normal document stream;相对定位 position:relative;绝对定位 position:absolute;绝对定位;相对定位与绝对定位的比较;浮动;浮动本质上是用来干什么的？;浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素或另一个浮动元素的边框为止。 由于浮动元素不在文档的普通流中，所以普通流中的块框表现得就像浮动元素不存在一样,将忽略该元素并填补他原先的空间。 浮动主要用于实现文字环绕图片以及页面布局。;例1.框1向右浮动;例2.框1向左浮动;例3 .全部向左浮动;例3，全部向左浮动;关于文字行和清理;浮动框清理; ;Code：;解决：;关于float的注意事项：;综合示例;CSS注意事项、技巧;注意事项与技巧-续; 注意事项与技巧-续;具体应用技巧;关于路径;表单各控件样式;CSS优先权规则;例如：;*;CSS3简介;边框 border;圆角边框 border-radius;边框阴影 box-shadow;背景 background;背景图