body文章标签部分(3)

最新推荐文章于 2022-03-11 16:13:26 发布

NoCarrots

最新推荐文章于 2022-03-11 16:13:26 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/c17854254215/article/details/81259238

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
    <h1>标题</h1>
    <p>第一个段落。</p>
    <p><em>菲茨杰拉德</em>，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。
他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱
华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

网页上要显示的内容都放在body标签里。

1.<hx></hx>

文章的标题标签。标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。网页上的各个栏目的标题也可使用它们。

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>

2.

文章的段落标签。注意一段文字一个标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个标签中。标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。

3.和

如果想在一段话中特别强调某几个文字，这时候就可以用到或标签,标签语义是强调。但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用表示强调。

4.

标签是没有语义的，它的作用就是为了设置单独的样式用的。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
    color:blue;
}
</style>
</head>
<body>
    <p>为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
</body>
</html>

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到标签了。

5.<q></q>

短文本引用标签，语义是引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

<p><q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q></p>

6.<blockquote></blockquote>

长文本引用标签。浏览器对<blockquote>标签的解析是缩进样式。标签内的内容在浏览器显示时左右两边均缩进两个字符。

<p><blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote></p>

7.

分行显示标签。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入 。

<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>

8.&nbsp；

空格符。一个空格符代表一个空格。

<body>姓名：xxx&nbsp;&nbsp;性别：x </body>

9.<hr/>(horizontal)

水平横线。在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。

10.<address></address>

地址标签。联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。在浏览器上显示的样式为斜体，如果不喜欢斜体，可以使用 css 样式来修改它<address>标签的默认样式。

<p>挖掘机技术哪家强，中国山东找蓝翔!<address>公司地址：xxxxxxxx</address></p>

注意：<address>标签内容显示时会自动换行。

11.<code></code>

代码标签。插入一行时使用，多行时不可以。

<p>我们可能知道水平渐变的实现，
类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}
</code></p>

12.<pre></pre>

代码标签。插入多行时使用。<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时（保留空格和换行符）都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<body>
    <pre>
var message="欢迎";
for(var i=1;i<=10;i++)<br>
{<br>
    alert(message); <br>
}<br>
</pre>
</body>

NoCarrots

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
body文章标签部分(3)

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;了不起的盖茨比&lt;/title&gt;&lt;/head&gt;&lt;
复制链接

扫一扫