HTML5文本
文章目录
2.1 标题和正文
2.1.1 标题
< h1 > - < h6 > 标签可定义标题。< h1 > 定义最大的标题。< h6 > 定义最小的标题。一般使用< h1 > - < h3 > < h4 >用来写子栏或者版权信息。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="wrapper">
<h1>网页标题</h1>
<div id="box2">
<h2>栏目标题</h2>
<div id="sub_box1">
<h3>子栏目标题</h3>
<p>正文</p>
</div>
</div>
</div>
</body>
</html>
2.1.2 段落
每个< p >之间有12像素空隙。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h1>枫桥夜泊</h1>
<h2>张继</h2>
<p>月落乌啼霜满天，江枫渔火对愁眠。</p>
<p>姑苏城外寒山寺，夜半钟声到客船。</p>
</article>
</body>
</html>
2.2 描述性信息
2.2.1 强调、注解、备选
强调
< em >呈现为被强调的文本。标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。如果你只想使用斜体字来显示文本的话，请使用 < i > 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。
< strong >定义重要的文本，但它强调的程度更强一些。浏览器通常会以不同于 < em > 标签的方式来显示 < strong > 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>游客注意</h2>
<p><strong>请不要随地吐痰，特别是在<em>景区或室内</em>！</strong></p>
</body>
</html>
注解
< small > 标签制作更小字号的文本。一般用于细则，旁注。例如，免责声明、注意事项、版权信息、署名等等。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>现在订购免费送货。<small>（仅限于五环以内）</small></p>
<!--© © 内容信息 contentinfo-->
<footer role="contentinfo">
<p><small>© 2018 Baidu 使用百度前必读</small></p>
</footer>
</body>
</html>
备选
< b > 标签定义粗体的文本。< b > 标签定义了文本中的部分比其余的部分更重要，并呈现为粗体。
< i > 标签呈现斜体的文本。< i > 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如 < b >, < cite >, < dfn >, < em >, < q >, < small >, < strong >，使用 < i > 标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>这是一个<b>红</b>盒子，那是一个<b>蓝</b>盒子</p>
<p>这块<i class="taxonomy">玛瑙</i>来自西亚</p>
<p>这篇<i>散文</i>已经发表.</p>
<!--lang="fr"法语>je ne sais quoi 妙不可言-->
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
</body>
</html>
2.2.2 上下标、术语、代码
上下标
< sup >可定义上标文本。
< sub >标签可定义下标文本。
< sup >
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h1>王维</h1>
<!--<a href="#footnote-1" title="参考注释"><sup>[1]</sup></a> 跳转文本-->
<p>王维参禅悟理，学庄信道，精通诗、书、画、音乐等，以诗名盛于开元、天宝间，尤长五言，多咏山水田园，与孟浩然合称“王孟”，有“诗佛”之称<a href="#footnote-1" title="参考注释"><sup>[1]</sup></a> 。</p>
<footer>
<h2>参考资料</h2>
<p id="footnote-1"><sup>[1]</sup>孙昌武·《佛教与中国文学》第二章：“王维的诗歌受佛教影响是很显著的。因此早在生前，就得到‘当代诗匠，又精禅理’的赞誉。后来，更得到‘诗佛’的称号。”</p>
</footer>
</article>
</body>
</html>
< sub >
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="maths">
<h1>解一元二次方程</h1>
<p>一元二次方程求解有四种方法：</p>
<ul>
<li>直接开平方法 </li>
<li>配方法 </li>
<li>公式法 </li>
<li>分解因式法</li>
</ul>
<p>例如，针对下面这个一元二次方程：</p>
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p>
<p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得：</small><br />
<i>x</i><sub>1</sub>=1<br />
<i>x</i><sub>2</sub>=4</p>
</div>
</body>
</html>
术语
< dfn >定义一个定义项目。< dfn > 标签可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示 < dfn > 中的文本。与其他许多基于内容的样式和物理样式标签一样，< dfn > 标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供服务。</p>
<dl>
<!-- 定义“万维网”和“因特网”的参考定义 -->
<dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt>
<dd>万维网（WWW）是一个互连的超文本文档访问系统，它建立在<a href="#def-internet">Internet</a>之上。</dd>
</dl>
</body>
</html>
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="output">
<p>表示预定义格式的源代码：</p>
<pre>
var count = 0;
white (count<10)
{
document.white(count + "<br>");
count++;
}
</pre>
<p>表示代码字体：<code>Specifies a code sample</code></p>
<p>表示打印机字体：<tt>Renders text in a fixed-width font</tt></p>
<p>表示键盘字体：<kbd>Renders text in a fixed-width font</kbd></p>
<p>表示定义术语：<dfn>Indicates the defining instance of a term</dfn></p>
<p>表示变量字体：<var>Defines a programming variable. Typically renders in a italic font style</var></p>
<p>表示代码示例：<samp>Specifies a code sample</samp></p>
</div>
</body>
</html>
2.2.3 预定义、缩写词、编辑提示
预定义
< pre > 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。< pre > 标签的一个常见应用就是用来表示计算机的源代码，通常加入CSS样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
pre {
margin: 20px auto;
padding: 20px;
background-color: #aea8a8;/*根据自己需要修改背景底色颜色*/
white-space: pre-wrap;/*换行文本设置*/
word-wrap: break-word;
letter-spacing: 0;
font: 14px/26px 'courier new';
position: relative;
border-radius: 4px;
}
</style>
</head>
<body>
<pre>
pre {
margin: 20px auto;
padding: 20px;
background-color: #aea8a8;/*根据自己需要修改背景底色颜色*/
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: 0;
font: 14px/26px 'courier new';
position: relative;
border-radius: 4px;
}
</pre>
</body>
</html>
缩写词
< abbr >表示一个缩写形式，比如 “Inc.”、“etc.”。通过对缩写词语进行标记，能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。< abbr > 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
abbr[title] { border-bottom: 1px dotted #000; }
</style>
</head>
<body>
<p><abbr title=" HyperText Markup Language">HTML</abbr>是一门标识语言。</p>
</body>
</html>
编辑提示
< del >定义被删除的文本。
< ins >标签定义文档的其余部分之外的插入文本。
1、cite，值为URL，表示指向另外一个文档的 URL，此文档可解释文本被删除的原因（没有主流浏览器支持 cite 属性）。
2、datetime，值为YYYYMMDD，表示定义文本被删除的日期和时间。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><del>删除项目</del></li>
<li>列表项目</li>
<li><del>删除项目</del></li>
<li><ins>插入项目</ins></li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ins>
<p>文本1</p>
</ins>
<del>
<ul>
<li><del>删除项目</del></li>
<li>列表项目</li>
<li><del>删除项目</del></li>
<li><ins>插入项目</ins></li>
</ul>
</del>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p> <cite>因为懂得，所以慈悲</cite>。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2018-8-1">这是张爱玲对胡兰成说的话</ins>。</p>
<p> <cite>笑，全世界便与你同笑；哭，你便独自哭</cite>。<del datetime="2018-8-8">出自冰心的《遥寄印度哲人泰戈尔》</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2018-8-1">出自张爱玲的小说《花凋》</ins> </p>
</body>
</html>
2.2.4 引用、引述
引用
< cite > 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<p><cite>鲁迅</cite>说过：<q>地上本没有路，走的人多了就成了路.</q></p>
<p>他正在看<cite>红楼梦</cite></p>
</body>
</html>
引述
< blockquote > 标签定义引用，blockquote 元素会在文本的两端经常会缩进。< blockquote > 与 < blockquote > 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
< q > 标签定义一个短的引用（行内引文）。浏览器将自动为短引文添加引号。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>毛泽东说过：
<blockquote>帝国主义都是纸老虎 ... </blockquote>
</p>
<p>世界自然基金会的目标是 : <q cite="http://www.wwf.org"> 建设一个与自然和谐相处的未来 </q>我们希望他们成功。</p>
</body>
</html>
2.2.5 换行显示、修饰、非文本注解
换行显示
< br >特定环境使用换行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>北京市<br />
海淀区<br />
北京大学<br />
32号楼</p>
</body>
</html>
修饰
< span >行内元素一般加入CSS样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
.red { color: red; }
</style>
<p><span class="red">HTML</span>是通向 WEB 技术世界的钥匙。</p>
</body>
</html>
非文本注解
< u > 标签为文本添加下划线，请尽量避免使用 < u > 为文本加下划线，用户会把它混淆为一个超链接。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p>
</body>
</html>
2.3 实用性标记
2.3.1 高亮显示
高亮显示
< mark >标签定义带有记号的文本，在需要突出显示文本时使用 < mark > 标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h2><mark>HTML5</mark>中国:中国最大的<mark>HTML5</mark>中文门户 - Powered by Discuz!官网</h2>
<p><mark>HTML5</mark>中国,是中国最大的<mark>HTML5</mark>中文门户。为广大<mark>html5</mark>开发者提供<mark>html5</mark>教程、<mark>html5</mark>开发工具、<mark>html5</mark>网站示例、<mark>html5</mark>视频、js教程等多种<mark>html5</mark>在线学习资源。</p>
<p>www.html5cn.org/ - 百度快照 - 86%好评</p>
</article>
</body>
</html>
2.3.2 进度、刻度、时间
进度
< progress > max value 属性标签运行中的进程。可以使用 < progress > 标签来显示 JavaScript 中耗费时间的函数的进程。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<p>百分比进度: <progress id="progress" max="100"><span>0</span>%</progress></p>
<input type="button" onclick="click1()" value="显示进度"/>
</section>
<script>
function click1(){
var progress = document.getElementById('progress');
progress.getElementsByTagName('span')[0].textContent ="0";
for(var i=0;i<=100;i++)
updateProgress(i);
}
function updateProgress(newValue){
var progress = document.getElementById('progress');
progress.value = newValue;
progress.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</body>
</html>
刻度
< meter > 属性 max、min、high、low、value、optinum、form。使用 meter 元素展示给定的数据范围
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
</body>
</html>
时间
< time >属性datetime、pubdate，定义时间日期，datetime规定日期/时间。另一种方式，则是由元素的内容给定日期/时间。pubdate指示 < time > 元素中的日期 / 时间是文档的发布日期。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>科技公司都变成了数据公司：但你真的了解什么是“数据工程师”吗？</h1>
<p>发布日期<time datetime="2016-12-30" pubdate>2016-12-30 09:19</time></p>
<p>关于<time datetime=2017-1-1>1月1日</time>更正通知</p>
</header>
<p>在和国内外顶尖公司交流的过程中，我发现他们多数都很骄傲有一支极其专业的数据团队。这些公司花了大量的时间和精力把数据工程这件事情做到了极致，有不小规模的工程师团队，开源了大量数据技术。Linkedin 有 kafka、samza, Facebook 有 hive、presto，Airbnb有airflow、superset，我所熟悉的 Yelp 也有 mrjob…… 这些公司在数据领域的精益求精，为后来的大步前进奠定了基石。
</p>
<footer>
<p>https://www.huxiu.com/article/176524.html</p>
</footer>
</article>
</body>
</html>
2.3.3 联系信息、显示方向
联系信息
< address >联系信息可以是创建者的名字、电子邮箱、电话号码等等。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<footer>
<section>
<address>
<a title="作者：MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5 - Web开发者指南</a>
</address>
<p> 发布于：
<time datetime="2017-6-1">2017年6月1日</time>
</p>
</section>
</footer>
</body>
</html>
显示方向
< bdi >元素用于定义一块文本，使其脱离其父元素的文本方向设置，在无法预知某些文本的书写方向时，让浏览器来自动判断，并使用正确的文本书写方向。
假设要展示每个用户发帖数，用户名的信息是从数据库获取的，而用户来自世界各地，就无法准确知道用户名的书写方向。
< bdo >元素用来覆盖默认的文本方向，方向由 dir属性指定，并将属性值设置为 ltr 或 rtl，ltr（即，left to right）表示从左到右书写，而 rtl（即，right to left）表示从右到左书写。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><bdi>jcranmer</bdi></li>
<li><bdi>hober</bdi></li>
<li><bdi> نايإ </bdi></li>
</ul>
</body>
</html>
2.3.4 换行断点、标注
换行断点
< wbr >当正常情况下英文宽度过小，不足以在行末书写完一个词时，就将行末整个词放到下一行，实现换行，但是加入上面位置的< wbr >时，软换行就能收主动拆分单词，可以在支持HTML5的浏览器中测试（IE系列除了9都不支持，可以用Chrome），一般用于连接。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。</p>
</body>
</html>
标注
< ruby >偏门标签，用来对文字(主要是东亚地区)(也就是汉字)的发音做标注的标签，标签是父级标签，具体有’内容’< rb >/‘标注’< rt >/‘备选’< rp >当浏览器不兼容时备选显示内容。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ruby { font-size: 40px; }
</style>
</head>
<body>
<ruby>
北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp>
京 <rp>(</rp><rt>ㄐㄧㄥ</rt><rp>)</rp>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。
</body>
</html>
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
