《HTML5和CSS3快速参考》——第1章 走进HTML51.1 概述

简介:

本节书摘来自异步社区《HTML5和CSS3快速参考》一书中的第1章,第1.1节,作者: 【美】Sergey Mavrody 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 走进HTML5

1.1 概述

本书简介
在Web世界中,HTML和CSS无疑是最重要、最基本的两种语言了,它们一同支撑起了当下绝大部分的Web站点和Web应用程序。而最新的HTML5被认为是Web的未来,它为我们提供了一系列简单的富互联网应用服务(Rich Internet Application)1插件功能,以及更容易的开发方式和更好的用户体验。

今天,我们总能在网络上找到各种关于HTML5的参考资料、教程及相关技巧,其中也不乏一些重点讨论HTML5某些具体特性的书籍。但我们总会觉得缺少一本信息全面而简洁的便捷型参考书。

而本书就是这样一部为专业Web设计人员及开发人员准备的技术词典。这里汇总了3 000多页的(X)HTML5和CSS3的标准规范,其中涵盖了那些最基本的通用概念和规范,包括标签、属性、属性值、对象及其属性与方法、事件以及一系列API。

我们将会涉及以下话题:

  • HTML5概述;
  • HTML及XHTML5的语法规则;
  • 文档语义结构;
  • HTML5元素及其属性汇总;
  • HTML5表单;
  • 全局属性与事件;
  • CSS3属性汇总;
  • HTML5 API,包括Canvas、SVG、Video、Audio、Web Workers、Web Sockets、Microdata、Geolocation、Web Storage等。

总之,作者的目标是构建出一份全面的、一站式(one-stop)的信息参考资料库,并同时力求简明易读、结构清晰。

什么是HTML
众所周知,“HTML”是超文本标记语言(HyperText Markup Language)的首字母缩写。它是互联网(world wide web)中最主要的标记语言,通常用来表示组成Web文档的各种结构元素,其中包括文档头、段落、表格、页脚等。

除此之外,HTML标签通常会结合CSS(Cascading Style Sheets,层叠样式表)技术来展现其要表述的可视化内容。CSS可以帮助我们将一些可视化元素与具体的HTML内容分隔开来,例如图层、颜色、字体等。

HTML还允许我们在页面中内嵌交互式表单、图片、视频、音频等对象。此外,我们还可以在HTML代码中嵌入类似于JavaScript脚本这样的代码文件,这能赋予相关页面某种动态化行为。

HTML的主要版本

  • 第一份HTML文档叫作“HTML Tags”,由Berners-Lee于1991年发布。
  • HTML 4.0是由国际互联网协会(W3C)于1997年发布的。该规范为我们提供了三种不同层次的选项,分别为transitional、strict及frameset。
  • XHTML 1.0规范代表的是一个更为严格的HTML标记子集,发布于2000—2002年。它主要沿袭了XML文档的语法规则。
  • XHTML 2.0工作草案是2002—2006年间陆续发布的。由于该标准在制定过程中总试图与过去彻底决裂,牺牲了大量的向后兼容性,因而最终导致W3C决定停止这一标准草案的所有开发工作,从而将目标转向了更为灵活的HTML5标准。
  • HTML5的第一份草案由W3C于2008年公开发布。
  • XHTML5的开发工作是从2009年以后开始的。

HTML5
HTML5的开发工作始于2004年WHATWG小组(Web Hypertext Application Technology Working Group,网页超文本应用技术小组)的一次非正式专家会议。该专家小组由Apple电脑、Mozilla基金会以及Opera软件的专家共同组成。并且由来自Google公司的Ian Hickson负责领导HTML5的标准制定工作,最终于2007年向国际互联网协会(W3C)提交并通过了WHATWG版的HTML5规范。

  • 比起XHTML 2.0,HTML5标签能够更好地实现对HTML 4与XHTML 1.0的向后兼容。
  • HTML5引入了许多新的元素,包括一些用于语义替换(semantic replacements)的一般性HTML元素,例如新的布局元素、、、、等。同时,该标准也弃用了许多HTML 4中的元素,即不再鼓励使用它们。
  • HTML5还引入了许多额外的插件功能,例如标准化的视频与音频接口、栅格图像、本地型数据库、离线模式、多线程JavaScript脚本以及跨文档通信等。

XHTML5
XHTML5是HTML5被XML化后的产物,该型文档严格支持XML MIME(如application/xhtml+xml)。此外,XHTML5在语法上也有更严格的要求。在XHTML5文档中,HTML5的文档声明通常是可以省略的。而且我们还可以通过这种扩展,对HTML5页面使用某些基于XML的技术,例如SVG和MathML。

CSS3
新版CSS的引入,更是进一步保证了我们在模块发布方面的灵活性。CSS3的新特性所涵盖的范围非常广,主要包括:

  • 选择器选择元素的方式将更为具体,包括对属性与属性值的匹配能力、用于结构化元素的伪类、用于URL类标签的伪类、用于选择类元素标签(例如radio、checkbox等元素)的伪类等。
  • 一些文本效果与布局样式,包括链接文本、“空白”符2以及说明性文本等样式。2
  • 某些用于媒体分页和内容生成的工具。在媒体分页方面,它有了更多的选项,例如页眉、页脚、页码、脚注以及交叉引用等。
  • 其多列布局(Multi-Column Layout)属性为网页提供多列式布局的能力。
  • 它还提供了专门用于首字母以及首行的伪类。
  • Ruby模块还提供了为单词加注下标的能力,这适用于某些亚洲地区的脚本。
相关文章
|
12月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
886 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
789 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1232 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
309 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
663 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
304 24
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
924 7
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
442 6
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
459 5

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    513
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    398
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    395
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    257
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    509
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    681
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1213
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    272
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1008
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    471