前端入门-HTML/CSS/JS基础

前一段时间跟着论坛里的某位素不相识的大神学了一些前端入门知识,几节课的内容最终就总结成了这篇帖子。

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盒子模型&布局

http://zh.learnlayout.com/

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  //语句创建自定义错误
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,452评论 1 19
  • 目录:1、校验字符串是否为空2、判断字符串是否符合邮政编码格式3、判断字符串是否全是整数4、判断字符串是否全部是字...
    PZcoder阅读 1,143评论 0 0
  • 在这个周日(3月19日),我的新书《宛如昨日:生存游戏》首发式将在上海书城福州路店举行。 其实,这部新长篇的灵感来...
    蔡骏阅读 1,062评论 8 14
  • 每一年的国庆假期 自它从记不清的几天变成7天后 关于它的记忆似乎就随着年龄一点点的不清晰起来 时隔多少年才能看到的...
    哐哐当当嘿哈阅读 333评论 0 0