web前端开发HTML5新增内容

一、新增的主要标签:

1、section标签:

section标签表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6元素结合使用,标示文档结构。相当于html4的div。

HTML5的<section>.......</section>相当于HTML4的<div>......</div>

2、 article标签: 

article标签表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。

HTML5的<article>...</article>相当于HTML4的<div>......</div>

3、 aside标签:

aside标签表示article元素的内容之外的、与article元素的内容相关的辅助信息。

HTML5的<aside>...</aside>相当于HTML4的<div>......</div>

4、 header标签:

header标签表示页面中一个内容区块或整个页面的标题。

HTML5的<header>...</header>相当于HTML4的<div>......</div>

5、 footer标签:

footer标签表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。

HTML5的<footer>...</footer>相当于HTML4的<div>......</div>

6、 nav标签:

nav标签表示页面中导航链接的部分。

HTML5的<nav>...</nav>相当于HTML4的<ul>......</ul>

(7) figure标签:

figure标签表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

//HTML 5中的代码示例:
<f igure><f igcaption>PRC</f igcaption><p>...</p>
</f igure>
//HTML 4中的代码示例:
<d1><h1>PRC</h1><p>...</p>
</d1>

8、main标签:

main标签表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

HTML5的<main>...</main>相当于HTML4的<div>......</div>

二、新增的次要标签:

1、 video标签:

video标签用于定义视频,比如电影片段或其他视频流。

//HTML5的
<video src="movie.ogg" controls="controls">...</video>
//相当于HTML4的
<object type="video/ogg" data="movie.ogv"<param name="src" value="movie.ogv"
</object>

2、 audio标签:

audio标签用于定义音频,比如音乐或其他音频流。

//HTML 5的
<audio src="someaudio.wav">...</audio>
//相当于HTML 4的
<object type="application/ogg" data="someaudio.wav">
<param name="src" value="someaudio. wav"></object>

3、 embed标签:

embed标签用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

//HTML 5的
<embed src="horse.wav" />
//相当于HTML 4的
<object data="flash.swf"type="application/x-shockwave-flash"></obiect>

4、mark标签:

mark标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5的<mark>...</mark>相当于HTML4的<span>......</span>

5、 progress标签:

progress标签表示运行中的进程,可以使用progress元素来显示JavaScript中耗费时间的函数的进程。

//这是HTML 5中的新增功能,故无法用HTML 4代码来实现
<progress>...</progress>

6、 meter标签:
meter标签表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围既可以在元素的文本中,也可以在min/max属性中定义。

//这是HTML 5中的新增功能,故无法用HTML 4代码来实现
<meter>...</meter>

7、 time标签:
time标签用于表示日期或时间,也可以同时表示两者HTML 5中的代码示例:

HTML5的<time>...</time>相当于HTML4的<span>......</span>

8、 canvas标签:
canvas标签表示图形,比如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。

//HTML 5中的代码示例:
<canvas id="myCanvas" width="200” height="200"></canvas>
//HTML 4中的代码示例:
<object data="inc/hdr.svg type="image/svg+xml" width="200" height="200"></object>

9、 details标签:
details标签表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details元素的第一个子元素。

//这是HTML 5中的新增功能
<details>
<summary>HTML5</summary>
...</details>

10、output标签:
output标签表示不同类型的输出,比如脚本的输出

HTML5的<output>...</output>相当于HTML4的<span>......</span>

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

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

相关文章

常用注解/代码解释(仅个人使用)

目录 第一章、代码①trim() 方法以及(Arrays.asList(str.split(reg)));②查询字典项 第二章、注解①PropertySource("classpath:coremail.properties") 第三章、小知识①Linux系统中使用$符号表示变量 友情提醒: 先看文章目录&#xff0c;大致了解文章知识点结构&am…

如何读取文件内容获取其中的关键字

通过ifstream去读取文件 void stringSplit(string str, char split,vector<string>& res) { istringstream streamString(str); string token; while (getline(streamString, token, split)) { //将token存入res res.push_back(token); } } int readfile(string fi…

探索C语言中的水仙花数及其计算方法

在计算机科学与数学的交叉领域中&#xff0c;有一种特殊的整数被称为“水仙花数”&#xff0c;它是指一个三位数&#xff0c;其各位数字立方和等于该数本身。例如&#xff0c;153是一个典型的水仙花数&#xff0c;因为1 5 3 1 125 27 153。 下面&#xff0c;我们通过一段…

Python——1.数据类型定义

>>> a1 >>> type(a) //type()查看变量数据类型 <class int> >>> b1 >>> type(b) <class str> >>> aTrue >>> type(a) <class bool> //对于单个字符的编码&#xff08;ASCII&#xff09;&#xff0c…

1.7数算PPT选择汇总,PTA选择汇总,计算后缀表达式,中缀转后缀、前缀、快速排序

PTA选择汇总 在第一个位置后插入&#xff0c;注意是在后面插入&#xff0c;而不是前面&#xff1b;要移动49&#xff0c;为50-I&#xff0c;第25个的话&#xff0c;移25个 如果是插在前面&#xff0c;就移动50&#xff0c;N-I1&#xff0c;注意是插在前面还是后面 删第一个&a…

虾皮上传产品软件:如何使用虾皮平台上传产品

在虾皮&#xff08;Shopee&#xff09;平台上&#xff0c;卖家可以通过多种方法来上传产品&#xff0c;以简化商品上架过程。本文将介绍一些常用的产品上传方法&#xff0c;帮助卖家选择最适合自己的方式。 先给大家推荐一款shopee知虾数据运营工具 知虾免费体验地址&#xff…

【Axure高保真原型】日期天数加减计算器

今天和大家分享日期天数加减计算器的原型模板&#xff0c;我们通过这个模板选择指定日期&#xff0c;然后填写需要增加或者减少的天数&#xff0c;点击确认按钮后&#xff0c;就可以计算出对应的结束日期&#xff0c;本案例提供中继器版的日期选择器&#xff0c;以及JS版的日期…

在docker中搭建部署clickhouse

因需要给网关日志拉取并存储供数据分析师分析&#xff0c;由于几十个项目的网关请求数量很大&#xff0c;放在mysql不合适&#xff0c;MongoDB不适合分析&#xff0c;于是准备存放在clickhouse&#xff0c;clickhouse对于读写支持也比较友好&#xff0c;说干就干 1、在服务器中…

LUT预设.cube格式PR/达芬奇/FCP/剪映等视频电影调色预设LUTs

对于将标准镜头转换为让人想起高端电影的视觉冲击场景至关重要。这些LUT经过专业设计&#xff0c;以模仿电影行业中的电影质量、深度和情感&#xff0c;使其成为电影制作人、摄像师和内容创作者的理想选择&#xff0c;希望为你的作品带来专业的电影色彩。 电影LUT的类别&#…

STL标准库与泛型编程(侯捷)笔记4

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…

【Electron】 Vite项目 初始配置 scss

pnpm add -D sasssrc下面创建 styles/main.scss 文件 mian.ts 内引入 ./styles.scss 文件 import ./styles/main.scss 测试scss是否生效&#xff1a; styles/mian.scss :root{--mian:red; } App.vue <template><div>你好</div> </template><s…

红队打靶练习:EVM: 1

目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 目录探测 1、gobuster 2、dirsearch WEB wpscan get username get password MSF get shell 提权 get root get flag 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interf…

基于zookeeper实现服务节点HA主备自动切换

文章目录 前言一、架构图和流程图二、流程说明1.服务启动初始化ZK、注册所有服务节点信息-MasterRegister2.创建、运行服务节点&#xff0c;并管理服务节点-LeaderSelectorZkClient。3.典型场景-调度服务单体执行-DigitalEmpTask 总结参考 前言 Spring Boot 主备切换可以采用数…

中央处理单元(CPU)学习笔记

一、引言 中央处理单元&#xff08;CPU&#xff09;是计算机的核心部件&#xff0c;负责执行程序指令和控制整个计算机系统的运行。本篇学习笔记将介绍CPU的功能和组成&#xff0c;帮助读者深入了解CPU的工作原理和重要性。 二、CPU的功能 程序控制&#xff1a;CPU通过执行指…

一文读懂「多模态大模型」

​ 学习资源 5-多模态大模型一统NLP和CV 1.多模态大模型的基本原理 2.常见的多模态大模型 https://www.bilibili.com/video/BV1NN41177Zp?p5&vd_sourcef27f081fc77389ca006fcebf41bede2d 3.多模态大模型如_哔哩哔哩_bilibili 强强联手&#xff01;科大讯飞和中科院终于把【…

模型 ECRS分析原则

系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。效能优化。 1 ECRS分析原则的应用 1.1 ECRS分析原则在企业管理中的应用-麦当劳的服务流程优化 取消&#xff08;Eliminate&#xff09;&#xff1a;麦当劳作为全球知名的快餐连锁企业&#…

一起来了解综合能源服务认证

首先&#xff0c;综合能源服务认证是有国家政策支持的&#xff0c; 《能源生产和消费革命战略&#xff08;2016-2030&#xff09;》中指出:1、能源生产端要以绿色低碳为方向&#xff0c;推动能源集中式和分布式开发并举&#xff0c;大幅提高新能源和可再生能源比重&#xff1b…

C# 进行图像处理的几种方法(Bitmap,BitmapData,IntPtr)

在C#中&#xff0c;进行图像处理时主要会使用到 System.Drawing 命名空间中的几个关键类&#xff0c;其中Bitmap、BitmapData和IntPtr是进行高效像素操作的重要工具。以下是如何利用这些类进行图像处理的方法概述&#xff1a; Bitmap 类: System.Drawing.Bitmap 是一个封装了位…

Redis黑马点评业务总结(含mac m1pro | windows11 wsl2 ubuntu环境配置 持续更新中~)

redis黑马点评项目分析业务学习笔记 含项目配置教学mac m1pro windows mac M1pro环境配置windows11 wsl2 ubuntu 环境配置一.短信登录1. 1发送验证码1.2短信登录注册1.3登录校验拦截器补缺Cookie Session Token1.4基于redistoken认证实现短信登陆1.5完善token认证的刷新机制 二…

STM32F103C8T6(HAL库函数 - 内部Flash操作)

简介 STM32F103C8T6 内部Flash 为 64KB&#xff0c;本次将对他多余空间进行读写。 介绍 数据手册下载 STM32F103x8/STM32F103xB 数据手册 包含Flash Memory Page分布 STM32F设备命名 设备容量类型 中容量类型 内部空间介绍 64 KBytes大小Flash Memory 从 0x0800 0000 ~…