HTML5和CSS3 HTML5 html5优点:语义更加明确,便于浏览器解析;缺点:大部分标签只有Google和safari支持 新增的input类型(type属性值)email 内容必须是email类型 url 输入内容必须是完整的地址/域名 date 生成日期控件 time 生成时间控件 month 选择月份 week 选择哪年的第几周 number 输入内容只能是数字 search 可以输入有清除符号的内容 color 生成颜色选择表单元素 新增表单属性placeholder=“提示文本”,用placeholder时不用value multiple=”multiple“多选文件进行提交 required=”required“限制此项为必填项 autofocus=“autofocus”让光标自动聚焦到当前表单元素 autocomplete=“on/off”,输入的内容是否被记录,此项必须和name连用才能生效 新增多媒体标签1.video视频标签 <video src="视频地址“ ></video> autoplay=autoplay,视频自动播放,必须和muted连用 controls=controls,增加视频播放控件 loop=loop,循环播放 preload=auto/none,视频是否预加载,有autoplay时忽略preload src=视频地址 poster=加载画面图片地址 muted=muted,静音播放 width=视频宽度 height=视频高度 2.audio音频标签 controls=controls,显示音频播放控件 loop=loop,循环播放 src=音频地址 CSS3怪异盒子模型border-box大小为盒子width+height,使用box-sizing时padding和border不要超过盒子的宽高 属性选择器input[value]{样式} 选择具有value属性的input标签 input[type=“search”]{样式} 选择具有type属性的值等于search的input标签 input[type^="t"]{样式} 选择具有type属性的值以t开头的input标签 input[type$="ch"]{样式} 选择具有type属性的值以ch结尾的input标签 input[type*="e"]{样式} 选择具有type属性的值包含e的input标签 结构伪类选择器1.nth-child(n) 对父元素里所有子元素进行排序,先找第n个孩子,再找和子元素相匹配的选项 first-child父元素中第一个子元素 last-child父元素中最后一个子元素 nth-child(n) 选择父元素第n个子元素 n可以是数字、关键字、公式 2.nth-of-type(n) 对父元素里指定的子元素进行排序,先匹配子元素,再找是第几个子元素 first-of-type父元素中指定的第一个子元素 last-of-type父元素中指定的最后一个子元素 nth-of-type(n) 父元素中指定子元素的第n个 n可以是数字、关键字、公式 伪元素选择器before和after都可以创建一个元素,这个元素属于行内元素 新创建的元素在html中找不到 伪元素选择器和元素选择器一样权重都是1 css3过渡transition 要变化的属性,宽高等,如果全都要变填all 所用时间,单位是秒 变化运动曲线ease,是可省略的属性 linar匀速 eaes逐渐变慢 ease-in加速 ease-out减速 ease-in-out先加速后减速 开始的延迟时间,单位是秒,是可省略的属性
|