先按照leo给的前端知识脑图开始

HTML

语义化

  1. 去除或丢失样式的时候能让页面呈现清晰的结构
  2. 有利于SEO: 有利于爬虫爬取更多的有效信息,爬虫依赖于标签来确定上下文和关键字的权重
  3. 方便其他设备解析(屏幕阅读器, 盲人阅读器, 移动设备), 有利于无障碍阅读(通常因为这些设备对css的支持较弱)
  4. 方便团队开发维护代码, 语义化更具有可读性, 遵循W3C标砖, 减少差异化

阻止兼容模式

@语义化的HTML结构到底有什么好处?

@Web语义化标准解读
当CSS命名语义化和CSS代码复用冲突的时候,Sass就是比较好的解决方案

不单单是HTML的语义化,还有CSS命名的语义化.
CSS命名语义化应当注意:

  • 尽量规避拼音命名,用英文单词去命名
  • 单词之间连接用三种方式:下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范,但个人建议不要同时使用2种以上的连接方法同时命名
  • 单词后不要跟无意义的数字,如logo1234 (团队约定好的除外)
  • 对于过长单词的连接命名可采取缩写形式,但应确保成员都能看懂

SEO还要牵扯到服务器端渲染和客户端渲染!

Doctype

  1. 声明位于文档首,告知浏览器以哪种形式解析文档
  2. 严格模式的排版以该浏览器支持的最高标准运行
  3. 在混杂模式中,以宽松的向后兼容方式显示,模拟老式浏览器以防止站点无法运行
  4. Doctype 不存在或不正确会导致文档以混杂模式呈现

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档

XHTML

HTML与XHTML区别

  1. 所有标签必须闭合
  2. 所有标签的元素和属性名称都必须使用小写
  3. 所有属性都必须用<>括起来,且属性必须赋值,没有值的就重复本身
  4. 图片必须有说明文字(alt)
  5. 把所有的<和>等特殊字符用编码表示{<表示为<,>表示为>,&表示为空格}
  6. 不要注释中使用<–>,”–”只能发生在注释的开头和结尾

HTML4,HTML5,XHTML 之间有什么区别?

HTML5新特性

HTML5希望能减少浏览器对于需要插件的丰富性网络应用的需求.
HTML5提供的一些新标签有利于搜索引擎的索引整理,小屏幕装置和视障人士的使用.

让IE支持HTML5的方法:引用Google的 html5.js 文件,或者html5shiv.

  1. 语义化标签
  2. 音频视频API
  3. Canvas API
  4. 地理 API
  5. 本地离线存储Localstorage
  6. Session Strong
  7. 表单控件
  8. 内联SVG
  9. web worker
  10. Geolocation
  11. 移除的标签

语义化标签
HTML5新增的标签:

: 定义外部的内容.引用外部文本的内容.

:定义图形,画布

:定义命令按钮,比如单选按钮,复选按

:可选数值的列表,可以做input下来的可选值

:定义嵌入的内容比如插件

: 定义页脚

:定义页眉
:视觉上需要突出的文字

: 定义文档中的节,区段

: 定义

音频视频API

Canvas API

地理API

地理位置 API 允许用户向 Web 应用程序提供他们的位置
geolocation对象可以获取地理位置
“geolocation” in navigator

cookie, Localstorage 与 SessionStorage区别

  • cookie: 包含若干键值对,每个键值对可以设置过期时间(默认过期时间为关闭浏览器时,可设置失效时间),Cookie会在每次发送HTTP请求时附加到Cookie头字段(set-cookie字段),服务器从而得知用户状态,大小限制为4kb左右,每次请求新页面的时候都会发过去,cookie还会制定作用域,不可以跨域(创建cookie时候设置domain),但是可以用jsonp来跨域得到要写的cookie键值对然后手动写入(跨域cookie,单点登录有用).
    • webstorage: webstorage本地存储包括两种存储方式sessionstorage和localstorage.sessionstorage不是一种持久化的本地存储,仅仅是会话级别的存储.这些数据只是在同一个会话中的页面才能访问会话结束之后数据就销毁了.localstorage用于持久化的本地存储,除非主动删除数据,否则永远不会过期.两个大小限制一般为5MB.
特性 Cookie localstorage sessionstorage
数据生命周期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 尽在当前会话下有效,关闭页面或者浏览器后被清除
存放数据大小 4kb左右 一般为5MB 一般为5MB
与服务器端通信 每次都都会携带在HTTP投中,如果用cookie来保存数据会存在性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通讯 同上
易用性 需要程序员自己封装,原生的Cookie接口不友好 原生的接口可以接受,也可以再次封装来对Object和Aeeary更友好 同上

表单控件
新的input类型(email, URL, number, search, color, range, Ddata picker)
内联svg
内联SVG直接在文档中包含了所有的XML数据,并且允许我们通过CSS和Javascript来访问它们.
web worker
运行在后台的JavaScript,独立于其他脚本,不会影响用户的性能.
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面
移除的标签
纯表现的元素:basefont, big, center, fon, tt, u
影响性能: frame, frameset, noframe 最耗时的

常见问题

文本框,阻止用户输入

  • input标签的disabled以及readonly属性
  • JS捕获keypress事件, 设置input属性为disabled

行内元素
CSS规范规定,每个元素都有display属性,每个元素都有默认的display值.
行内元素: br button input lable textarea span img select
块级元素: div ul ol li h1~h6 p
行内元素(内联元素):和相邻的内联元素在同一行,width等都不可以改变
块级元素: 总是独占一行,变现为另起一行开始,而且气候的元素必须另起一行显示,width等都可以控制.

display所有属性:
display:none 既不现实也不占据空间(区别于visibility:visible)
display:inline 设置行内元素,高宽设置都无效,设置的text-align也无效
display:block 设置为块级元素,默认继承父元素宽度
display:list-item 设置为列表显示,完全模仿的话还要加上list-style-position和list-style-type
display:inline-block 既有block的宽高特性又有inline的同行元素属性
display: table 表格
display: flex 弹性布局,子元素的float,clear,vertical-align属性都无效

HTML5为什么只写<! DOCTYPE HTML>

HTML5不基于SGML(Standard Generalized Markup Language),因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照他们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器所使用的文档类型.
文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则

  1. cookie会在浏览器和服务器之间来回交换,sessionstorage和localstorage不会.
  2. sessionstorage和localstorage的存储空间更大
  3. sessionstorage和localstorage有更多丰富易用的接口
  4. sessionstorage和localstorage各自独立的存储空间

CSS

选择器

选择器
  1. id选择器(#)
  2. class选择器(.)
  3. 标签选择器(p)
  4. 后代选择器(>)
  5. 相邻选择器(+)
  6. 子元素选择器( )
  7. 通配符选择器(*)
  8. 属性选择器(a[rel=”exteral”])
    [title]{color:red}为所有带有title属性的元素设置color样式
  9. 伪类选择器,顺序link-visited-hover-focus-active
    伪元素选择器
    伪元素选择器
优先级

!important > id > class > tag
!importanr比内联优先级高,内联比id优先级高

属性继承
  1. 可继承样式 : font-size, font-family, color
  2. 不可继承样式 : border padding margin width height
    css属性继承
  3. 优先级就近原则,同权重情况下样式定义最近者为准
    优先级
  4. 载入样式以最后载入的定位为准
ID 和 class选择器区别

ID选择器: 每个元素只能有唯一一个ID,每个页面只能有一个元素使用该ID
类选择器: 多个元素可以共用相同类,一个元素可以有多个类

CSS3新特性

  1. 圆角(border-radius)
  2. 阴影(box-shadow)
  3. 渐变(gradient)
    使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布局
  4. 旋转(transform) transform:rotate(9deg) scale(0.85,0.9) transslate(0px,-30px) skew(-9deg,0deg) //旋转(顺时针), 缩放, 移动, 倾斜
  5. 高级选择器 .elemet:nth-child(odd){border-radius:5px} 对元素序号为奇数的子元素运用 偶数:even
  6. Webfont(@font-face)
    TTF(TrueType Font)
    WOFF(Web Open Font Format 1.0|2.0) 是Web字体中最佳格式,压缩
    SVG
    EOT(Embedded OpenType Fonts by M$) IE专用字体
  7. 媒体查询
    媒体查询包含了一个媒体类型和至少一个使用如宽度 高度和颜色等媒体属性来限制样式表范围的表达式.css3加入的媒体查询是的无需修改内容便可以使样式应用于某些特定的设备范围
  8. 新增伪类举例
    Alt text

font-family

基础知识

  1. 优先使用排在前面的字体
  2. 如果找不到该字体,或者改字体不包括所要渲染的文字,则使用下一种字体
  3. 若果都找不到,就由操作系统决定使用哪种字体
    使用常识
  4. 永远不要忘记声明英文字体,而且英文字体应该在中文字体前面,绝大部分的中文字体包括英文字体,但是英文字体不包括中文字符
  5. 照顾不同的操作系统 对Windows,Mac OS,Linux等操作系统的默认字体有了解,特别是中文
  6. 注意向下兼容 为低级系统提供fallback字体方案

CSS预处理器

提供css缺失的样式层复用机制,减少代码的冗余,提高样式代码的可维护性

  1. Sass(.sass .scss): Sass的变量处理方式和Stylus相同,变量输出的根据之前最近的一次定义计算
  2. Less(.less): 变量处理方式之懒加载 Less的处理逻辑和其他两者有非常关键的区别,所有的Less变量的计算,都是以这个变量最后一次被定义的值为准

例子就是全局变量和局部变量的时候(变量作用域)

为什么Sass比Less好:

  1. Sass能让你写出重复利用的方法,可以用逻辑语句,条件语句和循环语句。虽然Less也可以做这些事情但是Less的方式效率比较低而且不直观。Less和Sass都内置了大量的颜色处理,数学,参数列表等方便的功能。
  2. Sass用户能够利用Compass这个非常棒的库,提供给Less用户的库虽然也多,但是远不能和Compass比,Compass定期有人维护对社会的贡献也非常大。Compass有些非常棒的功能,比如:生成动态雪碧(dynamicsprite-map ),对就浏览器有Hack功能,跨浏览器支持css3特性。
  3. Compass也能让你添加一个第三方框架比如:Blueprint ,Foundation,Bootstrap。这意味着你可以很容易的利用你喜欢的框架不需要去处理使用多个工具带来的麻烦.

CSS后处理器

CSS后处理器 是对CSS进行处理,并最终生成CSS的预处理器, 它属于广义上的CSS预处理器

  1. 举例: CSS压缩工具(clean-css), Autoprefixer(以Can I Use 上的浏览器支持数据为基础, 自动处理兼容性问题)
  2. 优缺: 使用CSS语法,容易进行模块化,贴近CSS未来的标准,逻辑处理能力有限
  3. 框架举例:PostCSS Rework非常相似,但提供了更高级的API,更易扩展