2020-11-26 10:04发布
1. 新的Doctype 尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用和来语义化地表示带标题的图片 < style> This is an image of something interesting. 3. 重新定义的 已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明 4. 去掉link和script标签里面的type属性 5. 加/不加 括号 HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签6. 让你的内容可编辑，只需要加一个contenteditable属性 7. Email Inputs 如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验 8. Placeholders 这个input属性的意义就是不必通过javascript来做placeholder的效果了 9. Local Storage 使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在 10. 语义化的header和footer 11. 更多的HTML5表单特性12. IE和HTML5 默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让 其以block方式渲染 header, footer, article, section, nav, menu, hgroup { display: block; } 不幸的是IE会忽略这些样式，可以像下面这样fix: document.createElement(”article”); document.createElement(”footer”); document.createElement(”header”); document.createElement(”hgroup”); document.createElement(”nav”); document.createElement(”menu”); 13. hgroup 一般在header里面用来将一组标题组合在一起，如 Recall Fan Page Only for people who want the memory of a lifetime. 14. Required属性 required属性定义了一个input是否是必须的，你可以像下面这样声明 或者 15. Autofocus属性 正如它的词义，就是聚焦到输入框里面 16. Audio支持 HTML5提供了标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如 Download this file. 17. Video支持 和Audio很像，标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供： Your browser is old. Download this video instead. 18. 预加载视频 preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频 19. 显示视频控制 20. 正则表达式 由于pattern属性，我们可以在你的markup里面直接使用正则表达式了 Create a Username: 10″ pattern=”[A-Za-z]{4,10}” autofocus required> Go 21. 检测属性支持 除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如： [removed] if (!’pattern’ in document.createElement(’input’) ) { // do client/server side validation } [removed] 22. Mark元素 把元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的： Search Results They were interrupted, just after Quato said, ”Open your Mind”. 23. 什么时候用 HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。 24. 想立即使用HTML5? 不要等2022了，现在就可以使用了，just do it. 25. 哪些不是HTML5 1)SVG 2)CSS3 3)Geolocation 4)Client Storage 5)Web Sockets 26. Data属性 Bla Bla CSS中使用： Don’t Touch Me 27. Output元素 元素用来显示计算结果，也有一个和label一样的for属性 28. 用Range Input来创建滑块 HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性 可以使用css的:before和:after来显示min和max的值 input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;}
This is an image of something interesting.
Your browser is old. Download this video instead.
They were interrupted, just after Quato said, ”Open your Mind”.
html5新增的功能（特性有以下）
更加语义化的元素。 article、footer、header、nav、section
本地化储存。 localStorage 和 sessionStorage
离线应用，离线缓存。 manifest
拖曳以及释放的api。 Drag and drop
媒体播放。 video 和 audio
增强表单控件。 calendar、date、time、email、url、search
地理位置。 Geolocation
多任务。 webworker
全双工通信协议。 websocket
历史管理 history
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
Form Data 对象
绘画：canvas
1、离线缓存。可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。 2、音频视频自由嵌入，多媒体形式更为灵活。 3、地理定位。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。 4、Canvas绘图，提升移动平台的绘图能力。使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。 5、丰富的交互方式。提升互动能力：拖拽、撤销历史操作、文本选择等。 6、开发及维护成本低，这个相对于原生APP开发来说。更低的开发及维护成本;?使页面变得更小，减少了用户不必要的支出;而且，性能更好使耗电量更低。 7、CSS3 视觉设计师的辅助利器的支持。CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。 8、html5调用手机摄像头和手机相册、通讯录等功能。
html5相对于html4，多了以下这些新特性：
一，语义标签
二，增强型表单
三，视频和音频
四，Canvas绘图
五，SVG绘图
六，地理定位
七，拖放API
八，WebWorker
九，WebStorage
十，WebSocket
Html5新增了27个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
section：在 web 页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部， header 元素往往在一对 body 元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5WebSocket
1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据，以减少网络流量。
2、音频和视频bai可以自由嵌入，多媒体形式更加灵活。
3、地理位置。地理位置定位使得定位导航不再是专属导航软件，地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。
4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据，并支持对图像的移动、旋转、缩放等常规编辑。
5、丰富的互动方式。提高交互能力：拖动、撤消历史操作、文本选择等。
6、与原生app相比，开发维护成本低。降低开发和维护成本；？使页面更小，减少用户不必要的开销；性能更好，功耗更低。
7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。
8、HTML5调用相机、相册和通讯录的功能。
H5和HTML5的区别主要有三个：1、文档声明区别HTML：超文本标记语言，一种纯文本类型的语言。HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。2、结构语义区别html：没有体现结构语义化的标签，如：html5：添加了许多具有语义化的标签，...
在源代码的和之间加上如下的CSS语法控制：
锚点链接的语法：意思是在网页中的某一个位置，插入一个锚点显示的字样意思是在网页中的某一个位置链接之前设定的锚点，只要点击该链接，就会自动跳转到锚点处。
可以用css中 text-decoration：none来去掉超链接 的下划线。a {text-decoration: none} 这是一个链接
css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css
如果你指的是请求该页面后进行跳转，而在HTML中实现时可以使用JS语句：或直接使用redirect(XX.html)语句也可以实现。如果你是指的一个网页中链接另一个HTML内容的话，一般在HTML中是用框架集实现或是用用来显示。但这种情况只是一个结合，也就是说它还是完全...
html添加图片的方法如下：1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。
html图片对齐主要用text-align属性来控制：text-align的值主要又分为：left左对齐，center居中对齐，right靠右对齐。
你没有设置好，具体解决方法如下。输入如下代码：width表示宽度height表示高度下图所示，我将图片的宽和高通通缩小，可以看到，图片的尺寸果然按照我的意愿进行了改变。
form表单没有布局作用，需要在form外层嵌套div实现：
html插入图片有两种方式：一种是通过标签插入的正常的图片，另一种是通过>< style>问题分析：1、首先你是通过第二种方式插入的是背景图片，直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话，可以通过自身的属性...
就是以HTML的标准来格式编辑某个HTML的文件HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。下面有很多例子，您可以亲自试试：HTML 文本格式化实例文本格式化此例演示如何在一个 HTML 文件中对文本进行格式化预格式文本此例演示如何使用 pre 标签对空...
inputname=type=textstyle=width:200px;height:20px;
html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中：html代码：div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...
HTML是超文本标记语言。语法为： 首尾闭合 自闭合 没有捷径，一定要要 硬记+操作，硬记+操作，硬记+操作，硬记+操作上机多操作巩固，多多练习psd转换成html网页
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《【Web前端基础】html5新特性有什么》','http://www.shouhuola.com/q-31359.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
1. 新的Doctype和来 语义化地表示带标题的图片
![]()
< style>
Bla Bla
尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用
This is an image of something interesting.
3. 重新定义的
已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加 括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起，如
Recall Fan Page
Only for people who want the memory of a lifetime.
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
或者
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
16. Audio支持
HTML5提供了插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
Download this file.
17. Video支持
和Audio很像，文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
Your browser is old. Download this video instead.
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
19. 显示视频控制
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
10″ pattern=”[A-Za-z]{4,10}” autofocus required>
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
[removed]
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
[removed]
22. Mark元素
把元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
Search Results
They were interrupted, just after Quato said, ”Open your Mind”.
23. 什么时候用
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
CSS中使用：
Don’t Touch Me
27. Output元素
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
html5新增的功能（特性有以下）
更加语义化的元素。 article、footer、header、nav、section
本地化储存。 localStorage 和 sessionStorage
离线应用，离线缓存。 manifest
拖曳以及释放的api。 Drag and drop
媒体播放。 video 和 audio
增强表单控件。 calendar、date、time、email、url、search
地理位置。 Geolocation
多任务。 webworker
全双工通信协议。 websocket
历史管理 history
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
Form Data 对象
绘画：canvas
html5相对于html4，多了以下这些新特性：
一，语义标签
二，增强型表单
三，视频和音频
四，Canvas绘图
五，SVG绘图
六，地理定位
七，拖放API
八，WebWorker
九，WebStorage
十，WebSocket
Html5新增了27个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
section：在 web 页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部， header 元素往往在一对 body 元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5WebSocket
1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据，以减少网络流量。
2、音频和视频bai可以自由嵌入，多媒体形式更加灵活。
3、地理位置。地理位置定位使得定位导航不再是专属导航软件，地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。
4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据，并支持对图像的移动、旋转、缩放等常规编辑。
5、丰富的互动方式。提高交互能力：拖动、撤消历史操作、文本选择等。
6、与原生app相比，开发维护成本低。降低开发和维护成本；？使页面更小，减少用户不必要的开销；性能更好，功耗更低。
7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。
8、HTML5调用相机、相册和通讯录的功能。
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5WebSocket
相关问题推荐
H5和HTML5的区别主要有三个：1、文档声明区别HTML：超文本标记语言，一种纯文本类型的语言。HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。2、结构语义区别html：没有体现结构语义化的标签，如：html5：添加了许多具有语义化的标签，...
在源代码的和之间加上如下的CSS语法控制：
锚点链接的语法：意思是在网页中的某一个位置，插入一个锚点显示的字样意思是在网页中的某一个位置链接之前设定的锚点，只要点击该链接，就会自动跳转到锚点处。
可以用css中 text-decoration：none来去掉超链接 的下划线。a {text-decoration: none} 这是一个链接
css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css
如果你指的是请求该页面后进行跳转，而在HTML中实现时可以使用JS语句：或直接使用redirect(XX.html)语句也可以实现。如果你是指的一个网页中链接另一个HTML内容的话，一般在HTML中是用框架集实现或是用用来显示。但这种情况只是一个结合，也就是说它还是完全...
html添加图片的方法如下：1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。
html图片对齐主要用text-align属性来控制：text-align的值主要又分为：left左对齐，center居中对齐，right靠右对齐。
你没有设置好，具体解决方法如下。输入如下代码：width表示宽度height表示高度下图所示，我将图片的宽和高通通缩小，可以看到，图片的尺寸果然按照我的意愿进行了改变。
form表单没有布局作用，需要在form外层嵌套div实现：
html插入图片有两种方式：一种是通过标签插入的正常的图片，另一种是通过>< style>问题分析：1、首先你是通过第二种方式插入的是背景图片，直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话，可以通过自身的属性...
就是以HTML的标准来格式编辑某个HTML的文件HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。下面有很多例子，您可以亲自试试：HTML 文本格式化实例文本格式化此例演示如何在一个 HTML 文件中对文本进行格式化预格式文本此例演示如何使用 pre 标签对空...
inputname=type=textstyle=width:200px;height:20px;
html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中：html代码：div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...
HTML是超文本标记语言。语法为： 首尾闭合 自闭合 没有捷径，一定要要 硬记+操作，硬记+操作，硬记+操作，硬记+操作上机多操作巩固，多多练习psd转换成html网页