HTML5+CSS3知识点-周5.md

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</