【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )
2023-09-27 14:26:54 时间
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>
效果展示 :
相关文章
- HTML 全局属性_02
- 工作总结 获取html 标签 自定义属性值 根据html 自定义属性 获取 到标签
- 精通Android自定义View(五)自定义属性值使用详情
- 【Css】Css有关html“属性选择器”的语法合集(示例)
- Google Earth Engine ——欧洲联盟三年一次的原地土地覆盖和土地利用数据(共有106个属性)
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.7 原型属性和方法
- HTML的disabled属性及readonly属性
- 【前端学习之HTML&CSS】-- CSS第四篇 -- 层叠、继承与属性值计算
- HTML元素的专用传参数据属性
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.5 表格的行属性
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
- Jackson序列化日期类型的属性
- ASP.NET Core中使用Autofac进行属性注入
- install - 复制文件并设置属性
- AppStorage 基础教程SwiftUI 2新属性
- 属性初始化
- HTML-属性
- HTML的变化过程,以及新增的属性
- viewer.js 显示图片名称和照片属性
- JavaScript之获取和设置元素属性
- 【Unity Shader】纹理实践2.0:基本属性&封装和滤波模式