【前段基础入门之】=＞HTML5 的新增特性！

news2024/12/23 18:17:56

在这里插入图片描述

这里写目录标题

  • HTML5简介
  • HTML5 优势
  • 新增语义化标签
    • 新增布局标签
    • 新增状态标签
      • meter 标签
      • progress 标签
    • 新增列表标签
    • 新增文本标签
      • 文本注音
      • 文本标记
  • 新增表单功能
    • 表单控件新增属性
    • input 新增属性值
    • form 标签新增属性
  • 新增多媒体标签
    • 视频播放标签
    • 音乐播放标签
  • 新增全局属性（拓展）
  • HTML5兼容性处理

导语：

在前面章节中，我们介绍的有关 HTML 的知识点，更多是基于HTML4来讲解的，目前HTML的版本已经发展到第五代的，所以本章节就针对性的对HTML5做一期概述讲解。

在这里插入图片描述

HTML5简介

HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。
官网地址：

  • W3C 提供： 官网
  • WHATWG 提供：官网
    HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端开发岗位。

HTML5 优势

  • 针对 JavaScript ，新增了很多可操作的接口。
  • 新增了一些语义化标签、全局属性。
  • 新增了多媒体标签，可以很好的替代 flash 。
  • 更加侧重语义化，对于 SEO 更友好。
  • 可移植性好，可以大量应用在移动设备上。

新增语义化标签

新增布局标签

标签名语义化标签特征
header整个页面，或部分区域的头部双
footer 整个页面，或部分区域的底部双
nav 导航双
article 文章、帖子、杂志、新闻、博客、评论区域等双
section页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题双
aside 侧边栏双
main 文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用双
hgroup 包裹连续的标题，如文章主标题、副标题的组合 （ W3C 将其删除）双

在这里插入图片描述

新增状态标签

meter 标签

  • 语义： 定义已知范围内的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等
  • 常用属性如下:
属性名描述属性值
high规定高值数值
low规定低值数值
max规定最大值数值
min规定最小值数值
optimum规定最优值数值
value规定当前值值数值
  meter状态标签: <meter high="80" low="10" max="100" min="0" value="45" optimum="81"></meter>

在这里插入图片描述

progress 标签

  • 语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
  • 常用属性如下：
属性名描述属性值
max规定最大值数值
value规定当前值数值
<progress max="100" value="75"></progress>

在这里插入图片描述

新增列表标签

标签名语义化标签特征
datalist用于搜索框的关键字提示 （自动补全）双
details用于展示问题和答案，或对专有名词进行解释双
summary写在 details 的里面，用于指定问题或专有名词双
<input type="text" list="mydata"><button>搜索</button>
<datalist id="mydata">
  <option value="西瓜">西瓜</option>
  <option value="西边">西边</option>
  <option value="鸡肉">鸡肉</option>
  <option value="鸡腿">鸡腿</option>
</datalist>

在这里插入图片描述
在这里插入图片描述

  <details>
    <summary>前端怎么学？</summary>
    <p>一步一步学</p>
  </details>

在这里插入图片描述
在这里插入图片描述

新增文本标签

文本注音

标签名语义化标签特征
ruby包裹需要注音的文字双
rt 写注音， rt 标签写在 ruby 的里面双
<ruby>
  <span>魑魅魍魉</span>
  <rt>chī mèi wǎng liǎng </rt>
</ruby>

在这里插入图片描述

文本标记

标签名语义化标签特征
mark标记关键字双

在这里插入图片描述

新增表单功能

表单控件新增属性

属性描述
placeholder提示文字（注意：不是默认值， value 是默认值），适用于文字输入类的表单控件
required 表示该输入项必填， 适用于除按钮外其他表单控件
autofocus 自动获取焦点，适用于所有表单控件
autocomplete自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用
pattern填写正则表达式，适用于文本输入类表单控件。注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合使用

input 新增属性值

属性描述
email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式
urlurl 类型的输入框，表单提交时会验证格式，输入为空则不验证格式
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式
search搜索类型的输入框，表单提交时不会验证格式
tel电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字拨号键盘
range范围选择框，默认值为 50 ，表单提交时不会验证格式
color 颜色选择器，默认值为黑色，表单提交时不会验证格式
date日期选择框，默认值为空，表单提交时不会验证格式
month 月份选择框，默认值为空，表单提交时不会验证格式
week 周选择框，默认值为空，表单提交时不会验证格式
time 时间选择框，默认值为空，表单提交时不会验证格式
datetime-local日期+时间选择框，默认值为空，表单提交时不会验证格式

form 标签新增属性

属性描述
novalidate如果给 form 标签设置了该属性，表单提交的时候不再进行验证

新增多媒体标签

视频播放标签

<video> 标签用来定义视频，它是双标签。

属性属性值描述
src URL地址视频地址
width像素值设置视频播放器的宽度,几乎不用（通过css调整）
height 像素值设置视频播放器的高度,几乎不用（通过css调整）
controls-向用户显示视频控件（比如播放/暂停按钮
muted -视频初始化静音
autoplay -自动播放
loop -循环播放
posterURL地址视频封面；如果不设置，视频默认第一帧为封面
preloadauto / metadata / none视频预加载，如果使用 autoplay ，则忽略该属性
none : 不预加载视频
metadata : 仅预先获取视频的元数据（例如长度）
auto : 浏览器自动调控是否预加载

音乐播放标签

<audio> 标签用来定义音频，它是双标签。

属性属性值描述
src URL地址音频地址
controls-向用户显示音频控件（比如播放/暂停按钮
autoplay -自动播放
muted -音频初始化静音
loop -循环播放
preloadauto / metadata / none音频预加载，如果使用 autoplay ，则忽略该属性
none : 不预加载音频
metadata : 仅预先获取音频的元数据（例如长度）
auto : 浏览器自动调控是否预加载

新增全局属性（拓展）

属性描述
contenteditable表示元素是否可被用户编辑，可选值如下

true：可编辑

false：不可编辑
draggable表示元素是否可被用户拖动，可选值如下

true：可拖动

false：不可拖动


备注：需结合 JS 实现
hidden隐藏元素；不占位
spellcheck规定是否对元素进行拼写和语法检查，可选值如下：，可选值如下

true：检查

false：不检查
contextmenu规定元素的上下文菜单，在用户鼠标右键点击元素时显示

需结合 JS 实现定制化右键菜单
data-*用于存储页面的私有定制数据

HTML5兼容性处理

由HTML5新增很多新特性，这就对很多老旧浏览器，不够友好，所以处理兼容性的问题，也是前端的一门必修课。

在这里插入图片描述

处理方式：

  • 添加元信息，让浏览器处于最优渲染模式。
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
  • 使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

在这里插入图片描述

示例：

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]-->

讲在最后：

本章节介绍有关 HTML5 的新特性，其实远远不止于这些，但是由于 HTML5 开放的更多接口方法,需要结合 JavaScript 一起使用，才能发挥出更大的作用，所以在本章节中没有提及，且在这里出现的意义不大，所以后续会在 JavaScript 专区进行梳理使用，到时候才能真正发挥出 HTML5 强大的新特性功能。

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

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

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

相关文章

ICCV 2023 | 噪声关联鲁棒的图匹配方法

ICCV 2023 | 噪声关联鲁棒的图匹配方法

©PaperWeekly 原创 作者 | 林义杰 单位 | 四川大学 研究方向 | 多模态、多视角学习 论文标题&#xff1a; Graph Matching with Bi-level Noisy Correspondence 论文地址&#xff1a; https://arxiv.org/pdf/2212.04085.pdf 开源代码&#xff1a; https://github.com/XLe…
阅读更多...
word文档莫名其妙的丢失了怎么办？7个方案恢复

word文档莫名其妙的丢失了怎么办？7个方案恢复

不知道你是否曾经遇到过相似的情况&#xff1a;花费了数小时甚至数天编辑的Word文档&#xff0c;却莫名其妙的丢失了。这时的心情可能非常复杂。如果你不知道该怎么办&#xff0c;以下是几种恢复方案&#xff0c;希望能对你有所帮助&#xff01; 关于Word文档 Word文档通常是由…
阅读更多...
Vue路由与nodejs下载安装及环境变量的配置

Vue路由与nodejs下载安装及环境变量的配置

目录 前言 一、Vue路由 1.路由简介 是什么 作用 应用场景 2.SPA简介 SPA是什么 SPA的优点 注意事项 3.路由实现思路 1.引入路由的js依赖 2.定义组件 3.定义组件与路径的对应关系 4.通过路由关系获取路由对象router 5.将路由对象挂载到实例中 6.触发路由事…
阅读更多...
学生选课系统基础版

学生选课系统基础版

目录 一.Java 中的集合框架&#xff08;上&#xff09; 1.Java中的集合框架概述 2.Collection接口&接口简介 3.学生选课——创建学生类和课程类 4.学生选课——添加课程Ⅰ 5.学生选课——添加课程Ⅱ 6.学生选课——课程查询 7.学生选课——课程修改 8.学生选课——课程删…
阅读更多...
Java日志源码详解，SpringBoot日志 slf4j、logback、log4j

Java日志源码详解，SpringBoot日志 slf4j、logback、log4j

日志视频讲解—上日志视频讲解—下学习文档集合 一、前提 在Java中说起日志&#xff0c;定听过这样几个名词&#xff1a;slf4j、logback、log4j&#xff0c;在正式开始之前&#xff0c;先了解几个简单的概念 slf4j、logback、log4j 的作者都是一个人slf4j 的全名是 Simple Log…
阅读更多...
ByteTrack 论文学习

ByteTrack 论文学习

1. 解决了什么问题&#xff1f; 多目标跟踪是在给定的视频片段中&#xff0c;预测出目标的边框和 ID 信息。现有方法需要在 true positives 和 false positives 之间做取舍&#xff0c;将高于一定阈值的检测框关联起来&#xff0c;获取其 ID。而那些低得分的目标&#xff08;如…
阅读更多...
全新的Windows12上线抢先体验

全新的Windows12上线抢先体验

AIGC专栏/AI绘画教程/java面试题领取 win12太离谱了&#xff0c;win11还没用几天&#xff0c;win12就已经出来了&#xff0c;如此流畅的页面&#xff0c;很具有和苹果一拼的效果&#xff0c;流畅度也是一流。文末有领取方式。 WIN12系统在色差表现方面也超越了苹果。它采用了前…
阅读更多...
华为数通方向HCIP-DataCom H12-831题库(单选题：141-160）

华为数通方向HCIP-DataCom H12-831题库(单选题：141-160）

第141题 R3与R1的IS-IS邻居没有建立，根据本图的信息，可能的原因是? A、R3与R1的IS-Level不匹配 B、R3与R1的互连接口circuit-type不匹配 C、R3与R1的IIH认证失 D、R3与R1的System ID重复 答案： B 解析： 从上图的Bad Circuit Type:16 可知道R3与R1的互连接口circuit-type…
阅读更多...
【EI会议征稿】第三届计算机图形学、人工智能与数据处理国际学术会议 (ICCAID 2023)

【EI会议征稿】第三届计算机图形学、人工智能与数据处理国际学术会议 (ICCAID 2023)

第三届计算机图形学、人工智能与数据处理国际学术会议 2023 3rd International Conference on Computer Graphics, Artificial Intelligence and Data Processing (ICCAID 2023) 第三届计算机图形学、人工智能与数据处理国际学术会议&#xff08;ICCAID 2023&#xff09;将于…
阅读更多...
基于数据驱动的成本洞察，趣丸科技的FinOps进阶之路~

基于数据驱动的成本洞察，趣丸科技的FinOps进阶之路~

今年以来&#xff0c;我们注意到越来越多的单位开始积极实践FinOps&#xff0c;而随着FinOps的发展&#xff0c;大家对于其落地过程的关注也更加具体和深入&#xff0c;涉及了账单波动、FinOps的边际效应、成本模型、依赖工具等多个关键问题。 本月「UGeek大咖说」线上直播活动…
阅读更多...
机器学习之泛化与过拟合的概念

机器学习之泛化与过拟合的概念

文章目录 泛化&#xff08;Generalization&#xff09;&#xff1a;过拟合&#xff08;Overfitting&#xff09;&#xff1a;例子 泛化&#xff08;Generalization&#xff09;&#xff1a; 泛化是指机器学习模型在未见过的新数据上表现良好的能力。换句话说&#xff0c;一个好…
阅读更多...
【软件测试】Junit5

【软件测试】Junit5

Selenium自动化测试框架Junit单元测试框架拿着一个技术写自动化测试用例 (Selenium3)拿着一个技术管理已经编写好的测试用例 (Junit5) Junit相关技术 Junit是针对java的一个单元测试框架。 注解 Test 表示当前的这个方法是一个测试用例 添加依赖&#xff1a; 不需要main方…
阅读更多...
解决react使用redux toolkits时出现的数组对象长度始终为0的怪异问题

解决react使用redux toolkits时出现的数组对象长度始终为0的怪异问题

有个react项目在添加购物车后&#xff0c;立马白屏&#xff0c;看一下console报错properties of undefined(reading length) 那意思是说数组没有长度&#xff0c;然后定位Header.tsx的182行&#xff0c;果然是数组长度报错 回到具体代码中&#xff1a;发现shoppingCartItems实…
阅读更多...
大模型存在“反转诅咒”现象，无法处理反向问题；Langchain课程资源

大模型存在“反转诅咒”现象，无法处理反向问题；Langchain课程资源

&#x1f989; AI新闻 &#x1f680; 大模型存在“反转诅咒”现象&#xff0c;无法处理反向问题 摘要&#xff1a;最新研究发现&#xff0c;大语言模型存在“反转诅咒”现象&#xff0c;即明知道“A 是 B”&#xff0c;却答不出“B 是 A”。研究人员进行了两项实验&#xff0…
阅读更多...
【RocketMQ专题】快速实战及集群架构原理详解

【RocketMQ专题】快速实战及集群架构原理详解

目录 课程内容一、MQ简介基本介绍*作用&#xff08;解决什么问题&#xff09; 二、RocketMQ产品特点2.1 RocketMQ介绍2.2 RocketMQ特点2.3 RocketMQ的运行架构2.4 消息模型 三、RocketMQ快速实战3.1 快速搭建RocketMQ服务3.2 快速实现消息收发3.3 搭建Maven客户端项目3.4 搭建R…
阅读更多...
Linear Feedback Shift Register

Linear Feedback Shift Register

线性反馈移位寄存器&#xff08;Linear Feedback Shift Register&#xff0c;简称LFSR&#xff09;是一种数字电路设计和密码学中常用的寄存器类型。它是一种简单而高效的方式&#xff0c;用于生成伪随机的二进制序列&#xff0c;并在数据混淆、错误检测和加密等领域中有应用。…
阅读更多...
怎么用蜂邮EDM和Outlook批量发送邮件带附件

怎么用蜂邮EDM和Outlook批量发送邮件带附件

蜂邮EDM和Outlook批量发送邮件带附件的流程&#xff1f;有哪些邮件批量发送邮件附件的方法&#xff1f; 在现代社会中&#xff0c;电子邮件是一种广泛应用的沟通工具&#xff0c;而批量发送邮件带附件则是许多商业和个人用户的常见需求。本文将介绍如何使用蜂邮EDM和Outlook这…
阅读更多...
时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiLSTM鹈鹕算…
阅读更多...
吉力宝：智能科技鞋品牌步力宝引领传统产业创新思维

吉力宝：智能科技鞋品牌步力宝引领传统产业创新思维

在现代经济环境下&#xff0c;市场经济下产品的竞争非常的激烈&#xff0c;如果没有营销&#xff0c;产品很可能不被大众认可&#xff0c;酒香也怕巷子深&#xff0c;许多传统产业不得不面临前所未有的挑战。而为了冲出这个“巷子”&#xff0c;许多企业需要采用创新思维&#…
阅读更多...
单片机外设-串口（UART）详情

单片机外设-串口（UART）详情

目录 学习UART要先认识一些基础知识 一&#xff1a;什么是串行、并行通信&#xff1f; &#xff08;1&#xff09;串行通信 串行通信概念&#xff1a; 串行通信的特点&#xff1a; &#xff08;2&#xff09;并行通信 并行通信概念&#xff1a; 并行通信特点&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023