前端-书籍推荐
Posted zjffun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端-书籍推荐相关的知识，希望对你有一定的参考价值。
因为曾经在高中买来《C Primer Plus》和大学买来的《Clean Code》（挑战自己买的英文版的结果就啃了一点）给我一种经典的书都特别厚的一本就够读大半年的感觉。加上刚上大学图便宜买的有关做网站的旧书（应该是Table布局和Dreamweaver比较火的时代的书，这些书倒是很薄）让我一度认为做网页不就是table然后tr、td什么的套呗，高大上点不就是div+CSS嘛有什么大不了，给我设计好什么网页不都ok能做出来么？这种感觉。然后看网络课程，在网上找资料学习后才发现以前的自己太逗了，之后就一直靠网络课程、MDN、博客、百科这些渠道学习，但一想到网上大牛们评价特别高的书还没看过就总感觉少了点什么。最近将这些书看了看，发现以前只知道要这么做比较好的地方现在也更加明白这样做的意义，也纠正了以前理解的一些错误。
我这里我只总结一些我以前掌握不扎实的和我认为比较重要的。
javascript DOM编程艺术 第2版
第5五章 最佳实践
- 平稳退化：
现在基本所有带交互的网站都使用Ajax，SAP也火起来了，平稳退化真是很难实现了（看到第七章发现我之前的观点是错了） - 分离JS
- 向下兼容
- 性能考虑
第6章 案例研究：图片库改进版
键盘访问（提高可访问性）
onclick已经帮我们处理了，eg：下面这个绑定了onclick的按钮鼠标左键点击和tab然后回车一样弹出"clicked"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="alert(‘clecked‘)">"click" me</button> </body> </html>DOM core和HTML-DOM
由于HTML与XML的相似性及差异，JavaScript不仅实现了标准的DOM方法和属性（即由W3C制定的），而且还实现了HTML特有的DOM方法和属性。
DOM Core：标准的DOM方法和属性
HTML-DOM：HTML特有的DOM方法和属性
第7章 动态创建标记
若元素存在只是为了让DOM方法处理他们，那么用DOM方法来创建他们才是最合适的选择
==渐进增强与Ajax==
一开始以Ajax为起点设计网站很难做到平稳退化，但一开始用老式的页面刷新机制设计网站，在此基础上用拦截请求用Ajax技术处理就可以实现平稳退化。（渐进增强：HTML全部完成->CSS全部完成->JS全部完成->网站完成）
==这样得后端也得做一套页面展示（点开链接和平稳退化用），前端不应再页面加载时使Ajax（应该由后端生成）==
第8章 充实文档的内容
不应使用DOM技术将重要内容添加到网页上
现在主流的MVVM框架全是使用JS生成DOM。。
accesskey：快捷键
很多大网站都没见用，FF里要Alt+Shift+c才能使用下面设置的快捷键
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>第11章 HTML5
Modernizr：HTML5/CSS3 特性检测库
HTML5与CSS3基础教程（第8版）
第1章 网页的构造块
文件名和文件夹名
文件名全部使用小写字母，用短横线分隔单词，用 .html 作为扩展名。混合使用大小写字
母会增加访问者输入正确地址以及找到页面的难度
文件夹的名称也应全部用小写字母。关键是保持一致。如果使用小写字母，访问者和创建者就
不必在大写字母和小写字母之间转换浪费时间了
语意
- ==提升可访问性和互操作性==（内容对于借
助辅助技术的残障访问者是可访问的，
同时对于台式机、手机、平板电脑及
其他设备上的浏览器都是可访问的）。 - 提升搜索引擎优化（SEO）的效果。
- 使维护代码和添加样式变得容易。
- （通常）使代码更少，页面加载更快。
万维网的发明者 Tim BernersLee 曾说过一句著名的话：“万维网的力量在于其普适性。让包括残障人士在内的每个人都能访问万维网，是极为重要的一点。”
small
small元素表示的含义是法律声明等条文细则。默认情况下，它比其他的文字显示得小一些，但是==显示小字号并不是使用这个元素的理由==
（以前一直当small是小号字体=_=）
第3章 基本HTML结构
<html lang="language-code">
曾经使用Bootstrap4的时候没找到中文翻译，准备自己翻译一下翻译了两页有点感觉有点多，就往下翻了翻看看到底有多少工作量，然后看见有Translations，点进去一看发现大家基本都知道但很容易忘的一项翻译的人给强调出来了：
HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（中国码农往往直接抄国外站点将lang写成en的小细节也要注意以免贻笑大方)。
注：以前搜过lang相关的里面的规则很复杂的（网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？ - 知乎），但一般国内的页面现在一般还都是zh-CN。
Emmet设置默认生成的lang为zh-CN：
下面代码添加到Emmet的Settings-User
{
"snippets": {
"variables": {
"lang": "zh-CN"
}
}
}h1 ～ h6
- 不要使用 h1 ～ h6 标记副标题、标语以及无法成为独立标题的子标题。
- 创建分级标题时，要避免跳过某些级别，如从 h3 直接跳到 h5。不过，允许从低级别跳到高级别的标题。
- 要依据内容所处的层次关系选择标题级数，而不是根据你希望文字应该显示的大小。
main
main元素是 HTML5 新添加的元素。记住，在一个页面里仅使用一次。
SEO
在 HTML 中，应该将附注栏(aside)内容放在 main 的内容之后。出于 SEO和可访问性的目的，最好将重要的内容放在前面。可以通过 CSS 改变它们在浏览器中的显示顺序。
使用 ARIA 改善可访问性
WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications，无障碍
网页倡议 – 无障碍的富互联网应用，也简称ARIA）是一种技术规范，自称“有桥梁作用的技术” 。
- 使用地标角色
role="xxx" - 给元素添加title
title="xxx"
第8章 操作样式表
@import
@import 指令会影响页面的下载速度和呈现速度，在 Internet Explorer 中影响更为明显。
@media
@media 规则只有screen 和 print（或许还应加上 all）浏览器支持的很好。
第9章 定义选择器
伪元素
- :first-letter：选择元素的第一个字母
- :first-line：选择元素的第一行
:first-line的语法为::first-line。:first-letter的语法为::firstletter。注意，它们用两个冒号代替了单个冒号。这样修改的目的是将伪元素（有四个，包括::first-line、::first-letter、::before和::after）与伪类（如:first-child、:link、:hover等）区分开。
未来，::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。不过，IE9之前的InternetExplorer版本均不支持双冒号。因此，你可以选择继续使用单冒号语法，除非你为IE8及以下版本设置了单独的CSS。
第12章 构建响应式网站
- 创建内容和 HTML
- 移动优先方法
- 逐步完善布局
视觉区域（viewport）
<meta name="viewport" content="width=device-width, initial-scale=1" />
- 视觉区域的宽度会被设成与设备宽度
- 页面的默认缩放级别设成了 100%（换成纵向模式也一样）
兼容旧版 IE
使用Respond.js
第13章 使用Web 字体
@font-face
第17章 视频、音频和其他多媒体
HTML5 并没有提供任何保护媒体内容的方法。因此，如果你很在意对媒体文件的保护，那么暂时不要使用 HTML5 原生多媒体。
附录
图解CSS3核心技术与案例实战
单页Web应用 JavaScript从前端到后端
Web性能权威指南
图解TCP/IP(第5版)
JavaScript设计模式
以上是关于前端-书籍推荐的主要内容，如果未能解决你的问题，请参考以下文章