一、HTML5中常用的文本标签

1、标题标签

(1)定义及用法：

HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。

(2)语法格式：

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

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

(3)例子

html中h1~h6标题标签的详细介绍

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

2、段落标签

(1)定义及用法：

标签用于定义段落。

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

标签。

(2)语法格式：

段落文字

(3)例子

段落标签

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

3、标签与标签

(1)定义及用法：

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

标签是一个空标签，意味着它没有结束标签。

规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持标签。

(2)语法格式：

文本

文本

文本文本文本

(3)例子

Document

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)例子

Document

吉林大学

(

きつ りん だい がく

)

吉林大学

(

ji lin da xue

)

6、标签

(1)定义及用法：

标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示捏素关键字。

(2)语法格式：

内容

(3)例子

Do not forget to buy milk today.

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

7、标签

(1)定义及用法：

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

(2)语法格式：

日期

(3)例子

Time 元素

2017/3/6

8、标签

(1)定义及用法：

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

(2)语法格式：

(3)例子

html5中progress标签(进度条)的详细介绍

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 属性的值

例子

Test

中文English

English中文

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

值

描述

none

默认,定义带有小写字母和大写字母的标准的文本

capitalize

文本中的每个单词以大写字母开头

uppercase

定义仅有大写字母

lowercase

定义无大写字母，仅有小写字母

inherit

规定应该从父元素继承 text-transform 属性的值

例子

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 属性的值

例子

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 属性的值

例子

text-indent属性

中国

中国加油

武汉加油

9、white-space：空白符处理

值

描述

normal

默认，空白会被浏览器忽略

pre

空白会被浏览器保留，其行为方式类似 HTML 中的 标签

nowrap

文本不会换行，文本会在在同一行上继续，直到遇到 标签为止

pre-wrap

保留空白符序列，但是正常地进行换行

pre-line

合并空白符序列，但是保留换行符

inherit

规定应该从父元素继承 white-space 属性的值

例子

Document

It is when my love is bewildering the soul ！

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

值

描述

clip

修剪文本

ellipsis

显示省略符号来代表被修剪的文本

string

使用给定的字符串来代表被修剪的文本

例子

使用text-overflow属性：

div.test

{

text-overflow:ellipsis;

}

到底啦！