HTML5学习笔记简明版（1）：HTML5介绍与语法 -H5教程-PHP中文网

首页

web前端

H5教程

HTML5学习笔记简明版（1）：HTML5介绍与语法

黄舟

Jan 21, 2017 pm 04:28 PM

HTML5介绍

HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如c787b9a589a3ece771e842a6176cf8e9网站导航块和c37f8231a37e88427e62669260f0074d）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92，总结而言，有如下几大特点：

取消了一些HTML4里过时的元素和属性标记

其中包括纯粹显示效果的标记，如240cb830ca84ebaabbd07850110b414d和bacbf9e1ad7f40415ce1670e31edfee3，它们已经被CSS取代。HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

内容与展示分离

b 和 i 标签依然保留，但它们的意义和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

新增加一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

全新的、更合理的标签

多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

本地存储

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。

Canvas对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

新的API扩展

为HTMLDocument和HTMLElement借口提供了新的API扩展。

HTML5取代Flash和Silverlight

语法(Syntax)

1 文档媒体类型

HTML5定义的HTML语法大部分都兼容于HTML4和XHTML1，但是也有一部分不兼容。大多数的HTML文档都是保存成text/html媒体类型。

HTML5为HTML语法定义了详细的解析规则（包括错误处理），用户必须遵守这些规则将它保存成text/html媒体类型。如下是一个符合HTML语法规范的例子：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5为HTML语法也定义了一个text/html-sandboxed媒体类型，以便可以host不信任的内容。

其它能够用在HTML5的语法是XML，它兼容于XHTML1。用XML语法的话需要将文档保存成XML媒体类型，并且根据XML的规范需要设置命名空间（namespace）为http://www.w3.org/1999/xhtml。

下面的例子文档符合HTML5里的XML语法规范，需要注意的是XML文档必须保存成XML媒体类型的，例如application/xhtml+xml或者application/xml。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

2 Character Encoding

HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：

在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：0d94b2dad07259293dd606022eaa23d8表明该文档是UTF-8格式的。它是替换原有的8d29369bdb665a142cf8029391b2aae6语法声明，尽管原有的语法依然可用，但在HTML5里不推荐使用。

对于HTML5里的XML语法，依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的，并且在XML里是可选项，因为XML媒体格式的文档一直就是在标准模式下处理的。

DOCTYPE的声明方式是8b05045a5be5764f313ed5b9168a17e6，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了，仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了，浏览器会为8b05045a5be5764f313ed5b9168a17e6做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

更多复杂的组合标记也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。

5 其它

HTML5已经原生支持IRI了，尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法，将会更新为空字符串，以告诉浏览器是一个未知的语言，作用和XML里的xml:lang一样。

以上就是HTML5学习笔记简明版（1）：HTML5介绍与语法的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。