html5大作业网页推荐_HTML5新特性！

最新推荐文章于 2024-06-15 07:36:53 发布

Chihchou Tai

最新推荐文章于 2024-06-15 07:36:53 发布

阅读量571

点赞数

文章标签： html5大作业网页推荐

本文链接：https://blog.csdn.net/weixin_31520593/article/details/112091952

版权

前端inn

公众号ID：前端inn

关注

作者：罗哥

编辑：煜喵喵不爱喝酒

W3C HTML 5.2 规范中，有一节介绍该版本引入的修改，我综合来自《What’s New in HTML 5.2?》这篇文章的描述，在此列举我觉得比较重要的部分。

新特性

原生元素

对话框在平时开发中使用较为频繁，HTML 5.2 规范提供了元素来创建对话框。

元素默认是隐藏的。

<dialog>  <h2>Dialog Titleh2>  <p>Dialog content and other stuff will go herep>dialog>

添加 open 属性即可显示。

HTMLDialogElement 是的底层元素表示，提供了 show()、close()、showModal() 方法，控制对话框的显隐。

Open DialogClose Dialog

`Dialog Title`

Dialog content and other stuff will go here

const dialog = document.getElementById("dialog");document.getElementById("open").addEventListener("click", () => { dialog.show();});document.getElementById("close").addEventListener("click", () => { dialog.close();});

show() 与 showModal() 不同之处在于，showModal() 创建是一个模态框，打开时默认不能操作背后页面里的内容；而 show() 是以弹框形式显示的。

allowpaymentrequest 属性

现在可以为

rel="apple-touch-icon"

我们使用指定网页 icon，除此之外它还支持使用 sizes 属性，定义不同的尺寸的 icon，供浏览器在显示是择优显示。

HTML 5.2 之前，苹果 iOS 设备并不支持的 sizes 属性，而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用(比如 PWA)时使用的 icon。

现在规范承认了 apple-touch-icon 这个 rel 值，并且支持在这个上设置 sizes 属性。

新的有效实践

多个标签

HTML 5.2 之前，一个页面只能存在一个标签，用来表示某个页面独一无二的主题内容。

不过，从 HTML 5.2 版本开始，允许一个页面中同时存在多个标签，但是只能有一个显示的，其他都要用 hidden 属性隐藏。

.........

其他不显示的都要使用 hidden 属性隐藏，使用 display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。

内

HTML 5.2 允许在内使用标签，就近定义结构样式。

<body>    <p>I’m cornflowerblue!p>    <style>        p { color: cornflowerblue; }style>    <p>I’m cornflowerblue!p>body>

但最好还是不要这样做，把样式写在内联样式中是更推荐的做法。规范中提到：

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

即内的

中可使用标题元素

用在标签中作标题使用，则用在中，为表单域编组。

下面是一个例子：

   Personalia:  First name:  

  Last name:  

  Email:  

  Birthday:

HTML 5.2 之前，中只能使用纯文本，HTML 5.2 开始，可以使用标题元素了。

`Basic Information`

`Contact Information`

移除特性

、
和元素
文本的 inputmode 和 dropzone 属性
widow.showModalDialog() 方法

新的无效实践

中的无效内容

以下三类元素不能作为

段落的内容。

行内块、表格元素(Inline blocks、inline tables)
浮动元素(floated)
定位元素(positioned block-level elements)

HTML4 和 XHTML1 的严格文档类型声明(strict doctype)不再是有效 HTML。

HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

若您对前端开发有兴趣请关注前端inn

遇到问题，请联系我们 QQ群：1141255876

求分享

求点赞

求在看

Chihchou Tai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5大作业网页推荐_HTML5新特性！

前端inn公众号ID：前端inn关注作者：罗哥编辑：煜喵喵不爱喝酒W3C HTML 5.2 规范中，有一节介绍该版本引入的修改，我综合来自《What’s New in HTML 5.2?》这篇文章的描述，在此列举我觉得比较重要的部分。新特性原生元素对话框在平时开发中使用较为频繁，HTML 5.2 规范提供了元素来创建对话框。元素默认是隐藏的。<dialog> &...
复制链接

扫一扫