关于HTML5的简要概述

最新推荐文章于 2021-11-08 12:35:24 发布

丁一9527

最新推荐文章于 2021-11-08 12:35:24 发布

阅读量896

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_43383323/article/details/109106811

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5是最新标准，采用UTF-8编码，旨在提供丰富的web内容，无需插件。它引入了新的语义元素如

、

，增强了表单和图像处理，提供了

摘要由CSDN通过智能技术生成

HTML5

HTML5 是最新的 HTML 标准（HTML5 中默认的字符编码是 UTF-8）。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

新特性

新的语义元素，比如 <header>, <footer>, <article>, and \
。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。

HTML5被删元素

以下 HTML 4.01 元素已从 HTML5 中删除：

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

新的语义/结构元素

HTML5 提供的新元素可以构建更好的文档结构

标签	描述
<article>	定义文档内的文章。
<aside>	定义页面内容之外的内容。
<bdi>	定义与其他文本不同的文本方向。
<details>	定义用户可查看或隐藏的额外细节。
<dialog>	定义对话框或窗口。
<figcaption>	定义 <figure> 元素的标题。
<figure>	定义自包含内容，比如图示、图表、照片、代码清单等等。
<footer>	定义文档或节的页脚。
<header>	定义文档或节的页眉。
<main>	定义文档的主内容。
<mark>	定义重要或强调的内容。
<menuitem>	定义用户能够从弹出菜单调用的命令/菜单项目。
<meter>	定义已知范围（尺度）内的标量测量。
<nav>	定义文档内的导航链接。
<progress>	定义任务进度。
<rp>	定义在不支持 ruby 注释的浏览器中显示什么。
<rt>	定义关于字符的解释/发音（用于东亚字体）。
<ruby>	定义 ruby 注释（用于东亚字体）。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。
<wbr>	定义可能的折行（line-break）。

新的表单元素

标签	描述
<datalist>	定义输入控件的预定义选项。
<keygen>	定义键对生成器字段（用于表单）。
<output>	定义计算结果。

新的输入类型

新的输入类型	新的输入属性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

新的属性语法

HTML5 允许四种不同的属性语法。(以input标签为例)

标签	描述
Empty	<input type=“text” value=“John Doe” disabled>
Unquoted	<input type=“text” value=John>
Double-quoted	<input type=“text” value=“John Doe”>
Single-quoted	<input type=“text” value=‘John Doe’>

新的图像标签

标签	描述
<canvas>	定义使用 JavaScript 的图像绘制。
<svg>	定义使用 SVG 的图像绘制。

新的媒介标签

标签	描述
<audio>	定义声音或音乐内容。
<embed>	定义外部应用程序的容器（比如插件）。
<source>	定义 <video> 和 <audio> 的来源。
<track>	定义 <video> 和 <audio> 的轨道。
<video>	定义视频或影片内容

代码约定

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。而HTML5 在代码验证时会更宽松一点。

通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。

1.推荐使用小写元素/属性名：

混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写

2.建议关闭所有 HTML 元素

3.关闭空元素是可选的

允许

<meta charset="utf-8">

也允许

<meta charset="utf-8" />

但是斜杠（/）在 XHTML 和 XML 中是必需的。

4.推荐属性值加引号：

如果属性值包含值，则必须使用引号
混合样式绝对不好
加引号的值更易阅读

5.请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

6.等号两边的空格是合法的

7.请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块。

为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素

8.在 HTML5 标准中，能够省略(但是不推荐省略) <html> 标签和 <body> 标签。

9.使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

Canvas

1.什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.创建Canvas元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度

<canvas id="myCanvas" width="200" height="100"></canvas>

3.通过js来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");
//然后创建context对象
var cxt=c.getContext("2d"); 
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//下面的两行代码绘制一个红色的矩形
//fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

SVG

1.什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

2.SVG的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

3.把SVG直接嵌入HTML页面

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Canvas与SVG比较

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

	SVG	Canvas
1	不依赖分辨率	依赖分辨率
2	支持事件处理器	不支持事件处理器
3	最适合带有大型渲染区域的应用程序（比如谷歌地图）	弱的文本渲染能力
4	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）	能够以 .png 或 .jpg 格式保存结果图像
5	不适合游戏应用	最适合图像密集型的游戏，其中的许多对象会被频繁重绘

多媒体

Web 上的多媒体指的是音效、音乐、视频和动画。

（可以用很多种方法在网页中播放音频或视频）

1.https://www.jb51.net/html5/432061.html

2.参考W3Cschool离线手册关于html部分

丁一9527

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于HTML5的简要概述

HTML5HTML5 是最新的 HTML 标准（HTML5 中默认的字符编码是 UTF-8）。HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。新特性新的语义元素，比如 <header>, <footer>, <article>,
复制链接

扫一扫

专栏目录