Day22.Web前端简介二

Web前端简介二

---

---

前言

继续接着前面的Web前端简介一。本文使用的部分图片源于Jon Duckett 先生的HTML and CSS: Design and Build Websites一书，这是一本非常棒的前端入门书，有兴趣的读者可以深入了解。

---

一. 使用CSS渲染页面

1.1 简介

• CSS的作用

• CSS的工作原理

• 规则、属性和值
  

• 常用选择器
  

1.2 颜色（color）

• 如何指定颜色
• 颜色术语和颜色对比
• 背景色

1.3 文本（text / font）

• 文本的大小和字型(font-size / font-family)
  
  

• 粗细、样式、拉伸和装饰(font-weight / font-style / font-stretch / text-decoration)
  

• 行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)

• 对齐(text-align)方式和缩进(text-ident)

• 链接样式（:link / :visited / :active / :hover）

• CSS3新属性

  • 阴影效果 - text-shadow
  • 首字母和首行文本(:first-letter / :first-line)
  • 响应用户

1.4 盒子（box model）

• 盒子大小的控制（width / height）
  

• 盒子的边框、外边距和内边距（border / margin / padding）
  

• 盒子的显示和隐藏（display / visibility）

• CSS3新属性

  • 边框图像（border-image）
  • 投影（border-shadow）
  • 圆角（border-radius）

1.5 列表、表格和表单

• 列表的项目符号（list-style）
• 表格的边框和背景（border-collapse）
• 表单控件的外观
• 表单控件的对齐
• 浏览器的开发者工具

1.6 图像

• 控制图像的大小（display: inline-block）
• 对齐图像
• 背景图像（background / background-image / background-repeat / background-position）

1.7 布局

• 控制元素的位置（position / z-index）

  • 普通流
  • 相对定位
  • 绝对定位
  • 固定定位
  • 浮动元素（float / clear）

• 网站布局

  • HTML5布局
    

• 适配屏幕尺寸

  • 固定宽度布局
  • 流体布局
  • 布局网格

二. JavaScript 的控制行为

2.1 JavaScript 基本语法

• 语句和注释
• 变量和数据类型
  • 声明和赋值
  • 简单数据类型和复杂数据类型
  • 变量的命名规则
• 表达式和运算符
  • 赋值运算符
  • 算术运算符
  • 比较运算符
  • 逻辑运算符
• 分支结构
  • if...else...
  • switch...cas...default...
• 循环结构
  • for循环
  • while循环
  • do...while循环
• 数组
  • 创建数组
  • 操作数组中的元素
• 函数
  • 声明函数
  • 调用函数
  • 参数和返回值
  • 匿名函数
  • 立即调用函数

2.2 面向对象

• 对象的概念
• 创建对象的字面量语法
• 访问成员运算符
• 创建对象的构造函数语法
  • this关键字
• 添加和删除属性
  • delete关键字
• 标准对象
  • Number / String / Boolean / Symbol / Array / Function
  • Date / Error / Math / RegExp / Object / Map / Set
  • JSON / Promise / Generator / Reflect / Proxy

2.3 BOM

• window对象的属性和方法
• history对象
  • forward() / back() / go()
• location对象
• navigator对象
• screen对象

2.4 DOM

• DOM树
• 访问元素
  • getElementById() / querySelector()
  • getElementsByClassName() / getElementsByTagName() / querySelectorAll()
  • parentNode / previousSibling / nextSibling / children / firstChild / lastChild
• 操作元素
  • nodeValue
  • innerHTML / textContent / createElement() / createTextNode() / appendChild() / insertBefore() / removeChild()
  • className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
• 事件处理
  • 事件类型
    • UI事件：load / unload / error / resize / scroll
    • 键盘事件：keydown / keyup / keypress
    • 鼠标事件：click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
    • 焦点事件：focus / blur
    • 表单事件：input / change / submit / reset / cut / copy / paste / select
  • 事件绑定
    • HTML事件处理程序（不推荐使用，因为要做到标签与代码分离）
    • 传统的DOM事件处理程序（只能附加一个回调函数）
    • 事件监听器（旧的浏览器中不被支持）
  • 事件流：事件捕获 / 事件冒泡
  • 事件对象（低版本IE中的window.event）
    • target（有些浏览器使用srcElement）
    • type
    • cancelable
    • preventDefault()
    • stopPropagation()（低版本IE中的cancelBubble）
  • 鼠标事件 - 事件发生的位置
    • 屏幕位置：screenX和screenY
    • 页面位置：pageX和pageY
    • 客户端位置：clientX和clientY
  • 键盘事件 - 哪个键被按下了
    • keyCode属性（有些浏览器使用which）
    • String.fromCharCode(event.keyCode)
  • HTML5事件
    • DOMContentLoaded
    • hashchange
    • beforeunload

2.5 JavaScript API

• 客户端存储 - localStorage和sessionStorage

  localStorage.colorSetting = '#a4509b';
  localStorage['colorSetting'] = '#a4509b';
  localStorage.setItem('colorSetting', '#a4509b');
  

• 获取位置信息 - geolocation

  navigator.geolocation.getCurrentPosition(function(pos) { 		  
      console.log(pos.coords.latitude)
      console.log(pos.coords.longitude)
  })
  

• 从服务器获取数据 - Fetch API

• 绘制图形 - <canvas>的API

• 音视频 - <audio>和<video>的API

---

总结

今天主要是认识了CSS渲染的强大之处，以及主要构成；还有JavaScript 的优秀之处，这都需要好好的笑话消化，其实第一次接触还是蛮难的。个人有个小建议，就是多看看别人的网站，如果是打开网站，直接 检查 即可。比如是谷歌浏览器，找到一个自己喜欢的网站，然后直接鼠标右键，点击 检查 就可以看到网站的网页代码状况。像我这种小白，感觉还是先模仿别人做做会更好（记得最开始从简单的网站开始哈，先学会走路）。

脑壳疼，溜了遛了。Loading（22/100）。。。