HTML5网页文本内容

最新推荐文章于 2023-08-13 16:24:20 发布

而又何羡乎

最新推荐文章于 2023-08-13 16:24:20 发布

阅读量2.1k

点赞数

分类专栏： WEB前端学习文章标签： html

本文链接：https://blog.csdn.net/qq_44285092/article/details/108620673

版权

WEB前端学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

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>

而又何羡乎

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5网页文本内容

1 标题文字的建立1.1 标题文字的建立 HTML文档中的标题由<h1>到<h6>元素来定义，其中<h1>代表一级标题，级别最高，文字也最大，其它标题元素依次递减，<h6>级别最低。标题位于<body>与</body>之间。<!DOCTYPE html><html> <head> <title>标题文字</title> </hea
复制链接

扫一扫