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可以给文本添加效果,有underlineoverlineline-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文本片段构成,他们也是无损的。它不是基于像素的,所以放大缩小不会有影响