1、Web 前端课程 笔记简介- UI 设计色彩、设计布局、用户体验- 页面制作- 功能添加动态效果业务逻辑和数据处理和服务器交互-设计和前端- 前端：用户体验度，上线速度； - 服务端处理(Java、PHP、.NET)- 测试- 推广 （拉勾网）-推广（网络营销）-前端web 界面设计与制作- 实现产品界面与功能 -优化，兼容 -与后端交互(编写-调试-实践)课程设置第一阶段：- HTML5 基础- CSS3- Web UI 设计第二阶段：- JS (javascript)- DOM (文档对象模型)- Server （服务器）第三阶段：- HTML5 高级- JQuery- Ajax （异步
2、js 和 xml-局部刷新）第四阶段：- Bootstrap- Angular Js- 阶段项目目录简介 .11 HTML5BASIC .41.1 Unit01： Web 基础知识 、 HTML 快速入门 、 文本 .41.2 Unit02： 图像和链接 、 表格 、 结构标记 .71.3 Unit03： 列表 、 表单 、 其他常用标记 .122 CSS3BASIC.152.1 Unit01： CSS 概述 、 CSS 语法 、 尺寸与边框 .152.2 Unit02： 框模型 、 背景 、 渐变 .212.3 Unit03： 文本格式化 、 表格 、 浮动 .242.4 Unit04： 显
3、示 、 列表 、 定位 .273 CSS3CORE.283.1 Unit01： 复杂选择器 、 内容生成 、 多列 、 CSS Hack .283.2 Unit02： 转换 、 过渡 、 动画 、 CSS 优化 .324 JAVASCRIPT.384.1 Unit01： JavaScript 概述 、 JavaScript 基础语法 、 变量和常量 、 数据类型 .384.2 Unit02： 数据类型转换 、 运算符和表达式 .434.3 Unit03： 函数 、 分支结构_1 .494.4 Unit04： 分支结构_2 、 循环结构 .544.5 Unit05： 创建和访问数组 、 数组的常
4、用方法_1 .564.6 Unit06： 数组的常用方法_2 、 二维数组 、 String_1 .624.7 Unit07： String_2 、 正则表达式_1 .684.8 Unit08： 正则表达式_2 、 Math 、 Date、Number、Boolean .704.9 Unit09： 错误处理 、 Functions .744.10 Unit010： Object 、 JavaScript OOP 、 原型与继承 .854.11 面向对象 原型 .945 DOM .995.1 Unit01： DOM 概述 、 DOM 树 、 选取元素 .995.2 Unit02： 读取和修改节点
5、对象属性 .1045.3 Unit03： 增加、删除和替换节点 、 常用 HTML DOM 对象 .1065.4 Unit04： BOM 概述 、 window 对象 、 window 常用子对象-1 .1085.5 Unit05： window 常用子对象-2 、 event 对象 、 Cookie .1126 jQuery .1156.1 Unit01： jQuery 、 jQuery 选择器 .1156.2 Unit02： jQuery 操作 DOM 、 jQuery 事件 .1176.3 Unit03： jQuery 动画效果 、 jQuery 类数组操作 、 使用插件1 .1216.
6、4 Unit04： 使用插件2 、 开发插件 .1257 HTML5CORE.1267.1 Unit01： HTML5 表单元素 、 HTML5 表单属性 、 HTML5 表单验证 .1267.2 Unit02： 视频处理 、 音频处理 、 Canvas 绘图-1 .1297.3 Unit03： Canvas 上绘图-2 、 处理 Canvas 中的图像 、 Chart.js 框架 .1347.4 Unit04： SVG 、 Two.js 框架 .1377.5 Geolocation 、 拖放 API.1427.6 Unit06： Web Worker 、 Web 存储 API 、 WEB S
7、ocket .1488 SERVERHTTP .1588.1 Unit01： 服务器概述 、 数据库服务器 、 WEB 服务器 .1588.2 Unit02： PHP 语言基础 、 PHP 操作 MySQL 数据库 .1668.3 Unit03： URL 、 HTTP 协议 、 HTTP 优化 .1729 AJAX .1819.1 Unit01： AJAX 、 AJAX 的使用 .1819.2 Unit02： XML 语法 、 XML 解析 、 JSON .1859.3 Unit03： AJAX 的增强操作 、 AJAX 跨域请求 .18910 BOOTSTRAP .19210.1 Unit0
8、1： 响应式网页 、 Bootstrap 起步 .1921 / 1981 HTML5BASIC1.1 Unit01： Web基础知识 、 HTML快速入门 、 文本【Web 基础知识】web 又称万维网或环球网，即 WWW（World Wide Web）,把信息和服务进行无缝连接；- Web 与 Internet：Web 是运行在 Internet 的应用；1.Internet：互联网；信息共享；2.Internet 提供的主要服务： Telnet（远程登录） 、Email、WWW、BBS( 电子公告板：天涯论坛、百度贴吧)、FTP （上下传协议、上传、下载） ；3.基本实现技术：- 分组交换
9、原理：信息在 Internet 上被分成许多小数据包（分组）进行传输，到达目的后将数据包重组为信息；- TCP/IP 协议族：用于找到指定的服务器；4.web 简介又称万维网或环球网，即 WWW把各种类型的信息与服务无缝连接，提供生动的图形用户界面（文档）- 信息：文字、图片、声音、视频等- 服务：News 、FTP、Telnet、Mail 等- Web 的工作原理现在计算机应用的程序结构：1、c/s : Client / Server客户端/ 服务器 模型通过指定的客户端来访问指定的服务器代表：QQ，魔兽世界，酷狗音乐盒.2、B/S :Browser / Server浏览器 / 服务器 模型
10、可以通过浏览器来访问指定服务器上的信息；http:/B/S 多于 C/S;请求（request） 浏览器-HTTP 协议- 服务器浏览器 数据库（ DB）- PHP- JSP- ASP- aspx请求 Request 与响应（response ）2.客户端技术- 表现：HTML CSS- 交互：JS【HTML 快速入门】1.HTML 概述：- web 是一个超文本文件的集合；- 超文本：超文本文件是 WEB 的基本组成单元，也称为网页或 HTML 文档、web 页等，通常以.html 或.htm、.shtml 为后缀的文件；web 页通过超链接组织在一起；- web 页之间通过超文本中的超级链
11、接组织在一起；HTML HyperText Markup Language 超文本标记语言- 使用带尖括号的“标记 ”将网页的内容逐一标识出来；-由浏览器解释执行；2.HTML 基本语法- 标记导致不同的显示效果；- 标记必须使用尖括号括起来；1、HTML：超文本标记语言2、HTML 文档格式- 标记有封闭类型（成对） ，也有非封闭类型；封闭：成对出现。有开始，有结束（双标签）3 / 198:开始：结束非封闭：只有开始没有结束；（单标签）:即表示开始，又可以表示结束；HTML5 中可以这么写。:双标签中,可以将一些文本写在标签内，这些文本收当前标签样式控制；*注意：封闭标签。必须成对出现；3.
12、元素1.即标记；- 元素可以包含文本内容和其他元素，也可以是空的；元素嵌套：- 嵌套顺序：用缩进的方式进行体现；2.属性和值：属性：用来修饰元素；- 属性的声明必须位于开始标签里；- 一个标签内、属性可以有多个、不分先后顺序、多个属性间用空格区分；pppalign 功能：控制文本在标签内的水平对齐方式 left / center / right;*标准属性（公共属性、通用属性）：大部分标签所具备的属性；- id : 定义所在标签唯一标识名称；- title ：鼠标移到当前标签所在区域时所显示的文本；- class ：引用样式表中的指定“类”样式；- style ：定义当前标签的行内样式；3.注
13、释：不会被浏览器或服务器所翻译的内容；- 解释说明；/*css 注释*/- 注释是不能嵌套；- 注释不能写在标签声明里；4.HTML 与 XHTML1999 年 12 月 24 日，W3C 推荐标准 HTML4.01；XHTML1.0 于 2000 年的 1 月 26 日成为 W3C 标准- 与 HTML 几乎相同；- 更严格、更纯净的 HTML 版本；This is aparagraph4 / 198XHTML 元素必须被关闭，空标记也要关闭；This is aparagraphHTML5:更为简洁的 HTML 代码；This is aparagraphhtml5:This is apara
14、graph * 属性值加的引号“和结束标签的“/“ 最好加上；5.文档结构1.文档类型声明：- 放在 DOCTYPE 标签里；- Strict DTD 严格类型；- Transitional DTD 过度类型；html4.01 与 xhtml1.0 之间过度；- Frameset DTD 框架类型， （很少用）-HTML5 的文档类型声明：charset：字符集 ISO-8859-1：支持英文编码解析utf-8:支持中文，支持英文 2.html 页面：- :整个网页里有且只有这一对根元素；* - 按照严格版本，版本是 “xhtml1.0”且是严格模式（Strict DTD）时，html 标签必
15、须包括“命名空间标识符”-两个子元素：1.2 Unit02： 图像和链接 、 表格 、 结构标记1.浏览器：解析 HTML 代码以及 JS 语言；2.元素：主要包含网页的说明信息；1.网页标题2.网页的编码格式；3.声明内部样式表；4.引入外部样式表；5.声明 JS 脚本；6.引入外部脚本；7.声明其它元素：关键字，描述等。5 / 198- 标题：:标签页，没有任何属性，只能出现在 head 里；3.网页编码格式：1.默认编码：ISO-8859-1 - 不支持中文；- 改编码，通过 meta 标签描述 描述内容类型字符集 utf-82.添加的描述和关键字；meta：一般作说明信息的声明；- 常
16、用属性：http-equiv 修改编码charset 修改编码contentname* - 添加“ 关键字“：面向搜索引擎；- 添加“描述 “：搜索出来对标题的解释；4. 特殊字符：通过转义字符来标识特殊符号；如空格、;转移字符：改变单词原有的意思，被解释成一种全新的意义；- 空格- less than - 企业标识： company- 人民币5.文本样式：加粗倾斜下划线删除线上标下标6.标题元素：一级标题到六级标题；7、分区元素1.块级元素：多数用于布局；自己独自占一行的元素都称为块级元素，div,p,hn(h1-h6)、6 / 198hr、ol、ul、li 2.行内元素： 包围文本，方便为
17、文本添加效果；与其他的行内元素可以在一行内显示，span,b,u,is *行内元素宽和高是由内容决定的，不受 width 和 height 控制；8.水平线 ： horizontal常用属性：- size:水平线的粗细- width:水平线的长度；数值/百分比；- align：水平对齐方式- color:颜色；9.预格式化标签:保留源文档中的格式，保留原来的空格和换行；【图像和链接】目录结构：* 目录就是 web 站点中文件夹的名称；- 包含多个子目录- 1.URL(统一资源定位符)：要需找的资源的地址；路径 ；- 文件，图片、音视频、其他页面。相对路径：相对于当前页面而言；平级用名字，子级进
18、目录，父级向上返；Koala.jpgimg/Koala.jpg./Koala.jpg根相对路径：服务器上：以/开始/images/user.jpg绝对路径：又叫全路径，就是资源文件在计算机中的位置/文件从最高级目录下开始的完整的路径；无论当前资源路径是什么，使用绝对路径总能找到需要的资源；D:/向成云/Day02/img/Koala.jpghttp:/ 组成：1.协议：http:/ 2.主机名/域名；7 / 1983.目录路径； img4.请求的资源名；logo.png 2.图像 ；图像格式：- JPEG- GIF- PNGsrc 属性：指定显示的图像的路径width 属性：图像的宽heigh
19、t 属性：图像的高title 属性：鼠标移到图片上显示的文字alt3.链接；点击文本点击文本 点击文本目标：target=“_self“ 在本页打开target=“_blank“ 在新页面打开a 标签也有 title 属性；* name 属性：定义锚点名称；例子：“回到顶部”-链接接的各种表现形式：1.下载资源：点击文本2.网页跳转： 点击文本3.电子邮件链接：联系我们4.返回页面的空链接；5.链接到 javascript;6.打印出 txt 文档【锚点】通过 a 定义锚点：HTML 中的锚点相当于 HTML 文档中某个位置的记号；1.定义锚点；2.跳转到锚点；跳转到锚点锚点也可以指向 id；跳转其它页面锚点处：
