Web前端 HTML常用标签文本格式化标签图像标签

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签加粗，语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>标签加粗，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签加粗，语义更强烈

<div> 标签和 <span> 标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。

<div>这是头部，大盒子</div>
<span>今日价格，小盒子</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

1、<div>标签用来布局，但现在一行只能放一个<div>，大盒子。一个标签的内容存在一行。

2、<span>标签用来布局，一行可以多个<span>。小盒子，一行可以存在多个<span>内容。

图片标签和路径（重点）

<img src="图片的地址" />

<img />图像标签是单标签,所有图片的属性可以加在<img (可以加任意图片属性) />

src是<img />标签的必须属性，标明图片的地址，否则无法显示图片

图像属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时显示文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

修改图片的替换文本和提示文本

<body><h4> 图像标签的使用：</h4 ><img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" /><h4> alt替换文本 图像显示不出来的时候用文字替换：</h4 ><img src="图片存放\派大星.jpg" alt="派大星的照片" /><h4> title 提示文本 鼠标放在图片上会显示文字：</h4 ><img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" alt="派大星的照片" title="我叫派大星"/>
</body>

修改图片的宽度和高度：

<h4> title 提示文本 鼠标放在图片上会显示文字：</h4 ><img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="500"/>
<h4> title 提示文本 鼠标放在图片上会显示文字：</h4 ><img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" height="100"/><h4> title 提示文本 鼠标放在图片上会显示文字：</h4 ><img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="500" height="100"/>

如图所示，修改图片之后想要保持原图大小，建议只修改一个属性，只修改宽或只修改高，只修改一个属性的话，另一个属性会被自动等比例修改。两个属性都手动修改的话，图片容易被修改不均衡，导致图片变形。

修改图片的边框：

<border="写入想要的边框像素大小">

<img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" width="300" border="15"/>

再次敲重点：

图像属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时显示文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：

1、图像标签可以拥有多个属性，但必须写在标签名后面，也就是img后面。

例：<img (写图像属性，图像属性中src=""这个属性是必须写的，图片路径)/>

2、属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开

3、属性采取键值对的格式，即key="value"的格式，属性="属性值"

重点掌握的是：

src属性是必须要写的，必须写图片路径才能显示图片

alt属性是图片显示不出来才显示文字

title属性是鼠标放在图片上显示文字