前段基础 HTML 第三章文字与段落标记----假期学习第二天
第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>运行结果:
本章小结:
标题字:
<h1 align="left">一级标题左对齐</h1>
文本基本标记:
<font face="宋体" size="7" color="red">文字</font>
文本格式化标记:
文字加粗: <b>粗体字</b> <strong>粗体字</strong>
斜体标记:<i>斜体字</i> <em>斜体字</em> <cite>斜体字</cite>
上标: <sup>2</sup>
下标: <sub>2</sub>
字号加一级:<big>大</big> (可嵌套)
字号减一级: <small>小</small>
下划线: <u>下划线文字</u> (嵌套无效果)
段落标记:
段落标记:<p align="left">一段文字 左对齐</p>
换行标记:<br>
不换行标记:<nobr> (浏览器下方可能出现滚动条)
水平线标记:<hr width="50%" size="高度" noshade color="red" align="right"> (写了noshade表示颜色填充整个水平线)(默认居中对其)
其他特殊符号:
空格
® 商标 等
前段基础 HTML 第三章文字与段落标记----假期学习第二天相关推荐
- Web前端技术开发学习笔记(HTML标记语言篇)——第4章 文字与段落标记
第4章 文字与段落标记 第4章 文字与段落标记 4.1文字标记 4.1.1 文字内容的输入 1.普通文字的输入 2.空格的输入 3.特殊文字的输入 4.注释语句 4.1.2 对文字字体的设置 4.1. ...
- 第四章 文字与段落标记
文字标记主要用于设置网页中的所有有关文字方面的内容,具体包括普通文字.特殊文字.标题字.****字体及文字格式等方面的标记 标记 描述 文字内容 包括普通文字.空格及特殊符号 标题字标记 以某几种固定 ...
- 计算机基础知识第三章答案,2011年河北省职称计算机模拟习题(基础知识第三章+标准答案)...
2011年河北省职称计算机模拟习题(基础知识第三章+标准答案) 基础知识第三章 下列关于控制面板不正确的叙述是________. A.控制面板是一组系统管理程序 B.可以安装或删除系统的软件.硬件 C ...
- WPF编程基础入门 ——— 第三章 布局（五）布局面板WrapPanel
WPF布局--布局面板WrapPanel WPF--WrapPanel布局控件 WrapPanel实例--十个按钮 WPF--WrapPanel布局控件 WrapPanel(自动折行面板),允许任意多 ...
- 计算机基础课件第三章ppt,计算机应用基础第三章3.4.ppt
文档介绍: 3.4 使用网络服务 本节主要学****内容: 掌握即时通信软件QQ的安装与使用; 2. 开通与使用博客或微博; 3. 使用常用的网络服务,如网上存储数据.网上求职或购物 村僧弄锄蔓很卒河 ...
- 鸟哥的Linux私房菜(基础篇)-第三章、主机规划与磁盘分区（三.3. 安装Linux前的规划）
第三章.主机规划与磁盘分区 最近升级日期:2009/08/06 3. 安装Linux前的规划 3.1 选择适当的distribution 3.2 主机的服务规划与硬件的关系 3.3 主机硬盘的主要规划 ...
- 数据库期末总结笔记（零基础）-第三章 关系数据库SQL
第三章 关系数据库SQL 三.SQL查询 1.基本查询格式 select [distinct] (去重)所查内容 from 所查询的表(可多个)where 要求条件 例:查计算机科学系全体学生 sel ...
- 计算机基础课件第三章ppt,计算机应用基础（windows 7+office 2010）课件 第三章 Windows7操作系统.ppt.pdf-汇文网...
计算机应用基础(windows 7+office 2010)课件 第三章 Windows7操作系统.ppt.pdf-汇文网 计算机应用基础 ( windows 7office 2010) Window ...
- 鸟哥的Linux私房菜(基础篇)-第三章、主机规划与磁盘分区（三.2. 磁盘分区）
第三章.主机规划与磁盘分区 最近升级日期:2009/08/06 2. 磁盘分区 2.1 磁碟连接的方式与装置档名的关系 2.2 磁碟的组成复习 2.3 磁盘分区表(partition table) 2 ...
最新文章
- 推荐一些算法方面的好书
- linux引导过程简述6,CentOS 6系统启动引导过程讲解
- 长度最小的子数组--滑动窗口
- shop--10.商品--商品添加（前端）及问题的解决
- 安全多方计算新突破！阿里首次实现“公开可验证” 的安全方案
- jupyter notebook 操作
- Python | Xpath实战训练
- SQL SERVER 表最小行的一个纠结问题
- JQuery选择器及radio，checkbox,select取值和反选
- 老李推荐：第14章8节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-获取控件列表并建立控件树 1...
- pmbok第六版_英文版(带目录).pdf_书籍分享 | 高等数学（第六版）含解析~同济大学...
- SwitchNAT 测试
- SpringBoot整合tkMybatis基础教程
- 生活中的逻辑谬误02.稻草人谬误
- Lucene+Pangu分词
- LeetCode Top 100 Liked Questions 416. Partition Equal Subset Sum (Java版； Medium)
- hosts.ics或hosts权限修改、GitHub无法访问Windows下载问题
- 三针风扇接法_三针和四针CPU风扇有什么区别？
- Python网络爬虫爬取智联招聘职位
- sql 数据库创建及建表，
热门文章
- 开源项目之电驴emule
- 捕获海康威视IPCamera图像，转成OpenCV可以处理的图像（一）
- 网络摄像机IPCamera RTSP直播播放网络/权限/音视频数据/花屏问题检测与分析助手EasyRTSPClient
- 你怀疑过“温水煮青蛙”的故事吗
- 外部Portal认证系统 对接 华为 H3C 等设备实现 LDAP AD域 网络准入实名认证
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
- 英语语法第四节(主宾表从句)
- lionkid2的qqshow中的XML 文档
- 输入框上的Magnifier
- 查看 android 设备号,获取Android设备的唯一识别码｜设备号｜序号｜UUID