概述
1 标题文字的建立
1.1 标题文字的建立
HTML文档中的标题由<h1>到<h6>元素来定义，其中<h1>代表一级标题，级别最高，文字也最大，其它标题元素依次递减，<h6>级别最低。标题位于<body>与</body>之间。
<!DOCTYPE html>
<html>
<head>
<title>标题文字</title>
</head>
<body>
<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>
<h4>这里是四级标题</h4>
<h5>这里是五级标题</h5>
<h6>这里是六级标题</h6>
</body>
</html>
1.2 标题文字的对齐方式
标题文字的对齐方式主要有居左、居中和居右，还有就是两端对齐不常用。
| 对齐方式 | 代码示例 |
|---|---|
| 居左 | <h1 align=“left”> 这里是一级标题 |
| 居中 | <h1 align=“center”> 这里是一级标题 |
| 居右 | <h1 align=“right”> 这里是一级标题 |
2 文字格式的设置
2.1 设置文字字体
HTML文档中用font-family属性来指定文字字体类型，常用的字体有宋体、黑体、隶书、Times New Roman 等，其它网页中字体链接。其语法格式如下：
<!–只设置一种预设字体–>
style="font-family:字体类型"
<!–设置多种预设字体，浏览器会根据排列的先后顺序采用，若字体类型1不能正确获取，则会选择字体类型2。如果前面的字体类型都不能够正确显示，则系统会自动选择后一种字体类型，以此类推。–>
style="font-family:字体类型1,字体类型2,..."
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="font-family: 黑体" align="center">北国风光，千里冰封</p>
</body>
</html>
需要注意的是：设计页面时，要考虑字体的显示问题，以预设多种字体类型来保证页面的预期效果，最好以最基本的字符类型作为最后一个预设字体。
当font-family属性值由多个字符串和空格组成，此时则需要利用双引号来解决，示例如下：
font-family:”Time New Roman”
2.2 设置字体大小
网页中，标题通常使用较大的字体，用于吸引人的注意，小字体用来显示正常内容，吸引眼球和提高人的阅读速度。HTML5中，通常使用font-size设置字体大小，其语法格式如下：
<p style="font-size:参数"></p>
| 参数 | 说明 |
|---|---|
| xx-small | 绝对字体尺寸，根据对象字体进行调整。最小 |
| x-small | 绝对字体尺寸，根据对象字体进行调整。较小 |
| small | 绝对字体尺寸，根据对象字体进行调整。小 |
| medium | 绝对字体尺寸，根据对象字体进行调整。正常 |
| large | 绝对字体尺寸，根据对象字体进行调整。大 |
| x-large | 绝对字体尺寸，根据对象字体进行调整。较大 |
| xx-large | 绝对字体尺寸，根据对象字体进行调整。最大 |
| larger | 相对字体尺寸，相对于父类对象中字体尺寸进行相对增大，使用成比例的em单位计算 |
| smaller | 相对字体尺寸，相对于父类对象中字体尺寸进行相对减小，使用成比例的em单位计算 |
| length | 百分数(50%)或浮点数(0.5)和单位表示符(12px、10pt)组成的长度值，不可为负值。其百分比取值是基于父对象(medium)中字体大小的尺寸。 |
| 单位 | 说明 |
|---|---|
| px | pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便 |
| pt | point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用 |
| em | 即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性 |
| ppi（dpi） | pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度” |
<!DOCTYPE html>
<html>
<head>
<title>字体设置</title>
<meta charset="utf-8">
</head>
<body>
<p style="font-size: 20pt">上级标签大小</p>
<p style="font-size: small">小</p>
<p style="font-size: larger">大</p>
<p style="font-size: x-small">小</p>
<p style="font-size: x-large">大</p>
<p style="font-size: large">字标记</p>
<p style="font-size: larger">字标记</p>
<p style="font-size: medium">字标记</p>
</body>
</html>
2.3 设置文字颜色
- 颜色搭配
- 色彩对应中英文代码和搭配
网页中用color属性来设置相关颜色。其属性值通常用一下方式来设定：
| 属性值 | 说明 |
|---|---|
| color-name | 规定颜色值为颜色名称的颜色(例如red) |
| hex_number | 规定颜色值为十六进制的颜色(例如#ff0000) |
| rgb_number | 规定颜色值为rgb值代码的颜色(例如rgb(255,0,0)) |
| inherit | 规定应该从父元素继承颜色 |
| hsl_number | 规定颜色为HSL代码的颜色(例如hsl(0,50%,75%)) 【新增】 |
| hsla_number | 规定颜色值为HSLA代码的颜色(例如hsla(120,50%,50%,1))【新增】 |
| rgba_number | 规定颜色值为RGBA代码的颜色(例如rgba(125,10,45,0.5))【新增】``` |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: #033;">页面标题1</h1>
<p style="color: red">本段内容为红色</p>
<p style="color: rgb(0,0,0)">RGB黑色文本</p>
<p style="color: hsl(0,60%,30%)">HSL红色文本</p>
<p style="color: hsla(100,50%,50%,1)">HSLA绿色文本</p>
<p style="color: rgba(122,120,135,0.5)">RGBA灰色文本</p>
</body>
</html>
2.4 设置粗体、斜体和下划线
重要文本信息通常以粗体、强调方式或者加强方式来体现，分别用<b>标记、<em>标记和<strong>标记来实现。倾斜文本用<i>标记实现，添加下划线用<u>实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粗体文本</title>
</head>
<body>
<p><b>我是粗体文字</b></p>
<p><strong>我是强调文字</strong></p>
<p><em>我是加强文字</em></p>
<p><i>我是倾斜文本</i></p>
<p><u>我是下划线文本</u></p>
</body>
</html>
HTML的重要文本标记已经用的少了，都应该使用CSS样式来实现，CSS所能够实现的控制远远比HTML细致、精确。应该尽量避免文本加下滑线，会误以为是链接。
2.5 设置上标与下标
HTML中上标用<sup>，下标用<sub>来实现。
<!DOCTYPE html>
<html>
<head>
<title>设置上标与下标</title>
</head>
<body>
<!--上标显示-->
<p>c=a<sup>2</sup>+b<sup>2</sup></p>
<!--下标显示-->
<p>H<sub>2</sub>O<sub>2</sub></p>
</body>
</html>
2.6 设置字体风格
font-style通常用来定义字体风格，即字体的显示样式。其属性值如下：
| 属性值 | 含义 |
|---|---|
| normal | 默认值，默认的标准的字体样式 |
| italic | 倾斜字体样式 |
| oblique | 没有倾斜变量的特殊字体，则会显示一个倾斜的字体样式 |
| inherit | 规定应该从父元素继承字体样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--设置字体风格-->
<p style="font-style: italic">千里之行</p>
<!--设置字体风格-->
<p style="font-style: normal">千里之行</p>
<!--设置字体风格-->
<p style="font-style: oblique">千里之行</p>
</body>
</html>
2.7 设置字体加粗
font-weight属性定义字体的粗细程度，可通过normal、bold(粗体)、bolder(更粗)、lighter(更细)和100~900，默认值为normal，浏览器默认的大小为400。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--设置加粗字体-->
<p style="font-weight: bold">aa</p>
<p style="font-weight: bolder">aa</p>
<p style="font-weight: lighter">aa</p>
<p style="font-weight: normal">aa</p>
<p style="font-weight: 100">aa</p>
<p style="font-weight: 400">aa</p>
<p style="font-weight: 900">aa</p>
</body>
</html>
2.8 设置字体复合属性
font属性可以可以一次性的使用多个属性的属性值定义字体，font属性排列顺序是：font-style、font-variant（用于定义小型大写字母文本，normal : 正常的字体（默认）；small-caps : 小型的大写字母字体）、font-weight、font-size和font-family。
各属性的属性值用空格隔开即可，但是font-family要定义多个值需要用‘ , ’隔开。
font-style、font-variant和font-weight可以任意调换顺序，font-size和font-family必须按照固定的顺序出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体复合属性</title>
<style type="text/css">
<!--字体风格、、字体加粗、字体大小、文字字体-->
p{font: normal small-caps bolder 25pt "Cambria","Times New Roman","黑体"}
</style>
</head>
<body>
<p>学习HTML5标记语言，开发完美绚丽网站。</p>
</body>
</html>
2.9 设置阴影文本
通过text-shadow属性设置文字的阴影效果，增强网页整体的吸引力，并且可以为文字阴影添加颜色。其属性值如下表所示：
| 属性值 | 说明 |
|---|---|
| color | 指定颜色 |
| length | 由浮点数字和单位标识符组成的长度值，可以为负值。指定阴影的水平延伸距离。 |
| opacity | 由浮点数字和单位表示符组成的长度值，不可以为负值。指定模糊效果的作用距离。若仅需要模糊效果，将前面两个length设置为0。 |
text-shadow属性值有4个值，最后两个值是可选的。第一个值表示阴影的水平偏移，可取正负值；第二个值表示阴影垂直偏移，可取正负值；第三个值为阴影模糊半径，该值可选；第四个值表示阴影颜色值，该值可选，其格式如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置文本阴影</title>
</head>
<body>
<p align="center" style="text-shadow: 0.1em 3px 6px black;font-size:80px;">千里之行，始于足下</p>
</body>
</html>
2.10 控制换行
用于显示一行文字时，文字在一行显示不完时，将其换行，通过新增word-wrap文本样式，来控制换行。
word-wrap:normal|break-word
| 属性值 | 说明 |
|---|---|
| normal | 控制连续文本换行 |
| break-word | 内容将在边界内换行。如果需要，词内换行(word-break)也可以。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制换行</title>
</head>
<body>
<style type="text/css">
div{width: 300px;word-wrap: break-word;border: 1px solid #999999}
</style>
<div>本文测试控制换行功能，可以使文本在指定框架中换行显示内容</div><br>
<div align="left">wordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrap</div><br>
<div>This is all English,Thisis all English,Thisis all English,Thisis all English</div>
</body>
</html>
属性值取break-word时，将强制进行换行，但是对于长句的英文就不起作用了，即是控制是否短词而不是段字符。
3 设置段落格式
段落（paragraph）标记用<p>，换行（break）标记用<br>
<!DOCTYPE html>
<html>
<head>
<title>段落格式</title>
</head>
<body>
<p>千里之行，<br>始于足下</p>
</body>
</html>
4 设置网页水平线
4.1 添加水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置网页水平线</title>
</head>
<body>
<p>hr 标签定义水平线</p>
<hr />
<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>
</body>
</html>
4.2 设置水平线的宽度和高度
<!--<hr size="高度" width="宽度">，size定义水平线的高度，单位像素(px)；width定义水平线的宽度，单位像素(px)或者百分比计算。-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置网页水平线</title>
</head>
<body>
<p>普通水平线</p>
<hr
/>
<p>高度为50px的水平线</p>
<hr size="50" />
<p>宽度为50%的水平线</p>
<hr width="50%">
<p>这是一个段落</p>
</body>
</html>
4.3 设置水平线颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置网页水平线</title>
</head>
<body>
<p>这是一个红色的水平线</p>
<hr color="red" />
</body>
</html>
4.4 设置水平线的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置网页水平线</title>
</head>
<body>
<p>这是一个红色的水平线</p>
<hr align="left" size="3" color="red" width="50%"/>
<p>这是一个绿色的水平线</p>
<hr align="center" size="3" color="green" width="50%"/>
<p>这是一个蓝色的水平线</p>
<hr align="right" size="3" color="blue" width="50%"/>
</body>
</html>
4.5 去掉水平线阴影
<!DOCTYPE html>
<html>
<head>
<title>阴影效果的解决</title>
</head>
<body>
<p>
带阴影的水平线(默认)
</p>
<hr/>
<p>
不带阴影的水平线
</p>
<hr noshade="noshade"/>
</body>
</html>
最后
以上就是拼搏小懒猪为你收集整理的HTML5网页文本内容的全部内容，希望文章能够帮你解决HTML5网页文本内容所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复