《Web前端开发技术》笔记
参考文献——《Web前端开发技术》 by 储久良目录第1章 Web前端开发技术综述1.1 Web概述1.1.1 Web的起源1.1.2 Web的特点1.1.3 Web工作原理1.1.4 Web相关概念1.3 Web前端开发技术1.3.1 HTML(Hypertext Markkup Language)1.3.2 CSS1.3.3 JavaScript1.3.4 HTML DOM1.3.5 BOM1
参考文献——《Web前端开发技术》 by 储久良
目录
1.3.1 HTML(Hypertext Markkup Language)
第1章 Web前端开发技术综述
1.1 Web概述
Tim Berners-Lee(蒂姆·伯纳斯·李)发明了世界上第一个网站
1.1.1 Web的起源
1、超文本起源于20世纪60年代的几个项目
2、Tim发明了一个全球网络资源唯一认证的系统：统一资源标识符(Uniform Resource Identifier，URI)，这证明了超文本和因特网结合的可行性
3、为了让World Wide Web不被少数人所控制，Tim组织成立了World Wide Web Consortium，即W3C。HTML协议各个版本都出自W3C会议，且HTML规范是以“建议”的形式发布，并不强迫任何厂商或个人接受
1.1.2 Web的特点
1、易导航和图形化的界面
2、与平台无关性
3、分布式结构
4、动态性
5、交互性
1.1.3 Web工作原理
HTTP(Hypertext Transfer Protocol)：超文本传输协议
1.1.4 Web相关概念
1、URL(Uniform Resource Locator)：统一资源定位器或统一资源定位符，即网页地址
2、Web服务器
也称为网站，是由计算机软件和硬件组成的有机整体
3、超链接(Hyper Link)
从一个网页指向另一个目标的连接关系
1.3 Web前端开发技术
新一代网站需要HTML、CSS、JavaScript、DOM、AJAX等组合技术，其中HTML、CSS、JavaScript三大技术称为“Web标准三剑客”
1.3.1 HTML(Hypertext Markkup Language)
HTML是超文本标记语言，是Web页面的结构，使用标记来描述网页。
网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、表单等
HTML是SGML(Standard Generalized Markup Language，标准通用标记语言)下的一个应用，也是一种标准规范
SGML是定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
<head>、<meta>、<title>、<link>等都是HTML的标记
2014年后为HTML5版本
1.3.2 CSS
1、CSS的作用
解决网页内容与表现分离的问题
2、CSS的发展历史
当前为CSS3版本
1.3.3 JavaScript
使用JavaScript可以开发交互式Web页面
1、JavaScript由来
JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言，常用来给HTML网页添加动态的功能
欧洲计算机制造商协会(European Computer Manufacturers Association，ECMA)以JavaScript为基础制定了ECMAScript标准
2、JavaScript的组成
（1）核心（ECMAScript）
（2）文档对象模型（Document Object Model，DOM）
（3）浏览器对象模型（Browser Object Model，BOM）
1.3.4 HTML DOM
DOM是一种与浏览器、平台语言无关的接口，使得用户可以访问页面上其他的标准组件
DOM与JavaScript结合起来实现了Web网页的行为与结构的分离
1、DOM由来
为了定义访问和操作HTML文档的标准
2、HTML DOM Level
当前为DOM Level3版本
1.3.5 BOM
定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件的途径以及操作方法
由于没有相关的BOM标准，每种浏览器都有自己的BOM实现的方法
1.3.6 AJAX
AJAX(Asynchronous JavaScript and XML)：也称为异步JavaScript和XML，它是多种技术的综合，打破了使用页面重载的惯例技术组合，可以部分更新网页内容
1.3.7 jQuery
jQuery是一套跨浏览器的javaScript库，简化HTML与JavaScript之间的操作，是目前最受欢迎的JavaScript库
1.4 Web前端开发工具
1.4.1 EditPlus
1.4.2 Adobe Dreamweaver
1.4.3 Sublime Text
1.4.4 WebStorm
1.4.5 HBuilder
1.5浏览器工具
1.5.1 Internet Explorer
1.5.2 Google Chrome
1.5.3 Mozilla Firefox
1.5.4 Safari
1.5.5 Opera
第2章 HTML基础
2.1 HTML文档结构
HTML文档由头部head和主体body两个部分组成。头部信息不显示在网页上，主体内容是网页要显示的信息
HTML文档以<html>标记开始，以</html>标记结束，每个HTML文档都应该有且只有一个html、head和body元素
2.2头部head
2.2.1标题title标记
<title>是开始标记，</title>是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息
2.2.2元信息meta标记
2.3主体body
2.3.1 body标记
<body>是开始标记，</body>是结束标志。两者之间所包括的内容为网页上显示的信息
2.3.2 body标记属性
2.4 HTML基本语法
2.4.1标记类型
1、单标记
<标记名称>或<标记名称/>
2、双标记
第一个标记是开始标记（首标记），第二个标记是结束标记（尾标记）
<标记名称>内容</标记名称>
标记可以互相嵌套，但不能交叉
2.4.2 HTML属性
<标记名称 属性名1=”属性值1” 属性名2=”属性值2” … 属性名n=”属性值n”></标记名称>
2.5注释
<!--注释信息 -->
<comment>注释信息</comment>
2.6 HTML文档编写规范
2.6.1 HTML代码书写规范
1、在HTML代码书写时不区分大小写
2、回车符和空格在HTML页面显示时均不起作用。需要时可使用<br/>和 来实现换行和插入空格
2.6.2 HTML文档命名规则
（1）文档的拓展名为htm或html
（2）文档名称只能由英文字母、数字或下划线组成
（3）文档名称不能包含特殊符号
（4）文档名称区分大小写
（5）Web服务器主页一般命名为index.html或default.html
2.7 HTML文档类型
2.7.1 <!DOCTYPE>标记
2.7.2 DTD类型
第3章 格式化文本与段落
3.1 Web页面初步设计
3.1.1向Web页面添加文字信息
<body>向这里添加内容</body>
3.1.2标题字标记
3.1.3添加空格与特殊符号
3.2格式化文本标记
3.2.1文本修饰标记
3.2.2计算机输出标记
3.2.3引用和术语标记
3.2.4字体font标记
3.3段落与排版标记
3.3.1段落p标记
3.3.2换行br标记
<br>或<br/>
3.3.3水平分隔线hr标记
3.3.4拼音/音标注释ruby标记和rt/rp标记
3.3.5段落缩进blockquote标记
3.3.6预格式化pre标记
第4章 列表
4.2无序列表ul
4.3有序列表ol
4.4列表嵌套
4.5定义列表dl
第5章 超链接与浮动框架
5.2超链接语法、路径及分类
5.2.1超链接语法
5.2.2超链接路径
5.2.3超链接分类
内部链接：网站内部文件之间的链接。将URL设置为相对路径则为内部链接
外部链接：网站内的文件链接到站点内容外的文件。将URL设置为绝对路径则为外部链接
5.3超链接的应用
5.3.1创建HTTP文件下载超链接
<a href=”url”>链接内容</a>
url指向要下载文件所在的相对路径或绝对路径
5.3.2创建FTP站点访问超链接
5.3.3创建图像超链接
5.3.4创建电子邮件超链接
5.3.5创建页面书签链接
5.4浮动框架
第6章 图像与多媒体文件
6.1图像
6.1.1插入图像
<img src=”URL” alt=”替代文本”>
6.1.3设置图像的高度和宽度
如不设置图像的宽度和高度，图像的大小和原图一样
<img src=”URL” width=”value” height=”value”>
单位可以是像素也可以是百分比
6.1.4设置图像的边框
<img src=”URL” border=”value” >
Value为边框的宽度，用数字表示，单位为像素
6.1.5设置图像对齐方式
6.1.6设置图像的间距
6.1.7设置图像热区链接
6.2滚动文字
6.2.1添加滚动文字
6.2.2设置滚动文字背景颜色与滚动循环
6.2.3设置滚动方向与滚动方式
<marquee direction=”滚动方向” behavior=”滚动方式”>滚动内容</marquee>
6.2.4设置滚动速度与滚动延迟
6.2.5设置滚动范围与滚动空白空间
6.3音频、视频及Flash文件
第7章 CSS基础
7.1 CSS概念
7.1.5 CSS的编辑方法
1、HTML里面的CSS规则
（1）写在body中某个标记的属性部分
（2）写在head标记里面
2、写在单独的文件中，该文件称为CSS文件，文件名后缀为.css
7.2使用CSS控制Web页面
7.2.2 CSS选择器类型
1、标记选择器（元素选择器）：直接使用HTML标记名称作为选择器
2、类选择器
3、id选择器
4、伪类选择器
5、CSS属性选择器
7.2.3 CSS选择器声明
7.2.4 CSS定义与引用
1、内联样式表（行内样式表）
2、内部样式表
3、外部样式表
7.3 CSS继承与层叠
1、CSS继承：子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格不会影响父标记。但并不是所有属性都会自动传给子元素
2、CSS层叠：即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS规定如下优先级：行内样式>id样式>class样式>标记样式
第8章 DIV与SPAN
8.1 DIV图层
DIV是分区或分节的意思
8.2图层嵌套与层叠
8.2.1 DIV嵌套
即图层在同一水平上有重叠的地方
8.2.2 DIV层叠
即图层不在同一水平面上的“层叠”
首先要将position属性设置为absolute，然后利用z-index属性控制层叠关系
8.3 div标记与span标记
1、span标记的使用
2、div与span标记的区别
第9章 CSS样式属性
9.1 CSS属性值中的单位
9.1.1绝对单位
包括英寸、厘米、毫米、磅和pica（皮卡）
9.1.2相对单位
包括em、ex、px、%
9.2 CSS字体样式
9.2.1字体大小font-size属性
9.2.2字体样式font-style属性
9.2.3字体系列font-family属性
9.2.4字体变体font-variant属性
9.2.5字体粗细font-weight属性
9.2.6字体font属性
9.3 CSS文本样式
9.3.1字符间距letter-spacing属性
9.3.2行距line-height属性
9.3.3首行缩进text-indent属性
9.3.4字符装饰text-decoration属性
9.3.5英文大小写转换text-transform属性
9.3.6水平对齐text-align属性
9.3.7垂直对齐vertical-align属性
9.4 CSS颜色与背景
9.4.1颜色color属性
9.4.2背景background属性
1、背景颜色background-color属性
语法和上面的颜色color属性相同
2、背景图像background-image属性
3、背景图像重复background-repeat属性
4、背景附件background-attachment属性
fixed：表示在文字页面滚动时，背景附件固定不滚动
5、背景图像位置background-position属性
6、background复合属性
9.5 CSS列表样式
9.6 CSS盒模型
9.6.2 边界属性设置
9.6.3边框属性设置
1、边框属性border-style属性
2、边框宽度border-width属性
3、边框颜色border-color属性
border-color:color
4、边框border复合属性
9.6.4填充属性设置
第10章 DIV+CSS页面布局
10.1页面布局设计
10.1.1“三行模式”或“三列模式”
10.1.2“三行二列”“三行三列”模式
先将整个页面水平分为三个区域，再将中间区域分为两列或三列
10.1.3多行多列复杂模式
10.2导航菜单设计
10.2.1一级水平导航菜单
·1、采用“表格+超链接”来设计
2、采用“无序列表+超链接”来设计
10.2.2二级水平导航菜单
1、下拉导航菜单
2、横向二级导航菜单
10.3对象的显示与隐藏CSS规则设计
第11章 表格
11.2表格标记
11.3表格属性设置
11.3.1表格边框属性
11.3.2表格的宽度和高度属性
11.3.3表格背景颜色与背景图像属性
11.3.4表格边框样式属性
11.3.5表格单元格间距、单元格边距属性
11.3.6表格水平对齐属性
11.4设置表格行的属性
11.5设置单元格的属性
11.5.1表格单元格跨行属性
11.5.2表格单元格跨列属性
11.6表格嵌套
第12章 表单
12.1表单概述
12.1.1表单标记
12.2定义域和域标题
12.3表单信息输入
12.3.1单行文本输入框
12.3.2密码输入框
12.3.3复选框
12.3.4单选按钮
12.3.5图像按钮
12.3.6提交按钮
12.3.7重置按钮
12.3.8普通按钮
12.3.9文件选择框
12.3.10隐藏框
12.4多行文本输入框
12.5下拉列表框
第13章 HTML5基础与CSS3应用
13.1 HTML5概述
13.1.1 HTML5的八个特性
1、语义特性
2、离线与存储特性
3、设备访问特性
4、多媒体特性
5、三维、图形与特效特性
6、性能与集成特性
7、连接特性
8、CSS3特性
13.1.2 HTML5的优势
1、摆脱对平台的依赖
2、实时更新
3、离线使用
4、代码更安全
5、跨平台
6、可以充分利用Native
13.2 HTML5文档结构
13.2.1 HTML5页面结构
13.2.2 HTML5新增结构元素
13.3 HTML5新增页面元素
13.3.1 hgroup标记
对标题进行组合，可连续设置多个标题标记
13.3.2 figure标记与figcaption标记
13.3.3 mark标记与time标记
13.3.4 details标记与summary标记
13.3.5 progress标记与meter标记
13.3.6 input标记与datalist标记
13.4 HTML5表单
13.4.1 HTML5新增的表单属性
13.4.2 HTML5新增的表单元素
13.4.3 HTML新增的input类型
13.5 HTML5视频与音频
13.5.1 video标记及属性
13.5.2 audio标记及属性
13.6 CSS3基础应用
13.6.2 CSS3浏览器兼容性
1、常用的浏览器属性前缀
2、CSS3前缀解决方案
3、CSS样式重置方案
13.6.3 CSS3边框
13.6.4 CSS3转换transform属性
13.6.5 CSS3过渡transition属性
13.6.6 CSS3动画animation
13.6.7 CSS3多列属性
13.6.8 CSS3文本效果
参考文献——《Web前端开发技术》 by 储久良
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)