本文详细介绍了HTML中文字和图片的属性，包括文字的对齐、font标签、上标和下标、删除线、斜体和加粗，以及图片的width、height、边框、水平和垂直间距、悬浮文本和指定代替文本属性。通过实例展示了各属性的用法，帮助理解HTML页面中文字和图片的展示效果。
目录
这是第七篇文章，有一些属性在上一节表格详情里提到一些属性，例如对齐align、颜色color和边框border等，有一些属性在文字或图片里也有，可以联系表格属性学习下面文字和图片的属性。
一、文字属性<font>
1、对齐属性：align
文字的对齐属性和表格的对齐属性一样，设置表格在网页中的水平对齐方式，常用属性值都是left、right、center
语法：<p align="center">这是一段对齐方式为 center 居中的文字</font></p>
<p align="left">这是一段对齐方式为 left 居中的文字</font></p>
<p align="right">这是一段对齐方式为 right 居中的文字</font></p>
2、font标签
face 属性用于设置所有字体属性。设置的属性是按顺序的： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。其他值如果缺少了，将被插入默认值。
| 属性名 | 作用 | 默认值 | 常用值 |
|---|---|---|---|
| variant | 将所有的小写字母转换为大写，且字体尺寸变小 | normal | small-caps inherit 继承 |
| weight | 设置文本的粗细 | normal （400） | bold（700）、bolder、lighter |
| size | 设置字体大小 | medium | 绝对大小值：（x-/xx-）samll、smaller、medium、（x-/xx-）larger、larger、整数px、0小数em、80% |
| line-hight | 设置以百分比计的行高 | normal | 数字 |
| color | 设置文字颜色 | red 、#000000（十六进制）、rgb（255，255，255） | |
| family | 设置指定元素的字体 | normal | times、courier、arial |
字体属性：face
face是文字字体属性，face 属性的值可以保存若干个字体名称作为备选。把最希望显示的字体放在字体列表的第一个，当第一个字体不可用时，浏览器会使用后边的备选字体。应该把一个通用的字体放在最后（serif、sans-serif、monospace、cursive 或 fantasy），以便在前面列举的字体都不可用时，浏览器可以在通用字体库中找到该字体。
语法：<font face="隶书" >
如需规定若干字体的优先表，使用逗号分隔字体名称
例如 ：<font face="verdana,arial,sans-serif">
5、上标：sup和下标：sub
<sup> 标签定义上标文本。上标文本将会显示在以当前文本中字符高度的一半为基准线的上方，与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。
<sub> 标签定义下标文本。下标文本将会显示在以当前文本流中字符高度的一半为基准线的下方，与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。
语法：
<p>这个段落里的文本包含 <sup>上标</sup> 文本。</p>
<p>这个段落里的文本包含 <sub>下标</sub>文本。</p>
7、删除线s、斜体i、加粗b
<s> 标签被用来定义那些不正确的文本。
<i> 标签用来定义与文本中其余部分不同的部分（例如：专用名词、成语等），并把这部分文本呈现为斜体文本。
<b> 标签定义粗体的文本。可用于强调说明
语法：
(1) <p><s>give me a red envelope </s></p>
<p>Happy New Year</p>(2)<p>祝冬奥会<i>中国的</i>奥运健儿夺得佳绩，加油！加油！</p>
(3)<p>这是普通的文本<b>这是加粗强调的文本</b>这是普通的文本</p>
10、不换行标签：nobr
nobr标签表示不换行，阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不推荐使用。可以到后面学css用 属性white-space
示例：
<nobr>
这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。
</nobr>
二、图片属性<img>
图片标签img基础介绍：
<img> 标签定义 HTML 页面中的图像。<img> 标签有必需要有两个属性分别是src 和 alt。注意：图像不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
1、width 和 height
width 属性规定图像的宽度，以像素计。
height 属性规定图像的宽度，以像素计。
应该养成为图像指定 height 和 width 属性的好习惯。如果设置了width和height属性就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器无法了解图像尺寸，无法为图像保留合适的空间，图像加载时，页面的布局会发生变化。在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
示例：高度和宽度都为33像素的图像：
<img src="./img/1.jpeg" height="33" width="33">
2、边框：border
border 属性规定图像周围的边框宽度。注意：默认图像是没有边框的（除非图像在<a>元素内部）。HTML5 不支持 <img> border 属性，应使用 CSS 代替。
示例：边框为9的图片 <img src="./img/1.子弹.png" border=9 >
3、水平间距：hspace
hspace 属性规定图像左右两侧的空白
语法:<img src="./img/1.jpeg" hspace="22" width="33" heigth="33">
4、垂直间距：vspace
hvpace 属性规定图像左右两侧的空白
语法:<img src="./img/1.jpeg" vspace="22" width="33" heigth="33">
5、图片悬浮文本：title
title属性给HTML页面的文本添加悬浮文本，当鼠标停留在图片上时，页面在图片上方会以悬浮的方式出现我们定义好的文字，起到提示作用。
示例：<img title="这是一张星空图" width="55" height="55" src="./img/1.jpeg">
6、图片指定代替文本属性：alt
alt 属性是一个必需的属性，规定了在图像无法显示时的替代文本。假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。当用户把鼠标移动到 img 元素上时，浏览器把 alt 属性的值显示为工具提示。
示例：<img src="./img/12.jpeg" alt="star" width="33" heigth="33">
6、图片文本对齐：align
align 属性规定了图像相对于周围元素的对齐方式。如上面img简介所说，<img> 元素是内联元素（不会在页面上插入新行），意味着文本和其他元素可以围绕在其周围。所以，align 属性可以帮助我们规定图像相对于周围元素的对齐方式。
语法：
默认对齐的图片 (align="bottom")
<p>这是一些文本<img src="./img/1.jpeg" alt="Star" width="55" height="55"> 这是一些文本。</p>
图片中间对齐：
<p>这是一些文本。 <img src="./img/1.jpeg" alt="Star" width="55" height="55" align="middle"> 这是一些文本。</p>图片顶部对齐：
<p>这是一些文本。<img src="./img/1.jpeg" alt="Star" width="55" height="55" align="top"> 这是一些文本。</p>
上面的代码如下，可以复制，运行后结合运行结果和代码进一步理解各个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>
<font color="blue">
一、文字属性
</font>
</h4>
<hr>
<!--align 对齐属性---------------------------------------------->
<h4><font color="blue">对齐属性 </font></h4>
<p align="center">
<font face="隶书">
这是一段对齐方式为center居中的文字
</font>
</p>
<hr>
<!--font标签 face字体属性 --------------------------------------->
<h4><font color="blue">face字体属性 </font></h4>
<p>
<font face="隶书">使用了隶书字体的文字</font><br>
<font face="华文楷体">使用了华文楷体的文字</font><br>
<font face="方正舒体">使用了方正舒体的文字</font>
</p>
<hr>
<!--font标签 size、color、weight字体属性---------------------------------------->
<h4><font color="blue">style字体属性 </font></h4>
<font face="隶书" size="5" color="red" weight="700">
这是一段使用了“隶书”字体，尺寸为5，红色，文本粗细为700的文字
</font>
<br>
<font>这是一段正常的对比文本（字体不做任何操作）</font>
<hr>
<!--上标 sup & 下标sub---------------------------------------->
<h4><font color="blue">上标 sup & 下标sub</font></h4>
<p>这个段落里的文本包含 <sup>上标</sup> 文本。</p>
<p>这个段落里的文本包含 <sub>下标</sub>文本。</p>
<hr>
<!--删除线s、斜体i、加粗b---------------------------------------->
<h4><font color="blue">删除线s、斜体i、加粗b</font></h4>
<p>
这是普通文本<s>这是加了删除线的文字</s><i>这是斜体文字</i><b>这是加粗文字</b>
</p>
<hr>
<!--不换行标签：nobr---------------------------------------->
<h4><font color="blue">不换行标签：nobr</font></h4>
<nobr>
这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。
</nobr>
<hr>
<h4><font color="blue">图片属性</font></h4>
<!--width & height图片宽度和高度属性------------------------------>
<h4><font color="blue">width & height图片宽度和高度属性</font></h4>
<img src="./img/1.jpeg" height="33" width="33">
<img src="./img/1.jpeg" height="66" width="66">
<hr>
<!--border 图片边框属性------------------------------------------>
<h4><font color="blue">border 图片边框属性</font></h4>
<img src="./img/1.子弹.png" border=9 height="33" width="33">
<hr>
<!--hspace 水平间距属性------------------------------------------>
<h4><font color="blue">hspace 水平间距属性</font></h4>
<p><img src="./img/1.jpeg" width="33" height="33">没有预留水平间距的图片</p>
<p><img src="./img/1.jpeg" width="33" height="33" hspace="20">预留水平间距的图片</p>
<hr>
<!--vspace 垂直间距属性------------------------------------------>
<h4><font color="blue">vspace 垂直间距属性</font></h4>
<h4>没有预留垂直间距的图片</h4>
<p><img src="./img/1.jpeg" width="33" height="33"></p>
<h4>预留垂直间距的图片</h4>
<p><img src="./img/1.jpeg" width="33" height="33" vspace="22"><br></p>
<hr>
<h4><font color="blue">vspace垂直间距和hspace水平间距结合</font></h4>
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="300" height="300" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<img hspace="60" vspace="60" border="10" width="200" height="200" src="./img/子弹.png">
<hr>
<!--图片悬浮文本：title------------------------------------------>
<h4><font color="blue">图片悬浮文本：title</font></h4>
<img title="这是一张星空图" width="55" height="55" src="./img/1.jpeg">
<hr>
<!--图片指定代替文本属性：alt------------------------------------------>
<h4><font color="blue">图片指定代替文本属性：alt</font></h4>
<img src="./img/12.jpeg" alt="star">
<hr>
<!--图片文本对齐：align------------------------------------------>
<h4><font color="blue">图片文本对齐：align</font></h4>
<h4>默认对齐的图片 (align="bottom"):</h4>
<p>这是一些文本<img src="./img/1.jpeg" alt="Star" width="55" height="55"> 这是一些文本。</p>
<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="./img/1.jpeg" alt="Star" width="55" height="55" align="middle"> 这是一些文本。</p>
<h4>图片使用 align="top":</h4>
<p>这是一些文本。<img src="./img/1.jpeg" alt="Star" width="55" height="55" align="top"> 这是一些文本。</p>
</body>
</html>
扫一扫
2153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
