html5里面规定了很多标签，很多标签也许没有什么实际的展示效果，但是他们都是从语义出发的，一方面使得css和js写起来更方便，另一方面也增加了阅读性。
先上一张笔者练习的效果图：
推荐一个网站可以快速查看元素的兼容性http://caniuse.com/，
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本元素</title>
<style>
.container{
box-shadow: 0 0 10px grey;
padding:10px;
margin: 10px;
}
h1{
text-align: center;
}
table{
width: 100%;
}
table tr td{
padding: 5px;
}
table tr:nth-child(odd){
background-color: lightgoldenrodyellow;
}
table tr:nth-child(even){
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container">
<h1>文本元素演示</h1>
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td>hello world</td>
<td>你好</td>
</tr>
<tr>
<td>b</td>
<td>bold</td>
<td>加粗，不强烈</td>
<td><b>hello world</b></td>
<td><b>你好</b></td>
</tr>
<tr>
<td>strong</td>
<td>bold</td>
<td>加粗，语义上强调</td>
<td><strong>hello world</strong></td>
<td><strong>你好</strong></td>
</tr>
<tr>
<td>br</td>
<td>break</td>
<td>换行</td>
<td></td>
<td></td>
</tr>
<tr>
<td>wbr</td>
<td>word break</td>
<td>软换行,当需要换行的时候，在此处换行</td>
<td></td>
<td></td>
</tr>
<tr>
<td>i</td>
<td>italic</td>
<td>斜体</td>
<td><i>hello world</i></td>
<td><i>你好</i></td>
</tr>
<tr>
<td>em</td>
<td>emphasized</td>
<td>斜体，语义上有强调</td>
<td><em>hello world</em></td>
<td><em>你好</em></td>
</tr>
<tr>
<td>s</td>
<td>strikethrough</td>
<td>删除线</td>
<td><s>hello world</s></td>
<td><s>你好</s></td>
</tr>
<tr>
<td>del</td>
<td>delete</td>
<td>删除线，强调</td>
<td><del>hello world</del></td>
<td><del>你好</del></td>
</tr>
<tr>
<td>u</td>
<td>underlined</td>
<td>下划线</td>
<td><u>hello world</u></td>
<td><u>你好</u></td>
</tr>
<tr>
<td>ins</td>
<td>inserted</td>
<td>下划线，语义上表示插入</td>
<td><ins>hello world</ins></td>
<td><ins>你好</ins></td>
</tr>
<tr>
<td>small</td>
<td></td>
<td></td>
<td><small>hello world</small></td>
<td><small>你好</small></td>
</tr>
<tr>
<td>sup</td>
<td>super-script</td>
<td>上标</td>
<td><sup>hello world</sup></td>
<td><sup>你好</sup></td>
</tr>
<tr>
<td>sub</td>
<td>sub-script</td>
<td>下标</td>
<td><sub>hello world</sub></td>
<td><sub>你好</sub></td>
</tr>
<tr>
<td>code</td>
<td></td>
<td>代码,只有在lang=“en”时才有效果</td>
<td><code>hello world</code></td>
<td><code>你好</code></td>
</tr>
<tr>
<td>var</td>
<td></td>
<td>变量</td>
<td><var>hello world</var></td>
<td><var>你好</var></td>
</tr>
<tr>
<td>samp</td>
<td>sample</td>
<td></td>
<td><samp>hello world</samp></td>
<td><samp>你好</samp></td>
</tr>
<tr>
<td>kbd</td>
<td>keyboard</td>
<td>键盘，输入</td>
<td><kbd>hello world</kbd></td>
<td><kbd>你好</kbd></td>
</tr>
<tr>
<td>abbr</td>
<td>abbreviation</td>
<td>缩写词</td>
<td><abbr>hello world</abbr></td>
<td><abbr>你好</abbr></td>
</tr>
<tr>
<td>dfn</td>
<td>define</td>
<td>定义，一般性倾斜</td>
<td><dfn>hello world</dfn></td>
<td><dfn>你好</dfn></td>
</tr>
<tr>
<td>q</td>
<td>quotation</td>
<td>引用语</td>
<td><q>hello world</q></td>
<td><q>你好</q></td>
</tr>
<tr>
<td>cite</td>
<td>citation</td>
<td>摘抄</td>
<td><cite>hello world</cite></td>
<td><cite>你好</cite></td>
</tr>
<tr>
<td>ruby,rp,rt</td>
<td>据说有语言历史由来</td>
<td>语言元素,rp标签下，内容会不显示。但明显，各个浏览器对次功能的支持并不是很好。而且，布局对齐也会显得额外麻烦。</td>
<td><ruby>
</ruby></td>
<td><ruby>你<rt><rp>(</rp>ni<rp>)</rp></rt>好<rt>hao</rt></ruby></td>
</tr>
<tr>
<td>kdo</td>
<td>但chrome上，似乎并没有效果</td>
<td>文字方向</td>
<td><kdo dir="rtl">hello world</kdo></td>
<td><kdo dir="rtl">你好</kdo></td>
</tr>
<tr>
<td>mark</td>
<td></td>
<td>上下文中突出显示，黄色背景，蓝色字体</td>
<td><mark>hello world</mark></td>
<td><mark>你好</mark></td>
</tr>
<tr>
<td>time</td>
<td></td>
<td>时间,仅仅从语义上出发</td>
<td><time>2017-07-07 07:10:15</time></td>
<td><time>你好</time></td>
</tr>
<tr>
<td>span</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
