一、HTML5中常用的文本标签
1、标题标签
（1）定义及用法：
HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。
（2）语法格式：
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
h系列标签中的内容显示为粗体，而且字的大小从大到小；h系列标签一般只用来定义标题，不建议随便使用。
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中h1~h6标题标签的详细介绍</title>
</head>
<body bgcolor="bisque" style="margin-left:100px;">
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
</body>
</html>
2、段落标签
（1）定义及用法：
<p>标签用于定义段落。
【注】 在HTML5中，段落标签既可以成对使用，也可以单独使用，为规范代码，建议成对使用
标签。
（2）语法格式：
<p>段落文字</p>
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
3、<br>标签与<wbr>标签
（1）定义及用法：
<br>标签可插入一个简单的换行符，用来输入空行，而不是分割段落。
<br> 标签是一个空标签，意味着它没有结束标签。
<wbr>规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持<wbr>标签。
（2）语法格式：
<p>文本<br>文本</p>
<p>文本<wbr>文本<wbr>文本</p>
（3）例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty<br> qwyie</p>
<p>gafjksgjs<wbr>DJGDGAS<wbr>GHGG hfskfjdkafasd</p>
</body>
</html>
4、<bdi>标签
（1）定义及用法：
<bdi>标签用于设置一段文本， 使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。标签主要是让文字的方向发生变化，从左向右或者从右向左。它有一个属性dir，用来定义文本的方向，属性值为ltr，文本从左向右正常方向，属性值为rtl，文本从右向左；默认属性值为auto。
（2）语法格式：
<bdi dir="auto">内容</bdi>
（3）例子
<p>This <bdo dir="ltr">is</bdo> an bdi.</p>
<p>This <bdo dir="rtl">is</bdo> an bdi.</p>
<p dir="rtl">This <bdo dir="rtl">is</bdo>an bdi.</p>
5、<ruby>标签、<rt> 标签与<rp>标签
（1）定义及用法：
<ruby>标签用于定义ruby往释(中文注音或字符)。与<rt>标签- 同使用。
<rt>标签用于定义字符(中文注音或字符)的解释或发音。
<rp>标签在ruby注释中使用，以定义不支持<ruby>标签的浏览器所显示的内容。
（2）语法格式：
<ruby>内容<rp>(</rp><rt>内容</rt><rp>)</rp>内容<rp>(</rp><rt>内容</rt><rp>)</rp></ruby>
（3）例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>きつ りん だい がく</rt>
<rp>)</rp>
</ruby>
<p></p>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>ji lin da xue</rt>
<rp>)</rp>
</ruby>
</body>
</html>
6、<mark>标签
（1）定义及用法：
<mark>标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示捏素关键字。
（2）语法格式：
<mark>内容</mark>
（3）例子
<p>Do not forget to buy <mark>milk</mark> today.</p>
注意：虽然<mark>元素在使用效果上与<em>或<strong>元素有相似之处，但三者的出发点是不一样的。<strong>元素是作者对文档中某段文字的重要性进行的强调；<em>元素是作者为了突出文章的重点而进行的设置。
7、<time>标签
（1）定义及用法：
<time>标签用于定义日期或时间，也可以两者同时。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
（2）语法格式：
<time datetime="日期">日期</time>
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time 元素</title>
</head>
<body>
<time datetime="2017-3-6">2017/3/6</time>
</body>
</html>
8、<progress>标签
（1）定义及用法：
<progress >标签用于定义任何类型任务的运行进度，可以使用<progress>标签显示JavaScript中时间函数的进程。属性max：规定需要完成的值；属性value：规定进程的当前值。
（2）语法格式：
<progress value="当前值" max="需要完成的值"></progress>
（3）例子
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>html5中progress标签（进度条）的详细介绍</title>
</head>
<body style="background-color: bisque;">
<h3>progress标签演示</h3>
<progress value="50" max="100"></progress><br>
<progress value="100" max="100"></progress><br>
<progress value="10" max="200"></progress><br>
<progress value="150" max="200"></progress><br>
</body></html>
以上就是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 属性的值 |
例子
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
5、text- transform：英文文本转换
| 值 | 描述 |
|---|---|
| none | 默认,定义带有小写字母和大写字母的标准的文本 |
| capitalize | 文本中的每个单词以大写字母开头 |
| uppercase | 定义仅有大写字母 |
| lowercase | 定义无大写字母，仅有小写字母 |
| inherit | 规定应该从父元素继承 text-transform 属性的值 |
例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-transform属性</title>
<style type="text/css">
#p1{text-transform:uppercase;}
#p2{text-transform:lowercase;}
#p3{text-transform:capitalize;}
</style>
</head>
<body>
<p id="p1">大写:Rome was't built in a day.</p>
<p id="p2">小写:Rome was't built in a day.</p>
<p id="p3">仅首字母大写: Rome was't built in a day.</p>
</body>
</html>
6、text-align：水平对齐方式
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值，由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承 text-align 属性的值 |
例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-align属性</title>
<style type="text/css">
#p1{text-align:left;}
#p2{text-align:center;}
#p3{text-align:right;}
</style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>
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 属性的值 |
例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-indent属性</title>
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h3>中国</h3>
<p>中国加油</p>
<p>武汉加油</p>
</body>
</html>
9、white-space：空白符处理
| 值 | 描述 |
|---|---|
| normal | 默认，空白会被浏览器忽略 |
| pre | 空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
.box{ width: 400px; height: 300px; background: lightgreen; }
</style>
</head>
<body>
<div class="box"> It is when my love is bewildering the soul ！
</div>
</body>
</html>
10、text- overflow：标示对象内溢出文本
| 值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本 |
例子
使用text-overflow属性：
div.test
{
text-overflow:ellipsis;
}
到底啦！
