Html大前端
发布时间为2014年
为什么推出html5
手机移动,pc电脑,pad 兼容优化
用户体验上做出的优化
Html5更新了哪些技术
新增了语义化标签、header、footer、main
新增了属性 placeholder
新增了api(数据接口。操作)七天免登录
强大之处
面试问题:说出h5新增的15个标签
单页面应用 spa
替代部分的原生开发
新增的哪些语义化标签
Section: 元素 表示页面中的一个内容区块
header:元素 表示页面中一个内容区块或整个页面的标题
nav、元素 表示页面中导航链接部分
main、元素 表示页面中的主要的内容
aside、元素 在article之外的,与article内容相关的辅助信息
articl、元素 表示一块与上下文无关的独立的内容
footer、元素 表示页面中一个内容区块或整个页面的脚注
figure、元素 表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
figcaption、
hgroup、标题组 类似ul>li
mark,高亮 文本自带黄色背景颜色
dialog、标签定义对话框或窗口
canvas、画布 – 三阶段才学习
video、视频标签
audio、音频标签
属性open 规定 dialog 元素是活动的,用户可与之交互。
<dialog open>这是打开的对话窗口</dialog>
音视频的使用
注意: 之前浏览器都是支持显示并且自动播放音视频的,后来为了追求浏览
器载速度和性能,全部禁止
音视频的使用:
音频标签 audio
视频标签 video
属性
- src 路径
- controls 控制属性:如果出现该属性,则向用户显示控件,比如播放按钮。
- autoplay 自动播放属性:如果出现该属性,则视频在就绪后马上播放。
- muted 属性:静音属性。
- poster 属性:规定视频正在下载时显示的图像,直到用户点击播放按钮
-loop 属性:重复播放属性。
音视频都有浏览器兼容的问题使用以下格式:
<audio controls autoplay >
这里添加资源
<source src="images/晴天.mp3"> 不同的浏览器兼容属性都不同。
<source src="images/晴天.ogg">
</audio>
以下是浏览器兼容的音视频类型
Html5智能表单的使用:
Type=“email” 限制用户必须输入email类型
Type=“number” 限制用户必须输入数字类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“date” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
表单控件必须包含在form表单内才能使用
<form action="" novalidate>
邮件: <input type="email" required>
数字: <input type="number" min="0" max="10" step="4">步幅 间隔
地址: <input type="url">
滑块:0 <input type="range" min="0" max="10" > 10<br> <!-- 0~100 -->
搜索: <input type="search">
颜色: <input type="color">
时分: <input type="time">
年月日: <input type="date">
年月: <input type="month">
周数: <input type="week">
本地时间: <input type="datetime-local">
<input type="submit">
</form>
新增的属性:
placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。不占位置
autofocus 属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。
autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。属性值:on/off。on可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示:简单的理解就是在输入框内增加可向下显示的历史搜索记录,增加属性和属性值autocomplete="on/ off "表示打开历史搜索记录属性或者关闭这个属性q
novalidate取消验证 可以对form表单添加novalidate属性,即使form表单中的某一个input添加了required,也将不进行验证partten,input属性中required表示验证表单内的内容是否输入正确,如果在父级form内添加novalidate表示不用验证即可提交
multiple:可以输入一个或多个值,每个值之间用逗号分开 例:<input type=“email” multiple/> 还可以应用于file (file表示选择或者上传本地的某个文件)