Superlin的读书笔记

第一章 了解HTML

• 12bet,将网页保存成Unicode
• 一定要指定好DOCTYPE，它能告诉浏览器你的HTML版本，这样能够决定浏览器如何渲染页面
• 12bet,在使用h1~h6标题时，不要跳过标题的层次。正确使用标题能够保证语义正确，且有助于优化搜索引擎的搜索结果。搜索引擎是根据标题来排列信息的重要性的
• title属性用于提供关于链接的额外信息，当用户鼠标滑过有title属性的链接时，浏览器会显示附有标题内容的提示信息
• 12bet,当所指向的页面在你的网站外部时，使用绝对链接；当所链接的页面在网站内时，使用相对链接。

第二章 使用CSS设置样式

• link元素由四部分组成

  1. link云啊苏告诉浏览器，需要插入一个文件到文档中
  2. href告诉浏览器文件的位置
  3. type属性告诉浏览器引用的是哪那一种媒体
  4. rel属性规定了当前文档与被链接文档之间的关系

• 12bet,先尝试语义化的HTML标签来匹配内容，如果没有，再尝试使用div和span

• 微格式：HTML元素描述了被其标签包裹的内容的额种类，但是内容有许多种，而HTML只有约100种，所以很多内容或相关联的信息没有合适的HTML情况。而微格式就是一个设计库，提供了诸如商务卡片、食谱、评论、简历等内容的标记模板。Goolge能够理解一些微格式
• 12博体育,可以通过IE的条件注释专门为IE引入polyfill
• 12博体育,第一个块级元素在下面一个块级元素的垂直方向上，而内联元素就以水平文本流排列在一个块中。元素的默认定位方式称为文档的常规流。
• 当元素使用绝对定位时，会脱离常规流，并根据它的偏移属性相对于它的容器块的边界进行定位

第三章 网页排版

字体

• 衬线（serif）字体在笔画末端有小的装饰（衬线），被认为是更为传统的字体。Times New Roman就是典型的代码。Georgia则是专门为提升屏幕易读性而设计的字体。
• 无衬线（sans serif）字体在笔画末端没有装饰。Arial是一款典型的sans serif字体。Verdana则是专门针对屏幕而设计的sans serif字体
• cursive字体为手写式的字母，comic sans是cursive的例子
• fantasy字体主要用于装饰，在显示或强调上做的很好，但不适用于长文本块。Impact就是代表
• 等宽字体的字母宽度相同。Courier和Monaco就是等宽字体，经常用来展示计算机代码

尺寸

• 像素并不始终如一
• 设计师更倾向于使用em和rem，相对单位，更加有好，适用于不同的设备和屏幕阅读器
• font-weight用于控制字体的粗细，100~900之间，数值越大，越粗
• font-style用于控制字体的样式，Oblique字体是正常的字体，但会有一点倾斜。Italic实际上是单独的字体，但大多数现代浏览器渲染出来的italic和oblique效果相同。
• text-decoration可以给文本添加效果，有underline、overline、line-through
• letter-spacing可以调整字母之间的水平间距。line-height则能控制行高。对于网页而言，1.5的行高值比较合适

安全字体

大多数桌面电脑上都安装有某些共有的字体，称为网页安全字体

桌面电脑上的安全字体：

• Arial——Sans serif
• Arial Black——Sans serif
• Comic Sans MS——Cursive
• Courier New——Monospace
• Georgia——Serif
• Helvetica——Sans serif
• Impact——Sans serif
• Tahoma——Sans serif
• Times——Serif
• Times New Roman——Serif
• Trebuchet MS——Sans serif
• Verdana——Sans serif
• Wingdings——Symbol

移动安全自体

• Arial——Sans serif
• Helvetica——Sans serif
• Courier/Courier New——Monospace
• Georgia——Serif
• Times——Serif
• Times New Roman——Serif
• Verdana——Sans serif

CSS允许在网页中嵌套字体，嵌套过程允许网页设计师引入网站访客电脑上没有安装的字体，并使它们在屏幕上正确渲染。

• 通过@font-face属性，引入外部字体文件，并给字体名称设置属性值
• 自定义字体使设计更灵活，但会减缓网页的加载速度

第四章 网络环境

• CSS3的multi-column允许将文字设置成多栏
• border-image允许在HTML元素周围包裹图像
• CSS3的gradients允许为背景设置颜色渐变
• CSS3的text-shadows允许在文本上防止一个或多个阴影
• CYMK主要针对于印刷，而不是屏幕显示，在创建图像或者构建布局时，应坚持使用RGB
• W3C推荐使用标准的视角像素大小
• 可访问性问题：
  1. 手腕有疾病的人比较喜欢通过键盘导航
  2. 计算机操作能力强的人喜欢大一些的点击区域，并希望表单不会因为填写速度较慢而超时
  3. 有听力缺陷的人，依靠字幕或者文本
  4. 被诊断为光敏癫痫的人希望避开闪烁的元素
  5. 有对于学习障碍的人，可以通过优秀的排版、自选字体和背景颜色以及包含内容的音频格式为其提供帮助。内容音频同样可以帮助弱视人群
  6. 对于有认知障碍的人，通过简单的导航和无注意力分散的动画可以使他们有更好地体验
  7. 最佳实践还包括使用alt属性，清晰的图片，对所有link标签使用title属性，合适的HTML结构和优雅降级
• 使用Google的Analytics做网站分析
• 浏览器对于CSS特性支持晨读不通。而且浏览器在展示没有任何CSS格式化的空白时，也不一样。所以尽量将浏览器样式返回到一个基本和公共的基础。这就是重置样式的工作了
• 可以使用Normalize.css为HTML元素的默认渲染创建一个紧密的规范
• 可以使用prefixfree的js文件，放在网页的head元素中，特殊前缀会自动应用到用户浏览器中
• 可以使用像BrowserStack一类的服务来快速而是不同的平台、浏览器分辨率和连接速度

第五章 网页中的颜色

• 加法三原色：红、绿、蓝
• 减法三原色、青色、洋红、黄。通常用于印刷，成为CYMK。混合为黑色，去掉为白色

第六章 网站图像

• 位像素深度越大，图像中的颜色数量越多。但也意味着更大的文件尺寸
• 主要也就是GIF、PNG和JPEG
• GIF是索引位图格式，可以使用固定的颜色列表，其可使用了可变的8位格式，也就是说，使用了8位和256色或更少的颜色，适合色彩有限的图像，不能展示较为复杂的图像。GIF是无损压缩
• JPEG则色彩丰富，适合存储照片和其他色彩丰富的图像，但对于一个简单的图像，使用JPEG就不合适了。JPEG是高度压缩的格式，它是一种有损压缩
• PNG提供了两种方式，一种类似GIF，一种类似JPEG。前者同样是无损格式，但比GIF更好
• 抖动，索引PNG和GIF使用抖动来转化一张全彩图像的格式。全彩的PNG文件体积很大，可以生成一个平衡了图像清晰度和文件大小的合理压缩图像。一个抖动的索引PNG保留了像素画外观，从而避免了全彩的副本
• SVG（可伸缩向量图形）是一个独特的图像文件格式，因为SVG图像是由重复的XML文本片段构成，他们也是无损的。它不是基于像素的，所以放大缩小不会有影响