0%

CSS与HTML学习笔记与知识图谱

概述

  • css 与html的职责
    • html负责内容
    • css负责布局和修饰(背景等)

所以不推荐用html布局(如表格布局)和设置颜色背景等

  • 学习内容
    • w3cschool教程
    • css

知识图谱

下载mindnode图谱

浏览器常识

  • URL 编码

    • scheme://host.domain:port/path/filename www是host,默认主机名
    • URL 只能使用 ASCII 字符集来通过因特网进行发送。
    • 由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
    • URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
    • URL 不能包含空格。URL 编码通常使用 + 来替换空格。
  • cookies的主要作用:server用来传送数据,保持状态的,不是client用的。

  • 登录问题

    • 登录:认证方式
      可以对比一下三种认证方式的区别,这也是很基础的事情了

      1. basic auth
        没有安全性可言,完全依赖 https,并且每次请求都需要传递密码,是最不安全的

      2. session
        一般需要 basic auth 或其它 auth 方式先进行身份认证后才能建立,和 basic auth 一样没有什么安全性可言,需要 https 保障,只不过避免了每次传递密码(忽略服务器端状态这点特性)
        服务端更具sessionId缓存信息

      3. oauth (jwt的原理?)
        部分是为了解决 basic auth 的安全问题而设计的,但是要复杂很多,即使没有https也能保证基本的安全,数据包被监听后不能防止信息泄露,但可以防止信息伪造,包括重放攻击。用于无状态的restful API设计?原来session的缓存放在客户端本地!

      4. jwt
        http://www.jianshu.com/p/576dbf44b2ae

      http://www.cnblogs.com/xiekeli/p/5607107.html

      待研究http://blog.rainy.im/2015/06/10/react-jwt-pretty-good-practice/

HTML

  • 参考思维导图学习
  • html头部meta的作用
    • 设置中午,支持编码 <meta charset="UTF-8">
    • 一些描述
      • <meta name="keywords" content="HTML, CSS, XML" />
      • <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
    • style,内置css
    • link引入css <link rel="stylesheet" type="text/css" href="./style.css" />
    • js 引入 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  • HTML 实体
    &entity_name;或者&#entity_number;

HTML5:

  • video autdio location
  • drag
  • canvas svg
  • localstorage/sessionstorage vs cookies
  • app cache
  • work thread
  • server send event vs websocket
  • 一些表单form的属性,帮助写表单

CSS

参考这个css

  • CSS 对大小写不敏感,但是class 和 id 名称对大小写是敏感的
  • 根据 CSS,子元素从父元素继承属性(body里面的元素自动使用body的样式)。但可能有兼容问题。此外,背景属性都不能继承。
  • 引入css的三种方式和优先级
  • CSS选择器

    • 区分几种情况:空格,逗号,连着写
      • div #id p .div .classone .classtwo
      • div#id p.div .classone.classtwo
      • #id div .div p
      • div,#id p,.div
      • #id,div .div,p
    • 一个标签有多个class <p class="important warning">hello</p>

    • 上下文选择器(派生选择器):依据元素在其位置的上下文关系来定义样式,层次间隔可以是无限的。必须用空格分割,例子:

      • li strong{} //li中的strong标签
    • id选择器
      • #myid{}
      • #sidebar p {} //上下文选择器+id选择器
      • div#sidebar{} //div且id为xx的,区分div #sidebar{} div内部有#sidebar的
    • 类选择器,类名的第一个字符不能使用数字
      • .className
      • .fancy td{} //上下文选择器+类选择器
      • td.fancy{}//td且是facncy类,区分td .fancy{}
    • 属性选择器:用于选择那些没有id也没有class的标签
      • [title]{} 有title的元素
      • [title=hello]{}有title值仅等于hello的元素
      • [title~=hello]{}有title值等于hello的元素,可以有空格分割如<div title="hello world"><div>
      • [title|=hello]{}有title值等于hello的元素,可以有-分割如<div title="hello-world"><div>
      • 与其他选择器结合
    • 类选择器还是 ID 选择器?
      • 只能在文档中使用一次
      • 不能使用 ID 词列表,既一个元素不能有多个id
      • ID 能包含更多含义,指定业务含义
    • 伪类
      • selector : pseudo-class {property: value}
      • selector.class : pseudo-class {property: value}
      • a:visited {color: #00FF00}
      • p:first-child {font-weight: bold;} 选择p作为第一个child时的那个p,不是选择p的第一个child
      • p > i:first-child {font-weight:bold;}选择作为p的第一个直接子元素的i。从做到右来理解表达式!
      • :lang 伪类使你有能力为不同的语言定义特殊的规则
    • 伪元素
      • selector:pseudo-element {property:value;}
      • selector.class:pseudo-element {property:value;}
      • 与伪类区分,它园中的是冒号后面的
      • p:first-line{color:#ff0000;} 选择p的第一行文字
      • :first-letter
      • h1:before{content:url(logo.gif);} 在h1前插入内容,类似的:after
    • 子元素选择器:不是选择任意的后代元素,而是只选择某个元素的子元素。
      • h1 > strong
    • 相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素。

      • h1 + p {margin-top:50px;}:选择紧接在 h1 元素后出现的段落p。

  • CSS样式 一些惯例用法

    • 设置body的字体与字号,em单位的使用

      1
      2
      3
      4
      body {font-size:100%;}
      h1 {font-size:3.75em;}
      h2 {font-size:2.5em;}
      p {font-size:0.875em;}
    • 链接相关的选择器

      • a:link - 普通的、未被访问的链接
      • a:visited - 用户已访问的链接
      • a:hover - 鼠标指针位于链接的上方
      • a:active - 链接被点击的时刻
  • CSS框模型:padding,margin,content是什么

    • 元素组成:内容,内边距(padding),边框(border),外边距(padding)
    • 与android不同的是padding和边框不算在内容区域width/height中(IE5,6是这样的)
    • 背景应用在在边框内(content+padding),下面红色虚线
    • 外边距可以是负值,而且在很多情况下都要使用负值的外边距。
    • 由于 border-style 的默认值是 none,如果希望边框出现,就必须声明一个边框样式。
    • 一个奇怪的性质:外边距合并,仅仅在垂直方向
  • CSS布局与定位

    • 一切皆为框:块框(display:block,如p),行内框(display:inline,如span),无名框,行框(如,文本的一行)
      • 一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框,设置行高可以增加这个框的高度。
        • 行内框会导致一些css属性失效,如高度
    • 三种定位方式:
      • 普通流(默认):position:static,不会重叠
      • 绝对定位:原来的占位不保留,改变结构。定位后可能重叠。
        • position:absolute 相对于最近的已定位祖先元素(不是static的父亲,一直到body)
        • position:fix 相对于整个视窗,效果:滚动页面定位不动。
      • 相对定位:position:relative就是static加上偏移值,原来的占位还保留,不改变结构。偏移之后可能重叠
      • 浮动:最常用的手段,左右浮动,文字框重叠,文字不会重叠,文字环绕
  • CSS3新特性

  • 坑:

    • css中忘了加分号,导致属性不起作用

欢迎关注我的其它发布渠道