Please enable JavaScript.

Coggle requires JavaScript to display documents.

html和css (html (元素 (链接 (链接 (超链接型标签 (link标签 (超链接型link标签 (特点：…

- - - - 链接
        
        超链接型标签
        
        link标签
        
        超链接型link标签
        
        特点：被动型链接，在用户不操作的情况下，他们不会被主动下载
        
        canonical型link
        
        1 more item...
        
        alternate型link
        
        1 more item...
        
        prev 型 link 和 next 型 link
        
        1 more item...
        
        其它超链接类的 link
        
        1 more item...
        
        外部资源类 link 标签
        
        外部资源型 link 标签会被主动下载，并且根据 rel 类型做不同的处理。外部资源型的标签包括：具有 icon 型的 link、预处理类 link、modulepreload 型的 link、stylesheet、pingback。
        
        icon 型 link
        
        1 more item...
        
        预处理类 link
        
        1 more item...
        
        modulepreload 型的 link
        
        1 more item...
        
        stylesheet 型 link
        
        1 more item...
        
        pingback 型 link
        
        1 more item...
        
        a标签
        
        rel属性
        
        alternate，author，help，license，next，prev，search这些跟 link 语义完全一致，不同的是，a 标签产生的链接是会实际显示在网页中的，而 link 标签仅仅是元信息，除了这些之外，a 标签独有的 rel 类型：tag 表示本网页所属的标签；bookmark 到上级章节的链接。
        
        辅助的rel类型
        
        用于提示浏览器或者搜索引擎做一些处理
        
        4 more items...
        
        area 标签
        
        area 标签与 a 标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接
        
        area 是整个 html 规则中唯一支持非矩形热区的标签，它的 shape 属性支持三种类型
        
        外部资源链接
    - - 替换元素是将文件的内容引入，替换掉吱声位置的一类标签
        
        script标签
        
        凡是替换性元素，都是使用src属性来引用文件的。
        
        img标签
        
        data uri很实用，当我们不想要把文件放入文件中时，很像内联
        
        picture标签
        
        source元素
        
        media
        
        video标签
        
        source标签
        
        media
        
        type
        
        track
        
        subtitles字幕
        
        captions：报幕内容
        
        descriptions：视频描述信息
        
        chapters：用于浏览器视频内容
        
        metadata：给代码提供的元信息，对普通用户不可见
        
        audio标签
        
        iframe标签
        
        iframe 标签也是各种安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。
  - - - 标签(元素)Element
        
        开始标签：<tagname>
        
        结束标签</tagname>
        
        自闭合标签<tagname />
      - 文本Text
        
        普通文本
        
        CDATA文本节点
      - 注释Comment
      - DTD Document Type Defination
        
        文档类型定义。SGML 用 DTD 来定义每一种文档类型，HTML 属于 SGML，在 HTML5 出现之前，HTML 都是使用符合 SGML 规定的 DTD。
        
        每一个文本实体由&开头，由;结束，这属于基本语法的规定，文本实体可以用#后跟一个十进制数字，表示字符 Unicode 值。
      - 处理信息ProcessingInstruction
        
        ProcessingInstruction 多数情况下，是给机器看的。HTML 中规定了可以有 ProcessingInstruction，但是并没有规定它的具体内容，所以可以把它视为一种保留的扩展机制。对浏览器而言，ProcessingInstruction 的作用类似于注释。
- - - - 根据一些特征，选中元素树上的一批元素
        
        简单选择器：针对某一特征判断是否选中元素
        
        类型选择器
        
        根据一个元素的标签名来选中元素
        
        全体选择器
        
        可以选中任意元素，用法跟类型选择器是完全一致的
        
        id选择器
        
        针对特定属性的选择器，“#"号后面跟随id名
        
        class选择器
        
        针对特定属性的选择器，”."后面跟随class名
        
        属性选择器
        
        [att]
        
        [att=val]
        
        [att~=val]
        
        [att|^= val]
        
        伪类选择器
        
        树结构伪类选择器
        
        :nth-child和:nth-last-child
        
        :empty
        
        表示没有子节点的元素。有个例外就是子节点为空白文本节点的情况
        
        :nth-last-child的区别是从后往前数
        
        :first-child :last-child分别表示第一个元素和最后一个元素
        
        :only-child选中唯一一个子元素
        
        链接与行为伪类选择器
        
        :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类
        
        :link 表示未访问过的链接， :visited 表示已经访问过的链接
        
        :hover 表示鼠标悬停在上的元素
        
        :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态
        
        :focus 表示焦点落在这个元素之上。
        
        :target 用于选中浏览器 URL 的 hash 部分所指示的元素。
        
        逻辑伪类选择器
        
        ：not伪类
        
        其他伪类选择器
        
        国际化
        
        dir
        
        lang
        
        音频/视频
        
        play
        
        pause
        
        时序
        
        current
        
        past
        
        future
        
        表格
        
        nth-col
        
        nth-last-col
        
        复合选择器：连续写在一起的简单选择器，针对元素吱声特征选择单个元素
        
        复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。
        
        选择器列表：由都好分个的复杂选择器，表示或的关系
        
        伪元素
        
        ::first-line
        
        元素的第一行
        
        ::first-letter
        
        元素的第一个字母
        
        ::before
        
        在元素内容之前插入一个虚拟的元素
        
        ::after
        
        在元素内容之后插入
        
        优先级
        
        第一优先级
        
        无连接符号
        
        第二优先级
        
        "空格" "~" "+" ">" "||"
        
        第三优先级
        
        ","
  - - - 正常流
        
        正常流的行为
        
        依次排布，排不下换行
        
        float
        
        文字环绕
        
        vertical-align
        
        规定了如何在垂直方向对齐盒。vertical-align 相关规则看起来复杂，但是实际上，基线、文字顶 / 底、行顶 / 底都是我们正常书写文字时需要用到的概念
        
        margin 折叠
        
        一个元素规定了自身周围至少需要的空间
        
        正常流的原理
        
        格式化上下文 + 盒 / 文字 = 位置
        
        块级格式化上下文
        
        三种情况
        
        遇到块级盒时
        
        1 more item...
        
        当遇到行内级盒或者文字
        
        1 more item...
        
        遇到 float 盒
        
        1 more item...
        
        其内部创建新块级格式上下文的元素
        
        浮动元素
        
        绝对定位元素
        
        非块级但仍能包含块级元素的容器（如 inline-blocks, table-cells, table-captions）；
        
        块级的能包含块级元素的容器，且属性 overflow 不为 visible
        
        行内级格式化上下文
        
        经典布局
        
        等分布局
        
        百分比宽度
        
        自适应宽
        
        一个元素固定宽度，另一个元素填满父容器剩余宽度
      - 弹性布局
        
        原理
        
        第一步：将flex项分行，有flex属性的flex项可以脏企鹅认为主轴尺寸为0，所以一定可以放进当前行。
        
        我们把 flex 项逐个放入行，不允许换行的话，我们就“无脑地”把 flex 项放进同一行。允许换行的话，我们就先设定主轴剩余空间为 Flex 容器主轴尺寸，每放入一个就把主轴剩余空间减掉它的主轴尺寸，直到某个 flex 项放不进去为止，换下一行，重复前面动作。分行过程中，我们会顺便对每一行计算两个属性：交叉轴尺寸和主轴剩余空间，交叉轴尺寸是本行所有交叉轴尺寸的最大值，而主轴剩余空间前面已经说过。
        
        第二步：计算每个flex项主轴尺寸和位置
        
        如果 Flex 容器是不允许换行的，并且最后主轴尺寸超出了 Flex 容器，就要做等比缩放，如果 Flex 容器有多行，那么根据我们前面的分行算法，必然有主轴剩余空间，这时候，我们要找出本行所有的带 Flex 属性的 flex 项，把剩余空间按 Flex 比例分给它们即可
        
        如果本行完全没有带 flex 属性的 flex 项，justify-content 机制就要生效了，它的几个不同的值会影响剩余空白如何分配，作为实现者，我们只要在计算 flex 项坐标的时候，加上一个数值即可。
        
        第三步我们来计算 flex 项的交叉轴尺寸和位置
        
        交叉轴的计算首先是根据 align-content 计算每一行的位置，这部分跟 justify-content 非常类似。
        
        再根据 alignItems 和 flex 项的 alignSelf 来确定每个元素在行内的位置
    - - 颜色和形状
      - 文字相关
    - - 动画
        
        animation
        
        animation-name 动画的名称
        
        animation-duration 动画的时长
        
        animation-timing-function 动画的时间曲线
        
        animation-delay 动画开始前的延迟
        
        animation-iteration-count 动画的播放次数
        
        animation-direction 动画的方向
        
        transition
        
        transition-property 要变换的属性
        
        transition-duration 变换的时长
        
        transition-timing-function 时间曲线
        
        transition-delay 延迟
      - 其他交互