css、html新增特性

HTML新增特性

新增标签

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

这些是为了搜索引擎所设的，优化搜索引擎，可以多次使用。

多媒体标签

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

1.音频标签

语法：
<audio src="文件地址" controls="controls"></audio>

常见属性

属性	值	描述
autoplay	autoplay	音频自动播放
controls	control	展示播放控件
loop	loop	循环播放
src	url	音频地址

2.视频标签

语法:
<video src="文件地址" controls="controls"></video>

列如：

<!-- 基本所有浏览器都能兼容 -->
video width="320" height="240" autoplay="autoplay" mute controls>
        <source src="http://www3.res.meizu.com/video/91liangxiang.mp4" type="video/mp4">
        <source src="http://www3.res.meizu.com/video/91liangxiang.ogg" type="video/ogg">  
</video>

并且可以直接对video进行设置。

常见属性

属性	值	描述
autoplay	autoplay	视频自动播放
controls	control	展示播放控件
width	像素	播放器宽度
height	像素	播放器高度
loop	loop	循环播放
preload	auto（预先加载视频） none（不应加载视频）	是否加载视频 （如果有autoplay忽略该属性）
src	url	视频地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

新增input类型

新增input type属性值

属性值	说明
type=“email”	限制输入为Email类型
type=“url”	限制输入为url类型
type=“date”	限制输入日期类型
type=“time”	限制输入时间类型
type=“month”	限制输入月类型
type=“week”	限制输入周类型
type=“number”	限制输入数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

样例：

<ul>
   <li>邮箱：<input type="email"></li>
   <li>网址：<input type="url"></li>
   <li>日期：<input type="date"></li>
   <li>月期：<input type="time"></li>
   <li>数量：<input type="number"></li>
   <li>手机号码：<input type="tel"></li>
   <li>搜索：<input type="search"></li>
   <li>颜色：<input type="color"></li>
   <li>月：<input type="month"></li>
   <li>日：<input type="week"></li>
   <!-- 一个提交控件，验证表单作用 -->
   <li><input type="submit" value="提交"></li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XrCSnuZZ-1641886057827)(img\input.png)]

新增input表单属性

属性	值	描述
required	required	表单内容不为空，必填
placeholder	提示文本	表单提示信息，存在默认值将不显示，可以通过 ::placeholder{}修改里面的字体样式。
autofocus	autofocus	自动聚焦
autocomplete	off/on	记录输入历史，下次输入时显示，默认打开，需要放在表单内，同时加上name属性并且成功提交。
multiple	multiple	多文件提交

css3新特性

新增选择器

1.属性选择器
利用属性选择器可以不借助类或者id选择器选择内容

选择符	简介
E[alt]	选择具有alt属性的E元素
E[alt=“val”]	选择具有alt属性且属性值等于val的E元素(主要应用)
E[alt^=“val”]	匹配具有alt属性且值以val开头的E元素
E[alt$=“val”]	匹配具有alt属性且值以val结尾的E元素
E[alt*=“val”]	匹配具有alt属性且值中含有val的E元素

例如
css代码

       input[value]{
        color: pink;
    }
    input[type="text"]{
        color: red;
    }
    div[class^=one]{
        color: purple;
    }
    section[class$=txt]{
        color: blue;
    }
    section[class*=next]{
        color: green;
    }

HTML代码

<input type="email" value="123"><br>
<input type="number"><br>
<input type="text" name="" id=""><br>
<input type="password" name="" id=""><br>
<div class="one1">123</div>
<div class="one2">123</div>
<div class="one3">123</div>
<div class="one4">123</div>
<div>123</div>
<section class="one1-txt">123</section>
<section class="one2-txt">123</section>
<section class="o-next-t">123</section>

2.结构伪类选择器

命令	描述
：first-child	匹配第一个子元素
：last-child	匹配最后一子元素
：nth-child（）	按正序匹配特定子元素 even 所有偶数行子元素/odd 所有奇数行子元素 n 从零开始每次加1,必须输入的是n,或者用n构成的公式,不能输入其他字母.
：nth-last-child（）	按倒序匹配特定子元素
：nth-of-type（）	在同类型中匹配特定子元素
：nth-last-of-type（）	按倒序在同类型中匹配特定子元素
：first-of-type	匹配第一个同类型子元素
：last-of-type	匹配最后一个同类型子元素
：only-child	匹配唯一子类型
：only-of-type	匹配同类型的唯一子元素
：empty	匹配空元素

E：nth-child（n）会把所有的盒子都排列序号（序号固定），先找到第n个孩子，然后再看是否和E匹配

E：nth-of-child（n）会把指定的元素盒子排列序号，先去匹配E，然后再根据E 找到第n个孩子

3.伪元素选择器

利用css创建新的标签，而不是html创建新的标签

选择符	描述
：：before	在元素内部的前面插入内容
：：afte	在元素内部的后面插入内容

before和after创建一个元素，但是属于行内元素，必须有content属性。
css代码

       div{
           width: 100px;
           height: 100px;
           background-color: red;
       }
       div::before {
           display: inline-block;
           content: "我";
           width: 30px;
           height: 30px;
           background-color: blue;
       }

       div::after {
           display: inline-block;
           width: 30px;
           height: 30px;
           content: "人";
           background-color: wheat;
       }

html代码

<div>是</div>

伪元素选择器和标签选择器一样，权重为1，类选择器 属性选择器 伪类选择器的权重都是10，选择器选择时是从右往左走匹配选择的方式。

css3盒子模型

css3通过box-sizing来指定盒模型.
分为两种情况:

1.box-sizing:content-box 盒子大小=width+padding+border

2.box-sizing:border-box 盒子大小=width(前提padding和border不会超过width宽度)

其他属性

滤镜filter: filter:函数()

列如:filter:blur(数值) 数值越大模糊程度越高,数值加单位.

calc函数:width:calc(100%-数值px)
ontent-box 盒子大小=width+padding+border

2.box-sizing:border-box 盒子大小=width(前提padding和border不会超过width宽度)

其他属性

滤镜filter: filter:函数()

列如:filter:blur(数值) 数值越大模糊程度越高,数值加单位.

calc函数:width:calc(100%-数值px)