美文网首页
【6Day】Joshua—初识html+css学习笔记(3)

【6Day】Joshua—初识html+css学习笔记(3)

作者: DesignerJoshua | 来源:发表于2019-07-08 21:58 被阅读0次

标签,短文本引用,初识HTML+CSS教程-慕课网

目录

  • <q>标签,短文本引用
  • <blockquote>标签,长文本引用(大段文本)
  • 使用<br>标签分行显示文本
  • 为你的网页中添加一些空格
  • 认识<hr>标签,添加水平横线
  • <address>标签,为网页加入地址信息
  • 想加入一行代码吗?使用<code>标签
  • 使用<pre>标签为你的网页加入大段代码
  • <q>标签,短文本引用

<q>标签,短文本引用

想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

语法:

<q>引用文本</q>

如下面例子:

最初知道庄子,是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。

讲解:

1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用<q></q>实现引用。

2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

代码显示结果

注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

<blockquote>标签,长文本引用(大段文本)

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。

语法:

<blockquote>引用文本</blockquote>

使用<br>标签分行显示文本

可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

上节的代码改为:

代码展示

语法:

xhtml1.0写法:

<br />

html4.01写法:

<br>

大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。


为你的网页中添加一些空格

我们已经讲解过在html代码中输入空格回车都是没有作用的。要想输入空格,必须写入&nbsp;。

语法:

&nbsp;

代码展示

认识<hr>标签,添加水平横线

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:

语法:

html4.01版本 <hr>

xhtml1.0版本<hr />

注意:

1.<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

<address>标签,为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

语法:

<address>联系地址信息</address>

在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。


想加入一行代码吗?使用<code>标签

在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:

<code>var i=i+300;</code>

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。

语法:

<code>代码语言</code>

注:如果是多行代码,可以使用<pre>标签。


使用<pre>标签为你的网页加入大段代码

在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图:

怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使用<pre>标签。

语法:

<pre>语言代码段</pre>

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

如下代码:

<pre>

    var message="欢迎";

    for(var i=1;i<=10;i++)

    {

        alert(message);

    }

</pre>

在浏览器中的显示结果为:

在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入<br>签,空格需要输入&nbsp;

注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

相关文章

网友评论

      本文标题:【6Day】Joshua—初识html+css学习笔记(3)

      本文链接:https://www.haomeiwen.com/subject/qwlphctx.html