[HTML5]-8-元数据与字符实体

引言

这篇文章介绍HTML元数据和字符实体,在文章后半段将会补充一些HTML的实用小技巧。

文章目录

0×1.HTML元数据

在本系列第二篇文章中已经介绍过meta标签,meta标签用于定义文档中的各种元数据,一个 HTML 页面可以包含多个meta标签,它一般被放置在HTML文档的head标签对中,请看下面的实例:

					<head>
						<!--包含页面的编码方式,可以使用下面两句中任意一句进行声明,效果都是相同的-->
						<meta charset="UTF-8">
						<meta http-equiv="content-type" content="text/html charset=UTF-8">
						<!--本文档的作者-->
						<meta name="author" content="qingsword">
						<!--文档的描述信息-->
						<meta name="description" content="HTML5入门手册">
						<!--使用什么编辑器编辑的文档-->
						<meta name="generator" content="Sublime Text">
						<!--提供给搜索引擎的关键字-->
						<meta name="keywords" content="HTML5,CSS3,Javascript">
						<title>meta实例</title>
					</head>
					

元数据一般包含上面这些内容,这些内容并不会被显示在页面中,其中的大部分内容是提供给第三方,比如搜索引擎看的,方便他们对文档进行归类,在遇到搜索请求的时候将提取这些信息,判断与搜索是否有关联,然后呈现给搜索者;比如你搜索了一个关键词"HTML5",如果这篇文章被搜索引擎收录,那么很有可能就会出现在搜索的结果列表中。

在元数据中实现页面的定时刷新和跳转,请看下面的实例:

					<!--大家可以尝试将下面的内容保存在一个.html结尾的文件中,用浏览器打开这个文件,3秒后,就会跳转到本站主页,如果将3改成0,打开页面后就将立刻跳转-->
					<head>
						<!--页面刷新三秒后,跳转到本站主页,如果不添加分号和分号后面的页面地址就是每隔三秒刷新当前页面-->
						<meta http-equiv="refresh" content="3;http://www.qingsword.com">
						<title>自动跳转</title>
					</head>
					

0×2.HTML字符实体

我们知道,浏览器的解释器会将HTML文档中一些特殊字符解释为有意义的代码,例如尖括号就是用来包含标签的特殊字符,如果我们要将这些特殊字符打印出来,而不是将他们解释成某个标签或命令的组成部分,这个时候就需要使用"字符实体",将有特殊意义的字符通过实体代码显示出来,最常用的字符实体如下表所示:

特殊符号 字符编码 数字编码 描述信息
  &nbsp; &#160; 空格
< &lt; &#60; 小于号
> &gt; &#62; 大于号
& &amp; &#38; and符号
" &quot; &#34; 双引号
' &apos; &#39; 单引号
¥ &yen; &#165;
© &copy; &#169; 版权
® &reg; &#174; 商标
× &times; &#215; 乘号
÷ &divide; &#247; 除号

如果我们需要在HTML文档中插入一个"and符号",但又不希望浏览器解释器将其解释成一个"字符实体的编码开端",就可以插入"and符号"的字符或数字编码"&amp;"或"&#38;",浏览器遇到这种编码,知道这是一个字符实体编码,就会根据字符实体编码表,在当前位置将这个符号"&"打印出来。

0×3.实用技巧

a.自定义页面热键

在上一篇文章介绍的表单标签input中,可以定义accesskey属性,实现热键功能,在页面中输入定义的热键,就可以快速定位到这个标签中,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>accesskey实例</title>
					</head>
					<body>
						<form>
							<!--配置热键k-->
							<input type="text" accesskey="k">
						</form>
					</body>
					</html>
					

显示效果:

在当前页面任意位置,按下键盘"[alt]+[k]"组合键,就将定位到上面的文本框中。

b.可修改的页面文本

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>contenteditable实例</title>
					</head>
					<body>
						<!--contenteditable属性设置成true,可以让这个段落标签能够被任意编辑-->
						<p contenteditable="true">这一整段文字都是可以随意编辑的,其高度是自适应的,可以回车来输入多行内容。</p>
					</body>
					</html>
					

显示效果:

这一整段文字都是可以随意编辑的,其高度是自适应的,可以回车来输入多行内容。

c.隐藏的标签

很多标签都具有隐藏属性,只需要给要隐藏的标签添加hidden属性即可:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>hidden实例</title>
					</head>
					<body>
						<p>段落一</p>
						<p hidden>这段文字在页面中不可见。</p>
						<p>段落二</p>
					</body>
					</html>
					

显示效果:

段落一

段落二

d.配置光标定位顺序

在表单中,我们可以通过键盘[tab]键来移动光标,在不同文本框之间切换来输入内容,input标签中有一个tabindex属性,能够控制按下[tab]键后,光标的移动顺序:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>tabindex实例</title>
					</head>
					<body>
						<form>
							<!--当按下[tab]键的时候,光标首先会移动到tabindex属性值是1的标签中,之后是2,以此类推,而属性值是-1的标签将永远不会被[tab]键访问到-->
							<input tabindex="-1" placeholder="index -1"><br>
							<input tabindex="2" placeholder="index 2"><br>
							<input tabindex="1" placeholder="index 1"><br>
						</form>
					</body>
					</html>
					

显示效果:




因为本文包含其他能够被[tab]键访问到的对象,所以结果可能不会如预料那样,你可以点击一下上面的"index 1"所在的文本框,然后按一下[tab]键,光标会自动移动到"index 2"所在的文本框,证明tabindex是有作用的。