css3新增属性和html5新增标签的出现和意义

最新推荐文章于 2024-06-30 23:48:24 发布

新椅子

最新推荐文章于 2024-06-30 23:48:24 发布

阅读量1.4k

点赞数 40

文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/2302_80152806/article/details/136310301

版权

HTML新特性

新的标签，表单，表单特性（伴有兼容性问题，IE9+）

html5 新增的语义标签

header:头部标签

nav:导航标签

article:内容标签

section:定义文档某个区域

aside:侧边栏标签

footer:尾部标签

注意：针对于搜索引擎 / 可使用多次 / 转换为块级元素 / 移动端爱使用

html5 新增的多媒体标签

浏览器支持情况不同。

谷歌浏览器把音频和视频自动播放禁止了

视频<video>

尽量使用mp4格式，还有WebM,Ogg

其是重点，经常设置自动播放，不用controls

音频<audio>

尽量使用mp3格式，还有Wav ,Ogg

音频不可以通过muted属性来静音播放

html5 新增的input表单

我们验证的时候必须添加form表单域，当我们点击提交按钮就可以验证表单

html5 新增的表单属性

css新增选择器的出现

以前需要特意的给每个元素加ID或另外起类名指定样式当类名写的过多的时候就会导致代码冗长，复杂，不易操作，在之后回顾页面的时候忘记很多类名的作用，效率低下，此时需要一个方便快捷的选择器能通过多个相似元素之间的细微不同来选择，由此，新增的选择器出现了。

首先当我们设置两个相同的元素时候

```

<input type="password" value="please">

<input type="password" >

```

按照以前的做法需要给第一个或者第二个span加类名或者ID，减弱了代码的效率。

属性选择器的意义

例如，只需要选择具有特殊属性的元素（如第一个input具有value而第二个没有）

```

input[value] {

font-size: 16px;

font-weight: 18.6667rem;

}

```

除此之外当需要选择目标元素是多个具有相似类名的元素中时，只需

```

<div>

<span class="middle1"></span>

<span class="middle2"></span>

<span class="middle3"></span>

<span class="middle4"></span>

</div>

```

span[class^=midd] {

width: 300px;

}

```

以此类推，当多个元素类名相似时候，只需要在选择器里面选中以XX开头或以XX结尾或含有XX就可以更改样式。

由以上两个例子可以发现，属性选择器的意义是即可以用合并同类项的方法来实现元素的统一命名，也可以利用元素具有的特殊属性来选出。

结构伪类选择器的意义

当父元素包含看多个相同类型的子元素时，结构伪类选择器可以根据文档类型来选择元素。

```

<nav>

<div></div>

<nav>

```

nav div:nth-child(2) {

height: 400px;

width: 300px;

background-color: paleturquoise;

}

```

1，可以在nth-child（n）中包含数字，公式，关键字等，增加了元素选择的灵活性，例如用-n+3表示前三个子元素，增加元素选择的批量性，节省时间。

2，当父元素中包含多个类型的元素是可以用nth-type-of（n）与nth-child（n）区分使用，提高准确性。

伪元素选择器的出现

当想在父盒子里面嵌套子盒子时候多个子盒子的嵌套难免导致代码混乱，为解决这种问题伪元素选择器出现了。

伪元素选择器的意义

当我们只想在一段文字去前面插入一个字体图标时，只需给子盒子前面加一个伪元素选择器

```

span::after {

font-family: 'icomoon';

font-size: 100px;

color: rgb(0, 242, 255);

}

```

还可以用于清除浮动

```

.clearfix::after {

content: '';

display: block;

height: 0;

clear: both;

visibility: hidden;

}

```

解决了代码混乱的问题，避免过多子盒子嵌套进去。是代码更简洁。

使清除浮动时候可以在盒子前面加入before和after刚好的确保盒子不会露出。算是额外标签发方法的优化和升级。

<div>

<span></span>

</div>

<div>

<span></span>

</div>

<div>

<span></span>

</div>

css3盒子模型

在没有学习css3盒子模型之前，当给盒子指定padding值之后，内容和边框有了距离，添加了内边距，但padding影响了盒子实际大小。盒子有宽度和高度，再指定内边距，会撑大盒子。我们可以用css3盒子模型来解决这个问题。

通过box-sizing来指定盒模型

box-sizing：content-box

表示盒子大小为width+padding+border

（添加padding值之后改变了盒子大小）

box-sizing:border-box

表示盒子大小为width

（添加padding值之后不会再撑大盒子，盒子大小固定为width）

css3盒子模型的出现，为我们编辑盒子内部提供了更简便的方式，不用再去计算加入padding之后盒子的大小，节省时间提高效率。

<style>
    * {
        box-sizing: border-box;
    }

    div {
        width: 200px;
        height: 200px;
        color: aliceblue;
        background-color: black;
        border: 5px solid pink;
        padding: 20px;
    }
</style>
</head>

<body>
    <!-- 盒子大小为width:200px -->
    <div>123456</div>


</body>

css3其他特性

css3滤镜

filter将模糊或颜色偏移等图形效果应用于元素

filter：函数（）；

如：blur模糊处理（数值越大越模糊）filter：blur（5px）

<style>
   img {
      filter: blur(18px);
      width: 1000px;

   }

   img:hover {
      filter: blur(0px);
   }
</style>
</head>

<body>
   <img src="images/my.jpg" alt="">

</body>

calc函数

在声明css属性时执行一些计算

如：width：calc（100%-80px）

括号中可以使用+ - * /来计算

<style>
   .one {
      width: 500px;
      height: 500px;
      background-color: blue;
   }

   .two {
      width: calc(100% - 100px);
      /* 保证比父盒子one少100px */
      height: 500px;
      background-color: yellowgreen;
   }
</style>
</head>

<body>
   <div class="one">
      <div class="two">
      </div>
   </div>

过渡transition

当元素从一种样式变换为另一种样式时为元素添加效果

经常和：hover一起搭配使用

谁做过渡给谁加

transition：	要过渡的属性花费时间运动曲线何时开始
属性	宽度高度背景颜色等属性 all可以将所有的属性都变化过渡
花费时间	单位：秒（s）如：5s
运动曲线	ease（默认）：以低速开始，然后加快，结束前变慢 linear：匀速 ease-in：以低速开始 ease-out：以低速结束 ease-in-out：以低速开始和结束 steps：指定间隔数量（步长）
何时开始	单位：秒（s）

<style>
   .one {
      width: 500px;
      height: 500px;
      background-color: blue;
      transition: all 5s linear 1s;
   }

   .one:hover {
      width: 800px;
      height: 800px;
      background-color: aqua;

   }
</style>
</head>

<body>
   <div class="one">

   </div>

</body>