美文网首页
2016-3-16 记录

2016-3-16 记录

作者: 流离之人 | 来源:发表于2016-03-17 09:47 被阅读15次

    HTML/CSS

    基础知识

    1. HTML 超文本标记语言
    2. 语法松散---标准低,不利于规范(学习曲线陡峭)
    3. html 4.01(1999.12) --- html5(2014.10)

    HTML解析

    1. 词法分析: 把字符流初步解析成我们可理解的“词”
    2. 语法分析: 把开始结束标签配对,属性赋值好,父子关系链接好,构成dom树

    语义化

    1. strong这类表现式标签,修改的时候需要改动dom,维护成本高
    2. 不推荐tag标签来做选择器,因为会变成全局样式,尽可能让样式的作用域小
    3. html5标签做兼容问题,自己研究

    为你的网页引入CSS

    1. link外链样式有诸多好处,代码解耦,维护性高,可复用,前后端分离等
    2. 但是当访问量巨大时,要向性能做妥协。需要将css,js嵌入页面,让页面尽可能快加载,当然这是特殊情况。

    元素类别

    1. 块元素:disaplay:block。独占一行
    2. 块级元素: 包含块元素,例如 display:table
    3. 内联元素:display:inline
    4. 内联级元素: 包含内联元素

    块级元素 vs 宽100%

    1. 块级元素特征,体现在盒模型的差异
    2. 盒模型: margin+border+padding+content
      早期支持padding,只有table-cell
    3. box-sizing: border-box;w3c盒模型
      box-sizing: content-box;ie盒模型

    嵌套三元素 ---w3c规范

    1. 元素类别
    • 元数据元素
    • 流式元素
    • 章节元素
    • 标题元素
    • 叙述元素
    • 嵌入元素
    • 交互元素
    1. 元素上下文
    1. 内容模型:决定子元素的类型
      <a>标签可以包含除自己以外的任何标签,它是被忽略的。

    旧规则是a(inline元素)下不包含div(block元素),实际上根据w3c规范下是可行的。不过依然推荐采用约定俗成的代码习惯

    沿着X、Y轴倾斜转换:skew(20deg,20deg)

    前景图: img标签,用来表达页面的内容,需要传达给用户的
    背景图: css样式,用来做装饰

    with:auto 兼容ie

    低级错误更难检测,比如使用中文“”,还有单引号等。

    相关文章

      网友评论

          本文标题:2016-3-16 记录

          本文链接:https://www.haomeiwen.com/subject/xhpqlttx.html