HTML5

一、HTML5简介

HTML5是html的最新的标准（版本）

• 浏览器支持：ie9+对html5新特性部分支持，新的主流浏览器（chrome、火狐\safari）

• 向前向后兼容，语法变化：

  • 标签可以自动闭合

  • 属性值可以省略引号

  • 属性值和属性名相同，可以省略属性值

  • 引入样式表link标签可以省略type

• *增加了语义化标签、智能表单、音频视频（多媒体）、canvas绘图、svg矢量图、地理定位、web存储

• 删除掉一些标签

二、新增语义化标签（结构化标签-块级）

• 1、header标签

定义整个网页的头或者是某个模块的头部，一般放顶部导航、logo、标题、搜索栏等

• 2、footer标签

定义整个网页的底部或者是某个模块的底部，一般放版权信息，联系方式，底部导航等。

• 3、main标签（ie不兼容，不建议用）

定义整个页面的主体部分，建议只使用一次

• 4、article标签

定义页面中独立的文章区域：博客，新闻，评论…

• 5、nav标签

定义各种导航：顶部导航，底部导航，侧导航，翻页导航，路径导航等

• 6、section标签

定义页面内容的分区或者文章的分节，一般section里面由标题和内容组成

• 7、aside标签

定义和主题内容相关性不大的内容，比如侧边栏广告，推荐，侧边栏导航等

• 8、hgroup标签

定义标题组，把主标题和副标题组合在一起

• 9、figure标签

定义文章或者模块中独立的图片、图表、照片等
一个figure可以包含多个图片

• 10、figcaption 标签

和figure搭配使用，为图片提供标题
一个figure只能包含一个figcaption标题

三、其他标签

1、time标签

定义时间，行内标签

   <p>今天是<time datetime="2020/4/1">愚人节</time></p>   //如果不是直接包含的时间字符串，需要用datetime属性给time标签定义具体的时间<p> 双十一开抢时间<time>2020/11/11 11:11:11</time></p>  // 如果time标签之间写的是具体的时间，就不需要加datetime属性

2、mark标签

定义带标记的文本(高亮显示)，行内标签

四、兼容处理

因为新的语义化标签在ie低版本中会解析错误，样式布局不能正常展示

• 解决方法

• 方法一

  1、通过js创建新增的标签

   document.createElement('header');document.createElement('footer');document.createElement('nav');...
  

  2、把结构化标签转换成块级

   header,footer,nav...{display:block;}
  

• 方法二

  引入html5shiv.js插件 引入html5shiv.js插件链接

    <!--[if ie]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script><![endif]-->

五、表单新特性

1、新增的表单元素

   1. color类型 ：颜色选取框<input type="color" name="color"> 2. datetime类型：日期输入框 <input type="datetime" name="datetime">3. datetime-local类型： 本地日期时间输入框(年/月/日 小时：分钟)，自带日历操作控件，可输入可选择，格式比较规范 <input type="datetime-local" name="datetime-local">4. date类型： 日期输入框（年/月/日），自带日历操作控件，可输入可选择，格式比较规范<input type="date" name="date">5. month类型： 月份输入框（年/月），自带日历操作控件，可输入可选择，格式比较规范<input type="month" name="month">6. week类型： 一年中的第n周，自带日历操作控件，可输入可选择，格式比较规范<input type="week" name="week">7. time类型：输入时间（小时：分钟） ，可以输入和使用箭头加减<input type="time" name="time">8. email类型：输入邮箱格式的字符串，内置了邮箱格式规则验证<input type="email" name="email">9. number 类型：输入数字，无法输入数字以外的字符，在移动端自动调出数字键盘<input type="number " name="number ">10. tel类型： 输入电话, 没有规则验证，可以输入任意字符<input type="tel " name="tel">11. url类型： 输入网址格式的字符串，内置了网址格式规则验证<input type="url" name="url">12. search类型： 搜索输入框，自带快速清空内容的 “×” 号 <input type="search" name="search">13. range类型： 获得一个数值，在一个范围内用滑块去操作<input type="range" name="range">14. datalist标签：专门给输入框提供选项列表<input type=" datalist" name=" datalist">

• list属性用来绑定对应的列表

   <input type="text" list="list1"><datalist id="list1"><option value="AA">aa</option><option value="BB">bb</option><option value="CC">cc</option></datalist>

2、新增属性

• 1、list属性：用来给输入框绑定对应的列表

• 2、min、max属性：分别定义number或者range类型的最小值和最大值

• 3、step 属性：用来定义number或者range类型的加减步长

   <input type="number" min="0" max="10" step="2">

• 4、required 属性 ： 把表单元素设置位必填项

   <input type="text" required>

• 5、pattern 属性：用来定义表单输入的内容的规则

   <input type="tel" pattern="1[356789][0-9]{9}" name="tel">

• 6、placeholder属性： 给输入框定义提示占位符，当输入内容时消失，输入框为空的时候显示有value就不会显示

   <input type="text" placeholder="请输入。。。">

• 7、autofocus 属性: 设置表单元素自动获得焦点,一般只能设置一个自动获得焦点的元素

   <input type="text" autofocus>

• 8、autocomplete 属性：设置表单元素的自动补全功能，on表示开启，off表示关闭

   <input type="text" autocomplete="on">

• 9、form属性： 给表单元素定义所属的表单域（form），用于把表单元素放在form以外时指定随哪个表单域一起提交数据

   <input type="text" form="loginForm"><form id="loginForm"></form>

• 10、multiple属性： 设置文件域和下拉列表支持多选

   <input type="file" multiple><select multiple /size="2"></select>

• 注意： 新表单类型和属性在ie中支持情况不好，并且目前没有比较好的解决方案，pc端项目避免使用，目前主要是流行在移动端

六、多媒体

   音频<audio src="" controls loop muted></audio>视频<video src=""  controls loop muted width="" height="" poster=""></video>

1、音频 audio

   <audio src="./videoAudio/hanmai.mp3" controls loop></audio>

• 属性

  • src=“资源路径”： 用来引入音频文件的地址

  • controls : 用来调出控制器（播放暂停、进度、音量）

  • loop : 用来设置音频为循环播放

  • muted: 规定音频默认静音

2、视频

   <video src="./videoAudio/movie.mp4" width="800" controls loop poster="./img/pic.png"></video>

• 属性

  • src=“资源路径”： 用来引入视频文件的地址

  • controls : 用来调出控制器（播放暂停、进度、音量、全屏，画中画）

  • loop : 用来设置视频为循环播放

  • muted: 规定视频默认静音

  • width: 规定视频宽度

  • height: 规定视频高度

  • poster: 规定视频没有播放时显示的广告图（海报）

3、音视频资源 source标签

为音频和视频提供多种格式的资源文件，浏览器会识别第一个能够支持的视频格式进行播放

   <audio controls><source src="../0401/videoAudio/nada.wav" type="audio/wav"><source src="../0401/videoAudio/butterfly.ogg" type="audio/oggg"><source src="../0401/videoAudio/hanmai.mp3" type="audio/mp3">您的浏览器不支持音频</audio>

七、删除的标签(了解)

    fontbasefontcenterbigsustrikedir

CSS3

一、CSS3简介

是CSS的最新版本，在CSS2.1基础上进行增补与修改。

1、 CSS3新增模块 （记住）

• 选择器、边框属性、背景属性、文本效果、2D/3D转换、动画、多列、弹性盒布局、用户界面

2、浏览器兼容情况： ie9+、标准浏览器新版本

3、 渐进增强、优雅降级

• 渐进增强： 针对低版本的浏览器构建页面，保证最基本的功能，然后再针对高版本的浏览器进行效果和交互的优化，从而达到一个良好的用户体验

• 优雅降级：一开始就实现一个良好的体验和完整的功能，再针对低版本浏览器做兼容处理

4、 浏览器私有前缀

浏览器私有前缀是浏览器厂商为了表示对一些css3属性提前支持，但是属性尚未成为标准，如果属性成为标准之后，就不需要再加前缀

   -webkit-  : 老版本chrome、safari-moz- : 火狐浏览器-o-:  欧鹏浏览器-ms- : IE浏览器

自动添加私有前缀的插件 Autoprefixer

用法： 编写.css 文件，然后 F1 – > Autoprefixer:run

二、新增选择器（权值为10）

1、属性选择器

• css2的属性选择器

  • [attr] : 选择带有attr属性的标签

  • [attr=val] : 选择attr属性值等于val的标签

  • [attr~=val] : 选择attr属性值词列表中包含val完整单词的标签

   <div class="box" id="box1" ></div><div class="red" flag="1"></div><div class="green"></div><p class="p1"></p><input type="text">div[id=box1]{  /* 11 */border: 2px solid blue; }div[flag]{background-color: red;}div[class=red]{border:3px solid yellow}input[type=text]{border: 2px solid red;}li[class~=red]{background-color: turquoise;}li[flag~=hello]{border: 2px solid purple;}

• css3的属性选择器

  • [attr^=val] : 选择attr属性值以val开头的标签

  • [attr$=val] : 选择attr属性值以val结尾的标签

  • [attr*=val] : 选择attr属性值里面包含val字符的标签

   a[href^=http]{color: chartreuse;}a[href$=html]{color: cyan;}[class*=box]{color: red;font-size: 30px;}[class*=red]{border: 2px solid pink;}[class*=e]{background-color: cyan;}<a href="http://www.baidu.com">aaaa</a><a href="./1、音视频资源.html">bbbb</a><a href="http://www.ujiuye.com">bbbb</a><div class="box redbox">1</div><div class="box1 red">2</div><div class="box2 aared">3</div>

2、结构伪类选择器

• :first-child: 选择同级元素中的第一个

• :last-child : 选择同级元素中的最后一个

• :nth-child(n): 选择同级元素中的第n个

• :nth-child(2n) : 选择同级元素中第偶数个元素

• :nth-child(2n+1) : 选择同级元素中第奇数个元素

• :nth-last-child(n) : 选择同级元素中的倒数第n个

• :first-of-type : 选择同级同种类型标签中的第一个

• :last-of-type: 选择同级同种类型标签中的最后一个

• :nth-of-type(n) : 选择同级同种类型标签中的第n个

• :nth-last-of-type(n): 选择同级同种类型标签中的倒数第n个

   .box span:first-child{}---无空格是找.box下第一个子元素是span.box span :first-child{}---有空格是找.box 下span里的第一个子元素

3、表单状态伪类选择器

• :enabled 选择可用状态的表单元素

• :disabled 选择禁用状态的表单元素

• :checked 选中状态的单选和复选框

• ::selection 选择用户选中的元素部分内容

三、新增背景属性

新增的背景属性不能用background属性简写

   css2background-colorbackground-imagebackground-repeatbackground-postion

1、多背景

   background-image: url(""),url("");//设置多个背景图片，顺序越靠前，层级越高background-repeat: no-repeat,repeat;   /* 两个图片的重复属性不同 */background-repeat: no-repeat;  /* 两个图片的重复属性相同 */background-position: right top, center;   /* 两个图片的定位属性不同 */background-position: center;   /* 两个图片的定位属性相同 */

   多背景简写background:url(...) no-repeat center,url(...) repeat-x left bottom,...;

2、背景尺寸

   background-size- length  ： 宽度（500px）  高度（300px）  , 一个值表示设置宽度，高度自动    - %百分比 ： 参考盒子的尺寸， 宽度（50%）  高度（100%） , 一个值表示设置宽度，高度自动- cover  ：  覆盖 ,图片会等比例缩放，直到能够覆盖整个盒子，但是有可能图片无法完全显示- contain ： 包含 ，图片会等比例缩放，直到图片刚好被完全包含进来，但是有可能盒子没有完全覆盖

3、背景图片初始位置

   background-origin- border-box  : 背景图片从边框区域开始显示，并且从边框开始计算定位- padding-box : 默认值， 背景图片从内边距区域开始显示，并且从内边距开始计算定位- content-box : 背景图片从内容框区域开始显示，并且从内容框开始计算定位

4、背景裁切

   background-clip- border-box  : 默认值，边框以外背景被裁切- padding-box : 内边距以外背景被裁切- content-box : 内容区以外背景被裁切

四、渐变

渐变不是一个颜色模式，专门用来修饰盒子背景

• 可以设置给：background、background-image

• 不能设置给：background-color

1、线性渐变

linear-gradient(direction,color-start,color-stop,color-stop…)

   background: linear-gradient(to right,red,#ff0 20%,rgb(0,255,0) 50%,blue);

• direction : 渐变方向

  • to bottom :默认值 ，从上到下渐变

  • to top : 从下到上

  • to right : 从左到右

  • to left : 从右到左

  • to top right : 从左下到右上

  • to left bottom : 从右上到左下

  • angle度数 : 0deg 从下到上 45deng 左下到右上 …

• color-start :起始颜色

• color-stop : 渐变停止的位置

   重复的线性渐变repeating-linear-gradient(direction,color-start,color-stop,color-stop);最后一个颜色值不到百分之百，后面剩余的空间就会重复前面的渐变效果background: repeating-linear-gradient(to right,red,yellow 20%);

   多组渐变background: linear-gradient(red,rgba(255,255,0,0.5)),linear-gradient(to right,blue,green),...;

2、径向渐变

radial-gradient((cx cy),（rx ry),color-start, color-stop…);

加上webkit私有前缀才能兼容半径和圆心的设置

  background: -webkit-radial-gradient(0% 100%,100% 50%,red,yellow,green);

• 圆心位置(cx cy): 水平和垂直坐标

  • 取值可以是 长度值（100px 100px）/百分比 (100% 50%)/关键词 (left top)

• 半径（rx ry) : 水平和垂直半径长度

  • 取值可以是：长度值（100px 100px）/百分比 (100% 50%)

   重复径向渐变repeating-radial-gradient((cx cy),(rx ry),color-start, color-stop...)如果最后一个颜色值不到100%，剩下的空间就会重复前面渐变

   多组径向渐变background: radial-gradient(red,rgba(255,255,0,0.5)),radial-gradient(to right,blue,green),...;

五、用户界面

1、resize 是否允许用户缩放元素尺寸

需要配合overflow:auto/hidden/scroll属性，才能生效

取值none : 不允许用户缩放both  : 水平和垂直都可以缩放vertical: 垂直缩放horizontal: 水平缩放通常用来取消多行文本域用户可改变尺寸效果  textarea{resize:none}

2、box-sizing

用来规定盒子的盒模型的计算方式

   content-box（标准盒): 默认值,盒子实际占位宽 width + 左右padding + 左右border ,三者共同决定border-box （怪异盒）: 盒子的实际宽只由width属性决定，添加padding和border会压缩内容区宽度，而盒子整体大小不变

六、多列布局

css3提供的一种布局方式，能够快速实现类似于报纸布局那样的多列效果

• column-count: 设置多列列数

• column-width: 设置每一列的列宽 ，不方便精准控制列宽和列数，比较少用

• column-gap: 设置两列之间的间距

• column-rule: 设置两列之间的分界线 ， 语法同边框