WEB前端.pptx

WEB 前端 一 前端简介 web概述 Web全称为World Wide Web Web是Internet提供的一种服务 Web是存储在全世界Internet计算机中、数量巨大的文档的集合 Web是一种超文本信息系统 Web是图形化的和易于导航的 Web与平台无关 Web是分布式的 、动态的、交互的 前端简介 web工作原理 前端简介 什么是web前端？ web前端主要是用来开发web页面的，一般而言所涉及的内容包括HTML、CSS、JavaScript。 与后端相比： 前端客户端环境不可预知 代码开源 数据无法隐藏 更关注页面性能和用户体验 前端简介 二 前端技术 前端技术 外 HTML:超文本标记语言 前端技术-HTML 概念 HTML（Hypertext Markup Language）:超文本标记语言，它是构成Web页面（Page）的主要工具。 用HTML编写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，HTML标记可以说明文字、图形、动画、声音、表格、链接等 。 简史 1989年，Tim Berners-Lee发明HTML 1998年2月，发布XML 1.0 1999年12月，发布HTML4.01版本 2000年1月，发布XHTML1.0 2014年10月底，HTML 5标准规范制定完成 前端技术-HTML 文档结构和语法 原则：标签闭合 前端技术-HTML 元素分类 块级元素（block） div、p、h1~h6、table、ul、fieldset…… 特点：默认占据整行位置 行内元素（inline） a、span、label、img、input、select、textarea…… 特点：默认一行可展示多个行内元素 嵌套规则 块级元素可以嵌套行内元素，除a以外的行内元素不能嵌套块级元素 CSS ：层叠样式表 前端技术-CSS 基本语法 前端技术-CSS CSS - 选择器 元素选择器 p { font-size:2em; } 分组选择器 div,p { color:#f00; } 类选择器 .class{ color:red; } id选择器 #info { color:red; } 属性选择器 *[title] {color:red;} 包含选择器 h1 em {color:red;} 伪类选择器 :hover …… 前端技术-CSS CSS – 盒子模式 CSS盒子模型就是一种思维模型，每个元素都有边界、边框、填充、内容四个属性。 前端技术-CSS CSS – 相对定位 相对定位是“相对于”元素在文档中的初始位置，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 前端技术-CSS CSS – 绝对定位 绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含元元素块。 前端技术-CSS CSS – 样式引用优先级 前端技术-CSS CSS – 优化 外部引入样式文件 按需加载(只加载你需要的) JavaScript ：脚本语言 前端技术-JavaScript 简介 JavaScript是一种面向对象、基于事件驱动的轻量级、解释性脚本语言，类似于C、VB，但不需要编译。 语言特性 简单性—解释性、脚本、无严格数据类型 安全性— Browser无法访问本地硬盘数据/写入到数据库 动态交互性— JS可以直接对用户提交的信息作出回应 跨平台性—支持JS的Browser） 前端技术-JavaScript 语法 JavaScript的语法和Java语言类似，每个语句以‘;’结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加‘;’，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上。 注意： JavaScript严格区分大小写，如果弄错了大小写，程序将报错或者运行不正常。 前端技术-JavaScript 位置 head body 单独的js文件引入 直接在事件处理代码中 前端技术-JavaScript 标识符 JavaScript关于标识符的规定有： 必须使用字母或者下划线开始（$）； 必须使用英文字母、数字、下划线组成，不能出现空格或制表符； 不能使用JavaScript关键词与JavaScript保留字； 不能使用JavaScript语言内部的单词，比如Infinity, NaN,undefined； 大小写敏感，也就是说x和X是不一样的两个标识符。 前端技术-JavaScript 关键字 关键字--对于JavaScript程序有着特别的含义，它们可标识程序的结构