HTML5 和CSS3

 

能够说出3~5个HTML5新增布局和表单标签 能够说出CSS3的新增特性有哪些

HTML5 新增特性主要是针对以前的不足，增加了一些新的标签、新的表单 和新的表单属性等 新特性都有兼容性问题，IE9+以上版本浏览器才支持，如果不考虑兼容性问题 在移动端，可以大量使用 以前布局，基本用div做，div对于搜索引擎来说没有语义 header 头部标签  nav 导航标签  article内容标签  section定义文档某个区域  asdide侧边栏标签 footer 尾部标签    大量的文字可以用 article   section就是大号的div   还是没搞懂 article  section  aside用在哪里 注意： 语义话标准主要针对搜索引擎的    这些新标签页面中可以使用多次 在IE9中，需要把这些元素转换为块级元素   其实，我们移动端更喜欢使用这些标签   1.2HTML5新增的多媒体标签 新增的多媒体标签有两个  音频audio  视频videp（尽量使用MP4格式） 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件 视频语法  <video src="地址" controls="controls"></video>    controls 播放组件，iE和其他浏览器的播放组件不同需学JS解决 muted是让谷歌浏览器可以自动禁音播放 配合autoplay  loop循环播放   poster等待视频时显示图片    兼容性问题 source  如果不支持MP4格式 就用ogg格式   HTML5新增的input类型  重点记住：number tel search     HTML5新增的表单属性 重点：placeholder  multiple    search 搜索框  name（提交时记录需要用到name 暂时没懂）   required 内容不能为空  placeholder 提示文本   autofocus自动获得焦点   autocomplete:（需要用到name）以前输入的内容正确提交后会记录下来 默认on    type="file" 通过这个可以上传文件  multiple="multiple" 上传可以多选文件提交 样式里： input::placeholder{color:red;} 伪元素改变提示文本的字体颜色   CSS3的现状 有兼容问题，ie9+才支持 移动端支持优于PC端 现阶段主要学习新增选择器  盒子模型  其他特性 CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素   1、属性选择器  2、结构伪类选择器  3、伪元素选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器        属性选择器   input元素的value属性 记得用中括号      属性选择器 还可以选择 元素[属性=值] 更细化选择元素    重点**         div[class^=icon] 选择属性值开头的某些元素　　 div权重1  []中括号里面的权重10 共11 section[class$=data]  选择属性值结尾的某些元素   类选择器、属性选择器、伪类选择器 权重为10。   结构伪类选择器 结构伪类选择器主要根据文档结构来选择元素， 常用于根据父级选择器里面的子元素    结构伪类选择器 nth-child(n) 选择某个父元素的一个或多个特定的子元素 n可以是数字，关键字和公式 n如果是数字，就是选择第n个子元素，里面数字从1开始... n可以是关键字：even偶数，odd奇数 ul li:nth-child(odd)   ul li:nth-child(even) n可以是公式： 常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略） ol li:nth-child(n){background-color: pink;}  如果共8个li ，8个都选择上。（感觉和 ol li 没区别啊） 公式 ： nth-child(2n)偶数 ，  nth-child(2n+1)奇数   ， nth-child(5n)  5 10 15 ，   n+5  5以后的元素都选择上 ，  -n+5  n从0开始 -1 -2 -3... （倒选）  nth-child 会把所有的盒子排列序号    先看:nth-child(1)  对应光头强的位置  再看div 发现和P不匹配就不执行了   nth-of-type 会把指定元素的盒子排列序号 ，  执行先看 div指定元素， 再看nth-of-type 第几个孩子 section div:nth-of-type(1){background-color:blue;}  这个就能选中div的熊大了   ul li:first-of-type{bac-color: pink;}　　第一个li选择上 ul li:last-of-type{bac-color: pink;}  最后一个li选择上 ul li:nth-of-type{n}   伪元素选择器 ::before  在元素内部的前面插入内容 ::after  在元素内部的后面插入内容   伪元素选择器使用场景1: 伪元素字体图标      伪元素选择器使用场景2: 仿土豆效果    tudou设置宽高  　照片跟父元素宽高100%    .tudou伪元素 宽高100% 子绝父相 定位可以重叠     伪元素选择器使用场景3 ：伪元素清除浮动    CSS3中可以通过 box-sizing 来指定盒模型， 有2个值：即可指定为 content-box、 border-box，这样我们计算盒子大小的方式就发生了改变 1、box-sizing：content-box盒子大小为width + padding + border 2、box-sizing: border-box 盒子大小为width   使得padding 和 border不会撑大盒子了   CSS3其他特性 1、图片变模糊 2、计算盒子宽度width: calc函数 CSS3滤镜filter： filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 filter: 函数();   例如:   filter: blur(5px);  blur模糊处理  数值越大越模糊     calc函数:  width: calc(100%-30px);  子盒子永远比父盒子少30px  括号里面可以使用 + - *  / 来进行计算   CSS3过渡（重点） 我们现在经常和 :hover一起 搭配使用  transition ：要过渡的属性   花费时间  运动曲线  何时开始；后两个值可以省略 transition： width 1s, height 1s； transition: all 1s;   过渡练习 进度条 父盒子宽高， 子盒子宽是父的50%  :hover    transition : width 0.5s;   logo左右移动     字体强制不换行 white-space: nowrap;    超出隐藏overflow: hidden;   子绝父相定位  过渡transition   :hover 父 宽高 相对定位  超出隐藏    子 icon字体   强制不换行拉开距离  过渡transition  绝对定位