【web前端开发】HTML排版标签、HTML语义化标签、常用的文本标签

server/2025/3/13 23:01:34/
htmledit_views">

   1、HTML排版标签

标签名                                                                              标签含义                                                              单/双标签

h1~h6                                                                                标题                                                                         双

p                                                                                          段落                                                                       双

div                                                                                    没有任何含义,用于整体布局                                        双

效果:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML排版标签</title>
</head><body><h1>与时俱进</h1><h2>当务之急</h2><h3>久久为功</h3><h4>辩证思维</h4><h5>一张蓝图绘到底</h5><h6>坚持长期奋斗</h6><p>长风破浪会有时,直挂云帆济沧海</p><div>长风破浪会有时,直挂云帆济沧海</div>
</body></html>

结果:

总结:

(1)h1最好写一个,h2~h6能适当多写

(2)h1~h6不能互相嵌套;例如:h1标签最好不要写h2标签。

(3)p标签很特殊,,它里面不能有h1~h6,p,div标签。

2、HTML语义化标签

标签的默认效果可以通过CSS去随便的改。

用特定的标签表达特定的内容。

语义即含义。

例如:

h1~h6  语义:标题

p        语义:段落

div   没有语义

简单的说,语义化就是该标签的含义是什么,就如上面所说的那样,h1~h6就是标题。

总结:

(1)概念:用特定的标签,去表达特定的含义。

(2)原则:标签的默认效果不重要(后期可以通过CSS随便控制效果),语义最重要。

(4)语义化优势:

1))代码结构清晰,可读性强。

2))有利于SEO(搜索引擎优化)

3))方便设备解析(如:屏幕阅读器,盲人阅读器等)

3、常用的文本标签

(1)文本标签用于包裹:词汇、短语等

(2)通常写在排版标签(p、h1~h6、div)里面

(3)文本标签通常都是行内元素。

常用的标签 :

标签名                                         效果                                                           单/双标签

em                                        让包裹的词汇等变为斜体                                      双

strong                                      让包裹的词汇等加粗                                     双

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML常用的文本标签</title>
</head><body><em>一带一路</em><strong>时代接班人</strong>
</body></html>

结果:


http://www.ppmy.cn/server/174738.html

相关文章

批量将 Excel 转换 PDF/Word/CSV以及图片等其它格式

Excel 格式转换是我们工作过程当中非常常见的一个需求&#xff0c;我们通常需要将 Excel 转换为其他各种各样的格式。比如将 Excel 转换为 PDF、比如说将 Excel 转换为 Word、再比如说将 Excel文档转换为图片等等。 这些操作对我们来讲都不难&#xff0c;因为我们通过 Office 都…

Kubernetes开发环境minikube | 开发部署apache tomcat web集群应用

minikube是一个主要用于开发与测试Kubernetes应用的运行环境&#xff0c;本文主要描述在minikube运行环境中部署J2EE tomcat web应用。 单节点Node多Pod实例部署 如上所示&#xff0c;在minikube运行的Linux部署环境中启动单节点Node 如上所示&#xff0c;在minikube的容器环境…

GitHub上传项目

总结&#xff08;有基础的话直接执行这几步&#xff0c;就不需要再往下看了&#xff09;&#xff1a; git init 修改git的config文件&#xff1a;添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…

PHPCMS V9 登录加密改造

要改造 phpcms 的后台登录&#xff0c;使其前端使用加密方式提交&#xff0c;后端解密&#xff0c;你可以采用 RSA 非对称加密 或 AES 对称加密 方式来增强安全性。 方案设计 前端加密 生成公私钥对&#xff08;推荐使用 RSA&#xff09;。前端使用公钥加密密码&#xff0c;然…

解锁MATLAB语言:从入门到实战的编程秘籍

目录 一、MATLAB 是什么? 二、搭建 MATLAB 环境 三、基础语法入门 3.1 特殊符号与运算符 3.2 变量命名与赋值 3.3 向量与矩阵创建 四、实战演练 4.1 简单数学运算 4.2 绘制函数图像 五、深入学习建议 一、MATLAB 是什么? MATLAB,即 Matrix Laboratory(矩…

多模态推理模型相关开源工作

多模态推理模型相关开源工作 1. 训练策略1.1 R1-V① 介绍② 训练流程③ 关键注意点④ 主要问题⑤ 是否可以去掉 KL 约束&#xff1f; 1.2 open-r1-multimodal① 介绍② 代码改进 1.3 VisualThinker-R1-Zero① 研究意义② 训练方法③ 结论④ 代码改进⑤ 其他发现 1.4 Efficient-…

VScode 运行LVGL

下载vscode解压 环境安装 安装mingw64&#xff0c;gcc 版本必须8.3以上 安装cmak 系统环境变量Path中添加&#xff08;以实际安装目录为准&#xff09; C:\Program Files\mingw64\bin C:\Program Files\CMake\bin 将GUI-Guider生成的代码目录拷贝一份放到vscode项目目录…

【2025】基于springboot+vue的汽车销售试驾平台(源码、万字文档、图文修改、调试答疑)

基于 Spring Boot Vue 的汽车销售试驾平台通过整合前后端技术&#xff0c;实现了汽车销售和试驾预约的信息化和智能化。系统为管理员和用户提供了丰富的功能&#xff0c;提升了客户体验和销售效率&#xff0c;增强了数据分析能力&#xff0c;为汽车销售行业的发展提供了新的途…