跟着我的步伐学习HTML5新特性研究入门

最新推荐文章于 2024-09-20 20:24:36 发布
最新推荐文章于 2024-09-20 20:24:36 发布
阅读量259 收藏 2
点赞数 1
文章标签： html5 html新特性 html5新特性 HTML

HTML5 简介

HTML

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

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

HTML5 简单易学。

什么是 HTML5?

HTML5 是下一代 HTML 标准。

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

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 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 > < meta charset = " utf-8 " > < title > 文档标题 </ title > </ head > < body > 文档内容...... </ body > </ html >

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

HTML5 的改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用

HTML5 多媒体

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

HTML5 应用

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

  • 本地数据存储
  • 访问本地文件
  • 本地 SQL 数据
  • 缓存引用
  • Javascript 工作者
  • XHTMLHttpRequest 2

HTML5 图形

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

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 > < head > < meta   charset = " utf-8 " >   < title > 菜鸟教程(runoob.com) </ title >   </ head > < 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 浏览器支持

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

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!-- [if lt IE9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif] -->

载入后，初始化新标签的CSS：

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


HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签 描述
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写，不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML5中不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域
<article>New 定义一个文章区域
<aside>New 定义页面的侧边栏内容
<audio>New 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>New 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文字方向
<big> 定义大号文本，HTML5不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas>New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持，不赞成使用。定义居中文本。
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command>New 定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details>New 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog>New 定义对话框，比如提示框
<dir> HTML5不支持，不赞成使用。定义目录列表。
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed>New 定义嵌入的内容，比如插件。
<fieldset> 定义围绕表单中元素的边框
<figcaption>New 定义<figure> 元素的标题
<figure>New 规定独立的流内容（图像、图表、照片、代码等等）。
<font> HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer>New 定义 section 或 document 的页脚。
<form> 定义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header>New 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen>New 规定用于表单的密钥对生成器字段。
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<map> 定义图像映射
<mark>New 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu> 不赞成使用。定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter>New 定义度量衡。仅用于已知最大和最小值的度量。
<nav>New 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output>New 定义不同类型的输出，比如脚本的输出。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress>New 定义运行中的进度（进程）。
<q> 定义短的引用。
<rp>New <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New <rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New <ruby> 标签定义 ruby 注释（中文注音或字符）。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section>New <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source>New <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span> 定义文档中的节。
<strike> HTML5不支持，不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary>New <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time>New 定义日期或时间，或者两者。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track>New <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video>New <video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New 规定在文本中的何处适合添加换行符。

Hunter涛涛
关注
系统学习Pytorch笔记七：优化器和学习率调整策略
Miracle8070
04-26 6115
Pytorch官方英文文档：https://pytorch.org/docs/stable/torch.html? Pytorch中文文档：https://pytorch-cn.readthedocs.io/zh/latest/ 1. 写在前面 疫情在家的这段时间，想系统的学习一遍Pytorch基础知识，因为我发现虽然直接Pytorch实战上手比较快，但是关于一些内部的原理知识其实并不是太懂，这样...
涵盖从Java 5到Java 11所有重要特性，让Java学习不再难！
博文视点（北京）官方博客
02-07 4610
曾经，网络上流传着这样一套视频，无数学员通过这套视频学会了Java，进入了软件开发领域~~ 这套视频就是“Java无难事”。 如今，为了方便大家更好地学习，也跟上当前Java发展更新的步伐，作者基于之前的视频内容，做了更新和完善，在广度和深度上进行了扩展，并继承“让Java学习再也不是难事”的思想，推出了新书《Java无难事》。 —— 从Java5到Java11 —— Java，这门编程语言界的常青树，凭借着简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 ，深受程
入门Java系列(一)——入门与学习方式
qq_35599449的博客
02-19 173
文章目录前言一、了解Java发展史和其特点特性1. Java发展史1.1 起源1.2 演进2. Java特点特性二、环境搭建1. JDK安装2. Eclipse安装3. 环境变量配置4. 验证环境变量5. 验证Eclipse三、拓展知识点1. Java跨平台原理2. JVM与GC3. JDK与JRE总结 前言       从今天开始，就要步入新的征程啦。哪怕你有一定的Java基础哦，但是哈，既然选择了从头开始，那么就好好夯实基础吧。阅读本篇文章
新手入门：大语言模型训练指南
2401_85373691的博客
08-06 1343
在这个信息爆炸的时代，人工智能技术正以前所未有的速度渗透到我们生活的方方面面。从智能手机上的语音助手到自动驾驶汽车，AI的应用无处不在。而在这些令人惊叹的技术背后，大语言模型（LLM）扮演着至关重要的角色。它们不仅能够理解和生成自然语言，还能在多种场景下提供智能决策支持。然而，对于许多对AI感兴趣的新手来说，大语言模型的训练和应用似乎是一件高不可攀的事情。复杂的技术术语、晦涩的理论知识，以及高昂的硬件要求，往往让人望而却步。但其实，只要掌握正确的方法和工具，每个人都能成为AI领域的探索者和实践者。本文将带你
小白学习web零基础，大佬给出全面建议，一步到位！
weixin_43955769的博客
12-22 328
    放在最前面希望不会影响你的观看，文章很不错哦! 自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。 加Q Q群：956940552（招募中）...
React入门指引与实战
热门推荐
张龙（风中叶）的专栏
07-29 1万+
本文介绍了React的基础知识，并通过一个实际可运行的示例带领读者一步步开发出一个基于React的评论系统，旨在厘清React开发的各项知识点，同时对于开发过程中所用的工具有一定的认识和掌握。
如何成为一名优秀的web前端工程师
BOM485480的博客
03-04 444
我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。 如何成为一名优秀的web前端工程师 何为：前端工程师？ 前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。 Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript! 它要...
[转帖]脑残式网络编程入门(一)：跟着动画来学TCP三次握手和四次挥手
weixin_30877181的博客
09-23 119
脑残式网络编程入门(一)：跟着动画来学TCP三次握手和四次挥手 http://www.52im.net/thread-1729-1-1.html 1、引言 网络编程中TCP协议的三次握手和四次挥手的问题，在面试中是最为常见的知识点之一。很多读者都知道“三次”和“四次”，但是如果问深入一点，他们往往都无法作出准确回答。本篇文章尝试使用动画图片的方式...
web前端入门很容易，全栈却很难，为什么每个程序员都那么说？
在线学习web前端开发教程
12-19 456
互联网行业无疑是当今社会颇具包容性且发展前景广阔的一个行业，如果单纯只是学习前端编程语言、而不懂后端编程语言，也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。如何学习全栈web前端开发知识呢，千锋哈尔滨小编来介绍下 学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。而学习...
如何成为一名自然语言处理工程师
CSDN 人工智能
01-18 510
作者 | 兰红云 责编 | 何永灿自然语言处理和大部分的机器学习或者人工智能领域的技术一样，是一个涉及到多个技能、技术和领域的综合体。所以自然语言处理工程师会有各种各样的背景，大部分都是在工作中自学或者是跟着项目一起学习的，这其中也不乏很多有科班背景的专业人才，因为技术的发展实在是日新月异，所以时刻要保持着一种强烈的学习欲望，让自己跟上时代和技术发展的步伐。本文作者从个人学习经历出发，介绍相关经...
2019年前端开发前景如何？前端开发会被淘汰吗？
qq_41597968的博客
09-16 3162
近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。 Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，...
如何做一名优秀、甚至卓越的WEB前…
huangleijay的专栏
09-11 544
我所遇到的前端程序员分两种：         第一种一直在问：如何学习前端？         第二种总说：前端很简单，就那么一点东西。         我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。         何为：前端工程师？         前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。         Web前端开发技术主要包
【HTML5】html5开篇基础（1）
Easonmax的博客
09-20 858
网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页的组成：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。HTML5不是一种编程语言，而是一种超文本标记语言。超文本包括：文字、图片、音频、视频、动画等html中代码不分大小写，推荐都小写。
HTML5中的重要元素详解
业精于勤荒于嬉，行成于思毁于随
09-13 835
HTML文档中，元素html代表了文档的根，其他所有元素都是在该元素的基础上进行延伸或拓展的，该元素也是HTML文档的最外层元素，因此也称为根元素。
基于HTML5的下拉刷新效果
在无知中学习，在学习中成长，在成长中学习
09-11 842
基于HTML5的下拉刷新效果
一个基于健身的社交App，内含跑步轨迹绘制，数据可视化展示，即时通讯，看新闻等模块(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
java基于ssm+jsp山东红色旅游信息管理系统源码 带毕业论文
最新发布
09-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、项目代码都经过严格调试，代码没有任何bug！下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
vue+SpringBoot743基于Java的中珠商城仓库管理系统java毕业设计源码含论文.rar
09-20
jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：springboot 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架，后端采用java语言，sprinboot框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统
HTML5新手入门：新特性与实践
"这篇文档是关于HTML5的入门介绍，涵盖了HTML5的新特性和相关技术，如HTML标签、CSS3以及新的JavaScript API。文档详细讲述了HTML5的发展历程，从1991年的HTML到2009年的HTML5，以及各浏览器对HTML5的支持情况。此外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值