web进阶之六:文本标签及文本样式
2018-09-09 本文已影响11人
甚得朕心
文本标签
- em标签用于表示一段内容中的着重点，语气上的强调。
- strong标签用于表示一个内容的重要性。
这两个标签可以单独使用，也可以一起使用。 - small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。
浏览器在显示small标签时会显示一个比父 元素小的字号。 - i标签会使文字变成斜体。icon图标
- b标签会使文字变成粗体。在目前一般都不会用。
这两个标签和em和strong类似，但是这两个标签没有语义。
所以根据html5标准，当我们只想设置文本 特殊显示，而不需要强调内容时就可以使 用i和b标签。
- 使用cite标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
- blockquote和q表示标记引用的文本。
1. blockquote用于长引用
2. q用于短引用。
在两个标签中还可以使用cite属性来表示引用的地址。 - sup和sub用于定义上标和下标。
上标主要用于表示类似于10的三次方中的3。
下标则用于表示类似余H2O（水分子）中的2。
上标页通常在网页中用来注释和引用。 - ins表示插入的内容，显示时通常会加上下 划线。
del表示删除的内容，显示时通常会加上删 除线。 - 如果你的内容包含代码示例或文件名，就 可以使用code元素。
pre元素表示的是预格式化文本，可以使用
pre包住code来表示一段代码。默认会使用等宽的字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签和文本样式</title>
</head>
<body>
<p>
<!--em是语气强调，strong是强调整个内容-->
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！<br>
<small>僵尸的秘密</small>
<!--small标签，会比父类小一个字号-->
</p>
<p>
<i>我是i标签中的内容</i><br>
<b>我是b标签中的内容</b><br>
</p>
<p>
<small>©甚得朕心保留解释权利.</small><br>
</p>
<p>
<!--<city>表示某内容的引用或参考-->
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>
<p>
<!--短引用，浏览器会自动添加一个引号
不过不一定所有的浏览器都添加
-->
孔子曾经说过：<q>学而时习之不亦说乎</q>
</p>
<p>
<!--长引用，这样效果会独占一行-->
孔子曰：<blockquote>天将降大任于斯人也</blockquote>
</p>
<p>
<!--网页中一般在人名上面有个什么符号，一点击就会跳转一个链接。-->
韩磊<sup><a href='https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin'>[1]</a><sup>
</p>
<p>H<sub>2</sub>O</p>
<p>
<!--就像购物网站上看到的一样，原来的价格划了，出现一个惊爆价-->
<del>17.75</del><br>
15.54<br>
</p>
<!-- ins表示一个插入的内容，会自动添加下划线 -->
<p>
那个高楼真<ins>高啊</ins>！
</p>
<pre>
<code>
if a>b：
print("hello")
</code>
</pre>
</body>
</html>。
本文样式由于太多比较杂乱，我就全部放在一个代码块中了，看起来也方便，代码直接复制下来，一运行就能看到效果。
有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。
