客户端的编程技术

【笔记】HTML、CSS、JS

作者 Trekerz 日期 2017-02-28
客户端的编程技术

一、 HTML

1. HTML介绍

​ (1) 常用特殊字符(比如 等等)

2. HTML基本标签

​ (1) 段落(p)

​ (2) 标题(h系列)

​ (3) 字体格式(b、i、del)

​ (4) 链接和图像(a、img)

​ (5) 表格

​ 用于显示真实地表结构和数据。控制网页布局。

​ table、tr、td、th。

​ border、colspan、rowspan。

​ (6) 列表(ul、ol、li、dl、dt、dd)

​ (7) 颜色及背景

​ (8) Flash及音视频播放(object标签、audio、video)

3. HTML表单

用于从客户端收集用户在浏览器中的输入,是HTML实现客户端与服务器交互的核心方法。(form)

浏览器将用户输入的数据封装到HTTP body中并以POST方式提交给浏览器。

​ (1) 文本输入(input单行、多行、input密码框)

​ (2) 单项选择(单选、下拉)

​ (3) 多项选择(复选框)

​ (4) 文件上传(input file)

​ (5) 边框及提交(fieldset、submit)

二、 CSS

将页面元素与显示效果分离,提高页面的复用性和可维护性。

1. 样式声明方式

​ (1) 元素内联样式

​ (2) 页面\中的内联样式

​ (3) 外联样式

2. CSS语法

由选择器(基本选择器、基本选择器的组合)和样式属性组成。

(略:常用选择器)

3. 基于CSS+DIV的页面布局

​ (1) \是HTML用于页面分组的块元素,是专门用来实现元素布局的标签。

​ (2) CSS布局中的常用属性值

​ (略:常用属性值)

三、 JavaScript

直译式脚本语言、动态类型语言,解释器被称为js引擎。

1. 在HTML中嵌入JavaScript

​ (1) 内部嵌入

​ (2) 外部链接

2. JavaScript的基本语法

​ (1) 语句

​ (2) 变量及数据类型

​ (3) 操作符(与Python比较类似)

​ (4) 函数(与Python类似,返回值是可选的)

​ (5) 判断语句

​ a. if

​ b. switch

​ (6) 循环语句

​ a. for

​ b. while

3. DOM及其读写

DOM是当网页被加载时浏览器创建的页面文档对象类型,它用结构化的方式描述了标记语言的文件内容。

HTML DOM被构建为树结构,每个HTML页面被描述为一个以document为根节点的树,HTML中每个标签都被描述为树的一个节点。

通过DOM树,JavaScript可以读取、增、删、改HTML标记的元素、内容、属性样式等。

​ (1) 查找节点

​ a. getElementById(id);

​ b. getElementByName(name);

​ c. getElementByTagName(tagName);

​ d. obj.childNodes;

​ e. obj.firstChild;

​ f. obj.lastChild;

​ g. obj.nextSibling;

​ h. obj.parentNode;

​ i. obj.previousSibling。

​ (2) 增加节点

​ a. document.createElement();

​ b. obj.appendChild();

​ c. obj.insertBefore();

​ d. obj.replaceChild();

​ (3) 删除节点

​ obj.removeChild();

​ (4) 访问及修改属性节点

​ a. obj.getAttribute();

​ b. obj.setAttribute();

​ (5) 访问及修改节点的内容

​ obj.innerHTML();

4. Window对象

用于访问浏览器本身属性的一些方法的集合,包括document、history、location、navigator、screen。

(略:window对象的常用属性及方法)

5. HTML事件处理

包括鼠标事件、键盘事件、对象事件、表单事件、多媒体事件。

(略:常用的HTML事件)

四、 jQuery

更轻松地写JavaScript代码。

1. 使用jQuery
2. 选择器
3. 行为

​ (1) 标记内容操作

​ (2) 标记新增与删除

​ (3) 事件响应(HTML事件除去开头的on)

​ (4) 标记遍历(例如得出多个子元素组成的数组)

​ (5) jQuery特效(动画)