HTML文本元素

HTML5中支持的元素：HTML5元素周期表

h

标题：head

h1~h6：表示1级标题~6级标题

p

段落，paragraphs

lorem，乱数假文，没有任何实际含义的文字

span【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素） 到了HTML5，已经弃用这种说法。

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性

显示代码时，通常外面套code元素，code表示代码区域。

 文本样式 

    1) 文本修饰线

        重点:
        text-decoration: none;          //去掉修饰线
        text-decoration: underline;     //下划线

        了解: 
        text-decoration: overline;      //上划线
        text-decoration: line-through;  //删除线

    2) 文本水平对齐方式

        text-align: center; /* 居中对齐 */
        text-align: right;  /* 右对齐 */
        text-align: left;   /* 左对齐 */

        小结: 只能对块元素设置,行内设置不生效

    3) 垂直对齐方式

        vertical-align: top;        /* 顶部对齐 */
        vertical-align: middle;     /* 居中对齐 */
        vertical-align: bottom;     /* 底部对齐 */

        小结: 
            1> 不能设置文本垂直对齐方式
            2> 清除图片底部4px的间隙
            3> 单行文本垂直居中 line-height = height

    4) 文本缩进

        text-indent: 32px;  /* 缩进32px */
        text-indent: 2em;   /* 缩进2个文字大小 */

    5) 文本溢出产生省略号 - 了解

        1> 单行溢出
            white-space: nowrap;        /* 强制在一行 */
            overflow: hidden;           /* 溢出隐藏 */
            text-overflow: ellipsis;    /* 文本溢出产生省略号 */

        2> 多行溢出

            display: -webkit-box;           /* 将盒子转为弹性伸缩盒子 */
            -webkit-box-orient: vertical;   /* 设置文本为垂直排列 */
            -webkit-line-clamp: 3;          /* 显示的行数 */
            overflow: hidden;               /* 溢出隐藏 */

        小结: 无需记忆,直接百度

    6) 文本阴影 - 了解

        text-shadow: 水平偏移  垂直偏移  阴影模糊值 阴影颜色; 

        地址: https://www.jb51.net/css/454847.html