20180611-前端系统学习-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. 文本语义

em

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

    --默认斜体

    --可以嵌套

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

strong

• 重要，严重，紧急的内容

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

    --默认粗体

    --可以嵌套

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

span

• 无任何特殊语义

    --行内容器

    --样式

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

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

br

• 换行

其他

引用

    --cite 引文出处

    --q 短的行内引用的文本

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

代码

  --code

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