HTML5之格式标签

<address>标签

类别：
          容器级标签
作用：
          定义文档作者或所有者的联系信息
说明：
          标签的文本通常呈现为斜体。大多数浏览器会在该标签块上下创建一些空白，一般将其放在footer标签中
全局属性： 支持
事件属性： 支持
注意：
          1.如果address标签位于body标签内部，则它表示该文档作者/所有者的联系信息
          2.如果address标签位于article标签内部，则它表示该文章作者/所有者的联系信息

<footer>
	<address>
		Author :...<br/>
		Tel :...
	</address>
</footer>

 

<abbr>标签

类别：
          文本级标签
作用：
          用来表示一个缩写词或者首字母缩略词，通常使用在文章中
说明：
          在使用该标签后在缩写文本下边会产生虚线，通过对缩写词语进行标记，能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息
全局属性： 支持
事件属性： 支持

<abbr title="Hypertext Markup Language">HTML</abbr>

 

<mark>标签

类别：
          文本级标签
作用：
          定义带有记号的文本
说明：
          在需要突出显示文本时使用mark标签，背景颜色默认为黄色，可用CSS控制其颜色
全局属性： 支持
事件属性： 支持

<mark style="background: red;">今天是你的生日，我的祖国！</mark>

 

<meter>标签

常用属性：
          [form]： 从属表单的表单id
          [value]： 当前值
          [max]： 最大值
          [min]： 最小值
          [low]： 低区间
          [high]： 高区间
          [optimum]： 最优值
类别：
          文本级标签
作用：
          定义度量衡。仅用于已知最大和最小值的度量
说明：
          可用于磁盘使用情况，查询结果的相关性等，使用low、high属性之后，当value值处于高低区间内时meter会有颜色变化（变为黄色），再加入optimum后,从最优值到两端高低区间这两段显示为绿色，大于高区间最小值，小于低区间最大值之后会变黄
全局属性： 支持
事件属性： 支持
注意：
1.<meter> 不能作为一个进度条来使用

<meter value="8" min="1" max="100" low="20" high="80" optimum="60"></meter>

 

<progress>标签

常用属性：
          [max]： 该属性定义了任务最大值（任务条变满时的值）
          [value]： 该属性定义了当前值（进度条显示的当前值）
类别：
          文本级标签
作用：
          定义运行中的任务进度（进程）
说明：
          一般将progress标签与JavaScript一起使用来显示任务的进度
全局属性： 支持
事件属性： 支持
注意：
          1.<progress> 不能作为一个度量衡来使用

<progress value="10" max="100"></progress>

 

<time>标签

常用属性：
          [datetime]： 该属性定义了日期/时间
类别：
          文本级标签
作用：
          定义公历的时间（24小时制）或日期，时间和时区偏移是可选的
说明：
          该标签能够以机器可读的方式对日期和时间进行编码，搜索引擎也能够生成更智能的搜索结果，在蜘蛛爬取的时候可以爬取到，知道这是时间，进而可以得到相关的流量
全局属性： 支持
事件属性： 支持

<time datetime="2019-10-15">2019年10月15日</time>

<pre>
	<samp>
		具体时间显示（采用24小时制）：
		<time datetime="16:30">下午4点半</time>
		
		月份显示：
		<time datetime="2014-3-21">2014年3月21日</time>
		
		结合显示（中间隔一个空格）：
		<time datetime="2014-3-21 16:30">2014年3月21日 下午4点半</time>
	</samp>
</pre>

 

<small>标签

类别：
          文本级标签
作用：
          定义小型文本 （和旁注）
全局属性： 支持
事件属性： 支持

<small>To learn AJAX, you must be familiar with the XMLHttpRequest Object.</small>To learn AJAX, you must be familiar with the XMLHttpRequest Object.

 

<kbd>标签

类型：
          文本级标签
作用：
          定义键盘文本
说明：
          例如快捷键
全局属性： 支持
事件属性： 支持

<kbd>Ctrl + z</kbd>

 

<wbr>标签

作用：
          规定在文本中的何处适合添加换行符 （软换行）
说明：
          br只要出现必然换行，而wbr则会根据窗口大小自动选择是否 换行 （对英文用处比较大）
全局属性： 支持
事件属性： 支持

To learn AJAX, you must be familiar with the XMLHttpRequest Object.To learn AJAX, you must be familiar with the XMLHttpRequest <wbr>Object.

 

<strong><b>标签

类型：
          文本级标签
作用：
          定义加粗文本
说明：
          <strong>具有语义化，代表强调，该标签显示效果为文本字体被加粗。<b> 无语义，仅仅是加粗文本字体，推荐使用<strong>标签
全局属性： 支持
事件属性： 支持
详见： http://www.yin.cc/blog/html_b_strong/

<strong>这里是中国人民共和国境内，请放下武器！</strong>
<b>这里是中国人民共和国境内，请放下武器！</b>

 

<em><i>标签

类型：
          文本级标签
作用：
          定义斜体文本
说明：
          em具有语义化，代表强调，该标签显示效果为文本字体变为斜体。i无语义，仅仅是将文本变为斜体，推荐使用em标签
全局属性： 支持
事件属性： 支持
详见： http://www.yin.cc/blog/html_b_strong/

<em>这里是中国人民共和国境内，请放下武器！</em>
<i>这里是中国人民共和国境内，请放下武器！</i>

 

<del><s>标签

类型：
          文本级标签
作用：
          定义删除文本
说明：
          del具有语义化，代表被删除内容，该标签显示效果为文本被加入删除线 。s****无语义，仅仅是加入删除线 ，推荐使用del标签
全局属性： 支持
事件属性： 支持

<del>￥998</del>
<s>￥998</s>

 

<ins><u>标签

类型：
          文本级标签
作用：
          定义插入文本
说明：
          ins具有语义化，代表此处为被插入文本，该标签显示效果为文本被加入下划线。u无语义，仅仅是加入下划线，推荐使用ins标签
全局属性： 支持
事件属性： 支持

<ins>此处应该有掌声</ins>
<u>此处应该有掌声</u>

 

<sup><sub>标签

类型：
          文本级标签
作用：
          定义上下标文本
说明：
          显示在当前文本流中字符高度的一半为基准线的上下方，但是与当前文本流中文字的字体和字号都是一样的，常用于化学式、数学公式、文章的脚注 等
全局属性： 支持
事件属性： 支持

H<sub>2</sub>CO<sub>3</sub> &nbsp;&nbsp;&nbsp;&nbsp; 
(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

 

<bdo></bdi>签

常用属性：
          [dir]： 控制文本方向，ltr为正向，rtl为反向
类型：
          文本级标签
作用：
          定义文本的方向
说明：
          在chrome中无效，在firefox中有效。 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。就是bdi里面的文字和外面后面的文字位置进行按照bdi中dir的方向进行设置。
全局属性： 支持
事件属性： 支持
详见： https://www.cnblogs.com/smileToMe/p/7818951.html

<bdo dir="rtl">这是一个新时代!</bdo><br/>
at<bdi dir="rtl">ago year</bdi>60

 

<pre>标签

类型：
          容器级标签
作用：
          定义预格式化的文本。被包围在pre元素中的文本通常会保留 空格 和 换行符 。而文本也会呈现为等宽字体
说明：
          pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素 （常见为可以导致段落断开的标签） 都不能位于pre元素中。如果希望使用pre标签来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符。一般将pre标签与code标签结合来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码
全局属性： 支持
事件属性： 支持

<pre>
	<code>
		public static void main (String[] args) {
			System.out.println("Hello World!");
		}
	</code>
</pre>

 

<code>标签

类型：
          文本级标签
作用：
          用于表示计算机源代码或者其他机器可以阅读的文本内容
说明：
          只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找code片段，并执行某些额外的文本格式化处理，如循环 和条件判断语句 的特殊缩进 等
全局属性： 支持
事件属性： 支持
注意：
          1.如果只是希望使用等宽字体的效果，请使用tt标签

<code style="border: 1px solid;">
	public static void main (String[] args) {
		System.out.println("Hello World!");
	}
</code>

 

<samp>标签

类别：
          文本级标签
作用：
          定义计算机程序的样本文本
说明：
          标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签
全局属性： 支持
事件属性： 支持

<div>
	字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。<br/>
	上面的HTML代码会显示为：<br/>
	字符序列 ae 可能会被转换为 æ 连字字符。
</div>

 

<var>标签

类别：
          文本级标签
作用：
          定义一个变量或者表示变量的名称，或者由用户提供的值。
说明：
          var标签是计算机文档中应用的另一个小窍门，这个标签经常与code和pre标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用var标签标记的文本通常显示为斜体。像其他与计算机编程和文档相关的标签一样，var标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。
全局属性： 支持
事件属性： 支持

<code style="border: 1px solid;">
	public static void main (String[] args) {
		String <var>greeting</var> = "Hello World!";
		System.out.println(greeting);
	}
</code>

 

<blockquote>标签

常用属性：
          [cite]： 规定引用的来源
类别：
          容器级标签
作用：
          定义摘自另一个源的块级引用，可以是一篇文章的一段，
说明：
          浏览器通常会对blockquote元素进行缩进，如果引文来自在线资源 （包括自己网站中的其他地方），那么可以在blockquote标签的cite（引用）属性中指明原始来源的URL
全局属性： 支持
事件属性： 支持

<blockquote cite="http://www.baidu.com">
	I have a dream that one day, down in Alabama, with its vicious racists, with its governor having his lips dripping with
	the words of "interposition" and "nullification" -- one day right there in Alabama little black boys and black girls
	will be able to join hands with little white boys and white girls as sisters and brothers.
</blockquote>

 

<q>标签

常用属性：
          [cite]： 规定引用的来源
类别：
          文本级标签
作用：
          定义一个“短的引用”，浏览器经常会在这种引用的周围插入“引号”
说明：
          可以是引用的一句话等段引用
全局属性： 支持
事件属性： 支持

<q style="border: 1px solid;">枪杆子里出政权！</q><hr/>

 

<cite>标签

类别：
          文本级标签
作用：
          定义 作品 （比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题
说明：
          用cite标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等。如果引用的这些文档有联机版本，最好是把该引用包含于一个a标签中，从而把一个超链接指向该联机版本。cite标签还有一个隐藏功能：它可以使你或者其他人从文档中自动摘录参考书目。可以很容易想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示
全局属性： 支持
事件属性： 支持

<img src="./img/img_the_scream.jpg" alt="这张图片可能有问题！" title="The Scream">
<p><cite>--The Scream</cite> by Edward Munch. Painted in 1893.</p>

 

<ruby><rt><p>标签

类别：
          文本级标签
作用：
          定义注释 （中文注音或字符），在东亚使用，显示的是东亚字符的发音
说明：
          ruby 元素由一个或多个需要解释/发音的字符和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持ruby元素时显示的内容，三者在ruby中的顺序为先写被注释的内容，再写rt，rp随意，否则rt中的注释不会在主体内容上面显示
全局属性： 支持
事件属性： 支持

<ruby style="border: 1px solid;">
	你 好
	<rt>ni hao</rt>
	<rp>(ni hao)</rp>
</ruby>