2_31_HTML5及其新增的标签、表单类型、网页多媒体_191008

最新推荐文章于 2023-03-21 15:08:21 发布
最新推荐文章于 2023-03-21 15:08:21 发布
阅读量291 收藏
点赞数
文章标签： HTML5的新增内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XY061120/article/details/102666361
版权

小知识：

Webstorm的使用

  1. WebStorm 11.0.3.zip 解压

  2. 在bin目录下有 webstorm.exe 和 webstorm64.exe 两个运行文件，选取一个点击运行， 然后百度查找 webstorm 的激活码激活。

  3. 安装好后，统一规定在除C盘以外的盘下面，创建一个 web_file 文件夹专门用于 hmtl 相关文件的存放。

  4. file — setting — Editor — Colors & Fonts — Font — 点击 save as — 改变 size 即可。

API (application program interface)：程序应用接口（不需要关心应用程序的内部实现，只需要知道接口名，调用即可。

HTML5
HTML5 并不仅仅只是做为 HTML 标记语言的一个最新版本，更重要的是它制定了 Web 应用开发的一系列标准，成为第一个将 Web 做为应用开发平台的 HTML 语言。

HTML5定 义了一系列新元素（新标签），如新语义标签、智能表单、多媒体标签 等，可以帮助开发者创建富互联网应用，还提供了一些 Javascript API，如 地理定位、重力感应、硬件访问 等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。

HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持。它包括：HTML5新标签、CSS3、Javascript API在内的一套技术组合。

HTML5 不等于 HTML next version。
HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API 的升级版。

总结：
HTML5 是 Web 应用开发的一系列标准。包括：HTML5，CSS3，Javascript API 在内的一套技术组合。

一、应用场景

列举几个HTML5 的应用场景：
（1）极具表现力的网页：内容简约而不简单（代码实现）。
（2）网页应用程序：
• 代替PC端的软件：iCloud、百度脑图、Office 365等。
• APP端的网页：淘宝、京东、美团等。（通过网页实现的web应用程序）
• 微信端：公众号、小程序等。
（3）混合式本地应用。
（4）简单的游戏。（html5 代替了flash做动画)

二、新增内容
在这里插入图片描述
注：HTML 的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由 CSS 来决定。

1、语义标签

•	<section> 表示区块
•	<article> 表示文章。如文章、评论、帖子、博客
•	<header> 表示页眉
•	<footer> 表示页脚
•	<nav> 表示导航
•	<aside> 表示侧边栏。如文章的侧栏
•	<figure> 表示媒介内容分组。
•	<mark> 表示标记 (用得少)
•	<progress> 表示进度 (用得少)
•	<time> 表示日期

本质上新语义标签与< div>、< span>没有区别，只是其具有表意性，使用时除了在 HTML 结构上需要注意外，其它和普通标签的使用无任何差别。

可以理解成<div class="nav"> 相当于<nav>。

注：单标签不用写关闭符号。

2、智能表单类型
• email 只能输入email格式。自动带有验证功能。
• tel 手机号码。
• url 只能输入url格式。
• number 只能输入数字。
• search 搜索框
• range 滑动条
• color 拾色器
• time 时间
• date 日期
• datetime 时间日期
• month 月份
• week 星期

注：上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单类型</title>
    <style=>
</head>
<body>
<form action="">
    <fieldset style="width:100px">
        <legend>表单类型</legend>
        <label for="email">
            email:<input type="email" name="email" id="email" required>
        </label><br>

        <label for="">
            color:<input type="color" name="color" >
        </label><br>

        <label for="">
            url:<input type="url" name="url">
        </label><br>

        <label for="">
            number:<input type="number" name="number">
        </label><br>

        <label for="">
            range:<input type="range" name="range">
        </label><br>

        <label for="">
            search:<input type="search" name="search">
        </label><br>

        <label for="">
            tel:<input type="tel" name="tel">
        </label><br>

        <label for="">
            time:<input type="time" name="time">
        </label><br>

        <label for="">
            date:<input type="date" name="date">
        </label><br>

        <label for="">
            week:<input type="week" name="week">
        </label><br>

        <label for="">
            month:<input type="month" name="month">
        </label><br>

        <label for="">
            <input type="submit" value="提交" name="submit">
        </label>
    </fieldset>
</form>



</body>
</html>

效果：
在这里插入图片描述

代码解释：
① < fieldset> 标签
将表单里的内容进行打包，代表一组；而< legend> 标签则是 fieldset 里的元素定义标题。
②< label>标签
< label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。

3、网页多媒体
在 HTML5 之前，在网页上播放音频/视频的通用方法是利用 Flash 来播放。但是大多情况下，并非所有用户的浏览器都安装了 Flash 插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持 Flash插 件。
H5里面提供了视频和音频的标签。

（1）音频
HTML5 通过 < audio> 标签来解决 音频 播放的问题。

实例：
<audio src="music/yinyue.mp3" autoplay controls> </audio>

效果如下：
在这里插入图片描述

• autoplay ：自动播放。写成 autoplay 或者 autoplay = “”，都可以。
• controls ：控制条。（建议把这个选项写上，不然都看不到控件在哪里）
• loop ：循环播放。
• preload： 预加载 同时设置 autoplay 时，此属性将失效。
• width：设置播放窗口宽度。
• height：设置播放窗口的高度。

处理兼容性问题：

不同的浏览器可支持播放的格式是不一样的
在这里插入图片描述

为了做到多浏览器支持，可以采取以下兼容性写法：

<!--推荐的兼容写法：-->
<audio controls loop>
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
	抱歉，你的浏览器暂不支持此音频格式
</audio>

代码解释：如果识别不出音频格式，就弹出那句“抱歉”。

（2）视频
HTML5 通过< video>标签来解决视频播放的问题。

实例：
<video src="video/movie.mp4" controls autoplay></video>

不同的浏览器可支持播放的格式是不一样的：
在这里插入图片描述

兼容性写法：
<!--<video src="video/movie.mp4" controls  autoplay ></video>-->
<video controls autoplay>
    <source src="video/movie.mp4"/>
    <source src="video/movie.ogg"/>
    <source src="video/movie.webm"/>
    抱歉，不支持此视频
</video>

代码解释：如果识别不出 视频 格式，就弹出那句 “抱歉”。

综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>表单类型</title>
</head>
<body>
<form action="">
    <fieldset style="width:30%" max-width="200px">
        <!-- style="width:30%" 可以添加到 <form>标签里面，也可以添加到<fieldset>标签里面-->
        <legend>表单类型</legend>
        <br>  <!--for 里面的属性必须与 input 标签里 id 的属性一致-->
        <label for="email">email:</label>
        <br>
            <input id="email" type="email" name="email" style="width:100%">
        <br>
        <br>
        <label for="">color:</label>
        <br>
            <input type="color" name="color" style="width:100%">
        <br>
        <br>
        <label for="">url:</label>
        <br>
            <input type="url" name='url' style="width:100%">
        <br>
        <br>
        <label for="">number:</label>
        <br>
             <input type="number" step="3" name="number" style="width:100%">
        <br>
        <br>
        <label for="">range:</label>
        <br>
             <input type="range" name="range" value="100" style="width:100%">
        <br>
        <br>
        <label for=""> search:</label>
        <br>
            <input type="search" name="search" style="width:100%">
        <br>
        <br>
        <label for="">tel:</label>
        <br>
             <input type="tel" name="tel" style="width:100%">
        <br>
        <br>
        <label for="">time:</label>
        <br>
             <input type="time" name="time" style="width:100%">
        <br>
        <br>
        <label for=""> date:</label>
        <br>
            <input type="date" name="date" style="width:100%">
        <br>
        <br>
        <label for="">datetime:</label>
        <br>
             <input type="datetime" style="width:100%">
        <br>
        <br>
        <label for=""> week:</label>
        <br>
            <input type="week" name="month" style="width:100%">
        <br>
        <br>
        <label for="">month:</label>
        <br>
             <input type="month" name="month" style="width:100%">
        <br>
        <br>
        <label for="">datetime-local:</label>
        <br>
             <input type="datetime-local" name="datetime-local" style="width:100%">
        <br>
        <br>
        <input type="submit">
        <br>
        <br>

        <audio src="../宝石Gem - 野狼disco.mp3" controls autoplay loop ></audio>
        <br>
        <video src="../15ec0bf60857295d72b08f92b77d7e15.mp4" controls autoplay loop style="width:100%"></video>

    </fieldset>
</form>
</body>
</body>
</html>

效果如下：
在这里插入图片描述
注意：此图拼接而成，本该一起显示。

梦想_倩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5新增标签
weixin_30609331的博客
07-03 121
标签 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。 支持HTML5的全局属性和事件属性。 <aside> 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。 支持HTML5的全局属性和事件属性。 <audio...
HTML5中新增标签及简介
纸上得来终觉浅，绝知此事要躬行
12-04 612
在笔试或者面试中常常会遇到html5新标准的问题，如新增了哪些新标签，API，或者干脆问新增了哪些新特性，下面是总结的html5新增标签。 html5中新增标签: article> 标记定义一篇文章 aside> 标记定义页面内容部分的侧边栏 audio> 标记定义音频内容 canvas> 标记定义图片 command> 标记定义一个命令按钮 datalist> 标记定义一个下拉列表
web前端入门——HTML表格元素属性（附多种类型的表格）
L3gacy
03-30 2520
表格元素 表格基础 table: 表格标签 tr: 行 td: 单元格 border="设置边框" bordercolor="边框颜色" cellspacing="单元格边框与边框之间的距离" cellpadding="单元格与内容之间的距离" 注意: 给table添加 width="宽度" height="高度" ...
HTML5新增标签
jiuyue_77的博客
09-09 733
html5新增标签
HTML5新增的语义标签
n9_333的博客
02-25 446
用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）- 典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。- MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- 作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。HTML5新增了页眉、页脚、内容块等文档结构相关的标签，可以使文档结构更加清晰明确。
【前端系列教程之HTML5】06_HTML5新标签
波哩个波的博客
11-19 1787
一、HTML5新布局标签 许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部. 首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现。 HTML5除了提出很炫的新效果以外还加强了语义化结构 HTML5新增的...
H5新增标签及其属性
qq_52731478的博客
03-21 187
当使用者带有动态键盘的移动设备访问带有type="tel"的表单时，大多数设备会显示数字键盘，这意味着只要数字键盘有用，这种类型就很有用，而不只是用于电话号码。由于世界各地电话号码格式多种多样，这种类型的字段对用户输入的值没有任何限制（这意味着它可能包括字母等非数字值）需要注意的是在使用type=tel时，创建的是一个专门输入电话号码的文本域（即type=text）当video标签视频内容宽度没有铺满video标签时，可以在css写上。
HTML5新增标签 表单 属性 事件
蒲公英芽的博客
03-02 630
HTML5简介 HTML5是HTML最新的修订版本，2014年10月由W3C（万维网联盟）完成标准制定。 HTML5是W3C与WHATWG（指Web Hypertext Application Technology Working Group）合作的结果。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML，也就是现在...
html 5新增技术,HTML5新增标签
weixin_31090403的博客
06-04 97
多媒体audio ——定义声音，比如音乐或其他音频流。src属性定义文件位置。video ——定义视频，比如电影片段或其他视频流。controls和 src属性。canvas ——定义图形，比如图表和其他图像。source—— 为媒介元素(比如 和 )定义媒介资源。embed —— 定义嵌入的内容，比如插件。必须有 src 属性。无法在开始标签和结束标签之间写文本。结构article ——定义外...
2024年中国汽车行业AI大模型
08-12
一、大模型概述 二、中国大模型发展挑战 三、大模型测评 测评平台：方法论、评估维度 IDC 测试：基础能力、应用能力 通用大模型：Qwen-Max-0428 等 四、2024 年大模型发展趋势 技术方向：模型整合、参数规模扩展、多模态融合、小型化 产业方向：国产 AI 芯片、数据产权标准、套壳微调、人工智能伦理 五、大模型知识密度 知识密度提升：MMLU 榜单表现 小参数模型：MiniCPM-Llama3-V 2.5 六、大模型产业应用案例 百度文心一言：发展历程、技术架构、应用场景 华为盘古大模型：CloudMatrix 架构、ModelArts AI 开发生产线 科大讯飞星火大模型：语音交互、智能座舱、机器人超脑 商汤日日新大模型：SenseChat V5、SenseNova 5.0、车载端侧部署 腾讯混元大模型：研发历程、技术优势、行业应用 特斯拉 FSD：端到端自动驾驶、数据驱动 小鹏汽车 XGPT：自动驾驶大模型、AI 天玑系统 毫末智行 DriveGPT：雪湖·海若、多模态感知、语义感知 思必驰 DFM-2：统一生成式对话基础模型、DUI 2.0 面壁智能 MiniCPM
ISTQB(专家级-改进测试过程-实施测试过程改进)考试大纲_模拟题&答案.zip
08-12
ISTQB(专家级-改进测试过程-实施测试过程改进)考试大纲_模拟题&答案
Swift Swift简单例子,需要配置相关环境才能正常运行
08-12
Swift Swift简单例子,需要配置相关环境才能正常运行 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
Huawei CE12800-V200R023SPH150
08-12
Huawei CE12800_V200R023SPH150，里面包含补丁说明书和补丁安装指导书，该补丁支持哪些型号，支持哪些版本可以安装当前补丁，请参考补丁说明书和补丁安装指导书。
基于Springboot和Vue的图书馆管理系统源码 图书馆管理系统代码（98分期末优秀大作业）
08-12
图书馆管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C++教学资料，入门+提高+核心
08-12
C++是一种高效、功能丰富的编程语言，它继承了C语言的高效性和灵活性，同时引入了面向对象编程的概念，如类和对象、继承、多态和封装。这些特性使得C++在软件设计中能够提供更好的代码复用性和模块化。 C++的设计哲学强调性能和对资源的精细控制，这使得它在需要高性能计算的场合，如游戏开发、实时系统、嵌入式系统等领域非常受欢迎。C++也支持异常处理，允许程序在遇到错误时优雅地恢复或终止。 随着C++标准的不断更新，语言本身也在不断进化，引入了新的功能和特性，如智能指针、Lambda表达式、并发编程支持等，以适应现代软件开发的需求。 C++广泛应用于各种类型的软件开发中，包括桌面和移动应用、服务器和网络软件、高性能计算、科学计算以及各种需要精细控制硬件资源的场合。由于C++与C语言的兼容性，许多C语言编写的库和工具可以无缝集成到C++程序中。 然而，C++的复杂性和对性能的强调也意味着它需要程序员具备较高的技能水平，以避免常见的陷阱和错误。尽管如此，C++依然是一门强大且广泛使用的语言，适合那些追求高性能和精细控制的开发者。
【精品毕设推荐】-基于SSM+jsp的蜀都天香酒楼网站设计与实现.zip
最新发布
08-12
【项目简介】 可辅助在本地配置运行 近年来，信息化管理行业的不断兴起，使得人们的日常生活越来越离不开计算机和互联网技术。 首先，根据收集到的用户需求分析，对设计系统有一个初步的认识与了解，确定蜀都天香酒楼管理系统的总体功能模块。 然后，详细设计系统的主要功能模块，通过数据库设计过程将相关的数据信息存储到数据库中，再通过使用关键的开发工具，如MyEclipse开发平台、JSP技术等，编码设计相关的功能模块。 接着，主要采用功能测试的方式对系统进行测试，找出系统在运行过程中存在的问题，以及解决问题的方法，不断地改进和完善系统的设计。 最后，总结本文介绍的系统的设计和实现过程，并且针对于系统的开发提出未来的展望工作。 本系统的研发具有重大的意义，在安全性方面，用户使用浏览器访问网站时，采用注册和密码等相关的保护措施，提高系统的可靠性，维护用户的个人信息和财产的安全。在方便性方面，促进了酒楼管理行业的信息化建设，极大的方便了相关的工作人员对酒楼信息进行管理。 关键词：酒楼管理；Java语言；B/S模式；JSP技术；系统测试
有五辆车为不同的仓库进行货物配送，五辆车的出发点位于指定出发点，为指定数量的仓库配送货物，每个仓库的货物需求明确，每辆车的最大货
08-12
一、现有五辆车为不同的仓库进行货物配送，五辆车的出发点位于指定出发点，为指定数量的仓库配送货物，每个仓库的货物需求明确，每辆车的最大货物载重也明确，如果车辆完成配送后返回出发点；如果车辆的货物不够则返回至出发点再取货； 二、以遗传算法作为优化算法，求解五辆车的最优配送路线，这里以车辆经过的最短路径作为优化目标； 三、种群中的每个个体包括五辆车走过的路径，以这五辆车走过的距离作为适应度； 在代码中对于关键步骤标出了序号，例如（1）、（2）.....等字样标出。对于有兴趣的同学以及有相应定制化开发需求的同学，可以私信我，进行详细沟通
HTML5入门教程：标签详解与实战应用
2. **HTML5元素与标签**： - `<doctype>`: 定义文档类型，告知浏览器文档采用的是HTML5规范。 - `<abbr>` 和 `<acronym>`: 提供术语或缩写的定义。 - `<address>`: 提供联系信息，通常出现在文档底部。 - `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值