HTML的基石:区块标签与小语义标签的深度解析

📚 HTML的基石:区块标签与小语义标签的深度解析

    • 🌐 区块标签:构建网页的框架
      • 🏠 `<div>`:万能的容器
      • 📚 `<section>`、`<article>`、`<aside>`:语义化的布局
    • 💬 小语义标签:让网页说话
      • 🔖 `<strong>`、`<em>`:强调的艺术
      • 📌 `<mark>`、`<time>`:细节之处见真章
      • 📚 `<figure>`与`<figcaption>`:图片与图注的完美搭档
    • 实战与技巧
      • 语义化的重要性
      • 性能与安全
      • 无障碍性
    • 排查与解决方案
    • 结语:语义化的魅力无限

欢迎来到HTML的世界,在这里,每一个标签都是构建网页大厦的砖石。今天,我们将深入探讨HTML的两大基石——区块标签(Block Elements)与小语义标签(Inline Semantic Elements),它们不仅是网页结构的骨架,更是语义化的灵魂。准备好了吗?让我们一起探索如何用它们编织出既美观又功能强大的网页!

🌐 区块标签:构建网页的框架

🏠 <div>:万能的容器

<div>,这个无处不在的标签,就像乐高积木中的基础块,可以用来分组其他元素,形成布局的基石。

<div class="header"><!-- 头部内容 -->
</div>
<div class="main"><!-- 主体内容 -->
</div>
<div class="footer"><!-- 页脚内容 -->
</div>

技巧提示:虽然万能,但过度使用会使HTML变得难以维护。尽量使用更有语义的标签替代。

📚 <section><article><aside>:语义化的布局

这些标签不仅帮助组织内容,还向搜索引擎和辅助技术传达了页面结构的意义。

  • <section> 定义文档中的独立区域,比如章节、页眉、页脚等。
  • <article> 用于可独立分配或复用的内容,如新闻文章、博客帖子。
  • <aside> 表示和主要内容相关但可以独立分离的信息,如侧边栏。
<section><h2>今日新闻</h2><article><h3>新闻标题</h3><p>新闻内容...</p></article><aside>相关推荐链接...</aside>
</section>

💬 小语义标签:让网页说话

🔖 <strong><em>:强调的艺术

  • <strong> 表示重要性,通常加粗显示。
  • <em> 强调,常以斜体呈现,强调语句的语气或情感。
<p><b>务必</b>记住,<i>安全</i>永远是第一位。</p>
<!-- 更好的语义化写法 -->
<p><strong>务必</strong>记住,<em>安全</em>永远是第一位。</p>

📌 <mark><time>:细节之处见真章

  • <mark> 高亮显示,用于标记文本中需要特别注意的部分。
  • <time> 表示日期或时间,便于机器理解。
<p>会议将于<time datetime="2023-04-15T10:00">明天上午10点</time>召开。</p>

📚 <figure><figcaption>:图片与图注的完美搭档

这对组合用于展示带有图注的图片、图表等。

<figure><img src="example.jpg" alt="示例图片"><figcaption>这是示例图片的描述。</figcaption>
</figure>

实战与技巧

语义化的重要性

使用语义标签不仅让代码更易于阅读和维护,还有助于SEO,提升网页在搜索引擎中的排名。

性能与安全

  • 减少DOM元素:过多的标签会增加DOM树的复杂度,影响页面渲染性能。
  • 避免XSS攻击:在处理用户输入时,确保正确转义输出,防止注入恶意代码。

无障碍性

  • 添加alt属性给图片,为视觉障碍用户提供替代文字描述。
  • 使用ARIA角色(如role="navigation")增强辅助技术的识别。

排查与解决方案

遇到布局错乱?检查CSS是否正确应用;语义标签被误用?回顾MDN文档,确保每个标签的正确用途。

结语:语义化的魅力无限

掌握了区块标签与小语义标签的运用,你就拥有了构建高质量网页的金钥匙。记住,优秀的网页不仅仅是视觉上的享受,更是内容结构与意义的精准传达。现在,是时候在你的项目中实践这些知识,让网页不仅看起来美,而且“说”得明白。

互动环节:在你的项目中,哪些语义标签的使用给你带来了惊喜的变化?或者遇到了哪些挑战?欢迎在评论区分享你的故事,让我们共同成长!


欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。


推荐:DTcode7的博客首页。
一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟!


【专栏导航】

  • 《微信小程序相关博客》:结合微信官方原生框架、uniapp等小程序框架,记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
  • 《Vue相关博客》:详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅。
  • 《前端开发习惯与小技巧相关博客》:罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
  • 《AIGC相关博客》:AIGC、AI生产力工具的介绍,例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
  • 《photoshop相关博客》:基础的PS学习记录,含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
  • 《IT信息技术相关博客》:作为信息化人员所需要掌握的底层技术,涉及软件开发、网络建设、系统维护等领域
  • 《日常开发&办公&生产【实用工具】分享相关博客》:分享介绍各种开发中、工作中、个人生产以及学习上的工具,丰富阅历,给大家提供处理事情的更多角度,学习了解更多的便利工具,如Fiddler抓包、办公快捷键、虚拟机VMware等工具。

吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过python读取并发送二进制文件到串口

代码 #!python.exe """ filename send_bin.py brief According to the users input, read bin file, subpackage and send the file by UART. HowToUse send_bin.py -h author shadowThreeDgmail.com data 20220224 &q…

vulhub——ActiveMQ漏洞

文章目录 一、CVE-2015-5254(反序列化漏洞)二、CVE-2016-3088&#xff08;任意文件写入漏洞&#xff09;2.1 漏洞原理2.2 写入webshell2.3 写入crontab 三、CVE-2022-41678&#xff08;远程代码执行漏洞&#xff09;方法一方法2 四、CVE-2023-46604&#xff08;反序列化命令执行…

【退役之重学Java】关于 Ribbon

一、负载均衡 Nginx 和 Ribbon 都能做负载均衡&#xff0c;区别在哪儿&#xff1f; Nginx 负责服务器负载均衡Ribbon 负责本地负载均衡 Nginx 是服务器负载均衡&#xff0c;客户端所有请求都会交给 Nginx&#xff0c;然后由 Nginx 实现转发请求。即负载均衡是由服务端实现的 Ri…

升级版网创教程wordpress插件自动采集并发布

主要功能&#xff1a; wordpress 插件主题系列支持自动采集并发布。 主要采集: 福缘&#xff0c;中创&#xff0c;冒泡 自动采集各大项目网进行整合发布到自己个人网站 插件话更新&#xff0c;减少网络请求&#xff0c;提升稳定性 代码完美开源 傻瓜式操作&#xff0c;一…

C++纯文字解谜游戏

1.前言 Hello,我是老六工作室,今天我们搞一个C++纯文字解谜游戏,后面有代码与解析。 感谢支持,点赞鼓励一下,谢谢! 2.代码时间 #include<iostream> #include<windows.h> #include<conio.h> int power=0,light=0; using namespace std; int main() …

C4.5算法【python,算法,机器学习】

优点 可以处理缺失值。特征只能使用一次。可以剪枝&#xff0c;可以避免过拟合问题。 缺点 不适合大数据集的训练&#xff0c;因为受内存大小影响。 计算流程 对于单个特征 A, 我们做如下假设&#xff1a; 有两个判断值yes和no, 概率分别为 p y p_y py​和 p n p_n pn​。…

【MySQL】MySQL的安装和基本概念

MySQL的安装和基本概念 一、环境安装1、环境及配置2、下载安装 二、基本概念1、主流数据库2、mysql和mysqld的区别和概念&#xff08;1&#xff09;概念1&#xff1a;了解CS结构&#xff08;2&#xff09;概念2&#xff1a;数据库指的是什么&#xff08;3&#xff09;概念3&…

记录:mac pro 16-inch,2019安装ubuntu双系统

需要的装备&#xff1a;u盘&#xff0c;扩展坞、有线键鼠、ext4硬盘 目的&#xff1a;编译aosp 11 1、首先是参照如下文章&#xff0c;分配空间&#xff0c;制作启动盘&#xff08;测试ubuntu20.04不行&#xff0c;ubuntu22.04正常&#xff09; https://blog.csdn.net/LBSGKD…

天堂W游戏内核驱动保护简单分析(五)

NP 双机调试分析 1. 调用了NtQuerySystemInformation(SystemKernelDebuggerInformation) 来检测os是否是调试模式的进程 PROCESS ffff920744e6c300 SessionId: 1 Cid: 1a34 Peb: bc82205000 ParentCid: 111c DirBase: 23c33c000 ObjectTable: ffffa9…

【Linux】:进程切换

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux进程切换的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精…

PMP考试做对多少题才算及格?

2024年6月PMP考试即将来临&#xff0c;考生除了要复习好考试内容&#xff0c;也要提前了解考试后的成绩查询问题。顺利通过PMP考试是所有参加PMP认证考试考生的目标&#xff0c;那么2024年6月PMP考试怎么才算通过呢&#xff1f; PMP考试改版后试卷总共180道单选题多选题(改版前…

【AI副业教程】日赚5000+涨粉3000,自媒体新玩法!

​StartAI是一款专为设计师打造的基于Photoshop的AI工具&#xff0c;它提供了一系列强大的AI功能如&#xff1a;文生图、生成相似图、线稿上色、无损放大、局部重绘、扩图、艺术融合、提示词、智能擦除、风格选择等。https://www.istarry.com.cn/?sfromHGtsRq 你们能想象吗&a…

【Android安全】AOSP版本对应编号| AOSP版本适配Pixel或Nexus型号 | 驱动脚本下载地址

AOSP版本对应编号 https://source.android.com/docs/setup/about/build-numbers?hlzh-cn#source-code-tags-and-builds 例如android-8.1.0_r1 对应的编号是OPM1.171019.011 可以适配Pixel 2 XL AOSP驱动脚本下载 编译AOSP时&#xff0c;需要Google的驱动&#xff0c;后面才…

【分享】3种方法取消PPT的“限制保护”

PPT如果设置了有密码的“只读方式”&#xff0c;每次打开PPT&#xff0c;都会出现对话框&#xff0c;提示需要输入密码才能修改文件&#xff0c;否则只能以“只读方式”打开。 以“只读方式”打开的PPT就会被限制&#xff0c;无法进行编辑修改等操作。那如果后续不需要“限制保…

SpringBoot+layuimini实现角色权限菜单增删改查(layui扩展组件 dtree)

角色菜单 相关组件方法效果图代码实现资源菜单树组件实现权限树方法js这里我先主要实现权限树的整体实现方法&#xff0c;如果是直接查看使用的话可以只看这里&#xff01; 后端代码Controlle层代码Service代码及实现类代码Service代码ServiceImpl代码 resourceMapper 代码role…

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…

新人学习笔记之(变量)

一、变量概述 1.什么是变量 &#xff08;1&#xff09;白话&#xff1a;变量就是一个装东西的盒子 &#xff08;2&#xff09;通俗&#xff1a;变量是用于存放数据的容器。我们通过变量获取数据&#xff0c;甚至数据可以修改 2.变量在内存中的储存 &#xff08;1&#xff09;本…

如何将手机中的音乐转移到 SD 卡上?轻松传输音乐

概括 如何将音乐从手机转移到 SD 卡&#xff1f;我们的智能手机可以充当个人点唱机&#xff0c;因此有效管理我们的音乐库变得至关重要。无论您是存储空间不足还是只是想整理您的音乐收藏&#xff0c;将音乐从手机传输到 SD 卡都是一个实用的解决方案。 在本指南中&#xff0…

目标检测YOLO实战应用案例100讲-【目标检测】机器视觉(五)

目录 算法原理 机器视觉硬件技术 一、镜头技术 二、摄像机技术 三、图像采集卡(Image Captu

二叉树的递归实现及例题

目录 遍历方式 示例 原理 前序遍历示例 二叉树的节点个数 原理 层序遍历 原理 这样做的目的是 判断完全二叉树 例题 ​编辑 思路 代码 遍历方式 二叉树的遍历方式可分为&#xff1a; 前序遍历&#xff1a;先访问根&#xff0c;访问左子树&#xff0c;在访问右子…