20180611-前端系统学习-HTML之文本元素

最新推荐文章于 2023-12-04 20:15:26 发布

原创最新推荐文章于 2023-12-04 20:15:26 发布 · 176 阅读

1 ·

CC 4.0 BY-SA版权

前端系统学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍了HTML中的各种元素及其应用场景，包括段落、预定义格式文本、引用内容、强调与重要的文本标记、行内容器的使用、换行以及其他引用方式。此外还展示了如何使用代码标签来表示编程代码。

1. 文本内容

p 段落一般用于新闻类

pre

表示预定义格式文本

--按照原文件中格式的显示

--空白符（比如空格和换行符）都会显示出来

    <div>
        body{ color:red; }
    </div>
    <pre>
        body{
                color:red;
            }
    </pre>

显示效果如下：

blockquote

引用内容
属性

--cite

    <div>
        什么是HTML？维基百科上是这么定义的
        <blockquote cite="https://zh.wikipedia.org/wiki/HTML">
            超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术...
        </blockquote>
    </div>

显示效果如下：

2. 文本语义

强调，需要用户着重阅读的内容

--默认斜体

--可以嵌套

<p>
    猫是一种<em>可爱</em>的动物
</p>

strong

重要，严重，紧急的内容

--标题，警告，注意事项，指示性内容

--默认粗体

--可以嵌套

    <span>
        播放
        <strong>3323097</strong>次
    </span>

span

无任何特殊语义

--行内容器

--样式

    <div>
        售价
        <span>109￥</span>
    </div>

可以在span上加特殊的class控制span的显示

换行

其他

引用

--cite 引文出处

--q 短的行内引用的文本（注意要引用的文本不需要加双引号，浏览器会自动加引号）

    <div>
        鲁迅在
        <cite>故乡</cite>中写道
        <q>地上本来没有路，走的人多了，便有了路</q>
    </div>

代码

--code

    <pre>
    <code>
        function say(){
            alert("Hello World");
        }
    </code>
    </pre>