今天我们接着说文本格式化标签。
删除线标签<s>:
如果想要在网页中,表达一个文本或者数字,被删除了,但是又需要能够看到删除的内容,就可以用删除线标签符。
<html>
<head>
<title>删除线标签</title>
</head>
<body>
<p>八戒西瓜:</p>
<p>原价:<s>¥5.50</s>/KG</p>
<P>现价:<strong>¥4.80</strong></P>
</body>
</html>
在实际开发中,删除线效果常见于商品价格上,一般不使用删除线<s>,而是更多的使用CSS样式表来处理。
下划线标签符<u>:
对网页中的文本实现下划线效果,可以使用此标签符,示例代码如下:
<html>
<head>
<title>下划线标签</title>
</head>
<body>
<p>问:你的出生日期是?</p>
<p>答:我是<u>2000年1月1日</u>出生的。</p>
<p>问:你为什么要学习HTML?</p>
<p>答:我是为了<u> </u>。</p>
</body>
</html>
在实际开发中,对文本实现下划线效果,也一般是使用CSS样式表来完成的。在代码中出现了( )符号,这个符号在HTML语言表示的是空格的意思;有很多时候,我们需要在代码中表示空格,但是在代码之间敲打了很多空格,调试网页时发现没有得到预期效果,所以用具体的符号来指代空格。
水平线标签符<hr>:
在网页中,有时候我们需要用一根直线来分隔一些内容,起到醒目的作用,就可以使用水平线标签符,示例代码如下:
<html>
<head>
<title>水平线标签</title>
</head>
<body>
<h2>古诗三百首</h2>
<hr>
<h3>静夜思</h3>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
<br>
<h3>春晓</h3>
<p>春眠不觉晓,处处闻啼鸟。</p>
<p>夜来风雨声,花落知多少。</p>
<hr>
</body>
</html>
水平线标签符,它是一个自闭合标签,可以写成<hr>,也可以写成<hr/>,但是不用成对出现。
分区标签符<div>:
在HTML文档中,<div>标签符主要是对大块的内容提供一个结构或者说是容器,然后使用CSS样式表对这个分区进行显示上的各种样式的配置,我们能够看到很多的HTML教程都直接说学习“div + css”,就是指的这个。
<html>
<head>
<title>分区标签符</title>
</head>
<body>
<!-- 这是注释,不显示在网页上,第一首诗 -->
<div>
<h3>静夜思</h3>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
</div>
<hr>
<!-- 这是注释,不显示在网页上,第二首诗 -->
<div>
<h3>春晓</h3>
<p>春眠不觉晓,处处闻啼鸟。<p>
<p>夜来风雨声,花落知多少。</p>
</div>
</body>
</html>
从网页的效果上来看,其实看不出分区标签的作用,这个只有到学习CSS样式表后,才会体验到div + css,可以让网页的内容精彩起来的。
另外插一句,我们在代码中看到了<!-- -->这样的代码,它的作用是注释,很多时候我们需要对编写的代码进行一些说明,但是同时又不希望让用户看到,就可以使用注释语句,将注释的内容放在中间。这种注释方式只适合HTML语言,其他代码的注释有其他方式,以后会给大家分享的。
下一节,我们分享关于特殊符号的内容。