WEB前端HTML—HTML5新特性

HTML5新特征仅支持IE9以上的版本

新增标签属性

语义化标签

新增标签:

• <header></header>：页面头部、页眉
• <nav></nav>：导航链接
• <section></section>：节、区域
• <article></article>：文章
• <aside></aside>：侧边
• <footer></footer>：页面底部、页脚
• <datalist></datalist>：选项列表，须和<input>配合使用，如搜索栏下拉菜单
• <fieldset></fieldset>：将表单内的相关元素分组、打包，配合iegend使用

语义化标签的作用:

• 开发者：提高代码的可读性可维护性
• 网站发布者：seo -> 搜索引擎优化

兼容问题:

• IE9以下不支持H5标签，如大部分css3属性、一些H5的api，它会把这些标签当做行内元素看待
• 语义化标签需要动态创建，如document.createElement('header')，同时设置为块级元素

• html5shiv.js插件：就是为了解决H5的兼容问题

  • 须引入到头部，在页面结构之前，提前解析h5标签
  • 优化：支持H5标签的不加载，IE9以下不支持H5的才会加载
  • js判断客户的浏览器版本可以做到，但是不能做到js提前加载

• 条件注释：可写在网页的任何地方，根据浏览器版本去加载html标签。大于小于->lt,gt,lte,gte

  <!--[if lte IE 8]>
  	<script src="html5shiv.min.js"></script>
  <![endif]-->
  

input表单验证

type	说明	显示
tel	手机号
email	邮箱
url	URL
number	数字
search	搜索框
range	自由拖拽滑块
datetime-local	年月日时分
date	年月日
time	时分
month	年月
week	年星期

• <input type="datetime-local">，添加属性step="1"可以精确到秒

input表单属性

属性	属性值	含义
placeholder	自定义	占位提示文本
required	boolean	内容不能为空
autofocus	boolean	自动获取焦点
multiple	boolean	选择多个文件
autocomplete	"off"	表单验证是否启用自动完成功能
accesskey	快捷键的符号	激活元素(焦点)的快捷键

音视频播放

原始方式：先在其他视频网站上传视频，再用<iframe>在自己的页面引入

音频(audio)

<audio src="./sound/puppy.ogg" controls>
    <source src=".mp3">  <!--第一个格式不支持,就找下一个,若都不支持,就显示提示文本-->
    <source src=".ogg">
    <source src=".wav">
    您的浏览器版本太低！
</audio>

audio标签属性：

• src：音频文件的路径

• autoplay：自动播放，默认不自动

• controls：显示播放控件，默认不显示

• loop：循环播放，默认只播放一次

视频(video)

<video src="./video/puppy.mp4" controls>
    <source src=".mp4">    <!--这是单标签-->
    <source src=".ogg">
    您的浏览器版本太低!
</video>

video标签属性：

• src：视频文件的路径，支持mp4、webm、ogg等格式

• autoplay：自动播放，默认不自动

• controls：显示播放控件，默认不显示

• loop：循环播放，默认只播放一次

• width：窗口宽

• height：窗口高

项目经验

stellar插件

index.html：

<script src="js/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/index.js"></script>
<section class="qq_interest">
    <!-- data-stellar-background-ratio设置滑轮滚动速度 -->
    <div class="bg" data-stellar-background-ratio="0.3"></div>	
</section>

index.css：

.qq_sound .bg,.qq_file .bg,.qq_interest .bg{
    background-attachment: fixed;
}

index.js：

$(() => {
    /*1.引入*/
    /*2.结构 data-stellar-background-ratio="0.3" 样式 background-attachment: fixed;*/
    /*3.初始化插件*/
    $.stellar({
        horizontalScrolling: false,
        responsive: true
    });
});