HTML5新增的标签

一、新增语义化标签

<header> :头部标签
<nav> :导航标签
<article> :内容标签
<section> :定义文档某个区域
<aside> :侧边栏标签
<footer> :尾部标签

二、新增多媒体标签

1.音频: <audio>

当前<audio>仅支持三种视频格式:尽量使用mp3格式

语法:


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


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

常见属性:

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


2.视频: <video>

当前<video>仅支持三种视频格式:尽量使用mp4格式

语法:

<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播放完是否继续播放该视频,循环播放
preload

auto(预先加载视频)

none(不预先加载视频)

规定是否预加载视频(如果有了autoplay 就忽略该属性)
srcurl视频url地址
posterimgurl加载等待的画面图片

muted

muted

静音播放

三、新增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自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteautocomplete当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如 autocomplete="on“,关闭 autocomplete ="of"需要放在表单内,同时加上 name 属性,同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder

{color: pink}

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值