html5常用文本标签、CSS文本外观属性，你了解多少？

一、HTML5中常用的文本标签

1、标题标签
（1）定义及用法：
HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。
（2）语法格式：

1号标题
2号标题
3号标题
4号标题
5号标题
6号标题

h系列标签中的内容显示为粗体，而且字的大小从大到小；h系列标签一般只用来定义标题，不建议随便使用。
（3）例子

1号标题
2号标题
3号标题
4号标题
5号标题
6号标题

2、段落标签
（1）定义及用法：

标签用于定义段落。
【注】 在HTML5中，段落标签既可以成对使用，也可以单独使用，为规范代码，建议成对使用

标签。
（2）语法格式：

 
段落文字

（3）例子

这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
 

3、
标签与标签
（1）定义及用法：

标签可插入一个简单的换行符，用来输入空行，而不是分割段落。

标签是一个空标签，意味着它没有结束标签。
规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持标签。
（2）语法格式：

文本
文本
文本文本文本

（3）例子

    
    
    
    


    
hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty
 qwyie
    
gafjksgjsDJGDGASGHGG hfskfjdkafasd

4、标签
（1）定义及用法：
标签用于设置一段文本， 使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。标签主要是让文字的方向发生变化，从左向右或者从右向左。它有一个属性dir，用来定义文本的方向，属性值为ltr，文本从左向右正常方向，属性值为rtl，文本从右向左；默认属性值为auto。
（2）语法格式：

内容

（3）例子

This is an bdi.
This is an bdi.
This isan bdi.

5、标签、 标签与标签
（1）定义及用法：
标签用于定义ruby往释(中文注音或字符)。与标签- 同使用。
标签用于定义字符(中文注音或字符)的解释或发音。
标签在ruby注释中使用，以定义不支持标签的浏览器所显示的内容。
（2）语法格式：

内容(内容)内容(内容)

（3）例子

    
    


    
        吉林大学
        (
        きつ りん だい がく
        )
    
    

    
        吉林大学
        (
        ji lin da xue
        )
    

6、标签
（1）定义及用法：
标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示捏素关键字。
（2）语法格式：

内容

（3）例子

Do not forget to buy milk today.

注意：虽然元素在使用效果上与或元素有相似之处，但三者的出发点是不一样的。元素是作者对文档中某段文字的重要性进行的强调；元素是作者为了突出文章的重点而进行的设置。

7、标签
（1）定义及用法：
标签用于定义日期或时间，也可以两者同时。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
（2）语法格式：

日期

（3）例子

2017/3/6

8、标签
（1）定义及用法：
标签用于定义任何类型任务的运行进度，可以使用标签显示JavaScript中时间函数的进程。属性max：规定需要完成的值；属性value：规定进程的当前值。

（2）语法格式：

（3）例子

progress标签演示

以上就是HTML5中常用的文本标签，在实际运用中课灵活使用。

二、CSS的字体样式属性

CSS的字体样式属性用于定义文本的字体系列、大小、风格等, CSS
常用的字体样式属性如下表所示。

属性	允许取值	描述
font-size:字号大小	1em、5em等或者5px	em表示相对于当前对象内文本的字体尺寸。px表示像素，最常用，推荐使用。
font -family:字体	“微软雅黑”	网页中常用的字体有宋体、微软雅黑、黑体等。
font-weight:字体粗细	normal 、bold、bolder、lighter	默认为 normal，lighter 为细体，normal 为正常粗细，bold 为粗体，bolder 为特粗体。
font -style字体风格	normal、italic 、oblique 、inherit	默认为 normal，浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。
word-wrap: 长单词或URL自动换行	normal、break-word	normal属性值时浏览器默认处理，只在半角空格或者连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。

font属性用于对字体样式进行综合设置，字体合写，语法如下所示：

选择器{ font:font-style  font-weight   font-size   line-height   font-family; }

三、CSS文本外观属性

CSS的文本外观属性用于设置颜色、字间距、字母间距、水平对齐、文本装饰、阴影等。

1、color：文本颜色

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red、green、blue）
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）
rgb_number	规定颜色值为 rgb 代码的颜色（比如红色： rgb(255,0,0)或rgb（100%，0%,0%），如果使用百分比取色，值为0时也不能省略 %）
inherit	规定应该从父元素继承颜色

例子

body
  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
p
  {
  color:rgb(0,0,255);
  }

2、letter-spacing：字间距

值	描述
normal	默认，规定字符间没有额外的空间
length	定义字符间的固定空间（允许使用负值，一般用px作单位）
inherit	规定应该从父元素继承 letter-spacing 属性的值

例子
设置 h1 和 h2 元素的字母间距：

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

3、word -spacing：单词间距

值	描述
normal	默认，规定字符间没有额外的空间
length	定义字符间的固定空间（允许使用负值，一般用px作单位）
inherit	规定应该从父元素继承 word -spacing 属性的值

例子
规定段落中的字间距是 25 像素：

p
  {
  word-spacing:25px;
  }

4、line-height：行间距

值	说明
normal	默认,设置合理的行间距
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距，相当于倍数
length	设置固定的行间距（不允许使用复制，一般用px作单位）
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值

例子

    
        
        
    
    
        

            

                中文English
                English中文
            
        
    

5、text- transform：英文文本转换

值	描述
none	默认,定义带有小写字母和大写字母的标准的文本
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母
lowercase	定义无大写字母，仅有小写字母
inherit	规定应该从父元素继承 text-transform 属性的值

例子

 


    
    


    
大写:Rome was't built in a day.
    
小写:Rome was't built in a day.
    
仅首字母大写: Rome was't built in a day.

6、text-align：水平对齐方式

值	描述
left	把文本排列到左边。默认值，由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果
inherit	规定应该从父元素继承 text-align 属性的值

例子

 


    
    


    
左对齐:好好学习，天天向上。
    
居中对齐:好好学习，天天向上。
    
右对齐:好好学习，天天向上。

7、text-decoration：文本装饰

值	描述
none	默认,定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
blink	定义闪烁的文本
inherit	规定应该从父元素继承 text-decoration 属性的值

例子
设置h1，h2，h3和h4元素文本装饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

8、text-indent：首行缩进

值	描述
length	定义固定的缩进，默认值：0。
%	定义基于父元素宽度的百分比的缩进
inherit	规定应该从父元素继承 text-indent 属性的值

例子

 


    
    


    
中国
    
中国加油
    
武汉加油

9、white-space：空白符处理

值	描述
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留，其行为方式类似 HTML 中的 标签
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

例子

 

  
 
    
   
    
     
 It is when my love is bewildering the soul ！
     
 
      
     

10、text- overflow：标示对象内溢出文本

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

例子
使用text-overflow属性：

div.test
{
text-overflow:ellipsis;
}

到底啦！