Web入门梳理：HTML5

最新推荐文章于 2024-07-25 18:08:50 发布

baby_hua

最新推荐文章于 2024-07-25 18:08:50 发布

阅读量254

点赞数

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/baby_hua/article/details/104753075

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

html5

2008年 HTML5 HTML的新版本，新标准；<!DOCTYPE html>

常用新标签

新增的input type属性值

类型	使用	描述
email	`<input type="email"/>`	校验输入邮箱格式
tel	`<input type="tel"/>`	校验输入手机号码格式
url	`<input type="url"/>`	校验输入url格式
number	`<input type="number"/>`	校验输入数字格式
search	`<input type="search"/>`	搜索框提现语义化
range	`<input type="range"/>`	自动拖动滑块
time	`<input type="time"/>`	小时分钟
date	`<input type="date"/>`	年月日
datetime	`<input type="datetime"/>`	时间
month	`<input type="month"/>`	月年
week	`<input type="week"/>`	星期年
color	`<input type="color"/>`	颜色盘

新增表单属性属性

类型	使用	描述
placeholder	`<input type="text" placeholder="请输入..."/>`	指定占位默认显示字符串
autofocus	`<input type="text" autofocus="autofocus"/>`或直接写一个autofocus	光标自动获取焦点
multiple	`<input type="file" multiple/>`	多文件选择上传
autocomplete	`<input type="text" autocomplete name="username" /><input type="submit"/>`	已经输入过的内容提交表单之后自动记录：1.autocomplete 首选需要提交按钮；2.还要为表单指定name属性；3.值有两个 on和off；
required	`<input type="file" required />`	必填项，不能为空
accesskey	`<input type="file" accesskey="s" />`	使用alt+字母的方式使光标获取焦点；

多媒体标签

embed标签，定义嵌套的内容；（要处理一些兼容性的问题）
audio：播放音频；
video：播放视频；

embed：

可以用来插入各种多媒体，url为音频或视频及其路径，存在兼容性问题，会使用即可；

<embed src="xxxx.mp4" allowFullScreen="true" quality='high' width='480' heigth='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'>
</embed>

audio：

html5通过audio解决音频播放的问题：

<audio src="xxx.mp3" autoplay="autoplay" controls loop='-1'>

<audio autoplay="autoplay" controls loop='-1'>
    <source src="xxx.mp3" />
    <source src="xxx.ogg" />
    <source src="xxx.wav" />
    您的浏览器不支持播放该声音！
</audio>

可以通过附加属性进行音频控制播放；

autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放，指定循环播放次数，-1表示无限循环；

由于版权问题，不同浏览器支持的播放格式不一样；所以最好匹配多个类型的播放源（wav ogg mp3）以兼容所有浏览器；

video:

多媒体video；同样支持属性控制视频播放；
autoplay、controls、loop、width、height；

由于版权原因，不同浏览器支持的播放格式不尽相同；
常用视频格式：ogg mpeg4(mp4) webM；

<video scr="xxx.pm4" controls="controls"></video>

<video controls="controls" autoplay>
    <source src="xxx.mp4" />
    <source src="xxx.ogg" />
    您的浏览器不支持播放该多媒体！
</video>