12.HTML5新特性

HTML5新特性

1.介绍

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。用于取代 HTML4 与 XHTML 的新一代标准版本,所以叫HTML5

HTML5 在狭义上是指新一代的 HTML 标准,在广义上是指:整个前端

2.H5的目的

HTML5的设计目的是为了在移动设备上支持多媒体

3.新特性总览

语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3 特性

4.H5优势与劣势

优势

  • 提高可用性和改进用户的友好体验
  • 更好的语义化标签
  • 可以给站点带来更多的多媒体元素(视频和音频)
  • 可以很好的替代FLASH和Silverlight
  • 当涉及到网站的抓取和索引的时候,对于SEO很友好
  • 可移植性好
  • 将被大量应用于移动应用程序和游戏

劣势

  • 该标准并未能很好的被PC端浏览器所支持
  • IE9以下的浏览器几乎都不兼容

5.新的语义化标签

div的问题

以前制作网页布局,我们基本用 div 来做。div 就是一个普通的块级标签,对于搜索引擎来说,是没有语义的

图示

注意事项

  • 这种语义化标准主要针对搜索引擎的
  • 这些新标签页面中可以使用多次的
  • 在IE9中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签

关于article和section

  • artical 里面可以有多个 section
  • section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用 section 元素
  • article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用 article 元素

6.新的多媒体标签

注意

都是双标签,音频还是 audio 标签,视频还是 video 标签

video属性

audio属性

7.新的表单标签

新增的表单标签

表单控件新增属性


datalist

form标签新增属性

属性名功能
novalidate如果给 form 标签设置了该属性,表单提交的时候不再进行验证

8.H5新增全局属性

9.H5兼容性处理

方式一

添加元信息,让浏览器处于最优渲染模式

<!--设置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]-->

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

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

相关文章

云原生之深入解析K8s中的微服务项目设计与实现

一、微服务项目的设计 ① 微服务设计的思想 一个单片应用程序将被构建、测试并顺利地通过这些环境。事实证明&#xff0c;一旦投资于将生产路径自动化&#xff0c;那么部署更多的应用程序似乎就不再那么可怕了。请记住&#xff0c;CD的目标之一就是让部署变得无聊&#xff0c…

提升团队效率,防止员工飞单私单的秘诀!

在如今竞争激烈的商业环境中&#xff0c;每个企业都追求更高的销售业绩和客户满意度。然而&#xff0c;有些员工可能会利用V信等社交工具进行私下交易&#xff0c;导致公司的利益损失和客户信任的瓦解。所以&#xff0c;如何防止员工飞单私单成为了一个需要解决的问题。 在这里…

FL Studio20官方版怎么下载安装?2024最新版图文详细教程

水果音乐制作软件FL Studio2024是一款功能强大的软件音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;&#xff0c;本文主要针对FL Studio 2024怎么安装&#xff1f;来为大家带来了水果软件FL Studio 2024安装图文详细教程&#xff01;水果音乐制作软件FL Studio2024版…

智能分析/可视化安防监控系统EasyCVR风光互补远程视频监控方案

一、背景需求 在一些偏远地区&#xff0c;也具有视频监控的需求。但是这类场景中&#xff0c;一般无法就近获取市电&#xff0c;如果要长距离拉取市电&#xff0c;建设的成本非常高且长距离传输有安全隐患&#xff0c;因此风光互补远程视频监控方案的需求也较多。利用风光电转…

TCP/IP 四层体系结构

目录 ​编辑 导言&#xff1a; 应用层 1. HTTP&#xff08;超文本传输协议&#xff09; 2. FTP&#xff08;文件传输协议&#xff09; 3. SMTP&#xff08;简单邮件传输协议&#xff09; 4. POP3&#xff08;邮局协议第3版&#xff09; 5. IMAP&#xff08;互联网消息访…

Python安装报错: This environment is externally managed

error: externally-managed-environment This environment is externally managed ╰─> To install Python packages system-wide, try apt installpython3-xyz, where xyz is the package you are trying toinstall.这个错误信息表示当前Python环境是由系统外部管理的&…

System 2 Attention:可以提高不同LLM问题的推理能力

推理正在成为大型语言模型(llm)关注的下一个主要领域。尽管llm拥有先进的能力&#xff0c;但大多数llm经常被简单的错误绊倒&#xff0c;显示出他们在推理方面的局限性。这些模型可能会被上下文中的不相关细节所误导&#xff0c;或者受到输入提示中的偏差的影响。而后一种倾向被…

【Apollo】编译 Apollo 源码

https://github.com/ApolloAuto/apollo/blob/master/docs/01_Installation%20Instructions/apollo_build_and_test_explained.md 查看apollo.sh 的用法 ./apollo.sh --help可以编译整个模块&#xff0c;也可以单独编译某一个子模块./modules 为简单起见&#xff0c;Apollo 6.0…

JAVA:注册表窗口的实现

目录 题目要求&#xff1a; 思路大意&#xff1a; 窗体的实现&#xff1a; 窗口A&#xff1a; 窗口B&#xff1a; 窗体之间的构思&#xff1a; 关键代码的实现&#xff1a; 窗口A&#xff1a; 封装列表&#xff1a; 窗口B&#xff1a; 题目要求&#xff1a; 使用…

网站使用CDN后无法获取用户真实IP的解决方法

宝塔或Nginx环境 如果你使用的宝塔或Nginx&#xff0c;可以在宝塔面板或Nginx中&#xff0c;找到配置文件增加如下代码后&#xff0c;重载配置或者重启 Nginx 即可&#xff1a; #CDN获取真实ip set_real_ip_from 0.0.0.0/0; real_ip_header X-Forwarded-For; PHP语言函数方法…

19 高速列车场景下3Gpp 5G NR的DMRS设计与评估

文章目录 解决问题设计DMRS仿真参数仿真结果 解决问题 多普勒/扩展影响十分显著&#xff0c;设计用于信道估计时&#xff0c;需要考虑解调参考信号&#xff0c;5G用DMRS结构而不是CRS结构&#xff0c;因此需要为高速UE设计DMRS结构&#xff0c;DMRS设计是为了提高信道估计并减…

【AI底层逻辑】——数学与机器学习:优雅的智慧之舞

目录 “宝藏网站” 聊聊数学 “华尔兹” “智慧之舞” 后续的章节我们将迎来新的篇章&#xff0c;新的切入点探索AI的奥秘&#xff0c;通过揭示高数、矩阵、概率论等数学知识与机器学习的关系来深入理解AI的奥秘&#xff01; “宝藏网站” 开头先给大家上几个宝藏网站&am…

性能监控软件:优化系统运行的得力助手

随着科技的飞速发展&#xff0c;企业和组织对于其信息技术基础设施的性能要求也愈发提高。为了确保系统能够高效稳定地运行&#xff0c;性能监控软件成为不可或缺的工具。本文将探讨性能监控软件的主要作用&#xff0c;以及它们在提升系统性能和稳定性方面的关键作用。 1. 实时…

Mysql8.0实现主从复制

1、什么是主从复制 数据库的主从复制&#xff08;master-slave replication&#xff09;是一种数据复制技术&#xff0c;其中一台数据库服务器&#xff08;主服务器&#xff09;上的数据变更会复制到另一台或多台数据库服务器&#xff08;从服务器&#xff09;上。这种复制可以…

羊大师讲解,一天喝多少羊奶才是健康的饮用量?

羊大师讲解&#xff0c;一天喝多少羊奶才是健康的饮用量&#xff1f; 在当今快节奏的生活中&#xff0c;更加健康的生活方式备受追捧。作为一种营养丰富的饮品&#xff0c;羊奶备受人们的喜爱。但是&#xff0c;一天喝多少羊奶才是健康的饮用量呢&#xff1f;本文小编羊大师将…

mysql EXPLAIN命令的输出列简介

MySQL :: MySQL 8.2 Reference Manual :: 8.8.2 EXPLAIN Output Format explain命令提供了mysql数据库如何执行SQL语句的信息&#xff0c;可以跟 SELECT, DELETE, INSERT, REPLACE, UPDATE, 和 TABLE一起使用。 explain命令可能输出多行&#xff0c;每行涉及一个表 。 先来看…

3D摄影棚布光:Set A Light 3D Studio

Set A Light 3D Studio是一款专业的灯光模拟软件&#xff0c;旨在帮助摄影师和电影制片人在电脑上进行虚拟灯光布置和场景模拟&#xff0c;以实现更加精准和高质量的拍摄效果。该软件提供了丰富的灯光和场景模型&#xff0c;支持灵活调整光源位置、强度、颜色和效果等参数&…

PMP备考总结:项目管理PMP考试提高通过率,轻松上岸~

分享一篇左羊学霸的备考总结&#xff0c;希望能帮到正在备考的友友们~ 前言 作为⼀名通过PMP项⽬管理认证并且拿到3A成绩 ( PMP认证最好成绩) 的 学习者&#xff0c; 来跟⼤家分享下我考取PMP证书的动机与过程 。考证不是主要⽬ 的&#xff0c; 在考证的过程深化⾃⼰的项⽬管理…

element日历组件只显示月和日,把年份隐藏掉

最终效果&#xff1a; 把年份和旁边的两个小标志小标去掉&#xff0c; 也就是把这红色框框内的内容隐藏掉 我们先用控制台看看里面具体的样式 1、可以看到 class “el-date-picker__header” 的 div是控制日历组件的标题的&#xff0c;div里面的button和span就是对应标题里面…

Python自动化:selenium常用方法总结

使用的Python版本为3.8&#xff0c;selenium版本为4.15.2 Python自动化:selenium常用方法总结 1. 三种等待方式2. 浏览器操作3. 8种查找元素的方法4. 高级事件 1. 三种等待方式 强制等待 使用模块time下的sleep()实现等待效果隐式等待 使用driver.implicitly_wait()方法&#…