HTML5

标签：data   自带   scrolling   lin   some   email   val   str   table   

html5是最新版的html的标签和标签属性，虽然是最新版的，也过了好多年了

》》html5之新标签

div语义化
只是看起来更整齐，可读性，语义化

• Header
• nav（导航）
• article（区域）
• section（主题）
• aside（广告）
• footer

视频标签video和一个音频标签audio和一个画布canvas
视频标签也就是html播放器，这个标签的出现直接秒杀了flash播放器
这三个标签有很多的api，很强大

<!-- canvas画布 -->
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<!-- video视频 -->
<video id="mp4">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video  标签。
</video>

<!-- audio视频 -->
<audio src="someaudio.wav" id="mp3">
您的浏览器不支持 audio 标签。
</audio>

还有input出了新的type，有date，color

<input type="date">
<input type="datetime">
<input type="color">
<input type="range">
...

input-file的属性
accept表示打开的系统文件目录
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音；
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
<input type="file" accept="image/*" multiple>

iframe

<!-- 去除iframe自带的滚动条 -->
<iframe id="iframe" src="xxx" frameborder="0" scrolling="no" style="width: 100%;"></iframe>

》》html5之新属性

1. hidden的隐藏属性
2. input的pattern=/reg/ 用于表单内容判断（示例查看css的艺术）
3. input的placeholder 是提示语
4. input的required 是必填，但只能在form标签提交时生效
5. 在标签内加上contenteditable="true" 可以让标签变成可编辑的区域，富文本编辑器就是用这个属性做的
6. input的list属性（实现下拉带搜索的功能）

<input type="text" list="names" multiple />
<datalist id="names">
   <option value="kris">
   <option value="陈大鱼头">
   <option value="深圳金城武">
</datalist>

<input type="email" list="emails" multiple />
<datalist id="emails">
   <option value="chenjinwen77@foxmail.com" label="kris">
   <option value="chenjinwen77@gmail.com" label="kris">
</datalist>

<input type="date" list="dates" />
<datalist id="dates">
   <option value="2019-09-03">
</datalist>

HTML5

标签：data   自带   scrolling   lin   some   email   val   str   table   

原文地址：https://www.cnblogs.com/pengdt/p/12037482.html