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

#技术 #全栈 #html #css #web开发

概述

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单位的使用
```
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加上偏移值，原来的占位还保留，不改变结构。偏移之后可能重叠
  - 浮动：最常用的手段，左右浮动，文字框重叠，文字不会重叠，文字环绕
    - float
    - clear
    - 一个demo http://www.w3school.com.cn/tiy/t.asp?f=csse_float6
CSS3新特性
- flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  - Flex布局以后，子元素的float、clear和vertical-align属性将失效。
坑：
- css中忘了加分号，导致属性不起作用