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

文本格式化标签

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

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

语义	标签	说明
加粗	或者	更推荐使用标签加粗，语义更强烈
倾斜	或者	更推荐使用标签加粗，语义更强烈
删除线	或者	更推荐使用标签加粗，语义更强烈
下划线	或者	更推荐使用标签加粗，语义更强烈

标签 和 标签

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

这是头部，大盒子
今日价格，小盒子

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

 

特点：

1、

标签用来布局，但现在一行只能放一个

，大盒子。一个标签的内容存在一行。

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

 图片标签和路径（重点）

 图像标签是单标签,所有图片的属性可以加在

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

图像属性：

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

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

    
 图像标签的使用：
        
    
 alt替换文本 图像显示不出来的时候用文字替换：
        
    
 title 提示文本 鼠标放在图片上会显示文字：
        

 

 修改图片的宽度和高度：

 title 提示文本 鼠标放在图片上会显示文字：
       
 title 提示文本 鼠标放在图片上会显示文字：
    
 title 提示文本 鼠标放在图片上会显示文字：
    

 

 

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

修改图片的边框：

 

再次敲重点：

图像属性

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

 图像标签属性注意点：

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

例：

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

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

重点掌握的是：

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

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

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