前端学习 HTML5 CSS3提高

HTML5新特性   IE9+以上才支持

  1. 新增的语义化标签  头部
      导航栏
  2. 多媒体标签   谷歌浏览器把音频和视频自动播放禁止了
    1. 音频
    2. 视频
  3. 新增input类型   type="email"  "url"  "date"  "time"  "month"  "week"  "number"  "tel"  "search"  "color"
  4. 新增表单属性
属性 值 说明
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项默认已经打开,如autocomplete="on",关闭autocomplete ="off" 需要放在表单内，同时加上name属性，同时成功提交
multiple multiple 可以多选文件 
input::placeholder { //设置input中placeholder的颜色
    color: pink;        
}

CSS3的新特性  兼容性问题   IE9+才支持   移动端支持优于PC端

新增选择器      类选择器  属性选择器  伪类选择器  权重值为10

  1. 属性选择器
    语法 作用
    E[att] 选择具有att属性的E元素
    E[att="val"] 选择具有att属性值="val"的元素
    E[att^="val"] 选择具有att属性以val开头的元素
    E[att$="val"] 选择具有att属性以val结尾的元素
    E[att*="val"] 选择具有att属性包含val的元素
  2. 结构伪类选择器   根据文档结构来选择
    语法 作用
    E:first-child 父元素中第一个子元素E
    E:last-child 父元素中最后一个元素E
    E:nth-child(n) 第n个子元素E
    E:first-of-type 指定类型E第一个
    E:last-of-type 指定类型E最后一个
    E:nth-of-type 指定类型E第n个
    n可以是数字  关键词   公式(带n的公式,不能含有其他)    nth-child(n)    选择所有孩子   n从0开始 
    ul li:first-child  ul里第一个是li的孩子
ul :first-child    ul的第一个孩子
li:first-child   li父元素下的第一个li
section div:nth-child(1)   先选择第一个子元素后再看是否为div
section div:nth-of-type(n)    先选择div后选择第n个
  3. 伪元素选择器  可以利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML    ::before  在元素内部的前面插入内容   ::after 在元素内部的后面插入内容
    before 和after会创建一个元素,属于行内元素  在文档树中找不到   before和after中必须有content属性  为元素选择器和标签选择器一样 权重为1

CSS3盒子模型   border-box

通过 box-sizing来指定盒子模型   content-box  border-box

  1. box-sizing: content-box; 盒子大小为 width + padding + border(默认的)
  2. box-sizing: border-box;  盒子大小为width                  padding和borer不会撑大盒子(前提 padding 和 border 不会超过width宽度)

CSS3其他属性

CSS3滤镜  filter: 属性;   模糊 颜色偏移   filter: 函数();     filter: blur(5px);   数值越大越模糊

CSS3 calc函数    执行一些计算   width: calc(100% - 30px);   父盒子宽度-30px

CSS3过渡(重点)    经常和:hover  一起使用   口诀:谁做过渡给谁加

transition:  要过渡的属性(如果多个可以写all)  花费时间  运动曲线(ease默认)  何时开始 ;

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

广义HTML5    =   HTML5本身  +  CSS3   +   Javascript

模块化开发   common.css   版心宽度   清除浮动  页面文字颜色等公共模式

网站favicon图标  引入 

网站TDK三大标签SEO优化              SEO 搜索引擎优化    TDK:  title(网站标题  网站名 - 网站介绍)   description(网站说明)  keyword(关键词)

CSS3 2D转换   位移 旋转 缩放  transform

移动  translat

transform: tanslate(x,y); //或分开书写
transform: tanslateX(n);
transform: tanslateY(n);

重点

  1. 2D转换中的移动,沿XY轴移动元素
  2. 最大优点,不会影响到其他元素的位置
  3. translate 中的百分比是相对于自身元素的
  4. 对行内标签没有效果

相关

标签