HTML5 新标签、音视频、form 表单

新增布局标签

html4：1997年，html5：2008年

包括：

• 绘图画布 SVG（矢量图形）canvas（画布）
• 智能表单
• 多媒体
• 地理定位
• 数据存储
• 多线程

复制<header> 定义了头部区域，标题，logo，搜索表单等 </header>

<footer> 定义了底部区域，友情链接，版权信息等 </footer>

<nav> <!-- 导航条，侧边栏导航，页内导航等 -->
  <a href="#">首页</a>
  <a href="#">登录</a>
  <a href="#">注册</a>
</nav>

<article> 完整含义的内容区域 </article>

<!--  页面内容中的章节，分区，通常是由标题和段落组成 -->
<section>
  <h2>标题</h2>
  <p> 段落 </p>
</section>

<!--  给标题和子标题进行分组 -->
<hgroup>
  <h1>主标题</h1>
  <h3>副标题</h3>
</hgroup>

<!-- 图片的文本内容 -->
<figure>
  <img src="" alt="">
  <figcaption> 定义figure的标题 </figcaption>
</figure>

<!-- 会自带背景颜色 -->
<mark> 标记标签 </mark>

<!-- 日期或时间 -->
<time>11:39</time>

HTML

段落引用提示
段落引用你知道不用 css 怎么让一个标签有颜色吗？

html5标签的兼容

比较旧的浏览器可能无法识别 html5 的标签

解决方法：

1. 利用 JavaScript 新增元素的方式

复制document.createElement('header');
document.createElement('nav');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
HTML

段落引用提示
段落引用通过 js 创建的元素是行内元素

2. 使用封装好的插件，引入js文件（html5shive.js）

复制<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>

HTML

视频标签

复制<video src="" control loop autoplay> </video>
HTML

• src：规定要播放的视频的路径
• controls：播放控件
• loop：循环播放
• muted：静音播放
• autoplay：自动播放（要在静音播放属性下才有效）
• poster：预览图片
• width：宽度
• height：高度

视频浏览器的支持：

Firefox、Safari、chrome、Opera、IE 9+

视频的格式

mp4：Firefox、Safari、chrome、IE 9+

webp：Firefox、Safari、Opera

ogg：avi、flv、wvvm

音频标签

复制<audio src=""></audio>
HTML

• src：规定要播放的音频的路径
• controls：播放控件
• loop：循环
• muted：静音播放

音频标签浏览器支持：

Firefox、Safari、chrome、Opera、IE 9+

音频标签的格式：

mp3：Firefox、Safari5+、chrome、Opera10+、IE 9+

wav：Firefox、Safari5+、chrome、Opera10+

ogg：Firefox、chrome、Opera10+

定义媒体资源

设置多个资源链接

复制<video controls loop poster="./img/a.jpg"> 
    <source src="./videoAudio/movie.mp4">
    <source src="./videoAudio/movie.webp">
    <source src="./videoAudio/movie.ogg">
    <source src="./videoAudio/movie.avi">
    <object> 您的浏览器不支持 video 元素播放视频 </object>
</video>
HTML

表单

form

复制<form action="http" method="GET">
	表单元素，input，button标签等
</form>
HTML

action：提交表单时执行的动作

method：提交数据的方式

• get：得到数据（不安全，传输数据较小）
• post：传输数据（安全系数较高，传输数据相对较大）

button 标签

复制<button type="submit">按钮</button>
HTML

• type 属性
  • submit：提交数据（默认值）
  • reset：重置数据（刷新）
  • button：普通按钮（按钮形状）

input 的类型

复制<input type="text" name="txt" placeholder="输入文本">
HTML

• type 属性-按钮

  • button：普通按钮
  • submit：提交按钮
  • reset：重置按钮
  • file：文件上传按钮
  • image：图片按钮

• type 其它属性

  • text：单行文本输入框
  • password： 密码输入框
  • radio：单选按钮
  • checkbox：复选框
  • url：网址
  • email：验证邮箱的格式
  • search：搜索
  • tel：验证电话号码的格式
  • number：数字输入框
  • range：滑动条
  • color：颜色块
  • date：日期 年月日 日历表
  • datetime：日期时间 UTC
  • datetime-local：本地日期时间 年月日 时分 日历表
  • month：月份 年月 日历表
  • time：时间 时分 时钟
  • week：周

  复制  <input type="url" name="url" placeholder="验证网址">
    <input type="email" placeholder="正确的邮箱地址">
    <input type="search" placeholder="请输入搜索的内容">
    <input type="tel" placeholder="请输入正确的手机号" pattern="">
    <input type="number" placeholder="请输入数字" value="10" min="0" max="20" step="5">
    <input type="range" value="0" min="5" max="20" step="3">
    <input type="color">
    <input type="date">
    <input type="datetime">
    <input type="datetime-local">
    <input type="month">
    <input type="time">
    <input type="week">
  HTML

  <input type="url" name="url" placeholder="验证网址"> <input type="email" placeholder="正确的邮箱地址"> <input type="search" placeholder="请输入搜索的内容"> <input type="tel" placeholder="请输入正确的手机号" pattern=""> <input type="number" placeholder="请输入数字" value="10" min="0" max="20" step="5"> <input type="range" value="0" min="5" max="20" step="3"> <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="month"> <input type="time"> <input type="week">

• 属性

  • value：输入框的初始值
  • checked：默认选中，选中单选按钮和复选框
  • placeholder：input 输入框的提示信息
  • autofocus：自动获取焦点
  • pattern：验证input的模式，pattern 的值是正则表达式
  • required ：必填字段（不能为空）
  • multiple：可以选择多个文件
  • size：定义下拉列表中可见项的数目
  • maxlength：规定输入框的最大长度值
  • readonly：只读状态，只读不可以写入
  • disabled：禁用，不可读，不可写
  • selected：默认选中下拉列表中的项
  • autocomplete：自动填充 on 打开 off 关闭（下次打开网站浏览器会提示上次输入的内容）
    <input type="text" autocomplete="on" name="user" placeholder="自动填充">
  • form：form 属性必须引用所属表单的 id。form 里面的表单提交时也会把绑定 id 不在 form 里面的一并提交

  复制  <form action="" id="login">
      用户名：<input type="text" name="username">
      密码： <input type="password" name="pwd" >
    <input type="submit" >
  </form>
  <input type="email" placeholder="请输入邮箱" name="email"  form="login">
  

  <form action="" id="login"> 用户名：<input type="text" name="username"> 密码： <input type="password" name="pwd" > <input type="submit" > </form> <input type="email" placeholder="请输入邮箱" name="email" form="login">

• type=number 数字，range 滑动条时的属性：

  • max：允许最大的值
  • min：允许最小的值
  • step：步长
  • value：默认值

datalist

list 指定 input 元素绑定某一个 datalist 数据

复制<input type="text" list="car">
<datalist id="car"> 
    <option value="一"></option>
    <option value="二"></option>
</datalist>
HTML

select 标签

复制<select size='2'>
	<option selected >默认选中</option>
	<option>下拉框元素</option>
</select>
HTML

textarea 标签

复制<textarea>多行文本</textarea>
HTML