学习笔记整理

　Web 前端课程程笔记

　简介

　 - UI 设计

　色彩、设计

　布局、用户体验 - 页面制作 - 功能添加

　动态效果

　业务逻辑和数据处理

　和服务器交互

　 ----------设计和前端------------ - 前端：用户体验度，上线速度；

　 - 服务端处理(Java、PHP、.NET) - 测试 - 推广（拉勾网）

　 ---------推广（网络营销）--------

　前端 web 界面设计与制作->实现产品界面与功能->优化，兼容->与后端交互 (编写->调试->实践)

　课程设置

　第一阶段：

　 - HTML5 基础

　 - CSS3

　 - Web UI设计

　第二阶段：

　 - JS

　 (javascript)

　 - DOM

　(文档对象模型)

　 - Server

　（服务器）

　第三阶段：

　 - HTML5 高级

　 - JQuery

　 - Ajax

　（异步 js和 xml->局部刷新）

　第四阶段：

　 - Bootstrap

　 - Angular Js

　 - 阶段项目

　1 HTML5BASIC

　1.1 Unit01 1 ：

　Web b 基础知识

　、

　HTML L 快速入门

　、

　文本

　【Web 基础知识】

　web 又称万维网或环球网，即 Wide Web）,把信息和服务进行无缝连接； - Web 与 Internet：Web 是运行在 Internet 的应用；

　1.Internet：互联网；信息共享；

　2.Internet 提供的主要服务：Telnet（远程登录）、Email、(电子公告板：天涯论坛、百度贴吧)、FTP（上下传协议、上传、下载）；

　3.基本实现技术：

　 - 分组交换原理：信息在 Internet 上被分成许多小数据包（分组）进行传输，到达目的后将数据包重组为信息；

　 - TCP/IP协议族：用于找到指定的服务器；

　4.web 简介

　又称万维网或环球网，即 WWW

　把各种类型的信息与服务无缝连接，提供生动的图形用户界面（文档）

　- 信息：文字、图片、声音、视频等

　- 服务：News、、Mail等 - Web 的工作原理

　现在计算机应用的程序结构：

　1、c/s : Client / Server

　客户端/ 服务器模型

　通过指定的客户端来访问指定的服务器

　代表：QQ，魔兽世界，酷狗音乐盒...

　2、B/S :Browser / Server

　浏览器 / 服务器模型

　可以通过浏览器来访问指定服务器上的信息；

　B/S多于 C/S;

　请求（request）

　浏览器---------HTTP 协议-------->服务器

　浏览器 <-------HTTP 协议------------服务器

　响应（response）

　 3、PC：Personal Computer:个人计算机；

　4、通信协议采用的是 HTTP协议：Hypertext Transfer Protocol

　 FTP协议：

　只上传或下载文件，不作文本传输；

　 HTTP协议：超级文本传输协议；

　 - 规定了如何传递数据

　以及传递的数据格式是什么

　 DNS:域名解析器；将域名解析为 IP地址

　5.web 主要以网页的形式来发布多媒体信息；

　- 超文本标记语言 HTML Hyper Text Markkup Language

　6.浏览器连接到 Web 服务器并获取页面； - Web 服务器

　1.主要功能：

　- 存储 web上的信息，提供管理环境

　- 响应浏览器请求，执行服务器端程序

　 - 安全功能

　2.主要服务器产品：TOMCAT IIS APACHE...

　 - Web 浏览器

　1.主要功能

　- 提交请求

　- 作为 HTML 解释器和内嵌脚本程序执行器

　- 用图形化得方式显示 HTML 文档；

　2.主要 Web浏览器

　IE Firefox Chrome Opera Safari - Web 的相关技术

　client----Server-------DB（数据库）

　1.服务器端技术<----->数据库（DB）

　- PHP

　- JSP

　 - ASP

　- aspx

　请求 Request 与响应（response）

　2.客户端技术

　- 表现：HTML CSS

　 - 交互：JS

　【HTML 快速入门】

　1.HTML 概述：

　- web 是一个超文本文件的集合；

　- 超文本：超文本文件是 WEB 的基本组成单元，也称为网页或 HTML 文档、web页等，通常以.html 或.htm、.shtml 为后缀的文件；web 页通过超链接组织在一起；

　- web 页之间通过超文本中的超级链接组织在一起；

　HTML HyperText Markup Language

　超文本标记语言

　- 使用带尖括号的“标记”将网页的内容逐一标识出来；

　-由浏览器解释执行； 2.HTML 基本语法

　- 标记导致不同的显示效果；

　- 标记必须使用尖括号括起来；

　1、HTML：超文本标记语言

　2、HTML 文档格式

　- 标记有封闭类型（成对），也有非封闭类型；

　封闭：成对出现。有开始，有结束（双标签）

　<a> :开始

　</a>：结束

　非封闭：只有开始没有结束；（单标签）

　<br>

　:即表示开始，又可以表示结束；HTML5中可以这么写。

　<br />:

　<p></p>:双标签中,可以将一些文本写在标签内，这些文本收当前标签样式控制； **********注意：封闭标签。必须成对出现； 3.元素

　1.即标记；

　- 元素可以包含文本内容和其他元素，也可以是空的；

　元素嵌套：

　- 嵌套顺序：用缩进的方式进行体现；

　<P>

　<a></a>

　 </p>

　2.属性和值：

　属性：用来修饰元素；

　- 属性的声明必须位于开始标签里；

　<标记名称属性名="属性值" 属性名="属性值"></标记名称>

　- 一个标签内、属性可以有多个、不分先后顺序、多个属性间用空格区分；

　align 功能：控制文本在标签内的水平对齐方式 left / center / right; **********标准属性（公共属性、通用属性）：大部分标签所具备的属性；

　- id

　: 定义所在标签唯一标识名称；

　- title ：鼠标移到当前标签所在区域时所显示的文本；

　- class ：引用样式表中的指定“类”样式；

　- style ：定义当前标签的行内样式；

　3.注释：不会被浏览器或服务器所翻译的内容；

　- 解释说明；

　/*********css注释*********/

　- 注释是不能嵌套；

<!--

　-->

　- 注释不能写在标签声明里；

<a ></a> 4.HTML 与 XHTML

　1999 年 12月 24 日，W3C 推荐标准 HTML4.01；

　 XHTML1.0 于 2000 年的 1 月 26 日成为 W3C 标准

　- 与 HTML 几乎相同；

　- 更严格、更纯净的 HTML 版本；

　<p>This is a<br>paragraph

　XHTML 元素必须被关闭，空标记也要关闭；

　<p>This is a<br />paragraph</p>

　 HTML5:

　更为简洁的 HTML 代码；

　<p align="center">This is a<br />paragraph</p>

　html5:

　<p align=center>This is a<br>paragraph</p>

　********* 属性值加的引号""和结束标签的"/" 最好加上； 5.文档结构

　1.文档类型声明：

　- 放在 DOCTYPE 标签里；

　- Strict DTD 严格类型；

　- Transitional DTD 过度类型；html4.01与 xhtml1.0 之间过度；

　- Frameset DTD 框架类型，（很少用）

　-HTML5 的文档类型声明：

　 <!DOCTYPE html>

　 charset：字符集

　 ISO-8859-1：支持英文编码解析

　 utf-8:支持中文，支持英文

　2.html 页面：

　 - <html></html>:整个网页里有且只有这一对根元素； ******* - 按照严格版本，版本是“xhtml1.0”且是严格模式（Strict DTD）时，html 标签必须包括“命名空间标识符”

　-两个子元素：

　<html>

　</html>

　1. 2 Unit02 2 ：

　图像和链接

　、

　表格

　、

　结构标记

　 1.浏览器：解析 HTML 代码以及 JS语言； 2.<head>元素：主要包含网页的说明信息；

　1.网页标题

　2.网页的编码格式；

　3.声明内部样式表；

　4.引入外部样式表；

　5.声明 JS脚本；

　6.引入外部脚本；

　7.声明其它元素：关键字，描述等。

　- 标题：<title></title>:标签页，没有任何属性，只能出现在 head 里； 3.网页编码格式：

　1.默认编码：ISO-8859-1 -> 不支持中文；

　- 改编码，通过 meta 标签

　描述描述内容类型

　字符集

　utf-8

　2.添加的描述和关键字；

　meta：一般作说明信息的声明；

　 - 常用属性：

　 http-equiv 修改编码

　charset

　修改编码

　content

　name ******** - 添加"关键字"：

　面向搜索引擎；

　 - 添加"描述"：

　搜索出来对标题的解释； 4. 特殊字符：

　通过转义字符来标识特殊符号；如空格、<、>;

　转移字符：改变单词原有的意思，被解释成一种全新的意义；

　- & 与

　-  空格

　- < less than <

　- > greater than >

　- 企业标识：© company

　- ¥人民币 5.文本样式：

　 <b></b>

　加粗

　<i></i>

　倾斜

　<u></u>

　下划线

　<s></s>

　删除线

　<sup></sup> 上标

　<sub></sub> 下标 6.标题元素：

　<h6></h6> 一级标题到六级标题； 7、分区元素

　1.块级元素：多数用于布局；

　自己独自占一行的元素都称为块级元素，

　 div

　 ,hn(h1-h6)、

　 hr、

　、ul

　、li

　 2.行内元素：

　包围文本，方便为文本添加效果；

　与其他的行内元素可以在一行内显示，

　 span,

　 ********行内元素宽和高是由内容决定的，不受 width 和 height 控制； 8.水平线：<hr> horizontal

　常用属性：

　- size:水平线的粗细

　- width:水平线的长度；数值/百分比；

　- align：水平对齐方式

　- color:颜色； 9.预格式化标签

　<pre></pre>:保留源文档中的格式，保留原来的空格和换行；【图像和链接】

　目录结构：

　* 目录就是 web 站点中文件夹的名称；

　- 包含多个子目录

　 1.URL(统一资源定位符)：要需找的资源的地址；路径；

　- 文件，图片、音视频、其他页面。

　相对路径：相对于当前页面而言；

　平级用名字，子级进目录，父级向上返；

　Koala.jpg

　img/Koala.jpg

　../Koala.jpg

　根相对路径：

　服务器上：以/开始

　 /images/user.jpg

　绝对路径：又叫全路径，就是资源文件在计算机中的位置/文件从最高级目录下开

　始的完整的路径；无论当前资源路径是什么，使用绝对路径总能找到需要的资源；

　 D:/向成云/Day02/img/Koala.jpg

　组成：

　 1.协议：http://

　2.主机名/域名；

　 3.目录路径； img

　 4.请求的资源名；logo.png

　 2.图像<img />；

　图像格式：

　- JPEG

　- GIF

　- PNG

　 src 属性：指定显示的图像的路径

　width 属性：图像的宽

　height 属性：图像的高

　title 属性：鼠标移到图片上显示的文字

　alt

　3.链接；

　目标：target="_self"

　在本页打开

　 target="_blank"

　在新页面打开

　a 标签也有 title 属性； ********** name 属性：定义锚点名称；例子：“回到顶部”

　--------------------------------------

　链接接的各种表现形式：

　 1.下载资源：

　 2.网页跳转：

　 3.电子邮件链接：

　 4.返回页面的空链接；

　 5.链接到 javascript;

　6.<a href="2015-9-01 课堂笔记.txt">打印出 txt 文档</a> 【锚点】

　通过 a 定义锚点：

　HTML 中的锚点相当于 HTML 文档中某个位置的记号；

　1.定义锚点；

　2.跳转到锚点；

　<a href="#anchorName">跳转到锚点</a>

　锚点也可以指向 id；

　跳转其它页面锚点处：

　<a href="页面 URL#anchorName">跳转到锚点</a> 【table】

　属性：

　width

　height

　border

　bordercolor="color" ->边框颜色

　align="center"

　->表格相对父元素的对齐方式

　cellspacing="10px"

　->单元格间距

　cellpadding="20px"

　->单元格与内容的边距 padding

　bgcolor="#ccc"

　->背景颜色 ************* background="images/Lighthouse.jpg"->背景图片

　tr属性：

　height:

　align:

　 ->控制单元格里面的内容水平对齐方式

　valign：top、middle、bottom ->垂直对齐方式

　td 属性

　width

　height

　bgcolor="#ccc"

　->背景颜色

　background="images/Lighthouse.jpg"->背景图片

　align:

　 ->控制单元格里面的内容水平对齐方式/

　valign：top、middle、bottom ->垂直对齐方式

　 colspan

　 ->跨列向右合并；

　rowspan

　 ->跨行向下合并；

　表格标题：

　 caption

　列标题：

　 th：与 td 平级；

　行分组：

　表头行分组：

　thead

　表主题行分组：tbody

　表尾行分组：

　tfoot

　********如果 tr和 td 都设置了 width和 height：值大的有效； table 布局的缺点：网页中要把所有的图像等都下载完才显示；

　【HTML5 结构标记】

　页头

　导航

　<section></section>主体内容

　<article></article>引用的文章、帖子、博客.....

　侧导航、边栏等

　页尾

　【列表】

　显示多条相关信息的组件；

　1.有序列表；

　 ----type="i/a":序列类型

　 start="3" ：从 3 开始；

　order list

　列表项 list item

　 </ol>

　 2.无序列表；

　 -----type="square/circle/disk" 方块/空心圆/实心圆

　 </ul>

　 ol 和 ul 中间只能嵌套 li，li 里可以嵌套任何 html 标签；

　 3.定义列表：

　 <dl>

　<dt></dt> --标题 / 图

　<dd></dd> --文字描述

　 </dl>

　图文混排

　 1.3 Unit03 3 ：

　列表

　、

　表单

　、

　其他常用标记

　【表单】

　1.表单标签：<form></form>

　作用：用于定义表单中的基本信息，如提交地址，提交方式等。

　*************** 如果表单元素没有出现在 from里，是不能提交到服务器。

　属性：

　 - action 提交地址服务器处理数据的程序地址，由服务器端开发人员提供。默认提交到本页。

　 - method 表单以什么方式将数据提交给服务器（明文还是密文）

　默认值是get；

　常用值：

　 1.post

　 - 密文

　 - 有密码选 post 提交

　 - 不限传递数据长度

　 2.get

　- 明文

　 - 有传递数据长度限制

　IE：2KB；

　 - name

　定义表单名称；方便使用 js来获取表单；

　 - enctype 表单数据的编码方式；

　不同的数据使用不同的方式，主要体现在“普通文本”传输和“文件”传输上；

　取值：

　-- application/x- 普通文本

　默认按文本方式将数据传递；

　-- multipart/form-data 上传文件时的编码值

　-- text/plain 也是普通文本编码方式但有时候不符合规定不能传；

　2.表单元素（控件）：用于接受用户数据；

　- input：

　属性：

　 -- type：

　用于区分不同的 input 元素的样式和功能；

　 1.text

　->txt 文本框没有安全性；

　 2.password

　->txt 密码框密文/密码录入；

　 ---文本框和密码框其他的属性:

　maxlength:

　 readonly:

　***************** 3.checkbox

　->复选框

　注意：作为一组复选框，name 属性值必须一致；

　4.radio

　 ->rdo 单选按钮

　-- name 分组

　注意：如果一组单选按钮中只有一个能被选上，他们的 name 属性必须一样；

　 Gender

　性别

　 Male

　 FeMale

　-- checked

　5.submit

　-> 用于提交表单到服务器；

　reset

　 -> 将所有表单元素恢复到默认值；

　button

　-> 执行自定义的脚本内容；

　6.隐藏域

　-> 在页面看不见的地方保存一段信息；如用户注册的id 号；

　hidden

　-> 一般情况下，会将安全系数较高的并且不想让用户看见的数据保存在隐藏域中；

　文件框

　-> 能实现文件选择的功能；

　 ->上传文件；

　******************* file

　注意：上传文件必须把 form的属性 enctype改成：multipart/form-data；

　 -- name：

　当前表单元素的名称，用于提交给服务器使用；

　-- valve：

　默认值；

　 -- disabled 禁用控件

　- textarea 多行文本域

　<textarea></textarea> 使用场合：注册信息时的详细条款等。

　属性：

　 cols：指定文本区域的列数一行显示多少个字；

　 rows：指定文本区域的行数显示多少行；

　超出显示滚动条；

　- select 与 option : 从下拉框选择内容；

　</select>

　分类：

　 1.下拉列表

　 2.滚动列表

　select 属性 sel

　name：

　size：显示被选信息数量大于等于 3 条就显示滚动条；

　multiple:是否多选；

　option 属性

　 value：

　选项值

　selected：预选中

　- 其他元素

　 1.label: 与表单元素相关联；点击该 lable 时如同点击关联的表单元素；

　属性：

　 for：关联表单元素的 id；

　 2.为空间分组：

　 fieldset：为控件分组；

　 legend

　：分组的标题；

　【其他常用标记】

　1.浮动框架：在一个页面中显示多个 html 文档内容，也就是将其他的页面嵌入到当前页面中；

　属性：

　src :浮动框架中的网页 url；一个页面可以出现多个 iframe

　height：

　width：

　 frameborder:边框

　2.摘要与细节：

　作用：将网页一部分信息通过类似于下拉列表的方式进行显示与隐藏；

　 <details></details> 用于定义细节

　<summary></summary> 显示当前 details的标题

　注意：summary必须要出现在 details的第一个子元素的位置；

　3.度量元素：

　多数进度的显示、比例的显示。

　属性：

　min：范围的最小值；默认为 0；

　max：范围的最大值；默认为 1；

　value：度量值；默认为 0；

　4.时间元素：

　<time>显示内容</time> 定义公历时间 24 小时制；或日期；

　属性：

　datetime：规定日期和时间；日期与时间通过“T”来表示分割；

　5.高亮显示文本元素：

　突出显示文本； 2 CSS3BASIC

　2.1 Unit01 1 ：

　CSS

　概述

　、

　CSS

　语法

　、

　尺寸与边框

　【css : Cascading Style sheet】

　层叠样式表

　级联样式表 1、作用：

　已统一的方式为页面定义外观；