java前端技术怎么辨别 java前端技术简介

Web前端简介二

---

文章目录

• Web前端简介二
• 前言
• 一. 使用CSS渲染页面

• 1.1 简介
• 1.2 颜色（color）
• 1.3 文本（text / font）
• 1.4 盒子（box model）
• 1.5 列表、表格和表单
• 1.6 图像
• 1.7 布局

• 二. JavaScript 的控制行为

• 2.1 JavaScript 基本语法
• 2.2 面向对象
• 2.3 BOM
• 2.4 DOM
• 2.5 JavaScript API

• 总结

---

前言

继续接着前面的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 的优秀之处，这都需要好好的笑话消化，其实第一次接触还是蛮难的。个人有个小建议，就是多看看别人的网站，如果是打开网站，直接 检查 即可。比如是谷歌浏览器，找到一个自己喜欢的网站，然后直接鼠标右键，点击 检查 就可以看到网站的网页代码状况。像我这种小白，感觉还是先模仿别人做做会更好（记得最开始从简单的网站开始哈，先学会走路）。