重学前端html、css篇总结

1. 标签
   1. 大多数时候使用div和span进行开发也是没有任何问题的。
   2. 语义化标签
      1. 适合机器阅读。
      2. 增强标签可读性。
      3. 便于读屏软件读取。
   3. em表示强调
   4. ruby与rt、rp可以做音注的效果
   5. abbr表示缩写
   6. dfn用来包括被定义的名词
   7. code用来包裹代码
   8. pre不需要游览器帮我们排版，自己预先排号版了
2. 样式
   1. at-rule(at规则)——@
      1. @charset “utf-8”; 字符编码，@charset “utf-8”;
      2. @import url(‘xx.css’); 除了@charset的内容不会引入，其他都会被引入
      3. @media print{}; 媒体查询
      4. @page 用于打印文档时的padding，margin设置
      5. @counter-style triangle{
         system: cyclic;
         symbols: >;
         suffix: " ";
         }用于定义列表项的表现
      6. @keyframes定义动画关键帧
      7. @font-face定义字体，icon-font技术就是利用这个技术实现的
      8. @support检查环境的特性，它与media比较类似
      9. @namespace用于跟XML命名空间配和的一个规则，表示内部的CSS选择器都会带上特定的命名空间
      10. @viewport用于设置视口的一些特性，不过兼容性不太好，多数时候被meta代替
   2. qualified-rule普通规则
      1. CSS计算型函数
         1. calc() 支持四则运算允许不同单位进行运算，+ - 与操作数要有空格
         2. max() 取两个数中较大的一个数 width:max(10% + 20px, 300px);
         3. min() 取两个数中较小的一个数
         4. clamp() 给一个值限定一个范围，超出范围外则使用范围的最大值或者最小值
         5. toggle() toggle() 函数在规则选中多于一个元素时生效，它会在几个值之间来回切换，比如我们要让一个列表项的样式圆点和方点间隔出现 ul { list-style-type: toggle(circle, square); }
         6. attr() 函数返回选择元素的属性值，函数允许 CSS 接受属性值的控制。a:after {content: " (" attr(href) “)”;}，在a标签内容之后插入链接
3. head标签里的标签
   1. title
   2. base，base 标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，我比较建议你使用 JavaScript 来代替 base 标签。
   3. meta标签，由name和content属性来定义。
      1. <meta charset="UTF-8" >描述html的编码格式，建议放在第一个
      2. 具有http-equiv属性的meta
         1. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         2. 除了 content-type，还有以下几种命令：content-language 指定内容的语言
         3. default-style 指定默认样式表
         4. refresh 刷新
         5. set-cookie 模拟 http 头 set-cookie，设置 cookie
         6. x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性
         7. content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。
      3. name 为 viewport 的 meta，这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。
         1. <meta name="viewport" content="width=500, initial-scale=1">
         2. width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
         3. height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
         4. initial-scale：初始缩放比例。
         5. minimum-scale：最小缩放比例。
         6. maximum-scale：最大缩放比例。
         7. user-scalable：是否允许用户缩放。
      4. 其他预定义的meta
         1. application-name：如果页面是 Web application，用这个标签表示应用名称。
         2. author: 页面作者。
         3. description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
         4. generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
         5. keywords: 页面关键字，对于 SEO 场景非常关键。
         6. referrer: 跳转策略，是一种安全考量。
         7. theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。
4. 选择器
   1. 
   2. svg中的a标签和html中的a标签的选取问题

      @namespace svg url(http://www.w3.org/2000/svg);
      @namespace html url(http://www.w3.org/1999/xhtml);
      svg|a { stroke:blue; stroke-width:1;}
      html|a { font-size:40px}
      

   3. 伪类
      1. :root伪类表示树的根元素
      2. :empty 伪类表示没有子节点的元素，这里有个例外就是子节点为空白文本节点的情况。
      3. :nth-child 和 :nth-last-child 这是两个函数型的伪类，CSS 的 An+B 语法设计的是比较复杂的，我们这里仅仅介绍基本用法。
      4. :nth-last-child 的区别仅仅是从后往前数。
      5. :first-child :last-child 分别表示第一个和最后一个元素。
      6. :only-child 按字面意思理解即可，选中唯一一个子元素。
      7. of-type 系列，是一个变形的语法糖，S:nth-of-type(An+B) 是:nth-child(|An+B| of S) 的另一种写法。以此类推，还有 nth-last-of-type、first-of-type、last-of-type、only-of-type。
   4. 链接与行为伪类选择器
      1. :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。
      2. :link 表示未访问过的链接。
      3. :visited 表示已经访问过的链接。
      4. :hover 表示鼠标悬停在上的元素。
      5. :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。
      6. :focus 表示焦点落在这个元素之上。
      7. :target 用于选中浏览器 URL 的 hash 部分所指示的元素。
   5. 为元素
      1. ::first-line
      2. ::first-letter
      3. ::before
      4. ::afte
      5. ::first-line 和 ::first-letter 是比较类似的伪元素，其中一个表示元素的第一行，一个表示元素的第一个字母。
   6. 其他
      1. 国际化：用于处理国际化和多语言问题。dir、lang
      2. 音频 / 视频：用于区分音视频播放状态。play、pause
      3. 时序：用于配合读屏软件等时序性客户端的伪类。current、past、future
      4. 表格：用于处理 table 的列的伪类。nth-col、nth-last-col
5. 选择器的组合
   1. 优先级
      1. 第一优先级，无连接符号
      2. 第二优先级
         1. 空格 后代
         2. ~ 子代
         3. + 直接后继
         4. > 所有后继
         5. || 列选择器
      3. 第三优先级,
      4. CSS 标准建议用一个足够大的进制，获取“ a-b-c ”来表示选择器优先级。历史中有些趣闻，早年 IE6 采用 256 进制，于是就产生“256 个 class 优先级等于一个 id”这样的奇葩问题，后来扩大到 65536，基本避免了类似的问题。
      5. !importance
6. 链接标签
   1. 
   2. link
      1. canonical 型 link，这个标签提示页面它的主 URL，在网站中常常有多个 URL 指向同一页面的情况，搜索引擎访问这类页面时会去掉重复的页面，这个 link 会提示搜索引擎保留哪一个 URL。
      2. alternate 型 link，alternate 型的 link 的一个典型应用场景是，页面提供 rss 订阅时。这个标签提示页面它的变形形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本，这种 link 通常也是提供给搜索引擎来使用的。
      3. prev 型 link 和 next 型 link，告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示。因为 next 型 link 告诉浏览器“这是很可能访问的下一个页面”，HTML 标准还建议对 next 型 link 做预处理，在本课后面的内容，我们会讲到预处理类的 link。
      4. rel=“author” 链接到本页面的作者，一般是 mailto: 协议
      5. rel=“help” 链接到本页面的帮助页
      6. rel=“license” 链接到本页面的版权信息页
      7. rel=“search” 链接到本页面的搜索页面（一般是站内提供搜索时使用）
      8. 外部资源类 link 标签
         1. icon 型 link
         2. 预处理类 link
            1. dns-prefetch 型 link 提前对一个域名做 dns 查询，这样的 link 里面的 href 实际上只有域名有意义。
            2. preconnect 型 link 提前对一个服务器建立 tcp 连接。
            3. prefetch 型 link 提前取 href 指定的 url 的内容。
            4. preload 型 link 提前加载 href 指定的 url。
            5. prerender 型 link 提前渲染 href 指定的 url。
      9. modulepreload 型的 link，预先加载一个 JavaScript 的模块。这可以保证 JS 模块不必等到执行时才加载。这里的所谓加载，是指完成下载并放入内存，并不会执行对应的 JavaScript。
      10. stylesheet 型 link
   3. a标签
      1. a 标签也可以有 rel 属性，我们来简单了解一下，首先是跟 link 相同的一些 rel，包括下面的几种。
      2. alternate
      3. author
      4. help
      5. license
      6. next
      7. prev
      8. search
   4. area标签
      1. area 标签与 a 标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接。
7. 正常流
   1. 一句话来描述正常流的排版行为，那就是：依次排列，排不下了换行。
   2. 在正常流基础上，我们有 float 相关规则，使得一些盒占据了正常流需要的空间，我们可以把 float 理解为“文字环绕”。
   3. vertical-align 相关规则规定了如何在垂直方向对齐盒。vertical-align 相关规则看起来复杂，但是实际上，基线、文字顶 / 底、行顶 / 底都是我们正常书写文字时需要用到的概念，只是我们平时不一定会总结它们。下图展示了在不同的 vertical-align 设置时，盒与文字是如何混合排版的。为了方便你理解，我们用代码给大家标注了基线、文字顶 / 底、行顶 / 底等概念。
   4. margin 折叠可以理解为“一个元素规定了自身周围至少需要的空间”。
   5. 在 CSS 标准中，规定了如何排布每一个文字或者盒的算法，这个算法依赖一个排版的“当前状态”，CSS 把这个当前状态称为“格式化上下文（formatting context）”。
   6. 我们可以认为排版过程是这样的：
      1. 格式化上下文 + 盒 / 文字 = 位置
      2. formatting context + boxes/charater = positions
   7. 我们需要排版的盒，是分为块级盒和行内级盒的，所以排版需要分别为它们规定了块级格式化上下文和行内级格式化上下文。
   8. 当我们要把正常流中的一个盒或者文字排版，需要分成三种情况处理。
      1. 当遇到块级盒：排入块级格式化上下文。
      2. 当遇到行内级盒或者文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
      3. 遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。
8. 替换型元素
   1. 为什么link一个CSS要用href，而引入js要用src呢？凡是替换型元素都是使用src属性引用文件，链接型元素都是使用href属性。
   2. img标签，可以使用data url

      <img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>
      

   3. picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源
   4. video
   5. audio
   6. iframe
   7. src属性支持的协议，http和data
9. 贝塞尔曲线是一种被工业生产验证了很多年的曲线，它最大的特点就是“平滑”。时间曲线平滑，意味着较少突兀的变化，这是一般动画设计所追求的。
10. HTML

    1. 基本语法首先，HTML 作为 SGML 的子集，它遵循 SGML 的基本语法：包括标签、转义等。SGML 还规定了一些特殊的节点类型，在我们之前的 DOM 课程中已经讲过几种节点类型，它们都有与之对应的 HTML 语法，我们这里复习一下：

    2. 标签语法

       1. 开始标签
       2. 结束标签
       3. 自闭和标签

    3. 文本语法

       1. 普通文本语法
       2. CDATA文本节点，被<![CDATA[]]>这个标记所包含的内容将表示为纯文本，比如<![CDATA[<]]>表示文本内容“<”。文本节点看似是普通的文本，但是，其中有两种字符是必须做转义的：< 和 &。如果我们从某处拷贝了一段文本，里面包含了大量的 < 和 &，那么我们就有麻烦了，这时候，就轮到我们的 CDATA 节点出场了。CDATA 也是一种文本，它存在的意义是语法上的意义：在 CDATA 节点内，不需要考虑多数的转义情况。CDATA 内，只有字符组合]]>需要处理，这里不能使用转义，只能拆成两个 CDATA 节点。

    4. 注释语法

    5. DTD 语法（文档类型定义）

       1. HTML4.01 有三种 DTD。分别是严格模式、过渡模式和 frameset 模式。这些复杂的 DTD 写法并没有什么实际作用（浏览器根本不会用 SGML 引擎解析它们），因此，到了 HTML5，干脆放弃了 SGML 子集这项坚持，规定了一个简单的，大家都能记住的 DTD：<!DOCTYPE html>

    6. ProcessingInstruction 语法（处理信息）。ProcessingInstruction 多数情况下，是给机器看的。HTML 中规定了可以有 ProcessingInstruction，但是并没有规定它的具体内容，所以可以把它视为一种保留的扩展机制。对浏览器而言，ProcessingInstruction 的作用类似于注释。

    7. 文本实体

       1. 不知道你注意到没有，HTML4.01 的 DTD 里包含了一个长得很像是 URL 的东西，其实它是真的可以访问的——但是 W3C 警告说，禁止任何浏览器在解析网页的时候访问这个 URL，不然 W3C 的服务器会被压垮。我相信很多好奇的前端工程师都把它下载下来打开过。
       2. 所谓文本实体定义就是类似以下的代码：< >&
       3. 每一个文本实体由&开头，由;结束，这属于基本语法的规定，文本实体可以用#后跟一个十进制数字，表示字符 Unicode 值。除此之外这两个符号之间的内容，则由 DTD 决定。我这里数了一下，HTML4.01 的 DTD 中，共规定了 255 个文本实体，找出这些实体和它们对应的 Unicode 编码，就作为本次课程的课后小问题吧。
11. 形状CSS 中的很多属性还会产生形状，比如我们常见的属性：borderbox-shadowborder-radius。这些产生形状的属性非常有趣，我们也能看到很多利用它们来产生的 CSS 黑魔法。然而，这里我有一个相反的建议，我们仅仅把它们用于基本的用途，把 border 用于边框、把阴影用于阴影，把圆角用于圆角，所有其它的场景，都有一个更好的替代品：datauri+svg。
12. 可访问性

    1. ARIA 全称为 Accessible Rich Internet Applications，它表现为一组属性，是用于可访问性的一份标准。关于可访问性，它被提到最多的，就是它可以为视觉障碍用户服务，但是，这是一个误解。实际上，可访问性其实是一个相当大的课题，它的定义包含了各种设备访问、各种环境、各种人群访问的友好性。不单单是永久性的残障人士需要用到可访问性，健康的人也可能在特定时刻处于需要可访问性的环境。

    2. 我们先整体来看看，ARIA 给 HTML 元素添加的一个核心属性就是 role，我们来看一个例子：

       <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
       </span> <label id="chk1-label">Remember my preferences</label>
       

    3. 这里我们给一个 span 添加了 checkbox 角色，这样，表示我们这个 span 被用于 checkbox，这意味着，我们可能已经用 JS 代码绑定了这个 span 的 click 事件，并且以 checkbox 的交互方式来处理用户操作。