【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

韩曙亮

发布于 2023-03-30 19:02:46

3K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

HTML 常用的标签有如下类型 :

排版标签
文本格式化标签 ★
图像标签 ★
链接标签 , 其中链接涉及到相对路径与绝对路径问题 ;

一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 )

文本格式化标签 : 对文字设置粗体 , 斜体 , 下划线 , 删除线效果 ;

粗体效果 : 下面两种标签都能实现粗体效果 , 在 XHTML 中推荐使用 <strong></strong> 标签 ;

		<b></b>
		<strong></strong>

斜体效果 : 下面两种标签都能实现斜体效果 , 在 XHTML 中推荐使用 <em></em> 标签 ;

		<i></i>
		<em></em>

下划线效果 : 下面两种标签都能实现下划线效果 , 在 XHTML 中推荐使用 <ins></ins> 标签 ;

		<u></u>
		<ins></ins>

删除线效果 : 下面两种标签都能实现删除效果 , 在 XHTML 中推荐使用 <del></del> 标签 ;

		<s></s>
		<del></del>

XHTML 是可扩展超文本标记语言 , 英文全称 eXtensible HyperText Markup Language , 是 HTML5 标准的一部分 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<strong>编程范式</strong> 指的是 <em>使用某种编程语言的</em> <ins>编程套路</ins> 或 <del>编程习惯</del> ;		
    </body>
</html>

显示效果 :

二、标签属性

在标签中可以添加标签属性 , 标签属性的格式为 :

<标签名称 属性名称1="属性值1" 属性名称2="属性值2"> 标签内容 </标签名称>

一个标签中可以设置若干属性 ;

三、图像标签

在网页中插入图片 , 使用 <img> 标签 , 该标签是单标签 , 插入语法如下 :

<img src="图片的 URL 路径" />

将图片放在 html 文件相同的目录 , 可以直接使用相对路径添加该图片 ;

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<img src="image.jpg" />		
    </body>
</html>

添加后的效果如下 , 图片会按照原始像素进行显示 ;

图像标签可以设置如下属性 :

alt 属性 : 属性值是文本字符串 , 作用是当图片无法显示时 , 显示该文本 ;
title 属性 : 属性值是文本字符串 , 作用是鼠标在图片上悬停时 , 显示该文本 ;
width 属性 : 属性值是像素数值 , 作用是设置图像的像素宽度 ; 宽度和高度一般不同时设置 , 同时设置比例可能失真 ;
height 属性 : 属性值是像素数值 , 作用是设置图像的像素高度 ; 宽度和高度设置任意一个 , 另外一个可以等比例缩放 ;
border 属性 : 作用是设置图像的边框宽度度 , 一般都使用 css 设置 border 属性 ;

上述属性可以选择性设置 , 不必全部设置 , src 属性必须要配置 , 其它属性可有可无 ; 属性设置顺序不分先后 , 都可以正常发挥作用 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<img src="image.jpg" />		
		<br />
		<img src="image1.jpg" alt="图像显示出现问题" />
		<br />		
		<img src="image.jpg" title="博客数据" width="400"/>	
    </body>
</html>

效果展示 :