WEb开发之H5+CSS篇

WEb开发之H5+CSS篇

HTML新增布局和表单标签

新增语义化标签，兼容性问题

header 头部标签

nav 导航标签

article 内容标签

section 定义文档某个区域

aside 侧边栏标签

footer 尾部标签

注意：

• 这种语义化标准主要针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在IE9中，需要把这些元素转化为块级元素
• 比较适合移动端。

新增多媒体标签

音频：audio 支持格式（MP3/Wav/Ogg）

视频：video 支持格式（MP4/WebM/Ogg）

新增input类型

验证的时候必须添加form表单域

email Email类型 url URL类型

date 日期类型 time 时间类型

month 月类型 week 周类型

number 数字类型 tel 手机号码

search 搜索框 color 生成一个颜色选择表单

新增表单属性

属性 属性值 说明

required required 表示拥有该属性表示其内容不能为空，必填。

placeholder 提示文本 表单的提示信息，默认值不显示。

autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单。

autocomplete off / on 当用户键入时，浏览器基于键入值，显示出字段中填写的选项，默认 打开，关闭需放在表单内，同时成功提交

multiple multiple 可以多选文件提交。

CSS3新增特性

兼容性问题，IE9+才支持。

1. 新增选择器

   属性选择器 [ ]

   ​ 可以不用借助于类或者id选择器 input [ type ]

   ​ 可以选择属性=值的某些元素 input [ type=text ]

   ​ 可以选择属性值开头的某些元素 div [ class ^=icon ]

   ​ 可以选择属性值结尾的某些元素 div [ class $=data ]

   ​ 可以选择属性值中含有的某些元素 div [ class *=data ]

   注意：类选择器，属性选择器，伪类选择器，权重为0

   结构伪类选择器

   ：first-child 匹配父元素中的第一个子元素 ul li:first-child

   ：last-child 匹配父元素中的最后一个子元素

   ：nth-child（n） 匹配父元素中的第n个子元素 n可以是数字，关键字（even/odd）公式。

   ：first-of-type 指定类型元素的第一个

   ：last-of-type 指定类型元素的最后一个

   ：nth-of-type（n） 指定类型元素的第n个

   伪元素选择器

   利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

   ：：before 在元素内部的前面插入内容。

   ：：after 在元素内部的后面插入内容。

   注意：

   before和after创建一个元素，但是属于行内元素。

   新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。

   before和after必须有content属性。

   before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。

   伪元素选择器和标签选择器一样，权重为1.

   使用场景：字体图标。土豆视频。清除浮动。

      第一种
      .clearfix::after {
   
   ​      content: '';
   
   ​      display: block;
   
   ​      height: 0;
   
   ​      clear: both;
   
   ​      visibility: hidden;
   
   ​    }
   1.伪元素必须写的元素。
   2.插入的元素必须是块级。
   3.不要看见这个元素。
   4.核心代码清除浮动。
   5.不要看见这个元素
   

   第二种：
   .clearfix::before,
   
   ​    .clearfix::after {
   
   ​      content: '';
   
   ​      display: table;//转化为块级元素并在一行显示。
   
   ​    }
   
   ​    
   
   ​    .clearfix::after {
   
   ​      clear: both;
   
   ​    }
   

2. 盒子模型

   box-size来指定盒模型，有两个值，content-box，border-box。

   两种情况：

   ​ 1.box-size：content-box 盒子大小为width + padding +border（以前默认）

   ​ 2.box-size：border-box 盒子大小为width

3. 其他特性

   1.图片变模糊

   CSS3滤镜filter：（将模糊或者颜色偏移等图形效果应用于元素）

   filter：blur（5px）； blur模糊处理，数值越大越迷糊。 contrast / grayscale /hue-rotate / drip-shadow

   计算盒子宽度

   width：calc(100%-80%) 括号里面可以用+ - * /来进行计算。calc（100% -30px）

   2.CSS3过渡（谁变化给谁加）

   translation ：要过渡的属性 花费时间 （s） 运动曲线(ease减速) 何时开始(s)

   
   每日一句
   接受挑战，就可以享受胜利的喜悦。