HTML 文本标签

• 标签用于表示一段内容的着重点

• 用于表示一个内容的重要性、

通常em显示为斜体，而strong显示为粗体

• 标签会使文字变成斜体

• 标签会使文字变成粗体

• 标签比父元素小的字号

small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。

• 标签比父元素大的字号

• 标签表示可以指明对某内容的引用和参考

例如:

《七龙珠》讲的是召唤神龙的故事。

• 标签引号

• 长引用

例如:
孟子曾经说过：

天将降大任于是人也...

他说的真对啊！

孔子曾经说过：学而时习之不亦说乎

• 和定义上下标

上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2。

• 表示插入内容下划线

• 删除线

• 预格式化文本

• 表示一段代码
列表

pre包住code来表示一段代码。

 
 function fun(){ alert("hello");
 }
 
 

列表

列表

1.有序列表 

 

       
列表项1
 
       
列表项2
  
        
列表项3
 
  

2.无序列表 
 

        
列表项1
  
        
列表项2
 
        
列表项 3
  
3.定义列表 

 
 
        
定义项1
 
        
定义描述1
 
         
定义项2
         
定义描述2
  
         
定义项3
 
         
定义描述3
 
 

文本的格式化
单位

• px 像素

• % 百分比

• em 1em=1font-size

• rgb 颜色值 0-255 %0-100% 16进制 #0000ff

 在CSS可以直接使用颜色的单词来表示不同的颜色
 *      红色：red
 *      蓝色：blue
 *      绿色：green    
 *   也可以使用RGB值来表示不同的颜色
 *      - 所谓的RGB值指的是通过Red Green Blue三元色，
 *          通过这三种颜色的不同的浓度，来表示出不同的颜色
 *      - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
 *          - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
 *          - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
 *              使用百分数最终也会转换为0-255之间的数
 *              0%表示0
 *              100%表示255
 *   也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示一个颜色
 *          第一组表示红色的浓度，范围00-ff
 *          第二组表示绿色的浓度，范围00-ff
 *          第三组表示蓝色的浓度，范围00-ff
 *      语法：#红色绿色蓝色
 *      十六进制：
 *      0 1 2 3 4 5 6 7 8 9 a b c d e f
 *      00 - ff
 *      00表示没有，相当于rgb中的0
 *      ff表示最大，相当于rgb中255
 *      红色：#ff0000
 *      像这种两位两位重复的颜色，可以简写
 *          比如：#ff0000 可以写成 #f00
 *          #abc  #aabbcc       
 *          
 */
            /*background-color: rgb(161,187,215);*/
                
                /* background-color: rgb(100%,50%,50%); */

                /* background-color: #0000ff; */
                
                /*background-color: #00f;*/
                
                /* background-color: #084098; */

字体分类

• serif（衬线字体）
• sans-serif（非衬线字体）
• monospace （等宽字体）
• cursive （草书字体）
• fantasy （虚幻字体）

斜体和粗体

• font-style用来指定文本的斜体。

• 指定斜体：font-style:italic

• 指定非斜体：font-style:normal

• font-weight用来指定文本的粗体。

• 指定粗体：font-weight:bold

• 指定非粗体：font- weight:normal

字体属性简写

font可以一次性同时设置多个字体的样式。
语法： – font:加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺 序无所谓，也可以不写，但是大小和字体 必须写且必须写到后两个。

行间距

line-height用于设置行高，行高越大则行 间距越大。
行间距 = line-height – font-size

通过设置line-height可以间接的设置行高
可以接收的值：
1.直接接收一个大小
2.可以指定一个百分数，则会相对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数

大写化

text-transform样式用于将元素中的字母全都变成大写。
大写:text-transform:uppercase
小写：text- tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none

字体的其他样式

font-style可以用来设置文字的斜体
- 可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的
- 一般我们只会使用italic

font-weight可以用来设置文本的加粗效果
- 可选值：
normal 默认值，文字正常显示
bold 文字加粗显示
该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以200有可能比100粗，但也有可能是一样的

font-variant可以用来设置小型大写字母
- 可选值：
normal 默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些

文本样式

text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线

letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。

text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
justify 两端对齐
- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的

首行缩进

text-indent用来设置首行缩进
这个值一般都会使用em作为单位
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来