0

0

简单整理HTML5的基本特性和语法_html5教程技巧

php中文网

php中文网

发布时间:2016-05-16 15:45:49

|

1846人浏览过

|

来源于php中文网

原创

html5 概述
html5 是 html 标准的下一个重要版本,用来替代 html 4.01,xhtml 1.0 以及 xhtml 1.1。html5 也是一种在万维网上构建和呈现内容的标准。

HTML5 是万维网联盟(W3C)和网页超文本技术工作小组(WHATWG)合作的产物。

这一新标准中加入了视频播放和拖放等特性,过去这都依赖于第三方浏览器插件,比如 Adobe Flash,Microsoft Silverlight 以及 Google Gears。

浏览器支持
最新版 Apple Safari,Mozilla FireFox 和 Opera 支持大部分 HTML5 特性,IE9 也支持一些 HTML5 的功能。

预装在 iPhones,iPads 和 Android 手机上的手机浏览器都对 HTML5 有良好的支持。

立即学习前端免费学习笔记(深入)”;

新特性
HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性:

新的语义化元素: 比如

表单 2.0: 改进了 HTML Web 表单,为 标签引入了一些新的属性。

持久的本地存储: 为了不通过第三方插件实现。

WebSocket: 用于 Web 应用程序的下一代双向通信技术。

服务器推送事件: HTML5 引入了从 Web 服务器到 Web 浏览器的事件,也被称作服务器推送事件(SSE)。

Canvas: 支持用 JavaScript 以编程的方式进行二维绘图。

音频和视频: 在网页中嵌入音频或视频而无需借助第三方插件。

地理定位: 用户可以选择与我们的网页共享他们的地理位置。

微数据: 允许我们创建 HTML5 之外的自定义词汇表,以及使用自定义语义扩展网页。

拖放: 把同一网页上的条目从一个位置拖放到另一个位置。

向后兼容
HTML5 被设计为尽可能的对现有浏览器向后兼容。新特性都是建立在现有特性的基础上,并且允许我们为旧浏览器提供备用内容。

建议使用少量的 JavaScript 代码检测单个 HTML5 特性的支持度。

HTML5 语法

HTML5 有“自己的” HTML 语法,它与已经发布在网络上的 HTML 4 以及 XHTML1 文档兼容,但是不兼 HTML 4 中更复杂的 SGML 特性。

HTML5 并没有 XHTML 中需要小写标签名,属性要带引号,属性必须有一个值以及必须闭合所有空元素的语法规则。

但是 HTML5 更具灵活性,支持下列形式:

标签名大写。
属性的双引号可选。
属性值可选。
闭合空元素可选。
DOCTYPE
在老版本的 HTML 中,DOCTYPE 很长,因为 HTML 语言是基于 SGML 的,需要引用一个 DTD。

HTML5 作者可以使用简单的语法来指定如下形式的 DOCTYPE:

Matlab语言的特点 中文WORD版
Matlab语言的特点 中文WORD版

本文档主要讲述的是Matlab语言的特点;Matlab具有用法简单、灵活、程式结构性强、延展性好等优点,已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出,已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
XML/HTML Code复制内容到剪贴板
  1. html>  

上述语法不区分大小写。

字符编码
HTML5 作者可以使用简单的语法指定字符编码,如下所示:

XML/HTML Code复制内容到剪贴板
  1. meta charset="UTF-8">  

上述语法不区分大小写。

<script> 标签<br></script>常见的做法是给 script 元素添加一个值为 "text/javascript" 的 type 属性,如下所示:

XML/HTML Code复制内容到剪贴板
  1. script type="text/javascript" src="scriptfile.js">script>  

HTML5 移除了所需的额外信息,我们可以使用如下所示的简单语法:

XML/HTML Code复制内容到剪贴板
  1. script src="scriptfile.js">script>  

标签
目前为止我们这样编写

XML/HTML Code复制内容到剪贴板
  1. link rel="stylesheet" type="text/css" href="stylefile.css">  

HTML5 移除了所需的额外信息,我们可以使用如下所示的简单语法:

XML/HTML Code复制内容到剪贴板
  1. link rel="stylesheet" href="stylefile.css">  

HTML5 元素
HTML5 元素使用起始标签和结束标签标记。标签使用尖括号之间的标签名限定。

起始标签和结束标签的区别在于后者标签名前面包含一个斜杠。

下面是一个 HTML5 元素示例:

XML/HTML Code复制内容到剪贴板
  1. p>...p>  

HTML5 标签名不区分大小写,可以全部大写或者混合使用,虽然最常见的约定是始终使用小写。

大多数元素都包含一些内容,比如

...

包含一个段落。但是,有些元素不能包含任意内容,它们被称作空白元素。比如,br,hr,link 和 meta 等等。

HTML5 文档
为了得到更好的结构,引入了下面的标签:

section: 这个标签表示一个通用的文档或者应用程序节。它可以和 h1-h6 一起使用来表示文档结构。

article: 这个标签表示文档内容的一个独立块,比如博客条目或者报纸上的文章。

aside: 这个标签表示与页面其他部分略微相关的内容块。

header: 这个标签表示一个节的头部。

footer: 这个标签表示一个节的脚注,可以包含作者,版权等信息。

nav: 这个标签表示用于导航文档的节。

dialog: 这个标签可以用于标记会话。

figure: 这个标签可以用于关联标题和某些嵌入内容,比如图表和视频。
一个 HTML5 文档的标记看起来就像下面这样:

XML/HTML Code复制内容到剪贴板
  1. html>  
  2. html>  
  3. head>  
  4.    meta charset="utf-8">  
  5.    title>...title>  
  6. head>  
  7. body>  
  8.   header>...header>  
  9.   nav>...nav>  
  10.   article>  
  11.     section>  
  12.       ...   
  13.     section>  
  14.   article>  
  15.   aside>...aside>  
  16.   footer>...footer>  
  17. body>  

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

28

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

23

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

27

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

16

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

18

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

164

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

309

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.9万人学习

CSS教程
CSS教程

共754课时 | 38.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号