HTML5和CSS3

h5

语义化标签

• 搜索引擎容易识别。
• PC端有兼容问题，常用于移动端。
  

多媒体标签

• video、audio
  • mp4/mp3(WebM、Ogg格式可能不兼容)。
  • src、auto、muted、loop、controls等属性。

input标签

• email, url, date, time, number, tel, search, color
• 自带简单的校验。

表单属性

• required必填, placeholder默认文本, autofocus获焦, autocomplete记录, multiple多选文件

  /*修改默认文本颜色*/
  input::placeholder {
  	color: pink;
  }
  

CSS3

• 属性选择器，权重为10。

  input[value=text]{}  /*权重为 1(标签选择器) + 10(属性选择器)*/ 
  div[class^=icon]{}  /*选择属性以icon开头的div标签*/ 
  div[class$=data]{}
  div[class*=icon]{}
  

• 结构伪类选择器，权重为10。

  /*选择父类的子元素*/
  ul li:first-child {}  /*先选择ul的第一个子元素，如果是li标签则选中，如果不是则不选。 */
  ul li:last-child {}
  
  ul li:nth-child(k) {}
  ul li:nth-child(odd/even) {}
  ul li:nth-child(n) {}  /*只能为n，且n从0开始，每次加1*/
  
  ul li:nth-of-type(n) {} /*先选择ul的所有li，再选择其中的第n个*/
  

• 伪元素选择器，权重为1。
  • 伪元素：before和after创建的一个 在文档树中找不到 的元素，属于行内元素。
  • 必须要有content属性。
  • 父元素:after,父元素.before
• 盒模型：box-sizing: border-box;
• 滤镜：filter: blur(5px);
• 计算函数：width: calc(100%-30px);
• 过渡：transition: 属性 过渡时间 曲线 延迟, ...;，常常和:hover连用。