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

embedded/2025/3/13 11:52:35/
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/embedded/172231.html

相关文章

【VS】vs生成前事件,复制脚本文件至运行目录

​ 在项目目录中添加了一些配置文件&#xff0c;或者脚本文件&#xff0c;运行时需要把这些文件复制运行目录下&#xff0c;visual studio 中 可以设置生成事件&#xff0c;项目生成时自动复制文件到运行目录。 xcopy /Y “KaTeX parse error: Undefined control sequence: \c…

ES搭建详细指南+常见错误解决方法

Elasticsearch&#xff08;ES&#xff09;是一款开源的、分布式的、RESTful风格的搜索和数据分析引擎。它用于全文搜索、结构化搜索、分析等场景。以下是Elasticsearch的搭建步骤以及处理常见错误的方法。 Elasticsearch搭建步骤&#xff1a; 1.环境准备&#xff1a; 确保你的…

(2025|ICLR|厦大华为,LoSA,基于表示互信息的动态层级稀疏率,基于重构误差的秩分配)LLM 的动态低秩稀疏自适应

Dynamic Low-Rank Sparse Adaptation for Large Language Models 目录 1. 引言 1.1 关键词 2. 方法 2.1 预备知识 2.2 层级稀疏率确定 2.3 稀疏感知的秩分配 2.4 动态稀疏与适配 3. 实验 3.1 实验设置 3.2 语言建模 3.3 零样本任务 3.4 N:M 稀疏性 3.5 消融实验 …

【Godot4.4】写入和读取ZIP文件

概述 Godot提供了ZIPPacker类型来读写ZIP压缩包文件。本文是简单的写入和读取文件操作测试笔记。 写入纯文本文件 extends Buttonfunc _ready():write_zip_file("1.zip",func(zip_packer):write_txt_file_to_zippack(zip_packer,"1.txt","hhhhh&qu…

45.HarmonyOS NEXT Layout布局组件系统详解(十二):高级应用案例与性能优化

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT Layout 布局组件系统详解&#xff08;十二&#xff09;&#xff1a;高级应用案例与性能优化 文章目录 HarmonyOS NEXT Layout 布局…

eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍

路由器常见接口的详细介绍及其应用示例&#xff1a; 1. CON/AUX 接口 全称&#xff1a;Console/Auxiliary&#xff08;控制台/辅助接口&#xff09;作用&#xff1a; CON&#xff08;Console&#xff09;&#xff1a;通过命令行界面&#xff08;CLI&#xff09;直接配置路由器…

重邮数字信号处理-实验六用 MATLAB 设计 IIR 数字滤波器

一、实验目的 1、加深对 IIR 数字滤波器设计方法和设计步骤的理解&#xff1b; 2、掌握用模拟滤波器原型设计 IIR 数字滤波器的方法&#xff1b; 3、能编写 MATLAB 函数&#xff0c;掌握设计 IIR 数字滤波器的函数调用方法&#xff1b; 4、根据不同的应用场景&#xff0…

Windows HD Video Converter Factory PRO-v27.9.0-

Windows HD Video Converter Factory PRO 链接&#xff1a;https://pan.xunlei.com/s/VOL9TaiuS7rXbu-1kEDndoceA1?pwd7qch# 支持300多种视频格式转换&#xff0c;在保留视频质量的同时&#xff0c;压缩率可达80%&#xff0c;转换速度可达50X速率&#xff01; 支持画面剪切、片…