H5新增标签

342 阅读2分钟

一、语义化标签

<header> : 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>: 块级标签
<aside>: 侧边栏标签
<footer>: 尾部标签

注意:

  • 这种语义化标准主要针对搜素引擎
  • 这些新标签页面中可以使用多次
  • 在IE9中,需要把这些元素转换为块级元素
  • 其实,移动端更喜欢使用这些标签

二、多媒体标签

&ltaudio&gt

1.音频格式

Ogg,MP3,Wav

2.音频标签语法格式

<audio src="文件地址" controls="controls"></audio>

3.&ltaudio&gt音频标签常见属性

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户展示控件,比如播放按钮
looploop如果出现该属性,则每当音频结束时重新开始播放
srcurl要播放的音频的URL

&ltaudio&gt音频标签语法格式

<audio controls=""controls>
	<source src="djc.mp3" type="audio/mpeg">
    <source src="djc.ogg" type="audio/ogg">
    您的浏览器暂不支持audio标签
</audio> 

&ltvideo&gt

1.视频格式

ogg, MP4, Webm #### &ltvideo&gt视频标签语法格式

<video src="文件地址" controls="controls"></video>

<video controls="controls" width="300">
	<source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    您的浏览器暂不支持video标签播放视频
</video>

常见属性

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器高度
heightpixels(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载视频)
none(不应该加载视频)
规定是否预加载视频(如果有autoplay就忽略该属性)
srcurl视频url地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

三、input表单、表单属性

属性值说明
type="email"限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="search"搜索框
type="color"生成一个颜色选择表单
属性说明
requiredrequired表单拥有该属性表示内容不能为空,必填
placeholder提示文本(占位符)表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时,浏览器基于之前键入过的值,
应该显示出在字段中填写的选项。默认已经打开,如autocomplete="on",关闭autocomplete="off"
需要放在表单内同时加上name属性
同时成功提交
multiplemultiple可以多选文件提交

>>>前端学习之路<<<