HTML5新特性总结

最新推荐文章于 2024-08-14 22:24:56 发布

小白yu

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量63

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_42560575/article/details/130168521

版权

HTML5 新元素 (w3school.com.cn)

html5可以获得定位HTML5 地理定位 (w3school.com.cn)

可以拖放任何元素HTML5 拖放 (w3school.com.cn)

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

header, section, footer, aside, nav, main, article, figure

表示结构的标签

header
nav
section
footer
main
article
aside

figure 和 figcaption

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

article	定义文章。
aside	定义页面内容以外的内容。
details	定义用户能够查看或隐藏的额外细节。
figcaption	定义元素的标题。
figure	规定自包含内容，比如图示、图表、照片、代码清单等。
footer	定义文档或节的页脚。
header	规定文档或节的页眉。
main	规定文档的主内容。
mark	定义重要的或强调的文本。
nav	定义导航链接。
section	定义文档中的节。
summary	定义元素的可见标题。
time	定义日期/时间。

HTML5 表单元素

HTML5 增加了如下表单元素：

datalist

元素为元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

元素的 list 属性必须引用元素的 id 属性。

实例

通过设置预定义值的元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

HTML5 input新增类型

HTML5 输入类型

HTML5 增加了多个新的输入类型：

color 应该包含颜色的输入字段
date 输入指定格式日期，也可以选择日期，可以规定最早日期和最晚日期
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

input限制：

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

HTML5 属性

HTML5 为增加了如下属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

并为增加如需属性：

autocomplete
novalidate

html新增标签

画布标签canvas

svg标签可以内联svg矢量图

可以自己定义标签向 HTML 添加新元素

您可以通过浏览器 trick 向 HTML 添加任何新元素：

本例向 HTML 添加了一个名为的新元素，并为其定义 display 样式：

实例

<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

TML5 提供的新元素可以构建更好的文档结构：

标签	描述
article	定义文档内的文章。
aside	定义页面内容之外的内容。
bdi	定义与其他文本不同的文本方向。
details	定义用户可查看或隐藏的额外细节。
dialog	定义对话框或窗口。
figcaption	定义 figure 元素的标题。
figure	定义自包含内容，比如图示、图表、照片、代码清单等等。
footer	定义文档或节的页脚。
header	定义文档或节的页眉。
main	定义文档的主内容。
mark	定义重要或强调的内容。
menuitem	定义用户能够从弹出菜单调用的命令/菜单项目。
meter	定义已知范围（尺度）内的标量测量。
nav	定义文档内的导航链接。
progress	定义任务进度。
rp	定义在不支持 ruby 注释的浏览器中显示什么。
rt	定义关于字符的解释/发音（用于东亚字体）。
ruby	定义 ruby 注释（用于东亚字体）。
section	定义文档中的节。
summary	定义元素的可见标题。
time	定义日期/时间。
wbr	定义可能的折行（line-break）。