码迷,mamicode.com
首页 > Web开发 > 详细

HTML5

时间:2019-12-13 23:54:07      阅读:219      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!