1、HTML5+CSS简介主讲： 毛丽娟毛丽娟Email： MaoLQQ： 772896740内容大纲1. HTML5简介2. CSS入门3. CSS3新特性HTML5的发展历程2014年年 W3C提前定稿提前定稿HTML5的 变化 标签的变化 新增语义标签，如： 新增表单标签和属性 删除一些旧的标签和属性HTML5的 变化 新增一些特性：1. canvas 2. 音频与视频3. GeoLocation4. WebGL5. WebSocket6. 本地存储7. 离线应用程序音频标签一、 audio标签为适应不同的浏览器，可以使用 引进同一个音频的不同格式。二、 audio的重要属性1.contro
2、ls 2.autoplay3.loop4.preload:none、 auto、 metadata（音频元数据，例如时间长）三、音频格式和浏览器支持格式 浏览器.ogg FireFox 3.5+ chrome 5+ Opera 10.5+.mp3 Safari 5+ chrome 6+ IE 9+ ios.wav FireFox 3.6+ chrome 8+ safari 5+ opera 10.5+.aac ios 3+ chrome 5+ safari 3+ IE9+ android 2+.mp4 Safari 3+ chrome 5+ IE9+ ios3+ android 2+音频格式视
3、频 video标签 ：视 频格式和浏览器支持格式 浏览器.ogg FireFox 3.5+ chrome 5+ Opera 10.5+.mp4/H.264Safari 3+ chrome 5+ IE 9+ ios android 2+.webm FireFox 4+ chrome 6+ Opera11+IE9+ android 2.3+ video的重要属性1.controls 2.autoplay3.loop4.preload 5.src6.width 7.heightWebGL示例 http:/ web页面 =结构 +表现 +行为 层叠样式表 (Cascading Style Sheets
4、) 把样式添加到 HTML 中，是为了 解决内容与表现分离的问题 外部样式表 可以极大提高工作效率CSS选择器的语法构造selector property: value； CSS常用选择器 标签选择器divbackground-color:red; 类别选择器.myClassbackground-color:yellow;CSS常用选择器 ID选择器#myIdbackground:black;CSS选择器示例 标签选择器h1color:red;font-size:25px;类别选择器.redcolor:red;font-size:23px; 使用方法： 段落 red是类名，由用户自定义ID选择
5、器#boldfont-weight:bold; 使用方法： id使用 注意： id选择器以 #开头声明。 ID在整个页面中必须是唯一的，因为 ID选择器一般要与 javascript相结合，对 ID进行查找，如果不唯一，则会出现错误，就像在数据库中ID设为主键时必须唯一一样。在 html中如何使用 CSS？1. 内嵌式2. 链接式链接式：将 html页面本身与 css样式风格分离为不同的文件，实现了页面框架 html代码与美工 css代码的完全分离。 页面标题 CSS标题 这是正文内容 CSS标题 这是正文内容 CSS定位方式简介1. 浮动定位2. 相对定位3. 绝对定位理解 “盒子 ”概念b
6、ordermarginpadding盒子构成contentpadding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomwidthheight盒子的主要属性 外边距属性 内边距属性 边框属性 width属性 height属性注意不同的属性简写形式。注意不同模式下的意义区别。盒子属性的书写形式 边距属性margin-left、 margin-rightpadding-top、 padding-bottom border属性方向： boreder-left、 border-right、 border-top、 bord
7、er-bottom子属性： border-width、 border-color、 border-style盒子在标准流中的定位原则盒子在标准流中的定位原则 行内元素之间的水平 marginspan1 span2margin-right margin-left当两个行内元素紧邻时，它们之间的距离为第 1个元素的margin-right加上第 2个元素的 margin-left。盒子在标准流中的定位原则 块级元素之间的竖直 margindiv1margin-bottomdiv2margin-topdiv1div2Max(margin-bottom,margin-top)margin的 “塌陷 ”现象
