HTML5和CSS3的新特性

lixian
329 阅读7分钟

HTML5新增的新特性

HTML5的新特性都存在兼容性的问题，在ie9+的版本才能使用。

HTML5新增了一些语义化标签

  1. heaeder标签---定义头部
  2. nav标签---定义导航栏
  3. article标签---定义内容的标签
  4. aside标签---定义侧边栏
  5. section标签---定义文档中的某个区域
  6. footer标签---定义尾部
    其实对我们写网页来说，他们就是一个普通的块级元素，可以就理解成一个div标签，他们真正的作用是有利于我们浏览器对我们页面的解析，这也是语义化的好处所在。如果没有这些语义化标签，我们通常是使用div来实现这些布局，但是div对我们浏览器来说没有任何语义，解析的时候并不知道我们这部分描绘的是什么内容。但是当你使用上语义化标签之后，浏览器就能很好的解析你的网页了。

语义化标签的缺点

兼容性，不兼容ie9及以下。处理方案就是将他们变成块级元素（display:block）语义化标签在移动端能大量使用，移动端没有兼容性的问题。

HTML5新增了一些多媒体标签

视频标签video

作用

在网页中插入video文件。他可以支持三种视频格式：mp4，webM，Ogg.其中mp4兼容性最好，所以建议使用mp4

属性

最重要的就src。视频的路径。autoplay控制自动播放。loop控制循环播放。

音频标签audio

作用

向网页添加音频文件。他也支持三种格式：mp3,Wav,Ogg.其中mp3基本兼容，建议使用mp3格式的音频文件。

属性

值得一提的是，谷歌浏览器把视频和音频的自动播放都禁止了。解决方案：视频的解决方案是muted=“muted”，音频的话，借助js.

HTML5新增了一些input标签的type类型。

作用

  1. 语义化，浏览器解析的时候，效果更好.
  2. 对我们输入的内容进行了限制和验证

重点类型

  1. tel 电话号码
  2. search 搜索框
  3. number 只能输入数字

HTML5新增了表单元素的新属性

  1. required
    代表该表单的值不能为空。必填。required="required"
  2. placeholder
    提示文字。可以通过input::placeholder修改样式。
  3. autofocus
    自动聚焦
  4. autocomplete 记录你之前提交成功的内容提示给你.
    默认开启on。关闭为off
    前提是表单元素有name属性。且成功提交过内容.
  5. multiple
    选择多个文件上传. <input type="file"/>默认是只能上传一个文件。添加multiple后就能多选了

css3新增的新特性

注意，css3新增的新特性也是存在兼容性的问题，只能适用于ie9+的版本

新增选择器

属性选择器

  1. input[attribute]
    必须存在某个属性的input元素
  2. input[attr^="val"]
  3. input[attr$="val"]
  4. input[attr*="val"]
    含有
    属性选择器，类选择器，伪类选择器权重都是10

伪类选择器

  1. :first-child
  2. :last-child
  3. :nth-child(n)
    n可以是数字，关键字，表达式等。
    1. 为数字的时候，选择特定child
    2. 为关键字的时候，关键字：even/odd even是偶数，odd是奇数
    3. 表达式的时候，此时只能用n作为未知数，不能用其他字母。n的取值范围是0到正无穷的整数。
      1. n 全选
      2. 2n-/+1 奇数child
      3. 2n 偶数
      4. 5+n 选择的是大于5的child
      5. 5-n 选择的是不大于5的child
  4. nth-last-child(n)
    倒序选择
  5. first-of-type
    选择某一特定类型的元素的第一个
  6. last-of-type
  7. nth-of-type
    这里n的用法同上面nth-child中的n的用法，也是三种取值
  8. nth-last-of-type
    倒序选择
    注意点：这里有个很重要的地方一定要弄懂，我在实际工作过程中也碰到过，实际上，nth-of-type选择器并不是类似jquery里面的eq那么的灵活。区别在哪呢？有个很关键的地方，就是nth-of-type选择器是按照子类的标签名进行编号的
    example
    实际的编号：
    1
    2 1
    3 2

    1 3

    2

所以当你使用div :nth-of-type(2)的时候会选择三个元素。
使用选择器的四种情况：

  1. :nth-of-type(2)
    前面没有任何的限定条件。去选择。那么就是取得每个类别的第二个元素
  2. tag:nth-of-type(2)
    选择第二个tag元素
  3. tag标签名.class类名:nth-of-type(2)
    ** 并不是我们理解的那样会选择第二个有class的tag元素。（$("tag.class :eq(1)")这是会的）而是会怎么做呢？他会去对应的tag元素里面找到第2个元素，再看他是不是有class，有就生效，没有作罢**
  4. .class:nth-of-type(2)
    就是每个按照tag分类编号的类里面（这里就是三类，span,div,p），去找第二个元素，看他有没有class，有就生效，没有作罢。

伪元素选择器

注意伪元素选择器，应该是双冒号（css3写法），css2中是写单冒号，过时写法。
好处：使用css创建元素，简化了HTML的结构
特点：

  1. 他们都能创建一个元素，这个元素默认是行内元素。
  2. 这个元素在dom树中是找不到的所以称为伪元素。

::before伪元素选择器

在元素内部的前面创建一个元素，这个元素是行内元素。
必须有content属性。

::after伪元素选择器

在元素内部的后面创建一个元素，这个元素是行内元素。
必须有content属性。
tips:伪元素选择器的权重和标签选择器是一个等级：1
example:

		<style>
	
	div 
	{
		width: 300px;
		height: 100px;
		background-color: aquamarine;
	}
div::before{
	content:"我";
	color:#f00;
}
div::after{
	content:"小猪佩奇";
	color:#00f;
}

		</style>
		<head>
		<body>
			<div>
			<span>是</span>
			</div>

</html>

就相当于，before给父元素首部添加了一个行内元素（类似prepend方法），after给元素尾部添加了一个行内元素（类似append方法）。他们是父子级的关系

伪元素选择器的重要用法

  1. 配合字体文件实现icon图标 实现的效果: 通过定位，确定位置，然后通过content决定他的内容，这个我工作过程中也见过不少。
  2. 实现遮罩层的效果
.mask::before{
content:"";
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(....,.4);
}
  1. 清除浮动
    本质上是添加一个空div清除浮动的变形写法。
div::after{
content:"";
width:0;
height:0;
display:block/table;
clear:both;
}

CSS3的盒子模型

CSS3可以通过box-sizing属性来设置盒子模型。

  1. content-box，默认值，也是原来的盒子模型。就是width=content，盒子实际的大小还得加上padding和border
  2. border-box， 新增的值，就是width=content+padding+border。

边框样式

border-radius

  1. 取值 px/%/em，注意这个和margin/padding一样都是一种复合写法代表了四个地方的值。border-top-left-radius ........顺序如图。
  2. 如果要画⚪的话是用width/2+border总长度。注意要包含border的长度。

背景样式

  1. background-size
    1. contain 包含，在图片比例不变的前提下，使任意一边填充整个元素。
    2. cover 覆盖 ，图片比例不变，但是完全覆盖元素，溢出部分不显示。
    3. 100% 100% 百分比。相对于要填充的元素
    4. px px 规定图片正好多大

字体样式

text-shadow

文字阴影（工作中遇到过）。
取值 x偏移量（required 正→负←） y偏移量（required 正↓负↑） 模糊距离（可选） 颜色（可选） h1{ text-shadow: 5px 5px 5px #FF0000;}

自定义字体

@font-face
工作中用到过,自定义字体类型。

@font-face
{
font-family:"...";
src:url(...);
}

计算宽度函数

calc函数，使用时，运算符前后要空格

过渡效果

transition,经常和我们的hover状态配合使用，使我们的属性变化没有那么突兀，而是一种动态效果。
transition:我们要实现动画效果的属性（必选） 动画时间（必选，单位：秒） 运动曲线（默认是ease，可选） 延时时间（可选，默认是0s）
注意点；

  1. 如果要对多个属性都添加过渡效果，用逗号隔开而不是再写个transition否则会覆盖。 div{transition:width 5s ease 0s,height 5s ease 0s}
  2. 如果所有属性都添加动画效果，就使用all关键字。
    div{transition:all 5s;}
  3. 谁的属性需要过渡效果就给谁添加transition属性
div{
width:100px;
transition: width 5s ease 0s;
}
div:hover{
width:200px;
}

2D转换

在二维平面中的变换

二维坐标系

平移效果(translate)

  1. 复合写法 {transform:translate(100px,100px)
  2. 分开写法 {transform:translateX(100px);}

注意：一个元素写多个transform属性肯定是覆盖的。
关于数值的几点细节：

  1. →＋←－ ↑－↓＋
  2. 可以使用百分比，相对的是移动元素的宽度/高度

几个移动元素的方式

  1. margin
  2. position定位
  3. translate

translate的优势在于他不会改变别的元素的位置。很关键。translate对行内元素不生效

水平居中和垂直居中的实现

通过绝对定位设置top50%，left:50%以及translate（50%,50%）可以实现元素的水平垂直居中。

rotate 旋转

div{transform:rotate(45deg)}
单位是deg，度数。正数代表顺时针，负数代表逆时针。
旋转的中心点默认是元素的中心点。

scale 缩放

  1. 综合写法，宽高都×n
    div{transform:scale(n);}
  2. 分离写法
    div{transform:scale(x,y)}

优势：

  1. 缩放不会影响其他盒子的布局。
  2. 可以设置任意的中心点。

设置中心点

ratate和scale都涉及到中心点的概念。 通过transform-origin属性可以设置中心点。
transform-origin:x y; x，y可以用%/方位名词（top,left,center....）/具体的数，默认值为50% 50% 中心点。

2d转换的综合写法

transform:translate() rotate() scale();空格分开，translate()要放到最前面，因为这个是按照先后执行的，如果先旋转会改变坐标轴，再平移就不是我们想要的效果了

浏览器的私有前缀

作用是为了兼容低版本的浏览器的样式写法，比如说这个border-radius，可能在新版的chrome中完全兼容，但是一些低版本的chrome就兼容不了，所以我们得兼容低版本的写法就是-webkit-border-radius 1.-moz- firefox的私有前缀 2. -ms- ie 3. -webkit- chrome safari 4. -o- opera

avatar
文章
阅读
粉丝