Html提高——HTML5 新增的语义化标签

news2025/3/16 18:07:29

引入:

以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的。

但是在html5里增加了语义化标签,如

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

板图:

5227c8a9231a46b8a5de59ceef710039.png

例子:

a2bbee6350874c2ca0c262c089767c9e.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 800px;
            margin: 0 auto;
            position: relative;
        }

        aside {
            margin-left: 10px;
            width: 190px;
            height: 650px;
            border-radius: 15px;
            background-color: pink;
            float: left;
        }

        header {
            width: 800px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            border-radius: 15px;
            background-color: skyblue;

            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }

        nav {
            width: 800px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            border-radius: 15px;
            background-color: skyblue;

            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }

        article {
            width: 600px;
            height: 650px;
            border-radius: 15px;
            margin-bottom: 10px;
            background-color: skyblue;
            float: left;
        }

        .bkm {
            padding: 20px;
        }

        section {
            width: 400px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            margin-top: 10px;
            border-radius: 15px;
        }

        section img {
            margin: 10px;
            width: 380px;
            height: 280px;
        }

        footer {
            width: 800px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            border-radius: 15px;
            background-color: skyblue;
            clear: left;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <header>header</header>
        <nav>navigation</nav>
        <article>
            <div class="bkm">精灵宝可梦,也被称为宝可梦,是由日本任天堂公司开发的一款非常受欢迎的系列游戏,同时也有相关的动画、漫画、卡牌等多种形式的衍生作品。<br>
                在游戏中,玩家扮演一名宝可梦训练师,通过捕捉、培养和训练各种宝可梦,与其他训练师进行对战,目标是成为最强的宝可梦训练师。宝可梦种类繁多,每种宝可梦都有其独特的属性和技能,玩家需要根据自己的战略选择合适的宝可梦进行战斗。<br>
                电视动画系列《宝可梦》则是以游戏为原作改编的,讲述了少年小智以成为最厉害的宝可梦训练大师为目标,与皮卡丘等宝可梦一起踏上修行之旅的故事。动画中充满了冒险、友情和成长的主题,深受全球观众的喜爱。<br>
                此外,宝可梦系列还有丰富的周边商品和线下活动,形成了一个庞大的文化现象。无论是游戏玩家还是动画观众,都可以在这个世界中找到属于自己的乐趣和挑战。<br>
                总的来说,精灵宝可梦是一个充满想象力和创造力的世界,它不仅仅是一个游戏或者一个动画,更是一种文化、一种生活方式,带给人们无尽的欢乐和感动。<br></div>
            <section>
                <img src="https://p1.ssl.qhimgs1.com/sdr/400__/t01093c83c1a95b7d8b.png" alt="">
            </section>

        </article>
        <aside>
            a
        </aside>
        <footer>footer</footer>
    </div>
</body>

</html>

 

注意事项:

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签
  • HTML5 还增加了很多其他标签,我们后面再慢慢学

 

 

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

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

相关文章

ASP.NET Mvc+FFmpeg+Video实现视频转码

目录 首先&#xff0c;做了视频上传的页面&#xff1a; FFmpeg&#xff1a;视频转码 FFmpegHelper工作类&#xff1a; 后台控制器代码&#xff1a; 前端视图代码&#xff1a; 参考文章&#xff1a; 首先&#xff0c;做了视频上传的页面&#xff1a; 借鉴了这篇文章 ASP.…

Qt学习--this指针的使用

在 C 中&#xff0c;this 指针是一个特殊的指针&#xff0c;它指向当前对象的实例。 在 C 中&#xff0c;每一个对象都能通过 this 指针来访问自己的地址。 this是一个隐藏的指针&#xff0c;可以在类的成员函数中使用&#xff0c;它可以用来指向调用对象。 当一个对象的成员…

【算法杂货铺】二分算法

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 朴素二分查找 &#x1f4c2; 朴素二分模板 &#x1f4c1; 查找区间端点处 细节&#xff08;重要&#xff09; &#x1f4c2; 区间左端点处模板 &#x1f4c2; 区间右端点处模板 &#x1f4c1; 习题 1. 35. 搜索插入位…

实验01 ASP.NET网站的建立及运行

【实验目的】 &#xff08;1&#xff09;能熟悉ASP.NET的开发环境Visual Studio Community 2019&#xff08;VSC 2019&#xff09;。 &#xff08;2&#xff09;能通过解决方案管理网站&#xff0c;会在解决方案中创建网站。 &#xff08;3&#xff09;会设置IIS 10中的网站…

德迅蜂巢(容器安全)全面出击

随着云计算的发展&#xff0c;以容器和微服务为代表的云原生技术&#xff0c;受到了人们的广泛关注&#xff0c;德迅云安全德迅蜂巢&#xff08;容器安全&#xff09;是企业容器运行时和容器编排的首要选择。然而&#xff0c;在应用容器过程中&#xff0c;大多数企业都遇到过不…

VS2022 配置QT5.9.9

QT安装 下载地址&#xff1a;https://download.qt.io/archive/qt/ 下载安装后进行配置 无法运行 rc.exe 下载VS2022 官网下载 配置 1.扩展-管理扩展-下载Qt Visual Studio Tools 安装 2.安装完成后&#xff0c;打开vs2022,点击扩展&#xff0c;会发现多出了QT VS Tools,点…

应用层_HTTPHTTPS

在应用层中&#xff0c;协议一般是程序员定制的&#xff0c;但现在已经有了许多非常好用的协议&#xff0c;我们可以直接参考使用。其中http和https便是其中最常用的协议之一。 一.HTTP 超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff0c;HTTP&#xff09;…

Unreal发布Android App如何面对混乱的Android SDK开发环境

Unreal发布Android App如何面对混乱的Android SDK开发环境 混乱的Android SDK开发环境Unreal 4可以借用Unity3D安装的Android环境Unreal 5需要安装Android Studio开发环境Android Studio的DK版本目录处理gradle和java版本gradle提示错误总结 混乱的Android SDK开发环境 Unreal…

ubuntu安装zsh及环境配置

ubuntu安装zsh及环境配置 MacBook 安装 zsh 个人很喜欢使用zsh,它的终端显示很清晰,命令都很友好,使用git时,直接可以看到当前分支和修改状态 zsh安装 1.查看当前系统装了哪些shellcat /etc/shells 2.当前正在运行的是哪个版本的shellecho $SHELL 3.安装zshsudo apt-get -y …

深入理解TCP:序列号、确认号和自动ACK的艺术

深入理解TCP&#xff1a;序列号、确认号和自动ACK的艺术 在计算机网络的世界里&#xff0c;TCP&#xff08;传输控制协议&#xff09;扮演着至关重要的角色。它确保了数据在不可靠的网络环境中可靠地、按顺序地传输。TCP的设计充满智慧&#xff0c;其中序列号&#xff08;Seq&a…

html和winform webBrowser控件交互并播放视频(包含转码)

1、 为了使网页能够与winform交互 将com的可访问性设置为真 [System.Security.Permissions.PermissionSet(System.Security.Permissions.SecurityAction.Demand, Name "FullTrust")][System.Runtime.InteropServices.ComVisibleAttribute(true)] 2、在webBrow…

MS08-067 漏洞利用与安全加固

文章目录 环境说明1 MS08_067 简介2 MS08_067 复现过程3 MS08_067 安全加固 环境说明 渗透机操作系统&#xff1a;2024.1漏洞复现操作系统: Windows XP Professional with Service Pack 2- VL (English)安全加固复现操作系统&#xff1a;Windows XP Professional with Service …

一文让您读懂实时数仓(Apache Doris)

引言&#xff1a; 随着大数据时代的来临&#xff0c;实时数据处理与分析成为企业核心竞争力的关键因素之一。在这场数据革命中&#xff0c;SelectDB成为引领者。从百度自研的实时数仓平台 Palo&#xff0c;到开源项目 Apache Doris&#xff0c;再到飞轮科技研发的 SelectDB&am…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:ListItem)

用来展示列表具体item&#xff0c;必须配合List来使用。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。该组件的父组件只能是List或者ListItemGroup。 子组件 可以包含单个子组件。 接口 从API…

19113133262(微信同号)【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024)

【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024) 大会主题: (主题包括但不限于, 更多主题请咨询会务组苏老师) 区块链&#xff1a; 区块链技术和系统 分布式一致性算法和协议 块链性能 信息储存系统 区块链可扩展性 区块…

[云原生] Prometheus之部署 Alertmanager 发送告警

一、Alertmanager 发送告警的介绍 Prometheus 对指标的收集、存储与告警能力分属于 Prometheus Server 和 AlertManager 两个独立的组件&#xff0c;前者仅负责定义告警规则生成告警通知&#xff0c; 具体的告警操作则由后者完成。 Alertmanager 负责处理由 Prometheus Serve…

SQLiteC/C++接口详细介绍之sqlite3类(九)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;八&#xff09; 下一篇&#xff1a;​​SQLiteC/C接口详细介绍之sqlite3类&#xff08;十&#xff09;&#xff08;未发表&#xff09;​​​​ 27…

机器学习概念(一)

机器学习 是一门使计算机在没有明确编程的情况下具备学习能力的研究领域。 监督学习&#xff08;Supervised learning&#xff09; 监督学习算法 通过学习输入&#xff08;x&#xff09;到输出&#xff08;y&#xff09;的映射关系。在监督学习中&#xff0c;你需要为算法提…

AI日报:欧盟人工智能法案通过后行业面临合规障碍

文章目录 人工智能新规对web爬网的影响对英国的影响。 人工智能新规 立法者已经通过了欧盟人工智能法案。企业现在必须确保其人工智能应用程序符合规则。 全面的新规定对可能影响公民权利的人工智能系统实施制裁&#xff0c;并有可能彻底禁止某些系统。 违反规定的公司可能面…

stable diffusion上安装数字人sadtalker插件

数字人无论是在营销还是品牌推广的作用都非常重要&#xff0c;很多企业和个人都正在使用数字为自己创作财富&#xff0c;市面上的数字人生成网站包括某讯智影、D-ID或者是Heygen收费都比较昂贵。 那么如何才能拥有一个免费的数字人生成工具呢&#xff1f;其实很简单你只需要在…