第3章 文字与段落标记
如何编排文字,控制文字显示方式,让文字看上去整齐美观
3.1 标题字
六级标题 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 一次递减
3.1.1 标题字标签 h
<h1>到<h6> h是headline简称
语法:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>运行结果:
3.1.2 标题字其属性align
默认情况下网页文字左对齐 ,想要其他对其方式 ,用align属性
语法: <h1 align=对齐方式>
说明: align 是<hn>标签的属性
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<h1>一级标题</h1>
<h2 align="left">二级标题左对齐</h2>
<h3 align="right">三级标题右对齐</h3>
<h4 align="center">四级标题居中对齐</h4>
</body>
</html>运行结果:
3.2 文本基本标记
强大的<font>标签用来控制字体,字号，颜色等属性 是html最基本标签之一,掌握<font>标签的使用是控制网页文本的基础
3.2.1 字体属性face
可以通过字体的face属性设置不同的字体,设置的字体效果必须在浏览器中安装相应的字体后才可以正确的浏览，否则有些特殊的字体会被浏览器的默认字体替代．因此在网页中尽量减少使用较多特殊字体，以免在用户浏览时无法看到正确效果．
语法： <font face="字体样式">...</font>
说明: 字体样式为字体名称,若浏览器能在当前系统中找到该字体,则使用该字体显示.
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<p><font face="宋体">我是宋体字</font></p>
<p><font face="华文行楷">我是华文行楷字</font></p>
<p><font face="隶书">我是隶书体字</font></p>
</body>
</html>运行结果:
ubuntu系统字体太少了,只能显示成这样,不过没关系,因为在制作网页时,网页中字体一般以默认的宋体为主.
3.2.2 字号属性size
size属性设置字体大小
语法: <font size="文字字号">...</font>
说明: size属性设置字体大小,值为7到1,依次减小.大于处理为7,小于1处理为1
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<p><font size="100">我是100号字</font></p>
<p><font size="7">我是7号字</font></p>
<p><font size="6">我是6号字</font></p>
<p><font size="5">我是5号字</font></p>
<p><font size="4">我是4号字</font></p>
<p><font size="3">我是3号字</font></p>
<p><font size="2">我是2号字</font></p>
<p><font size="1">我是1号字</font></p>
<p><font size="0">我是0号字</font></p>
<p><font size="-1">我是-1号字</font></p>
<p><font size="-2">我是-2号字</font></p>
<p><font size="-3">我是-3号字</font></p>
<p><font size="-4">我是-4号字</font></p>
</body>
</html>运行结果:
3.2.3 颜色属性color
语法: <font color="颜色">...</font>
说明:font的各属性之间可以混合使用,没有先后之分,共同处理字体
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<p><font face="新宋体" size="7" color="red">仙剑奇侠传七</font></p>
<p><font face="宋体" size="3" color="blue">仙剑奇侠传三</font></p>
<p><font face="Garuda" size="1" color="green">仙剑奇侠传一</font></p>
</body>
</html>运行结果:
3.3 文本格式化标记
文本格式化标记设置文字以特殊方式显示,如粗体,斜体,文字上下标
3.3.1 粗体标记b,strong
<b>文字</b>和<strong>文字</strong>内的文字都是粗体,若缺少尾部,则从<b>或<strong>开始的所有文字都是粗体
语法: <b>加粗的文字</b>
<strong>加粗的文字</strong>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<p><b>对文字进行加粗</b></p>
<p><strong>文字加粗</strong></p>
</body>
</html>运行结果:
3.3.2 斜体标记 i,em,cite
语法: <i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>
说明:三个都是设置斜体的元素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>斜体</title>
</head>
<body>
<p><i>斜体字i</i>
<p><em>斜体字em</em></p>
<p><cite>斜体字cite</cite></p>
</body>
</html>运行结果:
3.3.3 上标标记sup
上标子体<sup>英文原名为superscript,<sup>是行内元素,可以嵌套.因此如果在<sup>里再用<sup>则会变成"上标的上标"
语法: <sup>上标内容</sup>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>上标</title>
</head>
<body>
<center>
<p>
a<sup>2</sup>+b<sup>2</sup>=(a+b)<sup>2</sup>-2ab
</p>
<p>
三个9组成最大的数:9<sup>9<sup>9</sup></sup>
</p>
</center>
</body>
</html>运行结果:
3.3.4 下标标记 sub
下标标记原名subscript,下标标记<sub>也可嵌套,成为下标的下标
语法: <sub>下标内容</sub>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>上标</title>
</head>
<body>
<center>
<p>
H<sub>2</sub>SO<sub>4</sub> 硫酸化学式
</p>
</center>
</body>
</html>运行结果:
3.3.5 大字号标记big
<big>所包含文字会在原来字号上增加一级.多个<big>元素作用于同一个文本,字号逐级放大.<big>为行内元素,可以成对出现在一段文字的任何位置
语法: <big>大字号内容</big>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>字号增加一级</title>
</head>
<body>
<center>
<p>
水之润下，无孔不入<br>
<big>火之炎上，无物不焚<br>
雷之肃敛，无坚不摧</big><br>
<big><big>风之肆拂，无阻不透</big></big><br>
土之养化，无物不融！<br>
</p>
</center>
</body>
</html>运行结果:
3.3.6 小字号标记 small
<small>标签包含的文字,比普通文字字号小一级,嵌套使用,逐级减小
语法: <small>字号减小一级</small>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>字号增加一级</title>
</head>
<body>
<center>
<font size="4">
水之润下，无孔不入<br>
<small>火之炎上，无物不焚<br>
雷之肃敛，无坚不摧</small><br>
<small><small>风之肆拂，无阻不透</small></small><br>
土之养化，无物不融！<br>
</font>
</center>
</body>
</html>运行结果:
3.3.7 下划线标记 u
语法: <u>要加下划线的文字</u>
说明:不可嵌套,嵌套没有效果
eg:
<html>
<head>
<meta charset="UTF-8">
<title>字号增加一级</title>
</head>
<body>
<center>
水之润下，无孔不入<br>
<u>火之炎上，无物不焚<br>
雷之肃敛，无坚不摧</u><br>
<u><u>风之肆拂，无阻不透</u></u><br>
土之养化，无物不融！<br>
</center>
</body>
</html>运行结果:
3.4 段落标记
文字有条理地显示出来,离不开段落标记的使用
3.4.1 段落标记p
<p>是html文档最常见的标记,<p>用来起始一个段落
语法: <p>段落文字</p>
说明:段落标记可以没有结束标记</p>,而一个新的段落标记的开始,也意味着上一个段落标记的结束
eg:
<html>
<head>
<meta charset="UTF-8">
<title>字号增加一级</title>
</head>
<body>
<p>万物生而具备五灵</p>
<p align="right">就算是幼儿</p>
<p align="center">也有他们自己的方法感知外界</p>
<p>只是凡人懵憧，成年后反而自闭视听，变得无感无知</p>
<hr>
渺渺世间，不独有人<p align="right">
人要活下去，妖也是一样<p align="center">
为何彼此之间不能多一些理解呢？
<p>
至少我并不会认为妖都是狰狞可恨的，万物皆是生灵，又哪里有天注定的贵贱善恶之分？<p>
</body>
</html>运行结果:
3.4.2 换行标记br
<br>不另起一段而强制换行
语法: <br>
以上演示好多了,不演示了.
3.4.3 不换行标记 nobr
在网页中如果某一行的文本过长,浏览器会自动对这段文字进行换行处理.可以使用nobr标记来禁止自动换行(底部会出现滚动条)
语法: <nobr>不换行文字</nobr>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>不换行标记</title>
</head>
<body>
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
<hr>
<p><nobr>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</nobr></p>
</body>
</html>运行结果:
3.5 水平线
水平线将段落与段落隔开,可以通过插入图片实现,也可以更简单的使用hr标记
3.5.1 插入水平线hr
语法: <hr>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>不换行标记</title>
</head>
<body>
<center>
<font color="red">仙剑奇侠传四语录</font>
</center>
<hr> <!--水平线-->
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
</body>
</html>
运行结果:
3.5.2 水平线宽度 width
语法: <hr width="宽度">
说明:宽度可以是确定的值,也可以是窗口百分比
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平线宽度</title>
</head>
<body>
<center>
<font color="red">仙剑奇侠传四语录</font>
</center>
<hr width="1000"> <!--水平线-->
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
</body>
</html>运行结果:
3.5.3 水平线高度 size
语法: <hr size="高度">
说明:水平线高度属性为size ,且高度值只能是像素值
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平线宽度</title>
</head>
<body>
<center>
<font color="red">仙剑奇侠传四语录</font>
</center>
<hr size="50"> <!--水平线-->
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
</body>
</html>
运行结果:
3.5.4 水平线去掉阴影 noshade
语法: <hr noshade>
说明:
noshade是bool值的属性,它没有属性值,<hr>内写了该属性,浏览器不显示立体形状的水平线,反之无需设置该属性.
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平线阴影</title>
</head>
<body>
<center>
<font color="red">仙剑奇侠传四语录</font>
</center>
<hr size="50" width="50%" noshade> <!--水平线-->
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
</body>
</html>运行结果:
3.5.5 水平线颜色color
语法: <hr color="颜色">
说明:颜色值为十六进制数或以定义颜色名
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平线颜色</title>
</head>
<body>
<center>
<font color="red">仙剑奇侠传四语录</font>
</center>
<hr size="50" width="50%" noshade color="red"> <!--水平线-->
<p>
人既有七情六欲，彼此相处，发生争执乃是寻常，不过只要今生今世还能见面，就一定有挽回的余地……最怕黯然分别，从此天各一方，直至老死，就算想求得对方的原谅，也永远没有机会了……（玄霄）什么人啊妖啊，有必要分那么清楚吗？你看看这鬼界，一旦阳寿尽了，都是鬼魂，不分人与妖，说不定你今世是人，来世便要做妖，那你一直坚持的东西岂不可笑？！
</p>
</body>
</html>运行结果:
3.5.6 水平线排列align
语法: <hr align="对齐方式">
说明:对其方式三种 center,left,right, 默认效果是center
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平线颜色</title>
</head>
<body>
默认对齐方式
<hr width="50%">
居中对齐
<hr align="center" width="50%">
右对齐
<hr align="right" width="50%">
左对齐
<hr align="left" width="50%">
</body>
</html>
运行结果:
小结:<hr align="right" width="200" size="20" color="red">
3.6 其他标记
空格和特殊字符($%&#等)的输入
3.6.1 插入空格
语法:  
eg:
<html>
<head>
<meta charset="UTF-8">
<title>空格的输出</title>
</head>
<body>
<p> 窗前明月光, 疑是地上霜.</p> <!--直接打空格没有用-->
<p> 举头望明月, 低头思故乡.</p>
<p> 窗前明月光,
疑是地上霜.</p>
<p> 举头望明月,
低头思故乡.</p>
</body>
</html>运行结果:
3.6.2 插入特殊符号
特殊符号&开始 ;结束 中间内容不同,代表的符号不同
或者参考这篇博客:https://blog.csdn.net/dayu9216/article/details/75037604
|
|||||||||||||||||||||||||||||||||||||||||||||||||
最常用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
其他一些常用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| § | 节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>空格的输出</title>
</head>
<body>
<center>
分:¢ <br>
镑:£ <br>
元:¥ <br>
节:§ <br>
版权:© <br>
商标:® <br>
乘号:× <br>
除号:÷ <br>
<hr>
空格: <br>
小于:< <br>
大于:> <br>
and:& <br>
双引号:" <br>
单引号:'<!--IE不支持-->
</center>
</body>
</html>运行结果:
