开始学习HTML5

news/2024/5/14 11:25:57/文章来源:https://blog.csdn.net/thgj0006/article/details/129680459

HTML5 简介

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

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

HTML5简单易学。


什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 受包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等国外主流浏览器的支持;国内的傲游浏览器(Maxthon), 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。


HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search


HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>


最小的HTML5文档

下面是一个简单的HTML5文档:

<!DOCTYPE html>        
<html>              
<head>          
<title>文档标题</title>            
</head>           
<body>          文档内容......         
</body>                
</html>

HTML5的改进

  • 新元素

  • 新属性

  • 完全支持 CSS3

  • Video 和 Audio

  • 2D/3D 制图

  • 本地存储

  • 本地 SQL 数据

  • Web 应用


HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

  • HTML5 <video>

  • HTML5 <audio>


HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储

  • 访问本地文件

  • 本地 SQL 数据

  • 缓存引用

  • Javascript 工作者

  • XHTMLHttpRequest 2


HTML5 图形

使用 HTML5 你可以简单的绘制图形:

  • 使用 <canvas> 元素

  • 使用内联 SVG

  • 使用 CSS3 2D/CSS 3D


HTML5 使用 CSS3

  • 新选择器

  • 新属性

  • 动画

  • 2D/3D 转换

  • 圆角

  • 阴影效果

  • 可下载的字体

了解更多CSS3知识请查看本站的 CSS3 教程。


语义要素

HTML5 添加了很多语义元素如下所示:

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<mark>定义带有记号的文本。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中文注音或字符)。
<rt>定义字符(中文注音或字符)的解释或发音。
<rp>在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>定义文档中的节(section、区段)。
<time>定义日期或时间。
<wbr>规定在文本中的何处适合添加换行符。

HTML5 表单

新表单元素, 新属性,新输入类型,自动验证。


已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

每一章中的实例

通过我们的 HTML 编辑器,您能够编辑 HTML,然后点击按钮来查看结果。

实例

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
 你的浏览器不支持 video 标签。
</video>

</body>
</html>


尝试一下 »

点击 "尝试一下" 按钮查看在线运行结果。


HTML5 - 新特性

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search


HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包:

<!--[if lt IE9]> 
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" ></script>
<![endif]-->

载入后,初始化新标签的CSS:

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

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

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

相关文章

如何将3张图片横向拼在一起

如何将3张图片横向拼在一起&#xff1f;遇到这个情况你可能马上就会说出很多图片处理的app&#xff0c;比如用某秀秀来操作&#xff0c;但是也有很多时候某秀秀也处理不了的。当我们的图片非常大&#xff0c;图片数量很多&#xff0c;图片的格式不是jpg那种通用的格式&#xff…

如何监控和诊断JVM堆内和堆外内存使用?

第26讲 | 如何监控和诊断JVM堆内和堆外内存使用&#xff1f; 上一讲我介绍了 JVM 内存区域的划分&#xff0c;总结了相关的一些概念&#xff0c;今天我将结合 JVM 参数、工具等方面&#xff0c;进一步分析 JVM 内存结构&#xff0c;包括外部资料相对较少的堆外部分。 今天我要…

Java栈和队列·下

Java栈和队列下2. 队列(Queue)2.1 概念2.2 实现2.3 相似方法的区别2.4 循环队列3. 双端队列 (Deque)3.1 概念4.java中的栈和队列5. 栈和队列面试题大家好&#xff0c;我是晓星航。今天为大家带来的是 Java栈和队列下 的讲解&#xff01;&#x1f600; 继上一个讲完的栈后&…

视听场景理解经典任务

文章目录1. 视听场景理解简介2. 主要任务2.1 Audio-visual Event Localization (AVE) 2.2 Audio-visual Video Parsing &#xff08;AVVP&#xff09;2.3 Audio-visual Question Answering &#xff08;AVQA&#xff09;2.4 Audio-visual Segmentation &#xff08;AVS&#xf…

STM32中systick中断的优先级

1、systick中断的优先级 systick为内核外设中断&#xff0c;与普通外设中断的优先级有些区别&#xff0c;并没有抢占优先级和子优先级的说法。 对于M3来说内核外设的中断优先级由内核SCB这个外设的寄存器&#xff1a;SHPRx&#xff08;x1.2.3&#xff09;来配置。 内核外设的中…

佳明安夺(Garmin Enduro)续航简单测试

文章目录&#xff08;一&#xff09;结论&#xff08;二&#xff09;测试条件&#xff08;2.1&#xff09;Garmin Connect APP 日历&#xff08;2.2&#xff09;具体运动记录&#xff08;2.3&#xff09;步数情况&#xff08;三&#xff09;补充和探讨&#xff08;3.1&#xff…

信捷PLC通过EtherCat与松下伺服通讯时的断电重启时会产生巨大异响的Bug原因及解决办法

信捷PLC支持ethercat通讯协议,可以和支持ethercat的从站通讯,像伺服驱动器或IO站点等。 其中,信捷XLH系列PLC在与松下伺服驱动器通讯时,有一个比较严重的问题,就是PLC断电再上电时,有时候会出现bug,这个bug的现象是,使用PLC的指令方式去控制伺服轴动作时,会产生巨大的…

kali内置超好用的代理工具proxychains

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;在于他所拥有的。所以可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防。…

Mybatis的课程总结

1.mybatis Mybatis主要是对代码进行少写&#xff0c;分别加入核心配置文件和mapper映射文件&#xff0c; 核心配置文件主要是为了连接数据库&#xff0c;mapper映射文件是为了编写sql语句 1.如何配置mybatis ①先创建一个moudle ②然后配置jar包 ③然后进行mybatis的分层 bean…

pcb成型板aoi检测,6种PCB板常用的检测方法

6种PCB板常用的检测方法&#xff0c;主要包括&#xff1a;PCB板人工目测、PCB板在线测试、PCB板功能测试、自动光学检测、自动X光检查、激光检测系统1、PCB板人工目测使用放大镜或校准的显微镜&#xff0c;利用操作人员视觉检查来确定电路板合不合格&#xff0c;并确定什么时候…

我们再次看看 ARB 女巫空投策略,做到知彼知己,不敢说百战不殆

女巫检测选项该项目旨在从 Arbitrum 空投中删除 Sybil 地址&#xff0c;确保只有合法用户才能收到空投代币。方法我们使用链上数据来识别同一用户拥有的相关地址&#xff0c;并使用来自 Nansen、Hop 和 OffChain Labs 的数据删除实体地址&#xff0c;例如网桥、交易所和智能合约…

Verilog学习之触发器与modelsim仿真

目录 一、前言 二、触发器介绍 三、测试文件代码 一、前言 ​ ​本文将学习常见类型触发的verilog编写&#xff0c;结合仿真结果来熟悉。 二、触发器介绍 ​ ​触发器在verilog中的作用主要是具有存储作用&#xff0c;由时钟信号来触发改变存储内容&#xff0c;较常见…

银河麒麟v10系统硬盘挂载

一、查看磁盘 近期由于centos系统停止更新用户服务器要更换银河麒麟v10&#xff0c;拿到服务器后使用lsblk -f或fdisk -l命令查看磁盘名称 可以看到sdb200G就是要挂载的硬盘&#xff0c;还没有uuid需要初始化才可以挂载。 二、分区 分区命令&#xff1a; fdisk /dev/【你的…

【LeetCode每日一题】——面试题17.21.直方图的水量

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【时间频度】八【代码实现】九【提交结果】一【题目类别】 双指针 二【题目难度】 困难 三【题目编号】 面试题17.21.直方图的水量 四【题目描述】 给定一个直方图(也称…

Java解题--练习解题阶段(无序阶段)-ALGO-1006 拿金币

题目算法训练 拿金币资源限制内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s问题描述有一个N x N的方格,每一个格子都有一些金币,只要站在格子里就能拿到里面的金币。你站在最左上角的格子里,每次可以…

什么是装箱?什么是拆箱?装箱和拆箱的执行过程?常见问题?

参考答案 1、什么是装箱&#xff1f;什么是拆箱&#xff1f; 装箱&#xff1a;基本类型转变为包装器类型的过程。 拆箱&#xff1a;包装器类型转变为基本类型的过程。 //JDK1.5之前是不支持自动装箱和自动拆箱的&#xff0c;定义Integer对象&#xff0c;必须 Integer i new…

MATLAB | R2023a更新了哪些好玩的东西

R2023a来啦&#xff01;&#xff01;废话不多说看看新版本有啥有趣的玩意和好玩的特性叭&#xff01;&#xff01;把绘图放最前面叭&#xff0c;有图的内容看的人多。。 1 区域填充 可以使用xregion及yregion进行区域填充啦&#xff01;&#xff01; x -10:0.25:10; y x.^…

<Linux>环境变量

环境变量 文章目录环境变量一、基本概念二、常见环境变量三、查看环境变量的方法四、测试PATH五、测试HOME六、测试SHELL七、环境变量相关的命令八、环境变量的组织方式九、命令行参数十、通过代码获得环境变量十一、通过系统调用获取环境变量十二、环境变量通常是具有全局属性…

Docker简单上手

Docker 笔记 文章目录Docker 笔记[toc]一、Docker简介docker版本docker 架构二、Docker常用命令docker镜像命令docker容器命令提交docker镜像到阿里云仓库搭建私有docker镜像库三、容器数据卷四、阿里云容器部署1.Tomcat部署2.MySQL部署3.Redis部署一、Docker简介 ​ Docker是…

Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

文章目录1、背景2、命令浏览器-双生姐妹花2.1、姐妹花简介2.2 、验名正身2.3、常用功能选项3、常用实操3.1、发送请求获取文件3.1.1、抓取页面内容到一个文件中3.1.2、多个文件下载3.1.3、下载ftp文件3.1.4、断点续传3.1.5、上传文件3.1.6、内容输出3.2 、利用curl测试接口3.3 …