HTML5的语义元素

  • HTML5语义元素:

HTML5提供新的语义元素来明确一个web页面的不同部分:<head>、<nav>、<section>、<article>、<aside>、<figcation>、<figure>、<footer>。

1)、<section>元素:

<section>标签定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。示例:

<section>

<h1>wsx</h1>

<p> hello world!</p>

</section>

2)、<article>元素:

<article>标签定义独立的内容。示例:

<article>

<h1>wsx</h1>

<p> hello world!</p>

</article>

3)、<nav>元素:

<nav>标签定义导航链接的部分。<nav>元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在<nav>元素中。示例:

<nav>

<a href= “/html/”>HTML</a> |

<a href= “/CSS/”>CSS</a>

<p> hello world!</p>

</nav>

4)、<aside>元素:

<aside>标签定义页面主区域内容之外的内容,比如侧边栏。<aside>标签的呢绒应与主区域的内容相关。示例:

<p>My family and I visited The Epcot center this summer.</p>

<aside>

 <h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

5)、<header>元素:

<header>元素描述了文档的头部区域。<header>主要用于定义内容的介绍展示区域。在页面中,可以使用多个<header>元素。示例:

<article>

<header>

<h1>wsx</h1>

<p> hello world!</p>

</header>

</article>

6)、<footer>元素:

<footer>元素描述了文档的底部区域。<footer>元素应该包含它的包含元素。一个页脚通常包含文档的作者、著作权信息、链接的使用条款、联系信息等。示例:

<footer>

<p>Posted by: Hege Refsnes</p>

<p><time pubdate datetime="2012-03-01"></time></p> </footer>

7)、<figure>元素和<figcaption>元素:

<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。<figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。<figcaption> 标签定义 <figure> 元素的标题<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。示例:

<figure>

<img decoding="async" loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>

</figure>

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

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

相关文章

【数智化人物展】觉非科技CEO李东旻:数据闭环,智能驾驶数智时代发展的新引擎...

李东旻 本文由觉非科技CEO李东旻投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 数智化的主要作用是帮助决策。它的核心是大数据&#xff0c;以大数据为基础&#xff0c;匹配合适的AI技术&#xff0c;促使数…

Java连接Redis并操作Redis中的常见数据类型

目录 一. Java连接Redis 1. 导入依赖 2. 建立连接 二. Java操作Redis的常见数据类型存储 1. Redis字符串(String) 2. Redis哈希(Hash) 3. Redis列表&#xff08;List&#xff09; 4. Redis集合&#xff08;Set&#xff09; 一. Java连接Redis 1. 导入依赖 pom依赖…

Java版本电子招标采购系统源码:—实现多寻源比价,风险预警

营造全面规范安全的电子招投标环境&#xff0c;促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标…

使用Scrapy的调试工具和日志系统定位并解决爬虫问题

目录 摘要 一、Scrapy简介 二、Scrapy的调试工具 1、Shell调试工具 2、断点调试 三、Scrapy的日志系统 四、实例解析 1、启用详细日志 2、断点调试 3、分析日志 4、解决问题 五、代码示例 总结 摘要 本文详细介绍了如何使用Scrapy的调试工具和日志系统来定位并解…

QML 仪表盘小示例

本次项目已发布在CSDN->GitCode,下载方便,安全,可在我主页进行下载即可,后面的项目和素材都会发布这个平台。 个人主页:https://gitcode.com/user/m0_45463480怎么下载:在项目中点击克隆,windows:zip linux:tar.gz tar # .pro TEMPLATE = appTARGET = dialcontrol​#…

Figma 怎么切图?新手入门教程详解

Figma 是一个基于浏览器的协作的UI设计工具&#xff0c;其以轻量、便捷、跨平台使用、协同便捷的特点&#xff0c;迅速吸引了广大UI/UX 设计师们的喜欢。但是设计师经常遇到反复切图、交付开发等问题&#xff0c;所以借此机会分享一篇关于 Figma 切图的必要知识点和交付经验。 …

【广州华锐互动】VR综合布线虚拟实验教学系统

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活和工作带来了前所未有的便利。在建筑行业中&#xff0c;VR技术的应用也日益广泛&#xff0c;尤其是在综合布线方面。 广州华锐互动开发的VR综合布线虚拟实…

数据资产与自助BI的一体化实践

01 数据资产中的数据治理 随着数据资源被提高到数据资产的高度&#xff0c;数据治理成为确保有效管理和利用数据资产的一组流程和技术&#xff0c;而数据资产目录是包含企业数据资产的全息描述信息的存储库&#xff0c;并充当有效管理数据资产的&#xff08;逻辑上的&#xff…

LeetCode | 206. 反转链表

LeetCode | 206. 反转链表 OJ链接 这里有两个思路 我们先来看第一个思路&#xff1a; 创建一个新的链表&#xff0c;然后将原链表头插头插需要保存下一个的地址&#xff0c;再头插 代码如下&#xff1a; struct ListNode* reverseList(struct ListNode* head) {struct ListN…

Java自学第2课:Java语言基础知识要点

1 Java主类结构 任务&#xff1a;创建新项目名为item&#xff0c;包名为number&#xff0c;类名为first。 1.1 包声明 不指定包时&#xff0c;默认就是工程名&#xff0c;指定后&#xff0c;类文件可以分类了&#xff0c;是这意思吧。包就大概等于一个文件夹。而且在类文件中…

多人游戏小程序源码系统 带完整的搭建教程

现如今&#xff0c;人们对于娱乐和社交的需求也在不断提高。多人游戏作为一种能够满足人们社交需求的游戏类型&#xff0c;越来越受到用户的欢迎。同时&#xff0c;小程序作为一种轻量级的应用程序&#xff0c;在微信等平台上得到了广泛的应用和推广。因此&#xff0c;开发多人…

电商API接口文档|1688API接口的接入获取获得1688商品详情it按关键字搜索商品 按图搜索1688商品(拍立淘)

API接口文档 前面讲到的关于接口的请求方式、类型、原理、安全机制等&#xff0c;产品经理能够简单了解一些就可以满足日常工作中的需要。接口文档是产品经理日常工作中经常会使用到的&#xff0c;特别是做开放平台或B端的产品经理&#xff0c;需要经常的看和写接口文档。 那如…

【rust/esp32】初识slint ui框架并在st7789 lcd上显示

文章目录 说在前面关于slint关于no-std关于dma准备工作相关依赖代码结果参考 说在前面 esp32版本&#xff1a;s3运行环境&#xff1a;no-std开发环境&#xff1a;wsl2LCD模块&#xff1a;ST7789V2 240*280 LCDSlint版本&#xff1a;master分支github地址&#xff1a;这里 关于s…

计算机视觉基础——基于yolov5-face算法的车牌检测

文章目录 车牌检测算法检测实现1.环境布置2.数据处理2.1 CCPD数据集介绍2.1.1 ccpd2019及20202.1.2 文件名字解析 2.2数据集处理2.2.1 CCPD数据处理2.2.2 CRPD数据集处理 2.3 检测算法2.3.1 数据配置car_plate.yaml2.3.2 模型配置2.3.3 train.py2.3.4 训练结果 2.4 部署2.4.1 p…

【计算机组成与设计】Chisel取指和指令译码设计

本次试验分为三个部分&#xff1a; 目录 设计译码电路 设计寄存器文件 实现一个32个字的指令存储器 设计译码电路 输入位32bit的一个机器字&#xff0c;按照课本MIPS 指令格式&#xff0c;完成add、sub、lw、sw指令译码&#xff0c;其他指令一律译码成nop指令。输入信号名…

基于Matlab的yolo算法行人检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 # 基于Matlab编写的Yolo算法行人检测系统介绍 基于Matlab编写的Yolo算法行人检测系统是一种用于自动检测图像或视频…

了解web3,什么是web3

Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;将各种在线活动更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;它包括了很多方面&#xff0c;如数字货币、去中心化应用、智能合约等等。听不懂且大多数人听到这个东西&#xff0c;直觉感觉就像骗子…

HR如何应用人才测评系统来开展招聘?

企业招聘&#xff1a;名额少&#xff0c;应聘者多&#xff0c;这是必然现象&#xff01;如果提高招聘效率&#xff0c;成为企业最为关心的问题。 问题可能有 1、简历多筛选难 每次收到一堆的简历&#xff0c;如何从中筛选出有效的人才&#xff0c;是一件头疼的事&#xff0c…

【Orangepi Zero2 全志H616】驱动舵机控制 / Linux定时器(signal、setitimer)

一、SG90舵机开发 舵机基本介绍 二、Linux定时器 signal 函数setitimer 函数原型signal、setitimer函数API调用 三、舵机 软件PWM实现 一、SG90舵机开发 舵机基本介绍 如下图所示&#xff0c;最便宜的舵机sg90&#xff0c;常用三根或者四根接线&#xff0c;黄色为PWM信号控…

requests库编写的爬虫程序没有那么难!

下文是用requests库编写的爬虫程序&#xff0c;用于爬取toutiao上的图片。程序使用了代理服务器&#xff0c;代理服务器的地址为duoip&#xff0c;端口号为8000。 import requests from bs4 import BeautifulSoup# 设置代理服务器 proxy_host duoip proxy_port 8000 proxy {…