前一段时间跟着论坛里的某位素不相识的大神学了一些前端入门知识，几节课的内容最终就总结成了这篇帖子。
1 HTML常用标签
基础类 html title body h1-h6 p
格式类 q time var address
表单类 input textarea
框架类 frame
图像类 img map
音频/视频类 audio video
链接类 a link
列表类 ul ol li
表格类 table thead tbody tfoot caption
样式类 span div style
原信息类head meta(整个页面的属性) base
编程类 script object param
2 CSS样式属性
2.1 CSS背景
background-color, background-image, background-repeat, background-position, background-attachment
2.2 CSS文本
text-indent, text-align, word-spacing, letter-spacing, text-transform, text-decoration, white-space, direction
2.3 CSS字体
font-family, font-style, font-weight, font-size
2.4 CSS链接
a:link - 普通的、未被访问的链接 //: 伪类
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
属性：color, font-family, background, etc.
2.5 CSS列表
list-style, list-style-type, list-style-image, list-style-position
2.6 CSS表格
border, border-collapse, width, height, text-align, vertical-align, border-spacing , caption-side , empty-cells, table-layout
2.7 CSS轮廓
outline, outline-color, outline-style(用法同list-style), outline-width
3 CSS Tips
3.1 选择器和优先级
1. ID>class>后代,子元素,相邻>标签>默认
2. 元素/类型选择器 h1 or p
1. 后代元素选择器 //如h1元素的后代元素i
2. 子元素选择器 //儿子孙子都是后代元素
3. 相邻兄弟选择器 //会选中之后所有
3. 类/class选择器 (.)
4. ID选择器 (#)
5. 属性选择器 ([]) 可在前面组合元素或使用别的方式进行更精确的选择
6. 选择器分组 (用,组合) h1, h2, h3
7. CSS伪类
8. CSS伪元素
3.2 块元素 block, 行内元素 inline, inline-block
Inline elements:
1. !!!respect left & right margins and padding, but not top & bottom
2. cannot have a width and height set
3. allow other elements to sit to their left and right
Block elements:
1. respect all of those
2. !!!force a line break after the block element
Inline-block elements:
1. !!!allow other elements to sit to their left and right
2. respect top & bottom margins and padding
3. respect height and width
3.3 浏览器内核
内核 用于解析html\css\js
Chrome, Safari等用webkit内核
IE, 火狐的内核不一样
3.4 CSS Hack
能针对不同品牌（内核）浏览器对CSS解释后出现的内容误差进行处理的技术/手段
3.5 W3C标准/JS标准 (ES6 ES7)
略
3.6 CSS盒子模型&布局
3.7 瀏覽器渲染步驟
1. 處理 HTML 標記，產生 DOM 樹狀結構。
2. 處理 CSS 標記，產生 CSSOM 樹狀結構。
3. 將 DOM 樹狀結構和 CSSOM 樹狀結構合併為轉譯樹狀結構。
4. 對轉譯樹狀結構進行版面配置，計算每個節點的幾何形狀。
5. 在螢幕上繪製各個節點。
4 Javascript
4.1 JS数据类型(var)
数字, 布尔 (逻辑), string字符串, object对象 ({name:value}), undefined (变量不含有值), null (清空变量)
4.2 JS运算符
1. 算术运算符 +(数字与字符串相加，结果将成为字符串) - * / % ++ --
2. 赋值运算符 = += -= *= /= %=
3. 比较运算符 == ===(**???**) ！=(不等于) > < >= <=
4. 逻辑运算符 && || !
4.3 JS定义变量
1. 必须以字母开头
2. 也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3. 对大小写敏感
4. 分「局部JS变量」和「全局JS变量」 //赋值给未声明的JS变量时，自动作为全局变量声明
4.4 JS定义函数
调用带参数的函数
function myFunction(var1,var2)
{
执行代码
}
调用返回值的函数
function myFunction()
{
var x=5;
return x;
}
4.5 JS控制语句
if //只有当指定条件为 true 时，使用该语句来执行代码
if...else //当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else //使用该语句来选择多个代码块之一来执行
switch //使用该语句来选择多个代码块之一来执行
for //循环代码块一定的次数
for/in //循环遍历对象的属性
while //当指定的条件为 true 时循环指定的代码块
do/while //同样当指定的条件为 true 时循环指定的代码块
continue //(带有或不带标签引用)只能用在循环中。
break //(不带标签引用)，只能用在循环或 switch 中
try //语句测试代码块的错误
catch //语句处理错误
throw //语句创建自定义错误
网友评论