一、新增语义标签

相对div无语义标签来说，更加具有语义化

    新增语义标签：块级标签

    header:头部   网页的头部，某个模块的头部

    footer:底部 网页的底部，某个模块的底部

    nav:导航  网页中的文字导航、侧边栏导航、面包屑导航

     article:文章  网页中独立的结构，用的不多，包着多个section

    section:章节 相当于一个自然段

     类似与div,区别：

    一般一个section：一个section元素通常由内容及标题组成

    aside:侧边栏网页中侧边的广告

    语义：定义当前页面或文章的附属信息部分

    典型应用：侧边栏、标注框、广告等

    写页面样式出不来，必须右击--检查

       1.找到要设置样式的标签

       2.检查styles

       3.如果没有对应的样式，标签没选上

       4.如果样式在，看看是不是优先级的问题   样式被中划线划掉，说明权重不够，被覆盖

二、新增其他标签

         figure标签

             figcaption标签，在一个figure标签中只能有一个figcaption标签,一般用于图文

              块级标签，再带外间距 (用的不多,了解)

           mark:标记标签 行级标签

            高亮效果，吸引用户眼球，默认自带黄色背景色

            可以修改样式 掌握

            time:时间标签  行级标签 (用于很少，了解)  

三、兼容问题

1.

  使用谷歌提供的html5dhiv.js解决 ,其代码如下

    <script src="./html5shiv.js"></script>

    百度静态资源库:(国内推荐使用)  http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js 其代码如下

<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js "></script>

2.

注意:使用javascript新增元素的方法解决,新增的出来html5标签是行级元素,需要css把行内元素转为块

js代码要写在script标签里

用js方法创建出来这些语义标签

文档    创建  元素

document,CustomElement

四、html5里废弃的一些标签

（1）<acronym> 定义只取首字母缩写

（2）<applet> 规定 Java applet 的文件名

（3）<basefont> 定义文档中所有文本的默认颜色、大小和字体

  (4)<big> 呈现大号字体效果

  (5) <center> 标签控制文本的居中显示

  (6） <dir> <dir> 标签定义目录列表

（7） <font> 标签规定文本的字体、字体尺寸、字体颜色

  (8) <frame> 标签定义 frameset 中的一个特定的窗口（框架）

  (9) <frameset> frameset 元素可定义一个框架集

（10） <noframes> noframes标签向浏览器显示无法处理框架的提示文本

 （11） <strike> strike 标签可定义加删除线文本定义。

五、音频

常用属性

        src属性：音频文件的路径

        controls属性：浏览器为音频提供播放控件

        loop属性；循环播放

        muted属性；静音

       录音 歌曲 闹钟

        mp3 ogg wav

        audio 行内块标签

       其代码如下:

              <!-- 默认隐藏  无法播放 -->

              <autio src="./file/biubiubiu.ogg"></autio>

               <!-- 播放控件 controls -->

             <autio src="./file/biubiubiu.ogg" controls></autio>

             <!-- 静音属性  -->

             <autio src="./file/biubiubiu.ogg" controls muted></autio>

             <!-- 循环播放 -->

             <autio src="./file/biubiubiu.ogg" controls loop></autio>

六、视频

常用属性:

        src属性：视频文件的路径

        controls属性：视频播放控件

        loop属性：循环播放

        muted属性：静音

        width属性、height属性：视频播放器的宽度和高度

        poster属性：预览图片,视频正在下载时显示的图像

        autoplay属性：自动播放，必须静音后在播放

        视频

        MP5  ogg  wav WebM  

        vedio 行内块标签

其代码如下:

     <!-- 默认不能播放 -->

     <video src="./file/movie.mp4"></video>

     <!-- 播放控件 -->

     <video src="./file/movie.mp4" controls></video>

     <!-- poster属性 -->

     <video src="./file/movie.mp4" controls controls poster="../day05/img/b.jpg"></video>

     <!-- 静音属性 loop循环播放 -->

     <video src="./file/0db55d36e8998511ce18921188a7deeb.mp4" controls muted loop></video>

     <!-- 自动播放 需要与静音属性一起使用 -->

     <video src="./file/movie.mp4" controls></video>

七、音频媒介标签

允许使用source标签 引入多个音频,视频资源,浏览器使用第一个可以被识别的格式

   其代码如下:

       <audio controls>

        <!-- 把文件放到source里 -->

        <source src="./file/biubiubiu111.ogg" type="audio/ogg">

        <!-- 后边累似备胎,当第一个不能用依次往后识别 -->

        <source src="./file/biubiubiu.ogg">

      </audio>

八、新增表单元素

                自动验证网站 

                url<input type="url">

               自动验证邮箱

                emaile<input type="email">

               search 搜索框 一般用于移动端 -->

                search<input type="search“

               tel 虚拟电话键盘 在移动端有效,触动移动端网页显示键盘

                tel<input type="tel">

                    number用于包含数值的输入域

                    max属性:最大值

                    min属性:最小值

                    step属性:步长,合法的数字间隔,默认步长为1

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

           数字滑动条 用于生成一个数字滑动条 与number类型比区别在于外观样式不同 range                      类型的min值默认为0,max属性值为100(了解）

              range<input type="range">

               色盘,初始值:写16进制,16进制不能省略

                 color<input type="color" value="#ffffff">

九、时间日期选择器

          年 月 日 

            date<input type="date" value="2022-09-15">

           时 分 

            time<input type="time" value="09:00">

         年月 日时 分 

            datetime<input type="datetime-local">

        2022年第37周 

            week<input type="week">

         月

           month<input type="month">

十、表单属性

 自动获取焦点 一个页面中只能有一个表单元素具有这个属性

   text<input type="text" placeholder="请输入主账号" autofocus name="user"autocomplete="off"> 

   text<input type="text" placeholder="请输入主账号" autofocus name="user" required>

   password<input type="text" name="pass" autocomplete="off">

    password<input type="text" name="pass">

      必须写属性 

                required<input type="text" name="pass1" required>

                pattern属性 验证输入内容--正则表达式

      只能输入0~9的数字且2位

                pattern<input type="text" name="pass3" pattern="[0-9]{2}">

       上传多个文件 按住ctrl键或者shift键

                <input type="file" multiple>

                <input type="submit">

        autocomplete属性

        设置表单是否用字的完成功能,可以加在form标签中,input标签中

        autocomplete="on" 启用自动完成功能

        autocomplete="off" 不采用自动完成功能

        在input标签中name属性是必要的

十一、浏览器私有前缀

 浏览器   内核               前缀

        谷歌     webkit--blink      -webkit-

        苹果     blink              -webkit

        火狐     gecko              -moz-

        ie      trident             -ms-

        欧朋     presto--blink      -o-

        因为css3新增的一些属性,还没有成为标准属性,在高版本的浏览器中需要加前缀

        但是显示几乎不用加前缀

        先写私有前缀(属性),再写标准属性

 Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

         autoprefixer

        在vscode中安装autoprefixer插件

         在外部的css文件中书写相关属性和属性值

        按下F1，选择autoprefixer:Run，之后会在css文件中添加私有前缀

            注意：若快捷键冲突，点击fn+f1

 其代码如下:

          /* 1.谷歌 苹果 */

            -webkit-border-radius: 50%;

           /* 火狐*/

           -moz-border-radius: 50%;

            /*ie*/

          -ms-border-radius: 50%;

           /* 欧朋  */

          -o-border-radius: 50%;

十二、css3基础

css3是css2版本升级

    css3是向后兼容，也就是说css2的s样式还可以运行

    css3按模块化进行设计，比较重要的css3模块包含、

     选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面