最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
定义视频,比如电影片段或其他视频流。支持三种视频格式:MP4、WebM、Ogg。
<track>
为媒体元素(比如 <audio>
and <video>
)规定外部文本轨道。IE 10、Opera 和 Chrome 浏览器支持 <track>
标签,其他浏览器不支持。
<source>
为媒体元素(比如 <audio>
and <video>
)定义媒体资源。
其他标签
<canvas>
画布,可以绘制丰富的图形,赋予了html更多想象的空间。
<datalist>
配合<option>
标签制作下拉列表,与<select>
不同的一点是,<datalist>
支持输入,模糊匹配。
<details>
类似于折叠面板的一个控件,规定了用户可见的或者隐藏的需求的补充细节。<summary>
标签可以为 <details>
定义标题。标题是可见的,用户点击标题时,会显示出 <details>
。目前,只有 Chrome 和 Safari 6 支持 <details>
标签。
<summary>
与<details>
标签配合使用。只有 Chrome 和 Safari 6 支持 <summary>
标签。
<embed>
定义了一个容器,用来嵌入外部应用或者互动程序(插件),例如flash等。
<figure>
规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>
<figcaption>
元素被用来为<figure>
元素定义标题。
<mark>
定义带有记号的文本。请在需要突出显示文本时使用<mark>
标签。
<meter>
定义度量衡。仅用于已知最大和最小值的度量。不能作为一个进度条来使用。Firefox、Opera、Chrome 和 Safari 6 支持 <meter>
标签。IE不支持该标签。
<progress>
定义运行中的任务进度(进程)。有value和max属性。
<output>
作为计算结果输出显示(比如执行脚本的输出)。配合两个<input>
使用,可实时求和。Internet Explorer 浏览器不支持 <output>
标签。
<ruby>
定义 ruby 注释(中文注音或字符)。
<rp>
在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>
定义字符(中文注音或字符)的解释或发音。
<time>
定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。用datetime属性对标签中的文字作时间解释。
<bdi>
允许您设置一段文本,使其脱离其父元素的文本方向设置。具体应用不详。
让IE8及以下版本也支持H5新标签
我们经常会用到<main>
、<article>
、<aside>
、<footer>
、<header>
、<nav>
来进行页面布局,那么如何解决IE8及以下版本支持这些标签呢?只要利用createElement让浏览器识别这些标签,并在css中给他们设置一些属性即可,比如display:block
。现成的解决方案就是htmlshiv.js
。
如果有打印需求,则需要html5shiv-printshiv.js
,它包含 html5shiv.js
的全部功能,并且额外支持 IE6-8 网页打印时 HTML5 元素样式化。
HTML5属性上的改动
=============================================================================
新增的属性
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持新增的大部分 H5 属性,特殊情况会在每一项处有说明。
HTML5标准属性
contenteditable
规定是否允许用户编辑内容。可用于制作富文本等功能。兼容性较好,见下图。
contextmenu
规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。contextmenu
属性的值是需要打开的<menu>
元素的 id。兼容性不好,目前只有 Firefox 浏览器支持 contextmenu
属性。
data-*
管理自定义属性。自定义属性可通过元素的dataset进行访问。如ele.dataset.customAttr。
兼容性见下图,IE6~8也支持data-*,但是不能通过dataset访问,必须用getAttribute访问。
draggable
规定元素是否可拖动。链接和图像默认是可拖动的。
主要关注的内容有属性draggable
,事件ondragstart
,事件ondragover
,事件ondrop
,数据属性dataTransfer
,以及dataTransfer
下的两个方法setData
和getData
。
简单demo可以参考HTML5拖放教程。
hidden
hidden 属性规定对元素进行隐藏。IE兼容性不太好,避免使用,用css替代即可。
spellcheck
规定是否对元素内容进行拼写检查。启用后会对单词进行拼写检查,不正确的单词会有波浪线提示。
Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 浏览器支持 spellcheck 属性。
更丰富的表单
input支持更多type
HTML5 中的新类型:color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。其实也是一种语义化的表现。
| 值 | 描述 |
| — | — |
| color | 定义拾色器。兼容性很差,对IE,Edge,Safari等浏览器不友好,详细情况见兼容性 |
| date | 定义 date 控件(包括年、月、日,不包括时间)。兼容性很差。 |
| datetime | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。兼容性很差。 |
| datetime-local | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。兼容性很差。 |
| month | 定义 month 和 year 控件(不带时区)。兼容性很差。 |
| week | 定义 week 和 year 控件(不带时区)。兼容性很差。 |
| time | 定义用于输入时间的控件(不带时区)。兼容性很差。 |
| email | 定义用于 e-mail 地址的字段。会对邮箱进行格式检查。支持IE10以上,详细情况见兼容性 |
| number | 定义用于输入数字的字段。在各个浏览器上有一些差异 |
| range | 定义滑块。支持IE10以上,详细情况见兼容性 |
| search | 定义用于输入搜索字符串的文本字段。支持IE10以上,但是在UI表现上与text没有差别。查看详情 |
| tel | 定义用于输入电话号码的字段。支持IE10以上,详细情况见兼容性 |
| url | 定义用于输入 URL 的字段。会对url进行格式检查。支持IE10以上,详细情况见兼容性 |
其他表单控件属性
| 属性 | 描述 |
| — | — |
| placeholder | 可描述输入字段预期值的简短的提示信息,支持IE10以上,适用于下面的 input 类型:text、search、url、tel、email 和 password。 |
| autofocus | 页面加载时自动获得焦点,支持IE10以上。 |
| multiple | 规定允许用户输入到 input 元素的多个值。适用于以下 input 类型:email 和 file。常见于上传文件时选择多个文件。 |
| form | 规定 input 元素所属的一个或多个表单的 id 列表,以空格分隔。可以实现将 input 放在 form 标签外部。但是不支持IE。 |
| required | 规定必需在提交表单之前填写输入字段,支持IE10以上。 |
| maxlength | 规定 input 元素中允许的最大字符数,适用于text类型。 |
| minlength | 规定 input 元素中允许的最小字符数,适用于text类型。 |
| max | 规定 input 元素的最大值,max 和 min 属性适用于以下 input 类型:number、range、date、datetime、datetime-local、month、time 和 week。支持IE10以上,不支持firefox,其中IE10不支持max用于date 和 time类型。 |
| min | 规定 input 元素的最小值。 |
| pattern | 规定 input 元素的正则表达式校验。适用于下面的 input 类型:text、search、url、tel、email 和 password。应该配合 title 属性提示用户。 |
HTML5其他新特性
============================================================================
支持IE9+
音视频
| 标签 | 描述 |
| — | — |
| source | 为媒体元素(比如 video 和 audio)定义媒体资源。主要定义其 src 属性和 type 属性,src 规定媒体文件的 URL,type 规定媒体资源的 MIME 类型。 |
| audio | 定义音频。对mp3文件的兼容性最好。 |
| video | 定义视频。对MP4文件的兼容性最好。 |
画布canvas
可以说是前端高级部分了,这里一言难尽,慢慢学习吧。支持IE9+。与之相关的svg也是支持IE9+。
Web存储
主要包括sessionStorage和localStorage,操作的API都类似,区别是sessionStorage是会话级存储,localStorage是持久化存储。兼容性挺好,支持IE8+。
地理定位geolocation
navigator下的一个属性,鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。支持IE9+。
HTML5 Application Cache
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总