如何书写html标签_HTML基础标签(div/p/img)书写规范与示例

div、p、img标签需规范书写:div用小写,合理使用class/id,避免过度嵌套;p标签成对出现,不嵌套块级元素;img为自闭合标签,必加src和alt属性。

如何书写html标签_html基础标签(div/p/img)书写规范与示例

在HTML开发中,正确书写标签是构建网页结构的基础。div、p 和 img 是最常用的标签之一,掌握它们的书写规范有助于写出语义清晰、结构合理的代码。

div 标签:块级容器的标准写法

div 是“division”(分区)的缩写,用于将页面划分为不同的区块,常用于布局和样式控制。

书写规范:使用小写字母书写标签名:

合理添加 class 或 id 属性以便 CSS 样式控制,例如:

避免嵌套过深,保持结构清晰 不要滥用 div,优先考虑语义化标签如 header、main、section 等(在合适场景下)示例:

正文区域

p 标签:段落文本的标准表达

p 标签用于定义一段文字内容,浏览器会自动在其前后添加换行间距。

书写规范:必须成对出现(有开始和结束标签):

内容

立即学习“前端免费学习笔记(深入)”;

只包含纯文本或内联元素(如 strong、em、a),不要嵌套块级元素(如 div、p) 每个段落使用一个 p 标签,不要用多个 br 实现段落换行示例:

这是第一段文字内容。

醒文
醒文

文字排版美化生图工具

醒文 131
查看详情 醒文

这是第二段,用来描述更多细节。

img 标签:图像引用的正确方式

img 是自闭合标签,用于在页面中插入图片。

书写规范:必须包含 src 属性,指定图片路径 推荐添加 alt 属性,用于图片无法加载时的替代文本,也提升可访问性 使用自闭合写法:描述文字(XHTML 风格),HTML5 中斜杠可省略 建议指定 width 和 height,防止页面重排示例:

@@##@@

或更现代的响应式写法(配合CSS):

@@##@@

基本上就这些。遵循标准写法,能让HTML更易维护、更兼容,并为SEO和无障碍访问打下良好基础。

公司Logo户外风景

以上就是如何书写html标签_HTML基础标签(div/p/img)书写规范与示例的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1591362.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何编辑网页HTML中的时间显示_如何编辑网页HTML中动态时间显示的代码
上一篇 2025年12月23日 06:45:47
怎么判断html5_HTML5特性检测与浏览器兼容性判断
下一篇 2025年12月23日 06:46:00

相关推荐

  • win8时间不准怎么同步_Win8时间同步教程

    win8时间不准怎么同步_Win8时间同步教程win8时间不准怎么同步_Win8时间同步教程win8时间不准怎么同步_Win8时间同步教程win8时间不准怎么同步_Win8时间同步教程

    1、启用自动时间同步:通过“Internet 时间”选项卡勾选同步并选择服务器,点击“立即更新”完成校准;2、手动调整时间:在“日期和时间”选项卡中修改具体数值;3、检查时区:选择对应地理区域的时区并设置夏令时。 如果您发现Windows 8系统的日期和时间显示不正确,这可能会导致程序运行异常、文件…

    2026年9月26日 • 用户投稿
    500
  • 如何配置Tomcat日志轮转

    如何配置Tomcat日志轮转如何配置Tomcat日志轮转如何配置Tomcat日志轮转如何配置Tomcat日志轮转

    本文介绍如何利用Linux系统自带的logrotate工具实现Tomcat日志的自动轮转。 步骤一:创建或修改logrotate配置文件 在/etc/logrotate.d/目录下,创建或修改名为tomcat的配置文件(或其他你选择的名称)。使用以下命令: sudo vim /etc/logrota…

    2026年9月26日 • 用户投稿
    000
  • windows激活失败错误0x8007007b怎么办_激活错误0x8007007b问题解决流程

    windows激活失败错误0x8007007b怎么办_激活错误0x8007007b问题解决流程windows激活失败错误0x8007007b怎么办_激活错误0x8007007b问题解决流程windows激活失败错误0x8007007b怎么办_激活错误0x8007007b问题解决流程windows激活失败错误0x8007007b怎么办_激活错误0x8007007b问题解决流程

    0x8007007b错误通常由系统时间不准、激活服务异常或注册表问题引起。首先检查并同步系统时间和时区,确保网络通畅;接着以管理员身份运行命令提示符,依次执行slmgr.vbs /upk、/ipk输入有效密钥和/ato尝试激活;若问题依旧,运行sfc /scannow修复系统文件,并在服务中确认“软…

    2026年9月26日 • 用户投稿
    1800
  • sublime有哪些必装的插件_sublime推荐必装插件清单

    sublime有哪些必装的插件_sublime推荐必装插件清单sublime有哪些必装的插件_sublime推荐必装插件清单sublime有哪些必装的插件_sublime推荐必装插件清单sublime有哪些必装的插件_sublime推荐必装插件清单

    Sublime Text通过插件可大幅提升效率,建议安装Package Control以方便管理插件;SideBarEnhancements增强侧边栏功能,支持文件快速操作;Emmet和代码片段插件提升前端开发速度,实现HTML/CSS/JS的高效编写;Git集成插件支持版本控制操作,GitGutt…

    2026年9月26日 • 用户投稿
    100
  • Java加密输出长度优化:应对API 100字符限制的策略与实践

    Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践

    本文探讨在Java中实现文本加密时,如何应对输出密文长度不超过100字符的严格限制。我们将深入理解加密算法的本质,分析其非压缩特性及额外开销,并提供一系列实用的优化策略,包括前置数据压缩、最小化加密开销、高效密文表示以及协议层面的分段传输,旨在帮助开发者在满足安全需求的同时,符合特定的API长度约束…

    2026年9月26日 • 用户投稿
    000
  • 为什么视频流媒体需要特定编码格式?

    为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?

    视频流媒体需特定编码格式,因其能高效压缩原始视频数据并确保跨设备兼容。编码格式通过去除冗余信息,在保证画质前提下显著降低码率,提升传输效率。H.264、H.265、AV1等标准支持自适应比特率(ABR)流媒体,实现不同网络条件下流畅播放。同时,编码格式影响画质表现、色彩深度、HDR支持及音频优化,兼…

    2026年9月26日 • 用户投稿
    000
  • 在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。

    在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。

    在淘宝这个庞大的电商环境中购物,虽然大多数时候我们能体验到便利与实惠,但有时也不可避免地会遇到售卖假货的问题。这不仅侵犯了消费者的合法权益,也扰乱了正常的市场秩序。一旦发现所购商品为假货,我们不应选择沉默,而应主动维权、及时申诉。那么,在淘宝上遭遇售假时该如何进行申诉?又需要准备哪些材料呢?掌握这些…

    2026年9月26日 • 用户投稿
    000
  • 在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍

    在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍

    iCloud同步变慢通常因存储接近上限,可通过iPhone、iPad、Mac、Windows或iCloud.com查看使用情况。1、在iOS设备中进入“设置”-“Apple ID”-“iCloud”-“管理储存空间”查看各应用占用;2、在Mac上通过“系统设置”-“Apple ID”-“iCloud…

    2026年9月26日 • 用户投稿
    000
  • Android应用中Activity间文件路径传递与PDF加载指南

    Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南

    本文旨在解决Android应用中通过Intent在Activity间传递文件路径时常见的NullPointerException问题,尤其是在加载PDF文件场景。我们将深入分析导致此错误的原因,并提供两种安全有效的解决方案:使用getAbsolutePath()传递字符串路径,或利用Serializ…

    2026年9月26日 • 用户投稿
    1300
  • 用AI工具搭建自动化内容生成系统的完整流程

    用AI工具搭建自动化内容生成系统的完整流程用AI工具搭建自动化内容生成系统的完整流程用AI工具搭建自动化内容生成系统的完整流程用AI工具搭建自动化内容生成系统的完整流程

    搭建自动化内容生成系统需选择合适ai工具并整合至高效流程。1.选择ai工具时应明确内容类型、评估功能、性能与价格,并测试试用版本;2.设计流程包括确定主题、生成初稿、人工润色、seo优化及发布推广;3.整合工具需技术连接各环节,测试优化并定期更新;4.注意版权问题,确保合法使用生成内容;5.从准确性…

    2026年9月26日 • 用户投稿
    000
  • 抖音短剧如何剪辑才能保证原创性?如何制作自己的原创视频?5大剪辑准则你了解吗?

    抖音短剧如何剪辑才能保证原创性?如何制作自己的原创视频?5大剪辑准则你了解吗?抖音短剧如何剪辑才能保证原创性?如何制作自己的原创视频?5大剪辑准则你了解吗?抖音短剧如何剪辑才能保证原创性?如何制作自己的原创视频?5大剪辑准则你了解吗?抖音短剧如何剪辑才能保证原创性?如何制作自己的原创视频?5大剪辑准则你了解吗?

    一、保障原创性的5大剪辑核心原则 1. 故事结构革新策略 具备原创价值的剧本必须满足以下三点: 构建新颖的世界观(如记忆移植、梦境共享)打破常规的情节推进方式(每集设置不少于一次关键反转)重构人物关系模型(突破常规情感与社会联结) 2. 拍摄素材溯源管理 在拍摄环节构建完整创作证据链: 启用摄像设备…

    2026年9月26日 • 用户投稿
    100
  • Chrome浏览器如何模拟不同的地理位置_地理位置信息模拟设置方法

    Chrome浏览器如何模拟不同的地理位置_地理位置信息模拟设置方法Chrome浏览器如何模拟不同的地理位置_地理位置信息模拟设置方法Chrome浏览器如何模拟不同的地理位置_地理位置信息模拟设置方法Chrome浏览器如何模拟不同的地理位置_地理位置信息模拟设置方法

    通过Chrome开发者工具可模拟地理位置,用于测试网页应用在不同地区的表现。首先按F12打开开发者工具,进入Sensors面板,将Geolocation设为Custom location并输入经纬度(如37.7749, -122.4194),刷新页面即可生效。为避免权限弹窗,可通过命令行启动Chro…

    2026年9月26日 • 用户投稿
    000
  • x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程

    x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程

    首先启用X浏览器内置画中画功能,播放视频后退出全屏并点击“小窗”图标即可悬浮播放;若不支持,可前往系统设置开启Safari的画中画选项,返回X浏览器播放时按主屏键触发系统级小窗;还可通过App Store下载浮屏播放器类第三方工具,安装后授权辅助功能,侧滑调出控制器提取视频流实现浮窗播放。 如果您在…

    2026年9月26日 • 用户投稿
    000
  • 如何用豆包 AI 大模型与绘图 AI 结合生成创意插画?手把手教你实现​

    如何用豆包 AI 大模型与绘图 AI 结合生成创意插画?手把手教你实现​如何用豆包 AI 大模型与绘图 AI 结合生成创意插画?手把手教你实现​如何用豆包 AI 大模型与绘图 AI 结合生成创意插画?手把手教你实现​如何用豆包 AI 大模型与绘图 AI 结合生成创意插画?手把手教你实现​

    豆包ai与绘图ai结合能高效创作插画,具体步骤如下:一、用豆包ai生成创意方向,如输入“未来城市”主题,获取多个关键词和风格建议;二、让豆包将描述内容翻译成绘图ai可用的英文提示词,并包含风格和氛围描述;三、通过添加风格参考、调整构图和色彩等优化提示词细节;四、固定流程提高效率,包括提需求、生成提示…

    2026年9月26日 • 用户投稿
    000
  • Debian Apache日志中如何识别恶意访问

    Debian Apache日志中如何识别恶意访问Debian Apache日志中如何识别恶意访问Debian Apache日志中如何识别恶意访问Debian Apache日志中如何识别恶意访问

    有效监控和防御恶意网站访问对于Debian系统的Apache服务器至关重要。Apache访问日志是识别此类威胁的关键信息来源。本文将指导您如何分析日志并采取防御措施。 识别恶意访问行为 Debian系统的Apache访问日志通常位于 /var/log/apache2/access.log。 您可以通…

    2026年9月26日 • 用户投稿
    000
  • MySQL如何实现数据分区 范围分区与哈希分区实战

    MySQL如何实现数据分区 范围分区与哈希分区实战MySQL如何实现数据分区 范围分区与哈希分区实战MySQL如何实现数据分区 范围分区与哈希分区实战MySQL如何实现数据分区 范围分区与哈希分区实战

    mysql实现数据分区的常见方式有范围分区和哈希分区。1. 范围分区适合按时间、数值等有明确界限的数据划分,例如按年份对销售表进行分区,能提高查询效率并方便管理;2. 哈希分区适合需要均匀分布数据的场景,如按用户id进行分区,避免数据倾斜。选择分区方式需根据数据特点判断:范围分区查询特定范围高效但可…

    2026年9月26日 • 用户投稿
    100
  • 小红书网页版怎么添加商品_小红书网页版电商功能使用教程

    小红书网页版怎么添加商品_小红书网页版电商功能使用教程小红书网页版怎么添加商品_小红书网页版电商功能使用教程小红书网页版怎么添加商品_小红书网页版电商功能使用教程小红书网页版怎么添加商品_小红书网页版电商功能使用教程

    小红书网页版添加商品需先登录官网,进入商家中心完成认证后,在商品管理页面填写信息、上传图片、设置价格库存并完善详情描述,最后通过优化标题关键词、关联话题标签、更新封面图、发布种草笔记及参与促销活动提升曝光。 小红书网页版怎么添加商品?这是不少网友都关注的,接下来由PHP小编为大家带来小红书网页版电商…

    2026年9月26日 • 用户投稿
    500
  • 蚂蚁百灵大模型团队开源 Ring-Linear-2.0 系列高效思考模型

    蚂蚁百灵大模型团队开源 Ring-Linear-2.0 系列高效思考模型蚂蚁百灵大模型团队开源 Ring-Linear-2.0 系列高效思考模型蚂蚁百灵大模型团队开源 Ring-Linear-2.0 系列高效思考模型蚂蚁百灵大模型团队开源 Ring-Linear-2.0 系列高效思考模型

    蚂蚁百灵大模型团队近日宣布,正式开源两款具备高效思考能力的新型模型:ring-flash-linear-2.0 与 ring-mini-linear-2.0,同时推出两项自研高性能融合算子——fp8融合算子和线性attention推理融合算子,致力于实现“大参数、低激活”的极致推理效率,并全面支持超…

    2026年9月26日 • 用户投稿
    900
  • 利用 Deepseek 满血版与 Kapwing,在线编辑创意视频​

    利用 Deepseek 满血版与 Kapwing,在线编辑创意视频​利用 Deepseek 满血版与 Kapwing,在线编辑创意视频​利用 Deepseek 满血版与 Kapwing,在线编辑创意视频​利用 Deepseek 满血版与 Kapwing,在线编辑创意视频​

    deepseek ai在视频创意生成中的独特优势体现在其强大的联想发散能力、内容结构化梳理能力以及多模态理解与生成潜力。①它能从一个关键词联想到多个具体场景并生成详细描述,突破创意瓶颈;②可自动生成分镜脚本、旁白文案及时间轴建议,提升叙事逻辑性;③具备从抽象概念到执行指导的转化能力,辅助视觉与音乐风…

    2026年9月26日 • 用户投稿
    1900
  • Java中利用Comparator对自定义对象列表进行高效排序

    Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序

    本教程详细阐述了如何在Java中利用Comparator接口对自定义对象(如带有分数的单词)的ArrayList进行排序。我们将学习如何封装数据、使用List.sort()方法结合Comparator.comparing()和.reversed()实现升序和降序排序,并提供优化字母分数计算的实用建议…

    2026年9月26日 • 用户投稿
    300

发表回复

登录后才能评论
关注微信