HTML5新增了哪些其他元素和属性

简介: 这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。


页面布局元素:
header:用于定义网页的头部区域。
nav:用于定义网页的导航栏。
article:用于表示独立的文章内容部分。
aside:表示与主内容相关但独立的区块。
section:用于表示文档中的节或区段,通常带有标题。
footer:用于定义网页的底部区域。
新增表单元素:
email:用于输入电子邮件地址的输入框。
tel:用于输入电话号码的输入框。
url:用于输入URL地址的输入框。
range:用于输入一个范围内的数字(通常显示为滑块)。
number:用于输入数字的输入框,可以设置最大值和最小值。
color:用于选择颜色的输入框。
date:用于选择日期的输入框。
datetime-local:用于选择日期和时间的输入框(无时区)。
time:用于选择时间的输入框。
month:用于选择月份和年份的输入框。
week:用于选择周和年的输入框。
其他新增元素:
canvas:用于绘制图形的画布元素,支持通过JavaScript进行绘图。
svg:用于定义矢量图形的元素。
video:用于嵌入视频文件的元素。
audio:用于嵌入音频文件的元素。
progress:用于表示任务完成进度的元素。
meter:用于表示在已知范围内的测量值(如磁盘使用情况)。
figure:用于表示图像、图表、照片等内容的元素,通常与figcaption元素一起使用。
figcaption:用于为figure元素提供标题或说明。
fieldset:用于将表单中的元素进行分组。
legend:为fieldset元素提供标题。
script:用于嵌入或引用JavaScript代码。
bdi:用于隔离文本的双向格式设置。
details和summary:用于创建可折叠的内容区域,summary元素作为details元素的标题。
dialog:用于创建对话框元素。
mark:用于表示需要突出显示的文本。
time:用于表示日期或时间。
datalist:与输入框一起使用,提供预定义的选项列表。
output:用于表示计算结果或其他输出值。
新增属性
全局属性:
contenteditable:指定元素内容是否可编辑。
contextmenu:规定元素的上下文菜单(目前主流浏览器支持有限)。
data-*:用于存储私有页面后应用的自定义数据。
draggable:规定元素是否可拖动。
dropzone:规定当被拖动的数据在拖放到元素上时,是否被复制、移动或链接(目前主流浏览器支持有限)。
hidden:规定对元素进行隐藏。
spellcheck:规定是否对元素内容进行拼写检查。
translate:规定元素内容是否要翻译(目前主流浏览器支持有限)。
表单属性:
placeholder:为输入框提供占位符文本。
autofocus:规定在页面加载时,输入框应自动获得焦点。
required:规定在提交表单之前,必须填写输入字段。
autocomplete:规定是否启用输入字段的自动完成功能。
multiple:允许文件输入字段选择多个文件。
这些新增的元素和属性极大地丰富了HTML5的功能,使其能够更好地满足现代网页设计和开发的需求。

目录
相关文章
|
3天前
|
移动开发 HTML5
HTML5 表单属性3
`<input>` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `<form>` 标签中的相应属性,并且主要适用于 `type="submit"` 和 `type="image"` 的输入类型。
|
4天前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`<datalist>`、`<keygen>`和`<output>`,以增强表单的功能性和用户体验。
|
26天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
26天前
|
前端开发 搜索推荐 算法
|
26天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
26天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
HTML 属性
HTML属性为元素提供额外信息,格式为name="value",置于开始标签内。如<a href="http://www.runoob.com">,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
WK
|
2月前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
30 1