最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

前端技术电子书下载_《高级Web标准解决方案》

XAMPP下载 admin 48浏览 0评论

eu075

作者:[英]安迪巴德 , [瑞典]埃米尔比约克隆德
译者:李松峰

本书是CSS设计经典图书升级版,结合CSS近年来的发展,尤其是CSS3和HTML5的特性,对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧,并讨论了如何实现稳健、灵活、无障碍访问的Web设计,以及在技术层面如何实现跨浏览器方案和后备方案。本书还介绍了一些鲜为人知的高级技巧,让你的Web设计脱颖而出。

本书特色
“本书作者不但对CSS设计的底层技术和方法有着深刻的理解,而且更善于将这些知识娓娓道来。在跨浏览器支持问题上,无人可望其项背。”——Molly E. Holzschlag,Web标准项目负责人,W3C HTML工作组专家

CSS作为Web标准的一部分,是现代网页设计中必不可少的关键元素。鉴于CSS标准化的快速发展,想要成为CSS高手,打造出令人惊艳、辨识度高的网站,就必须充分了解当前CSS规范各模块的新特性、新技术和新思想。

本书是经典CSS参考指南,自第1版出版至今一直畅销不衰。第3版针对当前浏览器支持度足够好的CSS特性全面改写,着眼于如何为更大、更复杂的网站编写优雅、巧妙、易维护的代码。两位作者均是技术与写作才能俱佳的开发高手,他们将自己对现代CSS实践的深刻理解融入书中,结合大量复杂实现情景,清晰展示了如何利用新技术写出高度灵活、易维护和可扩展的代码,并让这些代码在不同浏览器和不同平台上跑起来。

1、给网页添加样式的基础知识
2、基本的网页排版技术
3、通过背景、阴影、边框等属性美化元素盒子
4、常见内容布局技术及其应用场景
5、页面布局的系统方法及网格的使用
6、响应式Web设计细节剖析
7、表单与表格的样式化,让网页交互和复杂数据展示助力Web应用
8、在空间和时间维度上操作元素:变换、过渡与动画
9、混合模式、滤镜、蒙版等高级特效
10、CSS开发实践中的质量控制与流程

目录

前言

第1章 基础知识

第2章 添加样式

第3章 可见格式化模型

第4章 网页排版

第5章 漂亮的盒子

第6章 内容布局

第7章 页面布局与网格

第8章 响应式Web设计与CSS

第9章 表单与数据表

第10章 变换、过渡与动画

第11章 高级特效

第12章 品控与流程

好了,废话不多说,进入正文,开启《精通 CSS》云陪读之旅。

笔者会按照原书的内容结构阅读并总结,也会适当地加入自己的见解与大家一起分享。

1.1 编写可维护性高的代码

代码可维护性的重要性就不赘述了,相信大家都知道代码是要可读、可维护的,毕竟俗话说的好:“你的代码是给人读的,而不是给机器读的。”

CSS 是随着代码量增加而最难保持可维护性的语言之一。即使网站规模不大,样式表也会很快变得不可控制。

不过 CSS 也在不断地弥补这一问题,逐渐引入了变量、方法等。不过在兼容性方面可能还存在一些问题。

比较推荐的是使用CSS 预处理器,如 PostCSS、LESS、SCSS。这些预处理器基本都支持变量、运算、函数、自动前缀等功能。能够使我们更好地维护 CSS 代码。

此外,还推荐大家选择并使用一种 CSS 方法论,如(BEM[1],OOCSS[2],SUIT[3],SMACSS[4],ITCSS[5],Enduring CSS[6]等)。使用统一的方法论能够帮助大家形成统一的风格,维护很好的代码结构,如果你还没有使用,就赶快用起来吧。

1.2 HTML 与 CSS 简史

身为前端,我们应该都听过这个。前端三宝,HTML 负责结构,CSS 负责样式与表现,JavaScript 负责逻辑控制。其实这是经过一定的发展和沉淀之后所形成的较好的实现。

  1. 在 1990 年,Tim Berners-Lee 发明 HTML 时,主要是为了规范科研文档的格式。这时 HTML 是一个简单的标记语言,为文档赋予了基本的结构和意义,包括如标题、列表、定义等标签。
  2. 由于人类是视觉发达的生物,随着发展,出现了更多对于展示效果的支持,如粗体、斜体等。这逐渐造成了元素的滥用,原本用于展示数据的表格(table)却用来布局,块引用(blockquote)被用来缩进文本等。
  3. CSS 就是在 HTML 被滥用之后诞生的,它把 HTML 中表现性的标记提取出来,自成体系,从而达到了结构与表现分离。
  4. 这之后 CSS 和 HTML 分别迅速发展

CSS:

  1. CSS1 在 1996 年成为 W3C 推荐标准,当时只包含字体、颜色、外边距等基本属性。
  2. CSS2 在 1998 年成为推荐标准,增加了浮动和定位等高级特性,以及子选择符、相邻选择符和通用选择符等新选择符。
  3. CSS2.1 在 2002 年发布,在 2011 年才成为推荐标准,主要修正了一些 CSS2 的错误,删掉了兼容性不好的特性。(战线很久,主要是因为 CSS3 制定周期太长,进度缓慢)
  4. 后来 CSS3 采用了完全不同的模式,由于 CSS 日渐庞大,所以分成了一系列级别独立的模块。如果某模块是对之前版本内 CSS 概念的升级,则从 3 级(Level 3)开始命名,如果是新的技术,则从 1 级(Level 1)开始命名。不同的模块进展单独控制。

HTML:

HTML 经历过 4.01 版本,之后衍生出了 XHTML1.0,但由于其过于严格,无法落地,最终被抛弃了,直至最后形成了现在为大家所熟知的 HTML5

个中发展较为复杂,大家有兴趣可以看原文,或者网上搜一下,这里就不搬啦。

另外,大家需要知道一下,HTML 的标准由WHATWG(Web Hypertext Application Technology Working Group,Web 超文本应用技术工作组)制定。

1.3 渐进增强与向后兼容

在 CSS 不断发展的过程当中,逐渐引入了越来越多的功能强大的特性。我们往往深受其吸引,想要用之而后快。但是在尝鲜新特性时,我们要牢记一个概念:渐进增强与向后兼容

所谓渐进增强,就是“首先为最小公分母准备可用的内容,然后再为支持新特性的浏览器添加更多交互优化”。

HTML 和 CSS 语言天生具备渐进增强与向后兼容的特性。

在 HTML,当新定义的input类型,如email/number,如果浏览器不支持,会使用默认的text类型进行展示。

在 CSS 中,针对不能识别的特性,CSS 会直接忽略,而不会报错,所以只要在使用新特性同时,提供后备属性(新属性在后,后备属性在前),则不会有任何不良效果

有了渐进增强,我们在使用新特性的同时又不会影响旧版本的浏览器。何乐而不为呢?

可以通过以下几种方式来实现渐进增强。

1.3.1 厂商前缀

不同厂商会引入针对自己浏览器适用的实验性特性。这些特性通常在规范中并没有或者尚不成熟,但是通过这一方式,我们可以安心的试用这些元素。

通常,不同的浏览器会给这类特性在前面加一个特殊的前缀。-webkit-开头的适用于基于 WebKit 的浏览器,如 Safari/Chrome/Opera;-moz-适用于 Mozilla 的浏览器,如 Firefox;-ms-适用于微软的 IE

值得高兴的是,你不知道这些前缀也没关系,因为如果你用了前面提到的预编译语言,会有通用的插件可以协助我们完成前缀的自动添加,如 autoprefix。

1.3.2. 条件规则

如果希望根据浏览器对于某 CSS 特性的支持情况来提供不同的样式,则可以选择@supports块。这个特殊的代码块称为条件规则,它会检测括号中的声明,且仅在浏览器支持该声明的情况下,才会应用该声明。

如下:

@support (display: grid) {
  /* 在支持网格布局的浏览器中应用的规则 */
}

忧伤的是,条件规则最大的问题就是它本身也是非常新的特性,支持度并不高。

1.3.3. JavaScript 检测

除了 CSS 的条件规则,我们还可以通过 JavaScript 来检测 CSS 特性的支持情况,如使用Modernizr这个库。

1.4 语义化标签

HTML5 之后引入了语义化标签的概念,在这之前,为了提高代码的可读性和可维护性。我们可以通过为标签添加 class 属性来提高标签的含义。有了语义化标签后,class 属性可以单纯地作为样式的接入点,更好地描述标签的分类即可。

ID 主要用于在文档中标识标签,通常不用于添加样式。

1.4.1 什么是语义化标签?

不同的元素有着特定的含义,语义化标签是指在正确的地方使用正确的元素,从而创建有意义的文档。

1.4.2 为什么要用语义化标签?

有语义的标签可以确保更多的人能够使用,不管是最新的 Chrome,还是 Lynx 这样只能处理文本的浏览器,甚至是屏幕阅读器或盲文点触设备。另外,有语义的标签页更容易被机器识别,如搜索引擎爬虫,可以提高页面搜索的准确性和排名。

1.4.3 有哪些语义化标签?

笼统的来说,除了div/span这两个无明确语义的元素以及b/i这类被保留下来的表现性标记,其他的元素都可以称为语义化标签。

只要元素有明确的语义就叫做语义化标签,如常见的p是段落的意思,ul/ol表示无序列表和有序列表。

语义化标签在多数浏览器中使用是没问题的。但 IE8 及之前的版本不会给自己不认识的元素应用格式。这时我们需要借助 JavaScript“腻子”或者说“垫片”来解决,可以使用:https://github.com/afarkas/html5shiv[8]

最后,虽然推荐使用有语义的标签,但是在确实没有语义的情况下,还是要使用div/span,一个用于块级元素,一个用于行级元素。如一个元素只用作多个元素的包装元素时,可以用div

还记得那个经常被问到的问题吗?strongem的区别是什么?

它们都表示强调,但是em表示内容的强调,会改变句子的含义。类似于语言中的重读,如“和我到办公室走一趟”和“你和我到办公室走一趟”。strong表示重点强调,表示强烈的重要性、严重性或内容的紧迫性。这个强调不会改变句子的含义。

1.4.4 扩展 HTML 语义

除了 HTML 标签本身具有的语义外,web 开发者还通过其他方式拓展了 HTMl 的语义。

其中之一就是现在备受重视的无障碍访问。我们可以利用无障碍富因特网应用(ARIA,accessible rich Internet application),为不同的标签添加role角色属性。如banner/form/main/search/navigation等,可以供辅助访问设备使用。

其次应用比较广泛的是微格式,它主要是基于 iCalendar 和 vCard 等已有数据格式。就是会使用一些广泛应用的数据格式,来表示某些有语义的内容。类似于组件的概念。

最后,还有一种扩展是微数据,它与微格式不同,它可以用来标识任意类型的数据,只会定义一些语法来表示数据结构,可以通过这些语法组成不同的结构。类似于一类定义格式的语法,而微格式则是具体的结构化数据。

1.5 验证

如果你对自己的 HTML 代码是否语义化不够自信,或者对自己的 CSS 代码是否有误不能确认,那么你可以使用相对应的验证器来进行验证。

对于 HTML 验证,W3C 提供了HTML 验证器[9],此外我们还可以通过浏览器的开发者扩展来进行验证,也可以在自动构建环节加入相关验证。

对于 CSS 验证,W3C 也提供了CSS 验证器[10]

值得注意的是,尽信书不如无书,我们可以借助验证器来发现一些问题,但不要因为验证失败就气馁。因为很多好的网站也会验证失败,可能是引用了一些第三方的内容,或者是使用了实验性的 CSS 特性,也可能验证器的更新没有跟上等等。


第一章阅读总结完毕,本来只给第一章留了很短的时间,但是其实第一章并不简单,因为其很有概括性,想要不照搬原文(那样的话太长)的同时,还能够讲清楚,还是需要花点功夫的。

最后,虽然是陪读,但是收获还是满满的。你呢?

高级Web标准解决方案(第2版).pdf下载

链接:https://pan.baidu.com/s/13yKehUTlwoQ-kiKRhK69sw
提取码:d533
复制这段内容后打开百度网盘手机App,操作更方便哦

转载请注明:XAMPP中文组官网 » 前端技术电子书下载_《高级Web标准解决方案》