一、文字属性

1、对齐属性：align

2、font标签

字体属性：face

5、上标：sup和下标：sub

7、删除线s、斜体i、加粗b

10、不换行标签：nobr

二、图片属性

1、width和height

2、边框：border

3、水平间距：hspace

4、垂直间距：vspace

5、图片悬浮文本：title

6、图片指定代替文本属性：alt

6、图片文本对齐：align

这是第七篇文章，有一些属性在上一节表格详情里提到一些属性，例如对齐align、颜色color和边框border等，有一些属性在文字或图片里也有，可以联系表格属性学习下面文字和图片的属性。

一、文字属性

1、对齐属性：align

文字的对齐属性和表格的对齐属性一样，设置表格在网页中的水平对齐方式，常用属性值都是left、right、center

语法：这是一段对齐方式为 center 居中的文字

这是一段对齐方式为 left 居中的文字

这是一段对齐方式为 right 居中的文字

2、font标签

face 属性用于设置所有字体属性。设置的属性是按顺序的： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。其他值如果缺少了，将被插入默认值。

font属性
属性名	作用	默认值	常用值
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），以便在前面列举的字体都不可用时，浏览器可以在通用字体库中找到该字体。

语法：

如需规定若干字体的优先表，使用逗号分隔字体名称

例如：

5、上标：sup和下标：sub

标签定义上标文本。上标文本将会显示在以当前文本中字符高度的一半为基准线的上方，与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。

标签定义下标文本。下标文本将会显示在以当前文本流中字符高度的一半为基准线的下方，与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。

语法：

这个段落里的文本包含 上标 文本。

这个段落里的文本包含 下标文本。

7、删除线s、斜体i、加粗b

<s> 标签被用来定义那些不正确的文本。

标签用来定义与文本中其余部分不同的部分（例如：专用名词、成语等），并把这部分文本呈现为斜体文本。

标签定义粗体的文本。可用于强调说明

语法：

(1) <s>give me a red envelope </s>
Happy New Year

(2)祝冬奥会中国的奥运健儿夺得佳绩，加油！加油！

(3)这是普通的文本这是加粗强调的文本这是普通的文本

10、不换行标签：nobr

nobr标签表示不换行，阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不推荐使用。可以到后面学css用属性white-space

示例：



这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。这是一行不换行的文字，屏幕底部会有滑动条。

二、图片属性<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")

这是一些文本<img src="./img/1.jpeg" alt="Star" width="55" height="55"> 这是一些文本。

图片中间对齐：
这是一些文本。 <img src="./img/1.jpeg" alt="Star" width="55" height="55" align="middle"> 这是一些文本。

图片顶部对齐：
这是一些文本。<img src="./img/1.jpeg" alt="Star" width="55" height="55" align="top"> 这是一些文本。

上面的代码如下，可以复制，运行后结合运行结果和代码进一步理解各个属性

<!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>

参考：菜鸟教程&【前端就业课第一阶段】HTML5 零基础到实战（七）文字及图片详解_1_bit 的博客-CSDN博客

第七篇：HTML文字与图片属性相关推荐

【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素前言图片元素 ...
html文字与图片位置关系,Word文档中图片与文本的七种位置关系
word文档可以插入图片.图片与文本的位置关系有七中情况,分别是嵌入型.四周型环绕.紧密型环绕.穿越型环绕.上下型环绕.衬于文字下方.浮于文字上方. 七种位置关系工具:Word2013 一.嵌入型 ...
python提取图片文字视频教学_Python学习第七天之爬虫的学习与使用（爬取文字、图片、视频）...
一.爬虫记得基本方法 1.1 爬虫概述网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使 ...
python爬取文字和图片_Python学习第七天之爬虫的学习与使用（爬取文字、图片、视频）...
[toc] 一.爬虫记得基本方法 1.1 爬虫概述网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素
本篇主要包括: ■ 添加独立的一行 ■ 文字环绕 ■ 图片自适应 ■ 隐藏元素添加独立的一行在id为body的section和id为main的section之间,添加2张图片. 我们发现, ...
手把手教你如何通过Java给图片添加文字和图片水印
本文首发于个人网站前言最近工作上有个需求,动态生成一张图片,具体来说就是基于模版图片动态添加文字和图片(文字内容不同,图片数目不同),其中文字大小不全一样,且对位置有所要求. 本文将剖析多个技术方 ...
文字转图片，文字水印图片，合成图片，教你 Python 生成网站原创配图！
又是为站佬们服务(写)水文的一篇,如何应用python来生成或者说是合成自己的原创图片,适合各位站群大佬哥们生成自己的图片,避免没有配图或者侵权碰瓷的尴尬,当然本渣渣这里分享的仅仅是源码demo,后续 ...
计算机网络中的冗余部件大大降低了可靠,大学计算机第七篇练习题
<大学计算机第七篇练习题>由会员分享,可在线阅读,更多相关<大学计算机第七篇练习题(7页珍藏版)>请在技术文库上搜索. 1.10如果用户想访问某个站点,在IE浏览器地址栏中输入 ...

第七篇：HTML文字与图片属性

一、文字属性<font>

1、对齐属性：align

2、font标签

字体属性：face

5、上标：sup和下标：sub

7、删除线s、斜体i、加粗b

10、不换行标签：nobr

二、图片属性<img>

1、width 和 height

2、边框：border

3、水平间距：hspace

4、垂直间距：vspace

5、图片悬浮文本：title

6、图片指定代替文本属性：alt

6、图片文本对齐：align

第七篇：HTML文字与图片属性相关推荐

最新文章

热门文章