菜单 搜索
首页 前端知识 HTML5 新增元素

HTML5 新增元素

2024-06-22 10:06:20 前端知识 前端哥 49 836 我要收藏

文章目录

  • HTML5 新增元素
    • 概述
    • header
    • nav
    • article
    • aside
    • section
    • footer
    • 表单元素
      • 新增type属性值（验证型）
      • 新增type属性值（取值型）
      • output元素
    • address
    • progress
    • meter
    • figure 和 figcaption
    • fieldset 和 legend
    • a
    • script

HTML5 新增元素

概述

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

header

在HTML5中，header元素一般用于3个地方：

  • 页面头部：如网站名称、页面LOGO、顶部导航、介绍信息等。
  • 文章头部（article元素）：文章标题、meta信息（一般指作者、点赞数、评论数）。
  • 区块头部（section元素）：标题。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <article>
            <header></header>
            ……
            <footer></footer>
        </article>
        <aside></aside>
        <section>
            <header></header>
            ……
        </section>
        <footer></footer>
    </body>
</html>

在这里插入图片描述

nav

在HTML5中，nav元素一般用于3个地方：

  • 顶部导航：nav元素既可以放到header元素内部，也可以放到header元素外部。
  • 侧栏导航。
  • 分页导航。

article

在HTML5中，article元素一般只会用于一个地方：文章内容部分。

可以把article看成一个独立的部分，它内部可以包含标题以及其他部分。也就是说，article元素内部可以包含header元素、section元素和footer元素等。

<article>
    <header>
        <h1>HTML5是什么？</h1>
        <p>作者、点赞、评论、浏览……</p>
    </header>
    <div id="content">文章内容……</div>
    <footer>
        <nav>上一篇、下一篇导航</nav>
    </footer>
</article>

aside

在HTML5中，aside元素一般用于表示跟周围区块相关的内容，正确地使用aside元素，主要取决于它的使用位置，我们大体可以分为以下两种情况：

  • 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。
  • 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如相关文章、相关链接、相关广告等。

section

在HTML5中，section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。

HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素。

<section>
    <header>工具手册</header>
    <ul>
        <li>HTML5参考手册</li>
        <li>CSS3参考手册</li>
        <li>JavaScript参考手册</li>
    </ul>
</section>

footer

在HTML5中，footer元素一般用于两个地方：

  • 一个是“页面底部”：一般包含友情链接、版权声明、备案信息等。
  • 另一个是“文章底部”：footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。
<article>
    <header>
        <h1>HTML5是什么？</h1>
        <p>作者、点赞、评论、浏览……</p>
    </header>
    <div id="content">文章内容……</div>
    <footer>
        <nav>上一篇、下一篇导航</nav>
    </footer>
</article>

表单元素

新增type属性值（验证型）

属性值说明
email邮政类型
tel电话类型
urlURL类型
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form>
			<p><label>电子邮件：<input type="email"></label></p>
			<p><label>电话号码：<input type="tel"></label></p>
			<p><label>你的网址：<input type="url"></label></p>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

新增type属性值（取值型）

属性值说明
range取数字，滑块样式
number取数字，微调样式
color取颜色
date取日期
time取时间
month取月份
week取周数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var number1 = document.querySelector("input[type='range']").value;
				console.log(number1);
				var number2 = document.querySelector("input[type='number']").value;
				console.log(number2);
				var color = document.querySelector("input[type='color']").value;
				console.log(color);
				var date = document.querySelector("input[type='date']").value;
				console.log(date);
				var time = document.querySelector("input[type='time']").value;
				console.log(time);
			}
		</script>
	</head>
	<body>
		<form>
			<p><label>取值：<input type="range" min="0" max="100" step="10" value="20"></label></p>
			<p><label>取值：<input type="number" min="0" max="100" step="10" value="30"></label></p>
			<p><label>取颜色：<input type="color" value="#ff557f"></label></p>
			<p><label>取日期：<input type="date" value="2008-08-09"></label></p>
			<p><label>取时间：<input type="time" value="06:07"></label></p>
			<p><label>取月份：<input type="month" value="2008-09"></label></p>
			<p><label>取周数：<input type="week" value="2008-W09"></label></p>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

在这里插入图片描述

output元素

在HTML5中，我们可以使用output元素来定义表单元素的输出结果或计算结果。

output元素是一个行内元素，只不过它比span元素更具有语义化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			window.onload = function() {
				var input = document.querySelector("input[type='range']");
				var output = document.getElementsByTagName("output")[0];
				output.value = input.value;
				input.onchange = function() {
					output.value = input.value;
				}
			}
		</script>
	</head>
	<body>
		<form>
			<input type="range" min="0" max="100" step="5">
			<output></output>
		</form>
	</body>
</html>

address

在HTML5中，address元素一般用于两个地方：

  • 当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。
  • 一个页面可以有多个article元素，比如有些页面就有好几篇文章。当address元素应用于article元素时，它一般放在article元素内部的footer元素内，表示该篇文章所有者的地址信息。当然，address元素也可以放于section元素内。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <article>
            <header>作者：mozilla</header>
            <p>这是第2篇文章的内容……</p>
            <footer>
                <address>
                    你可以通过<a href="mailto:webmaster@somedomain.com">mailto:webmaster@somedomain.com</a>联系作者：mozilla。
                </address>
            </footer>
        </article>
        <aside></aside>
        <footer>
            <address>
                如果你发现网站有bug，可以通过<a href="mailto:lvyestudy@foxmail.com"> 电子邮件 </a>联系我们。<br/>
                当然你也可以通过下面地址访问我们：<br/>
                广州市黄埔大道601号暨南大学.
            </address>
        </footer>
    </body>
</html>

progress

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <progress max="10" value="8"></progress><br/>
        <progress max="100" value="80"></progress>
    </body>
</html>

在这里插入图片描述

meter

meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：

  • meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
  • progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<meter min="0" max="10" value="8"></meter><br />
		<meter min="0" max="100" value="80"></meter>
	</body>
</html>

在这里插入图片描述

figure 和 figcaption

figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			figure {
				width: 100px;
				text-align: center;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<figure>
			<img src="img/apple_pic.png" alt="黑夜">
			<figcaption>hello</figcaption>
		</figure>
	</body>
</html>

在这里插入图片描述

fieldset 和 legend

在HTML5中，我们还可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="index.php" method="post">
			<fieldset>
				<legend>hello</legend>
				<p>
					<label for="name">账号：</label>
					<input type="text" id="name" name="name" />
				</p>
				<p>
					<label for="pwd">密码：</label>
					<input type="password" id="pwd" name="pwd" />
				</p>
				<input type="checkbox" id="remember-me" name="remember-me" />
				<label for="remember-me">记住我</label>
				<input type="submit" value="登录" />
			</fieldset>
		</form>
	</body>
</html>

在这里插入图片描述

a

HTML5为a元素新增了3个属性。

属性说明
download定义可被下载的目标（如文件、图片等）
media定会被链接文档为何种媒介/设备优化的
type定义被链接文档的MIME类型

其中media和type这两个属性用得很少，我们只需要掌握download这一个属性即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <a href="img/a.png" download="hello.png">下载图片</a>
</body>
</html>

当我们点击超链接后，浏览器就会下载该图片，并且图片名字换成新的文件名hello.png。如果我们改为下面这句代码，也就是省略download属性值，则图片会使用旧的文件名a.png。

script

HTML5为script元素新增了两个属性：defer和async。

这两个属性的作用都是加快页面的加载速度，两者区别如下：

  • defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等待到整个HTML文档加载完成才会执行。
  • async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。

defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。从上面也可以看出，defer属性相对于async属性来说，更符合大多数开发场景对脚本加载执行的要求。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/async.js" async></script>
    </head>
    <body>
        <script>
            console.log("内部脚本");
        </script>
    </body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13353.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

爱心

2024-06-27 17:06:24

表白代码

2024-06-27 16:06:42

html5 css3 前端基础认识。

2024-06-26 23:06:18

HTML5 使用技巧分享 4 —— 将一行元素快速置于屏幕底部

2024-06-26 23:06:04

CFT Show 信息收集篇

2024-06-26 23:06:28

关于HTML5表单验证的方法教程

2024-06-26 23:06:28

JavaScript与HTML5 Video API交互从视频中截取当前播放画面

2024-06-26 23:06:27

2024年前端最新【四万字总结】对于HTML5的一些总结与实践，Web前端内存优化面试题

2024-06-26 23:06:58

2024年Web前端最新值得html初学者收藏的响应式前端开发框架，前端动态换肤实现原理解析

2024-06-26 23:06:49

html插入视频的方法

2024-06-20 00:06:46

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！