H5新增标签详细解说

html5新增标签

标签名	描述
header	头部
nav	导航
section	区分大模块
aside	侧边栏
article	文章
figure	图片标记文档中的图像
figcaption	配图说明
footer	底部
main	页面主体
canvas	绘制图形
audio	音频
vidio	视频

audio音频属性

• controls：控制面板
• autoplay：自动播放
• loop：循环播放
• muted：静音
• src：音频的路径地址
  单个音频时：

<audio src="horse.ogg" controls loop></audio>

多个音频时：

 <audio loop controls autoplay >
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/ogg">
            <!-- 前提：有着两种版本的音频。当第一种出不来是会显示第二种，如果都不合适就会出现以下文字 -->
            您的浏览器不支持audio元素
    </audio>

####视频播放

• width：设置视频播放区的宽度
• height：设置视频播放区的高度
• controls：控制面板
• autoplay：自动播放
• loop:循环播放
• muted：静音播放
• src：视频的路径地址

html5表单输入类型

• type="number"用于输入数字，移动端可弹出数字软键盘
• type=“number”
• type="range"滑轮效果
• type="color"用于颜色拾取器
• type="date"选择日期，显示的是年月日
• type="time"选择时间，小时和分钟
• type="week"选择年份和周数
• type="month"选择年份和月份
• type="email"用于包含email地址的输框，验证是否email格式
• type="url"用于包含url地址的输入，如果验证不合格不允许提交
• type="tel"用于输入电话号码，弹出数字软键盘
• type="search"用于搜索框，在移动端可以弹出搜索软键盘
• type="file"用于上传文件
• 下拉框：

<!-- 下拉框 而且可以搜索，IE9以下，苹果不兼容 -->
<input list="course">
<datalist id="course">
    <option value="html5">
    <option value="html4">
    <option value="html3">
    <option value="html3">
    <option value="html1">
</datalist>

[外链图片转存失败(img-MuqAYgR0-1567153330889)(./1560747901053.png)]

产品形态

• pc端和·移动端公用一套代码，公用一个域名，比如摩拜、苹果官网、华为
• pc端和移动端分开。PC端单独一套，移动端单独一套，比如淘宝，京东

什么时候共用一套代码，什么时候单独一套代码
当页面结果、内容比较简单的时候我们可以共用一套代码，如果页面的内容比较复杂，共用一套代码会写大量的代码用于适配各种的手机屏幕，也不利于维护，会影响页面的加载速度，所以我们此时应该使用两套代码来写移动端和pc端

PC端和移动端的区别

• pc端鼠标相关的事件比如点击、滑过、在移动端没有，移动端有触屏和滑屏事件
• pc端需要兼容ie浏览器，移动端不需要考虑，它基本上都是webkit内核，移动端需要考虑屏幕的适配问题

视口 viewport

• 写移动端页面时。如果我们不写视口，html默认的宽度是980像素，把一个980像素的页面放入一个375像素的容器里，页面会缩小，而且显示不清楚，因此我们写移动端页面时必须加上视口
• name=“viewport”
• width=device-width设置宽度等于设备的宽度
• initial-scale=1.0 代表初始化缩放倍数为1
• maximum-scale=1.0 最大的缩放值
• minimum-scale=1.0 最小的缩放值
• user-scalable 定义是否允许用户手动缩放页面，默认值是yes，如果不允许用户手动缩放可以将值设置为no

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

兼容IE低版：
<meta http-equiv="X-UA-Compatible" content="ie=edge">

meta标签

• charset 文档编码utf-8
• name=“keywords” 关键字” content=“关键字内容”
• name=“description” content=“描述网站的一句话”

<!-- 写关键字，搜索这些字时可以搜索到 -->
    <meta name="keywords" content="关键字的内容">
    <meta name="description" content="描述网站的一句话">