html5中的新增知识点

于 2024-05-05 07:17:58 发布
阅读量581 收藏 26
点赞数 25
分类专栏： 程序员 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093054/article/details/138458578
版权
本文详细介绍了HTML5新增的多媒体标签（video,audio,canvas）、主体结构和非主体结构标签的使用，以及一些表单元素的变化，包括audio和video的兼容性和交互，同时提到了Web前端开发的学习资源。
摘要由CSDN通过智能技术生成

复制代码

**4、**版权符

©

**5、**对html进行转义

<body>

三、H5新增标签

**1、**多媒体标签：video、audio、canvas

1.1 音频标签video

不同浏览器对于html5 audio标签和音频格式的兼容性（一般提供ogg和mp3格式，就可以支持所有主流浏览器了。）

<audio src=“1.mp3” controls=“controls”>

<audio controls=“controls” autoplay loop>

</audio>

编解码工具：FFmpeg（下载地址：www.ffmpeg.org）

mp4转ogg方法同上。

1.2 视频标签video

<video src=“1.mp3” controls=“controls” autoplay>

<video controls=“controls”>

</video>

音视频播放、暂停、停止方法：

复制代码

var audio = document.getElementById(‘music1’);

audio.play();//播放

audio.pause();//暂停

audio.pause();

audio.currentTime=0;//停止

复制代码

1.3 画布标签:Canvas （需要配合js来做效果，后续再总结）

**2、**主体结构标签

2.1 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

复制代码

<nav>

<ul>

<li>HTML 5</li>

<li>CSS3</li>

<li>JavaScript</li>

</ul>

</nav>

复制代码

2.2 article元素展示网页中独立的一块内容，譬如论坛的帖子、博客的文章、一篇用户评论。

复制代码

<article>

<h1>一篇文章</h1>

<p>文章内容…</p>

<footer>

<p><small>版权：html5jscss网所属，作者：小北</small></p>

</footer>

</article>

复制代码

复制代码

<article>

<header>

<h1>一篇文章</h1>

<p><time pubdate datetime=“2012-10-03”>2012/10/03</time></p>

</header>

<p>文章内容…</p>

<article>

<h2>评论</h2>

<article>

<header>

<h3>评论者: XXX</h3>

<p><time pubdate datetime=“2012-10-03T19:10-08:00”>~1 hour ago</time></p>

</header>

<p>哈哈哈</p>

</article>

<article>

<header>

<h3>评论者: XXX</h3>

<p><time pubdate datetime=“2012-10-03T19:10-08:00”>~1 hour ago</time></p>

</header>

<p>哈？哈？哈？</p>

</article>

</article>

</article>

复制代码

2.3 section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

复制代码

<article>

<h1>前端技术</h1>

<p>前端技术有那些</p>

<section>

<h2>CSS</h2>

<p>样式…</p>

</section>

<section>

<h2>JS</h2>

<p>脚本</p>

</section>

</article>

复制代码

2.4 aside 元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等、

复制代码

<article>

<p>内容</p>

<aside>

<h1>作者简介</h1>

<p>小北，前端一枚</p>

</aside>

</article>

复制代码

2.5 header元素展示一个区域的头部分

2.6 footer元素展示一个区域的尾部分

2.7 hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>

<h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>

<h2>HTML 5</h2>

</hgroup>

2.8 figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。figcaption 标签定义 figure 元素的标题（caption）。“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>

<figcaption>黄浦江上的的卢浦大桥</figcaption>

<img src=“shanghai_lupu_bridge.jpg” width=“350” height=“234” />

</figure>

**3、**非主体结构标签

3.1  标签定义选项列表。

复制代码

<input type=“text” list=“taglist” />

<datalist id=“taglist”>

<option>苹果</option>

<option>橘子</option>

<option>西红柿</option>

</datalist>

复制代码

3.2 details标签定义文档细节

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

3.3 menu标签定义列表

<menu>

<li>home</li>

<li>home</li>

<li>home</li>

</menu>

3.4 address地址标签

复制代码

<address>

Written by <a href=“mailto:webmaster@example.com”>Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

复制代码

3.5 progress进度条标签

下载进度：

<progress>

</progress>

3.6 mark高亮显示

<mark>中国</mark>人民最伟大

3.7 

<p>

我们在每天早上 <time>9:00</time> 开始营业。

</p>

3.8 新增的表单元素

复制代码

<input type=“email” />

<input type=“url” />

<input type=“tel” />

<input type=“number” min=“1” max=“20” step=“4” />

<input type=“range” min=“1” max=“20” step=“4” />

<input type=“search” />

<input type=“color” />

<input type=“date” />

<input type=“month” />

<input type=“week” />

<input type=“time” />

复制代码

3.9 新增的input属性

3.9.1 用户输入自动完成功能

复制代码

<input type=“text” list=“citylist” />

<datalist id=“citylist”>

<option>BeiJing</option>

<option>QingDao</option>

<option>QingZhou</option>

<option>QingHai</option>

</datalist>

</form>

复制代码

3.9.2 页面加载的时候获取焦点

<input type=“text” autofocus=“autofocus” />

3.9.3 form外也可以做数据提交

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

3.9.3 form外也可以做数据提交

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-FnPSOEKb-1714864667524)]

[外链图片转存中…(img-iciiFAvN-1714864667524)]

[外链图片转存中…(img-zTMTdfMm-1714864667524)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84093054
关注
  • 25
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5知识点总结
qq_53539929的博客
03-27 2297
1.什么是 HTML5 1.1 HTML版本  1.2 HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与 XHTML的新一代标准版本，所以叫HTML5。 XHTML 可扩展超文本标记语言 XHTML是一种增强了的HTML，它的可扩展性和灵活 性将适应未来网络应用更多的需求 。 HTML5 HTML5的设计目的是为了在移动设备上支持多媒体。 增加了新特性：语义特性，本地存储特性，设备兼容特 性，连接特性，网页多媒体特性，三
HTML 知识点总结
m0_57202083的博客
08-12 2423
HTML实例 <!DOCTYPE html> <!-- 注:<!DOCTYPE>标签没有结束标签! --> <html><!-- 元素是 HTML 页面的根元素 --> <head><!-- (头部部分) --> <meta charset="utf-8"> <title>显示在浏览器标题栏中的标题</title> </head> <body>&.
html5中value这一属性啥意思,HTML5表单新增元素与属性知识点总结
weixin_39761645的博客
06-07 2538
一.表单新增的属性1.form 2.formaction 3.formmethod 4.placeholder 5.autofocus 6.list 7.autocomplate1.form属性，方便对其设置样式，目前是有oPera 10支持这一属性2.formaction属性，可以使每一个标签元素都有一个提交的入口地址。3.formmethod属性，可以给每个标签设置不同的提交方式。...
前端HTML5常用基础知识总结
不想学习的打工人的博客
07-11 2154
HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架： 1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
weixin_39665992的博客
06-03 1846
我们所说的H5就是我们所说的HTML5中新增的语言标准一、音频标签在HTML5当中有一个叫做audio的标签，可以直接引入一段音频资源放到我们的网页当中格式：降级的文字说明(当音频文件不能本浏览器解析时显示此文字)........... audio>audio是一个双标签，用来定义一个声音资源autoplay:用来设置自动播放，有些浏览器不适用controls:调用当前音频的播放控制loop...
前端基础——html5新增标签
qq_41721660的博客
04-09 6177
新增表单标签 原始表单标签：input(text、password、radio、checkbox、button)、select、textarea、button、form。 h5增加了很多功能性的表单标签用于pc端和移动端的表单开发。 邮箱：input(type="email")，提交数据时提供了邮箱格式的验证（格式不一定完全正确，因此以后需要通过js来进行调整； 数字输入框：input(type="number")， 网址输入框：input(type="url")，验证输入内容是否为网址，需要完整网址，以
HTML5+CSS、CSS3基础知识点总结
热门推荐
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
html5基础知识，期末复习大全
zm321917的博客
06-02 6295
html，css，js超详细基础知识及响应式设计，动画等进阶
HTML5中Nav元素作用及应用场景知识点
BOM485480的博客
04-07 4421
HTML5中Nav元素作用及应用场景知识点，Nav元素一般用来做导航栏，链接到本页面的某个位置或者是其他页面。元素标签将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。 Nav元素是什么？ Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。 Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可
HTML5和CSS3强化知识总结
最新发布
guai_guai_guai的博客
02-04 3130
之前总结定位元素水平垂直居中时，top left均为50%，之后margin-top为-高度的一半，margin-left为-宽度的一半，即可实现，但这一旦改变盒子的宽高，也得改变marign值，故tranform：translate（-50%，-50%）很方便的避免了频繁改动数据的问题。利用阴影进行动画设置，先利用定位将阴影与圆点放置合适位置，用一个盒子将其包含，让阴影水平垂直居中放置在盒子中，此时圆点就会在阴影正中间，利用动画将阴影的宽高调大，之后每个阴影进行延迟即可。
html5新增知识点.pdf
10-05
以下是一些HTML5的关键新增知识点： 1. **新增标签**： - `Audio`和`Video`标签使得在网页中嵌入音频和视频内容变得简单，无需依赖Flash等外部插件。 - `Canvas`是用于绘制2D图形的画布，允许开发者通过...
html5的新增的标签和废除的标签简要概述
09-28
HTML5中在新增加和废除很多标签的同时，也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等，感兴趣的朋友可以了解下，希望本文的知识点对你有所帮助
HTML5的知识框架
11-05
HTML5的知识框架，帮助建立HTML5的知识网络，适用于入门级前端的学习，内容有新增标签，video和audio等等
HTML5期末考试题型.doc
11-30
它带来了许多新的特性和改进，以下是 HTML5 期末考试题型的知识点总结。 一、单项选择题 1. HTML5 中用来建立有序列表的标记是 `<ol>`。 2. 在 HTML5 中，用于组合标题元素的标记是 `<hgroup>`。 3. HTML5 中不再...
HTML5题库（选择题）
06-25
本资源摘要信息涵盖了 HTML5 相关的知识点，包括 HTML 基本结构、CSS 样式、HTML5 新特性等。下面是本资源摘要信息的详细解释： 1. HTML 基本结构 HTML 文档的基本结构至少包括 `<html>` 标签、`<head>` 标签、`...
HTML5学习笔记之History API
09-28
系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，
HTML5实现表单自动验证功能实例代码
12-14
在Html5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能，在执行代码后，将在表单提交时自动验证输入的内容是否为数字，如果验证通不过，将显示错误信息文字。 <!DOCTYPE html> <html ...
HTML5新增form控件和表单属性实例代码详解
12-13
第二个知识点：H5新增的表单控件和属性以及总结 第一个知识点： 我们常见的表单验证有哪些呢 　text　文本框标签 　password 密码框 　checkbox 多选框 　radio　单选框 　button　按钮 　submit　提交按钮 以上是...
html5网页前端设计课后习题答案.docx
07-26
本资源摘要信息中，我们将对 HTML5 网页前端设计课后习题答案进行详细的总结和分析，从中提取出相关的知识点，以便更好地理解和掌握 HTML5 的基础知识和应用。 一、Internet 和万维网的区别 Internet 是一个全球性...
html中Canvas知识点
05-20
Canvas 是 HTML5 新增的一个元素，它可以用来通过 JavaScript 在页面上绘制图形、动画等。以下是 Canvas 的一些知识点： 1. 创建 Canvas 元素 ```html <canvas id="myCanvas"></canvas> ``` 2. 获取 Canvas 元素 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值