欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

程序员文章站 2022-03-12 22:07:52
知识点：HTML5 新增的文档结构元素、文本格式化元素、页面增强元素、多媒体元素、HTML5 的通用属性（全局属性）、HTML5 废1、弃的元素和属性1、HTML5 新增的常用元素1.1 文档结构元素在HTML5 出现之前，HTML 页面只能用
元素作为结构元素，为代码阅读带来了极大的困扰，因此在HTML5 中增加了大量的结构元素，如
、
、

知识点：HTML5 新增的文档结构元素、文本格式化元素、页面增强元素、多媒体元素、HTML5 的通用属性（全局属性）、HTML5 废1、弃的元素和属性

 

1、HTML5 新增的常用元素

1.1  文档结构元素

在HTML5 出现之前，HTML 页面只能用<div>元素作为结构元素，为代码阅读带来了极大的困扰，因此在HTML5 中增加了大量的结构元素，如<header>、<footer>、<aside>、<nav>等。有了这些新增的结构元素，在查看页面元素时，可以更加快速地定位到想看的代码，提高了代码的阅读性。

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

代码比较：

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

  HTML5 新增的文档结构元素

文档结构元素                             作用                                                     注意
<header>

定义文档或者文档的一部分区域的页眉。

它可能包含一些标题元素，也可能包含其他元素，如logo、搜索框、作者名称等。

在一个文档中，您可以定义多个 <header> 元素。

<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
<footer> 定义文档或者文档的一部分区域的页脚。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 <footer> 元素。
<article>

定义独立的内容（文章）。<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article>元素可以是一个论坛帖子、新闻报道、博客条目或者用户评论。

<article>可以嵌套使用，如博客评论的<article>就可以嵌套在文章<article>里。

<article>元素也可以使用<header>、<footer>、<section>等元素将独立的文档内容分成若干块。
<section>

用于定义文档中的一个区域（或者节）。

一般通过示范包含一个标题（h1~h6）作为子节点辨识每一个<section>元素。

<section> 元素可以包含多个<article>，表示该区域内部包含多篇文章。

<section> 元素也可以嵌套使用，用于表示是该区域的子区域。
<aside>  定义 <article> 标签外的内容。通常表现为侧边栏或者嵌入内容。 该元素专门用于定义当前页面或当前文章的附属信息
<nav>

定义导航链接的部分。

常见的有顶部导航、底部导航、侧边导航

<nav> 元素只是作为标注一个导航链接的区域。

并不是所有的 HTML 文档都要使用到 <nav> 元素。

在不同设备上（手机或者PC）可以制定 <nav> 是否显示，以适应不同屏幕的需求。
<figure>

用于表示一块独立的“图片区域”，该元素内部可包含一个或多个img元素所代表的图片。

元素内部还可包含一个figcaption元素，用于定义该“图片区域”的标题。
<figcaption> 用来为 <figure> 元素定义标题 <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
<hgroup> 对标题元素进行分组。 当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列<h1> -<h6>  元素进行分组。（目前未被广泛使用）
<main> 用于指定文档的主体内容。

在一个文档中，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素。

<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

示例练习：将前面的网页框架写出来

 

1.2  文本格式化元素

 

文本格式化元素                                      作用                                   注意  
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签，使用并不广泛。
<mark> 定义高亮文本，显示效果是加上一个黄色背景。 在需要突出显示文本时使用 <mark> 标签。
<time>

用于定义被标注的内容是日期或时间

（采用的是公历时间（24 小时制）或日期）。

 <time> 标签不会在浏览器中呈现任何特殊效果。
datetime属性：属性值可以是日期或时间，是给机器看的时间戳。
pubtime属性：指定 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期。

示例练习：文本格式化元素的使用

	<body>
		<mark>我是被mark标签高亮的文本</mark>
		<p>你见过<time datetime="03:00">凌晨3点</time>的武汉吗？</p>
		<p><time datetime="1949-10-01">1949年10月1日</time>*成立了</p>
		<p>大家好，现在是<time datetime="2020-10-27 12:00" pubdate="true">2020年10月27日中午12点</time>,今天发生的大事件有：xxxx</p>
	</body>

显示效果：

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

 

1.3  页面增强元素

<meter> 用于定义度量衡。仅用于已知最大和最小值的度量，常用于电池电量、磁盘用量、速度表等。注意： <meter> 不能作为一个进度条来使用， 进度条使用 <progress> 标签。

        属性                                  说明
value 必需。规定 <meter> 元素的当前值。除非值域在0到1（闭区间）,否则最小值和最大值属性需要定义，以保证value属性在值域范围内。
form 规定 <meter> 元素所属的一个或多个表单。
max 规定 <meter> 元素的最大值。默认值是 1。
min 规定 <meter> 元素的最小值。默认值是 0。
high 定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
low 定义了低值区间的上限值（译者注：如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
optimum 规定度量的最优值。

示例练习：页面增强元素 <meter> 的使用

	<body>
		<p>展示给定的数据范围：</p>
		<meter value="2" min="0" max="10">2 out of 10</meter><br />
		<meter value="0.6">60%</meter><br /><!--没有设置max和min属性，会采用默认值1和0-->
	</body>

显示效果：

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

<progress> 标签定义运行中的任务进度（进程）。通常和JavaScript一起使用来实现进度条。progress标签不用来表示度量衡（如：磁盘空间使用情况或相关的查询结果）。如果需要表示度量衡，我们通常会使用meter标签（html5中meter标签的详细介绍）。

        属性                                  说明
max 规定需要完成的值（任务总工作量）。
value 规定进程的当前值（已完成的工作量）。

示例练习：页面增强元素 <progress> 的使用

	<body>
		<h3>progress标签演示</h3>
		<progress value="50" max="100">中间的内容不会显示</progress><br>
		<progress value="100" max="100">100%</progress><br>
		<progress value="10" max="200">5%</progress><br>
		<progress value="150" max="200">75%</progress><br>
	</body>

显示效果：

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

示例练习：结合jQuery，动态展示进度条

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

实现思路：①点击按钮，显示进度条和提示文字。②获取进度条的值，并重新赋值。③循环调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条效果-王迪</title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<style type="text/css">
			h3,progress { display: none;}
		</style>
		<script>
			//声明一个函数，用来获取设置进度条的值
			function set_progress(){
					var current = $("#jdt").val();//获取当前进度条的值
					$("#jdt").val(current+1);//设置进度条的值+1
				}
			$(document).ready(function(){
				$("button").click(function(){//给按钮添加点击效果，显示进度条和提示文字
					$("progress:hidden").show().next().show();
				});	
				//使用setInterval()方法，循环调用函数set_progress()
				setInterval("set_progress()",500);
			})
		</script>
	</head>
	<body>
		<button>点击下载</button><br />
		<progress value="1" max="100" id="jdt"></progress>
		<h3>系统加载中，请稍等...</h3>        
	</body>
</html>

 

2、多媒体元素

在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。  HTML5  的出现改变了这种现状，只需要使用 <audio> 和 <video> 两个元素，就可以处理音频和视频。

2.1  audio

<audio> 标签定义声音，比如音乐或其他音频流。 目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

<audio src="music/稻香.mp3" controls="controls">亲，您的浏览器不支持HTML5 的audio标签</audio>

 <audio> 标签常用属性：

  • src ：设置歌曲的路径。
  • sontrols ：设置是否使用播放控制。如果设置 controls="controls" ，那么网页中会显示 <audio> 标签自带的播放控件（比如播放/暂停按钮）。如果没有设置该属性，则不会显示。

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

 

2.2  video

<video> 标签定义视频，比如电影片段或其他视频流。 目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

<video src="music/背景视频.mp4" controls="controls" width="800" height="600">亲，您的浏览器不支持HTML5 的vido标签</video>

<video> 标签常用属性：

  • src ：设置视频的路径。
  • contros ：设置是否使用播放控制。如果设置 controls="controls" ，那么网页中会显示 <video> 标签自带的播放控件（比如播放/暂停按钮）。如果没有设置该属性，则不会显示。
  • width ： 设置视频播放器的宽度。
  • height ：设置视频播放器的高度。规定视频的高度和宽度是一个好习惯。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。结果是，在页面加载的过程中，其布局也会产生变化。
  • loop ：属性值loop。如果设置该属性，则当媒介文件完成播放后再次开始播放。
  • autoplay ：属性值autoplay 。如果设置该属性，则视频在就绪后马上播放。

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

 

3、HTML5 的通用属性

HTML5的元素可以支持指定属性，不同元素支持的属性可能略有区别，不过有些属性所有的元素是支持的，比如说id、style、class等。

通用属性： 即全局属性，是所有元素都支持的一些属性。

HTML5 规范对通用属性也做了一定的修改：保留了 id 、 style 、 class 、 dir 、 title 、 lang 、 accesskey 、 tableindex 等通用属性，新增了 contentdeitable 、 designMode 、 ihdden 等通用属性。

3.1  HTML5 保留的通用属性

通用属性                                                                     描述
id 用于为HTML元素指定唯一标识。一般配合CSS和JavaScript来选择元素。
class 指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。
style 用于给元素设定样式（内联样式或内部样式表）
dir 设定元素标签内容的文字方向。该属性支持ltr和rtl两个属性值。
title 用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容。
lang 通过lang属性来告诉浏览器和搜索引擎：页面中元素的内容所使用的语言。该属性值应该是符合标准代码，比如zh代表中文、en代表英文、fr代表法语、ja代表日文等。
accesskey

通过accesskey属性来指定激活该元素的快捷键，这样用户通过快捷键可以激活对应的HTML元素。

指定accesskey属性之后，我们只要按一下 Alt+快捷键 就可以激活
tableindex 用于控制窗口、获取焦点的顺序。比如将tabindex设置为1，那么表示第一次按下Tab键获得焦点。

示例练习：通过tableindex设置获取焦点的顺序

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

示例要求：当用户单击 Tab 键的时候，根据设置好的顺序依次获取焦点。

关键代码：

		<form action="" method="get">
			账号：<input type="text" tabindex="1" /><br />
			密码：<input type="text" tabindex="2" /><br />
			电话：<input type="text" tabindex="3" /><br />
			<button>提交</button>
		</form>

代码思考：tableindex属性值，数字小的，先获取焦点。

 

3.2  contenteditable 属性

HTML5 为大部分 HTML 元素增加了 contenteditable 属性。 contenteditable 属性规定元素内容是否可编辑。如果该属性设置为 true ，那么浏览器将允许用户直接编辑该 HTML 元素中的内容。修改后的内容会直接显示在该页面上。但是，一旦刷新页面，页面会重新加载，修改的内容会丢失。

HTML5 还提供了 isContentEditable 属性，用来返回元素的内容是否可编辑，返回 true 或 false 。该属性为只读属性。

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

<p contenteditable="true">我是一段可以被修改的内容</p>

案例延伸：

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

实现代码： 

需要知识点：jQuery设置元素属性，推荐阅读：【jQuery】第六课——使用jQuery操作DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>可编辑属性-王迪</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("p").attr("contenteditable","true");
				})
			})
		</script>
	</head>
	<body>
		<p>我是一个段落</p>
		<button>点击我，可以修改上面的段落</button>
	</body>
</html>

 

3.3  designMode 属性

designMode 相当于一个全局的 contenteditable 属性。如果将 designMode 属性设置为 on ，那么该页面上所有支持 contenteditable 属性的元素都会变成可编辑状态。  designMode 属性值默认为 off 。

严格来讲， designMode 属性只能使用JavaScript 修改，即设置 document.designMode = "on"; 这个属性以最后生效的为准。换句话说，这个属性值要么是 on ，要么是 off ，不能同一个页面中，一部分元素的属性值是 on ，另一部分元素的属性值是 off 。

【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>designMode-王迪</title>
		<script>
			document.designMode = "on";
		</script>
	</head>
	<body>
		<h2>标题文本</h2>
		<p>普通段落</p>
		<a href="#">a链接</a>
	</body>
</html>

 

3.4  hidden 属性

HTML5 的所有元素都有 hidden 属性。属性值为 true 时，元素隐藏，属性值为 false 时，元素显示。CSS中的 display 属性也可以设置与 hidden 属性一样的效果， hidde = "true" 相当于 display:none; 。

<p hidden="true">隐藏段落</p>

 

3.5  spellcheck 属性

spellcheck 属性规定是否对元素内容进行拼写检查。该属性支持 true 、false 两个属性值。可对以下文本进行拼写检查：

  • 类型为 text 的 input 元素中的值（非密码）
  • textarea 元素中的值
  • 可编辑元素中的值

 

 

 

 

 

 

========这里是结束分割线=========

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文地址：https://blog.csdn.net/dnruanjian/article/details/109285211

相关标签： HTML5

上一篇： html锚点定位（锚点链接：name还是id，一文搞定）

下一篇： vivox60对比荣耀30pro哪款更值得入手

推荐阅读