内容简介
本书共分13章,第1章主要讲述Web前端开发技术基本概念,第2-6章介绍了HTML基础标签及相关属,第7-8章介绍CSS的语法及属,第9章主要介绍当前流行的DIV布局技术,第10章介绍表单技术,第11章介绍HTML5及CSS3的新特,第12章介绍Javascript基础,第13章介绍jQuery与Ajax应用。
目录
目录
第1章 Web前端开发技术概述
1.1Web技术概述
1.1.1Web的起源
1.1.2Web相关概念
1.1.3Web工作原理
1.1.4Web的特点
1.2Web前端开发相关技术
1.2.1 HTML
1.2.2 CSS
1.2.3 Javascript
1.2.4 HTML DOM
1.2.5 BOM
1.2.6 jQuery
1.3综合案例·/p>
第2章 HTML基础
2.1HTML文档结构
2.1.1HTML部分
2.1.2HEAD部分
2.1.3BODY部分
2.2HTML语法
2.2.1标签
2.2.2属
2.2.3注释
2.3HTML基本标签
2.3.1<head>标签
2.3.2<body>标签
2.4HTML文档编写规范
2.4.1HTML文档命名规则
2.4.2 HTML代码书写规范
2.5综合案例
/span>
第3章文本与段落
3.pan style="font-family:宋体">文字内容
3.1.pan style="font-family:宋体">添加文字
3.1.2标题字
3.1.3添加空格
3.1.4添加特殊符号
3.2文字的修饰
3.2.pan style="font-family:宋体">简单文本修饰标签
3.2.2字体标签
3.2.3文字上下标标签
3.2.4计算机输出标签
3.2.5引用和术语标签
3.3段落与排版标签
3.3.pan style="font-family:宋体">段落标签
3.3.2换行标签
3.3.3分隔线标签
3.3.4预格式化标签
3.3.5滚动字幕标签
综合案例
3.4/span>
第4章列表
4.pan style="font-family:宋体">无序列表
4.2有序列表.
4.3自定义列表
4.4列表的嵌套
4.5综合案例
/span>
第5章链接
5.pan style="font-family:宋体">链接概述
5.2链接语法、路径及分类
5.2.pan style="font-family:宋体">链接语法
5.2.2链接路径
5.2.3链接分类
5.3链接的其他应用
5.3.pan style="font-family:宋体">创建文件下载链接
5.3.2创建图像链接
5.3.3创建电子邮件链接
5.4综合案例
/span>
第6章图片与多媒体文件
6.pan style="font-family:宋体">图片
6.1.pan style="font-family:宋体">网页图片格式
6.1.2插入图片
6.1.3设置图片的替代文本
6.1.4设置图片的高度和宽度
6.1.5设置图片的边框
6.1.6设置图片的对齐方式
6.1.7设置图片的间距
6.1.8设置图片超链接
6.1.9设置图片热区链接
6.2音频、及Flash文件
6.2.1embed标记的使用
6.2.2添加背景音乐
6.2.3常用的音频、及Flash动画文件格式
6.3综合案例
/span>
第7章表格
7.pan style="font-family:宋体">表格标签
7.1.pan style="font-family:宋体">基本语法
7.1.2语法说明
7.2表格属设置
7.2.pan style="font-family:宋体">单元格间距属
7.2.2表格背景属
7.2.3单元格跨列属
7.2.4单元格跨行属
7.2.5其他属
7.3表格嵌套
7.4综合案例
;
/span>
第8章CSS修饰页面
8.1CSS基本语法
8.1.1CSS的结构
8.1.2CSS选择符
8.1.3样式表分类及引用
8.1.4 伪类
8.2盒子模型
8.2.pan style="font-family:宋体">盒子模型概念
8.2.2元素边框属
8.2.3外边距属
8.2.4内边距属
8.3用CSS设置文本样式
8.3.pan style="font-family:宋体">字体样式
8.3.2文本样式
8.4颜色与背景设置
8.4.pan style="font-family:宋体">颜色设置
8.4.2背景设置
8.5CSS布局
8.5.1 position属
8.5.2float属
8.6综合案例·/span>
第9章页面布局
9.1div标记与span标记
9.1.1div标记
9.1.2 span 标记
9.1.3 div 标记与span标记的区别
9.2页面布局
9·.2.pan style="font-family:宋体">两列布局
9.2.2三列布局
9.2.3两行布局
9.2.4三行布局
9.3导航菜单
9.3.pan style="font-family:宋体">纵向导航菜单
9.3.2横向导航菜单
9.4综合案例/span>
第pan style="font-family:宋体">章表单的应用
10.pan style="font-family:宋体">表单的概念与工作原理
10.2定义表单
10.3定义域和域标题
10.4表单元素
10.4.1 input元素
10.4.2 textarea元素
10.4.3 select元素
10.5综合案例…/span>…
第十一章HTML5基础与CSS3应用
11.1HTML5概述
11.1.1HTML5的新特
11.1.2HTML5与HTML4的主要区别
11.2HTML5表单
11.2.1HTML5新增的表单属
11.2.2HTML5新增的input元素属
11.2.3HTML5新增的表单元素
11.2.4HTML5新增的input元素类型
11.3HTML5与音频
11.3.1HTML5的video元素
11.3.2HTML5的audio元素
11.4 HTML5 canvas 画布
11.4.1canvas标签
11.4.2绘制图形的步骤
11.4.3图形的绘制
11.4.4文本绘制
11.4.5 渐变
11.4.6图像
11.5CSS3应用
11.5.1CSS3新增的选择器
11.5.2CSS3新增的与文字有关的属
11.5.3CSS3新增的与边框有关的属
11.5.4CSS3新增的与背景有关的属
11.5.5CSS3 新增的 transition属
11.5.6CSS3新增的transform属
11.5.7 CSS3新增的animation属
11.5.8CSS3新增的多列属
11.6综合案例
/span>
第pan style="font-family:宋体">章 Javascript基础12.1 Javascript简介
12.2Javascript脚本的使用
12.2.1Javascript脚本的应用实例
12.2.2Javascript脚本的引用方法
12.3 Javascript的语法与数据类型
12.3.pan style="font-family:宋体">基本语法·
12.3.2数据类型
12.3.3常量与变量·
12.3.4表达式与运算符·
12.4Javascript程序的控制结构
12.4.pan style="font-family:宋体">顺序结构
12.4.2选择结构
12.4.3循环结构
12.5Javascript的函数
12.5.pan style="font-family:宋体">函数的定义
12.5.2函数的调用·
12.6 Javascript的对象
12.6.pan style="font-family:宋体">对象的属和方法
12.6.2对象的创建
12.6.3 Javascript常用内部对象
12.7Javascript的事件处理
12.7.pan style="font-family:宋体">事件与事件处理
12.7.2事件类型.
12.7.3表单事件
12.7.4鼠标事件
12.7.5键盘事件
12.7.6窗口事件
12.8文档对象模型与浏览器对象
pan>2.8.1DOM节点树和节点
12.8.2DOM节点的访问
12.8.3;DOM节点的操作
12.8.4浏览器对象
12.9综合案例
/span>·
第pan style="font-family:宋体">章jQuery应用
13.1 jQuery概述
13.1.1jQuery能与特点
13.1.2jQuery的使用
13.1.3jQuery的语法
13.2jQuery 选择器
13.2.pan style="font-family:宋体">基本选择器
13.2.2层次选择器
13.2.3过滤选择器
13.2.4属选择器
13.2.5表单选择器
13.3 jQuery操作DOM
13.3.pan style="font-family:宋体">访问元素属
13.3.2访问元素内容
13.3.3访问元素值
13.3.4操作元素样式
13.3.5操作DOM节点
13.4jQuery 事件
13.4.pan style="font-family:宋体">事件处理
13.4.2人工调用事件处理函数…
13.4.3事件快捷方法
13.5 jQuery的动画效果
13.5.pan style="font-family:宋体">基本动画
13.5.2淡入淡出动画
13.5.3滑动动画
13.5.4自定义动画
13.6综合案例
;
/span>
摘要与插图
第pan style="font-family:宋体">章
Web前端开发技术概述
Web是一种分布式应用结构,Web应用中的信息交换与传输涉及客户端和服务器
端,因此Web开发技术分为客户端开发技术和服务器端开发技术两大类。Web前端(客
户端)开发的主要任务是设计Web页面或App等前端界面,将信息呈现给用户,通过HTML、CSS及Javascript以及衍生出来的各种技术、框架、解决方案,来实现网站整体风格优化与改善用户体验。
1.1Web技术概述
Web前端从网页制作演变而来,名称上有很明显的时代特征。在互联网的演程
中,网页制作是Web1.0时代的产物。早期网站主要内容都是静态的,以图片和文字为
主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应
用,现代网页更加美观,交互能更加强大。2005年以后,互联入Web2.0
时代,更注重用户的交互作用。Web页面不再是简单地展示静态的文字和图片,而是有了大量的交互。用户不再是一个单纯的浏览者,同时也是网站内容的制造者。随着网能的丰富、设计风格的发展以及网站代码质量的要求,网页端的开发也变得复杂起来,其代码量和逻辑复杂度都增加不少。同时还需要考虑网站的能、浏览器兼容及网站方面的问题。新的Web3.0强调的是任何人在任何地点都可以创新。代码编写、协作、调试、测试、部署、运行都在云计算上完成。互联网发展由技术创新走向用户理念创新。
从Web1.0、Web2.0再到Web3.0,我们可以深深体会到Web技术在一步步地发展。
相信在这个信息不断强化的时代里,Web技术的发展会有更大步空间。
1.1.1Web的起源
1980年,欧洲核子研究组织(European Organization for Nuclear Research,CERN)的科学家Tim Berners Lee建议建立一个以超文本系统为基础的项目,使得科学家之
间能够分享和更新他们的研究成果。他与Robert Cailliau一起建立了一个叫作ENQUIRE的原型系统。1984年,Tim Berners Lee创建了万维网,并编写了个客户端浏览器(World Wide Web)和个Web服务器d(超文本传输协议守程)。
1990年1pan>月,个Web服务器开始运行,由Tim Berners Lee编写的图形化Web
浏览器次出现在人们面前。199pan style="font-family:宋体">年,CERN正式发布了Web技术标准。Tim发明了全球网络资源认证系统:统一资源标识符(Uniform Resource Identifier,URI),从此互联网开始向社会大众普及。
为了让World Wide Web不被少数人所控制,Tim组织成立了万维网联盟(WorldWide WebConsortium,W3C),于“引导Web发挥其大潜力”。人们所熟知的HTML协议各个版本都出自W3C。目前,与Web相关的各种技术标准都由W3C组织管理和维护。
1.1.2Web相关概念
1.Web的基本概念
Web直译是蜘蛛网和网的意思,现广泛译为网络。Inter采用超文本和超媒体的
信息组织方式,将信息的链接扩展到整个Inter上。Web是一种超文本信息系统。
Web的一个主要概念是超文本链接,它使得文本不再像一本书一样是固定的、线的,而是可以从一个位置跳到另外的位置,通过这种方式可以从中获取更多的信息,也可以转到别的主题上,这种多连接可以称为Web。
超文本是文本的简称,是一种全局的信息结构,它将文档中的不同部分通过关键字建立链接,使信息得以用交互的方行搜索。超媒体是媒体的简称,是一种采用非线网状结构对块状多媒体信息((Hyper Text Transfer Protocol,)是用于从Web服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加,使网络传输减少。不仅用于保证计算机正确快速地传输超文本文档,还用于确定传输文档中的哪一部分,以及哪些内容首先显示。
在不同的领域,Web也有不同的含义。对于普通用户,Web仅仅是互联网的使用环境、氛围、内容等;而对于网站制作、设计、开发工程师来讲,它是一系列技术(网站的前端开发、后台程序、美工、数据库等技术)的复称。
网页是网站中的一个页面,通常是HTML(Hyper Text Markup Language)格式,需要通过浏览器来阅读。


