HTML5新增元素和属性

最新推荐文章于 2022-03-31 15:49:19 发布

layroy

最新推荐文章于 2022-03-31 15:49:19 发布

阅读量118

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_57202083/article/details/119715820

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、常用元素和属性

HTML5新增元素

新增元素	说明
<header>	用于定义文档或节的页眉
<footer>	用于定义文档或节的页脚
<article>	用于定义文档内的文章
<section>	用于定义文档中的一个区域（或节）
<aside>	用于定义与当前页面或当前文章的内容几乎无关的附属信息
<figure>	用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。
<figcaption>	用于表示是与其相关联的引用的说明/标题，用于描述其父节点
<figure>	元素里的其他数据。
<hgroup>	用于对多个<h1>~<h6>元素进行组合
<nav>	用于定义页面上的导航链接部分
<mark>	用于定义高亮文本
<time>	用于显示被标注的内容是日期或时间（24 小时制）
<meter>	用于表示一个已知最大值和最小值的计数器
<progress>	用于表示一个进度条
<audio>	定义声音，比如音乐或其他音频流
<video>	定义视频，比如电影片段或其他视频流

HTML5 新增通用（全局）属性

新增属性	说明
contentEditable	contenteditable 属性规定元素内容是否可编辑
designMode	相当于一个全局的 contenteditable 属性，如果把designMode 属性设置为 on，则该页面上的所有支持contenteditable 属性的元素都变成可编辑状态
hidden	HTML5 的所有元素都有 hidden 属性，为 true 时显示，为false 时隐藏，。CSS 中的 display 属性也可以设置，hidden="true"相当于 display:none。

二、HTML5 表单相关元素和属性

HTML5 input 增新增 type 类型

类型	说明
color	用来创建一个允许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域
time	生成一个时间选择器
datetime	生成一个 UTC 的日期时间选择器
datetime-local	生成一个本地化的日期时间选择器
date	显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间
month	生成一个月份选择器，它结果值包括年份和月份，但不包括日期
week	生成一个选择的几周的选择器
email	生成一个 E-mail 输入框
number	生成一个只能输入数字的输入框
range	生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值
search	生成一个专门用于输入搜索关键字的文本框
tel	生成一个只能输入电话号码的文本框
url	生成一个 URL 输入框

HTML5 input 新增属性

属性	说明
placeholder	主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autocomplete	为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择
autofocus	当为某个表单控件增加该属性后，当浏览器打开这个页面，这个表单控件会自动获得焦点
list	为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern	用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后，验证会更加高效
novalidate	当提交表单时不对其进行验证
required	必需在提交之前填写输入字段
spellcheck	拼写检查，为<input>、<textarea>等元素新增属性
formenctype	规定在发送到服务器之前应该如何对表单数据进行编码
formtarget	带有两个提交按钮的表单，会提交到不同的目标窗口
multiple	一次上传多个文件
maxlength wrap	<textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 的 list 属性</title>
</head>
<body>
    <form id="login" action="" method="get">
        <label for="username"></label><input id="username" type="text" name="username" placeholder="请输入用户名" /><br/>
        <!--list 属性对应 datalist 的 id-->
        <label><input type="text" list="location" placeholder="户口所 在地"/></label><br/>
        <input type="submit" />
    </form>
    <datalist id="location">
        <option value="BeiJing">北京</option>
        <option value="HeBei">河北</option>
        <option value="HeNan">河南</option>
        <option value="ShanXi">山西</option>
        <option value="ShanDong">山东</option>
    </datalist>
</body>
</html>