《HTML5开发手册》——导读

简介:


<a href=https://yqfile.alicdn.com/bc3b60e125a7b28f8f1defba2e35a5307f95667d.png" >

前言

HTML(超文本标记语言)是构建网页的核心语言。在过去的20多年里,无数的开发者编写着 HTML。在 HTML 诞生的前几年,这门语言经历了翻天覆地的变化,直到 1990 年后才相对稳定了起来。不过,现在一切开始改变。

HTML的简史
在1991年,Tim Berners-Lee撰写了一篇名叫“HTML Tags”(HTML标记)的文档。文档中描述了20个可以用来编写Web文档的标记。到1993年中期,IETF(因特网工程任务组)发布了第一个HTML规范的提议,该提议最后过期。而直到1995年11月第一个正式规范才得以发布,并且是HTML 2.0的规范,而不是HTML 1.0。

HTML 3.2在1998年发布。紧随的HTML 4也在1998年发布。HTML 4一共有3个变体:严格(Strict)、过渡(Transitional)、框架(Frameset)。在这个时期里,浏览器开发商,比如Microsoft、Netscape,开始以略有不同的方式实现HTML,由此引燃了第一轮浏览器大战。

XHTML
在HTML 4发布后,W3C(万维网联盟)决定停止HTML的进化与发展,并且开始将工作转向XHTML 1.0(可扩展超文本标记语言),该语言基于XML,并被当作是 Internet的未来之星。实际上,XHTML并没有引入新的元素,规范也与HTML 4相一致。但是,开发者必须服从新的语法规则:标记必须封闭或者是自封闭的,而且属性值也必须加上引号。这就需要更为严格紧凑的编码规范,并确保开发者具有一致的编码风格。在2001年的这段时间里,随着博客的兴起,以及人们对Web标准重要性的日益关注,CSS(层叠样式表)开始展露头角。

2002年伊始,W3C发布了XHTML 1.1的草稿。虽然XHTML 1实际上是HTML中夹杂了小部分的XML,而XHTML 1.1实质上则是XML。然而XHTML 1.1被认为太过于超前,而且并不向后兼容。也就是说,如果使用XHTML 1.1开发网站,则该网站无法适用于当时或者更落后的浏览器。

这导致Web社区以及浏览器开发商,甚至于W3C自己的担忧。并不是所有人都坚信XML将是Web未来的标记语言。

Web表单、Web应用和WHATWG
在2004年,来自于Apple、Mozilla和Opera的员工开始以个人的名义研究规范,目的是为了创造出可以向后兼容的代码,这些代码可以用来创建Web应用。W3C拒绝了这个提议。因此,命名为WHATWG(网页超文本技术工作小组)的新兴小组得以建立。

WHATWG开始在Web表单2.0和Web应用1.0方向上发挥作用。这些规范的编辑者为Ian“Hixie”Hickson。与规范相关的问题与构思都是通过一个公共的邮件列表进行提交的。虽然在初期,WHATWG只在Web表单2.0和Web应用1.0这两个规范上发挥作用,但是后来二者合而为一,成为HTML5。
前言
[第1章 HTML5中新的结构元素
1.1 初学者“菜谱”:建立HTML5初始文件 ](https://yq.aliyun.com/articles/97319)
1.2 这些新元素从何而来
1.3 初学者“菜谱”:使用header元素建立网站标头
1.4 初学者“菜谱”:使用hgroup元素组合标题
1.5 初学者“菜谱”:使用nav元素创建导航
1.6 中级“菜谱”:使用新article元素
1.7 中级“菜谱”:使用section元素对内容分组
1.8 初学者“菜谱”:使用aside标记创建侧边栏
1.9 初学者“菜谱”:使用footer元素
1.10 中级“菜谱”:使用HTML5大纲工具验证结构
1.11 高级“菜谱”:使用所有新标记建立新闻页面
1.12 高级“菜谱”:使用所有新元素来建立搜索结果页面
1.13 小结
[第2章 组合、文本级和重新定义的语义
2.1 初学者“菜谱”:使用figure和figcaption元素插入图片和图注 ](https://yq.aliyun.com/articles/97419)
2.2 初学者“菜谱”:使用time元素插入日期和时间
2.3 初学者“菜谱”:使用details元素创建可伸缩控件
2.4 初学者“菜谱”:使用address元素提供通信信息
2.5 初学者“菜谱”:使用mark元素高亮文本
2.6 初学者“菜谱”:使用s元素显示不准确或不相关的内容
2.7 现存元素的变化
2.8 初学者“菜谱”:为多个元素添加相同的超链接
2.9 中级“菜谱”:利用Microdata添加语义信息
2.10 中级“菜谱”:在HTML5中使用WAI-ARIA
2.11 高级“菜谱”:编写带有评论的文章页面
2.12 小结
第3章 应对浏览器的HTML5支持
第4章 CSS3新布局和样式技巧
第5章 HTML5 Web表单
第6章 Canvas绘图
第7章 HTML5嵌入视频
第8章 HTML5嵌入音频
第9章 修改浏览器历史记录
第10章 Geolocation API位置感知
第11章 客户端存储
第12章 通信与线程
第13章 HTML5中的浏览器体验
第14章 使用本地文件
第15章 整合设备数据

相关文章
|
2月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
40 0
|
3天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
4天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
4天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
4天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
4天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
4天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
4天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。
|
19天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册