《Web前端开发技术》笔记 | 您所在的位置:网站首页 › web前端储久良课后答案 › 《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 CSS 1.3.3 JavaScript 1.3.4 HTML DOM 1.3.5 BOM 1.3.6 AJAX 1.3.7 jQuery 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文档结构 2.2头部head 2.2.1标题title标记 2.2.2元信息meta标记 2.3主体body 2.3.1 body标记 2.3.2 body标记属性 2.4 HTML基本语法 2.4.1标记类型 2.4.2 HTML属性 2.5注释 2.6 HTML文档编写规范 2.6.1 HTML代码书写规范 2.6.2 HTML文档命名规则 2.7 HTML文档类型 2.7.1 标记 2.7.2 DTD类型 第3章 格式化文本与段落 3.1 Web页面初步设计 3.1.1向Web页面添加文字信息 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标记 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超链接分类 5.3超链接的应用 5.3.1创建HTTP文件下载超链接 5.3.2创建FTP站点访问超链接 5.3.3创建图像超链接 5.3.4创建电子邮件超链接 5.3.5创建页面书签链接 5.4浮动框架 第6章 图像与多媒体文件 6.1图像 6.1.1插入图像 6.1.3设置图像的高度和宽度 6.1.4设置图像的边框 6.1.5设置图像对齐方式 6.1.6设置图像的间距 6.1.7设置图像热区链接 6.2滚动文字 6.2.1添加滚动文字 6.2.2设置滚动文字背景颜色与滚动循环 6.2.3设置滚动方向与滚动方式 6.2.4设置滚动速度与滚动延迟 6.2.5设置滚动范围与滚动空白空间 6.3音频、视频及Flash文件 第7章 CSS基础 7.1 CSS概念 7.1.5 CSS的编辑方法 7.2使用CSS控制Web页面 7.2.2 CSS选择器类型 7.2.3 CSS选择器声明 7.2.4 CSS定义与引用 7.3 CSS继承与层叠 第8章 DIV与SPAN 8.1 DIV图层 8.2图层嵌套与层叠 8.2.1 DIV嵌套 8.2.2 DIV层叠 8.3 div标记与span标记 第9章 CSS样式属性 9.1 CSS属性值中的单位 9.1.1绝对单位 9.1.2相对单位 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属性 9.5 CSS列表样式 9.6 CSS盒模型 9.6.2 边界属性设置 9.6.3边框属性设置 9.6.4填充属性设置 第10章 DIV+CSS页面布局 10.1页面布局设计 10.1.1“三行模式”或“三列模式” 10.1.2“三行二列”“三行三列”模式 10.1.3多行多列复杂模式 10.2导航菜单设计 10.2.1一级水平导航菜单 10.2.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的八个特性 13.1.2 HTML5的优势 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浏览器兼容性 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文本效果 第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是定义电子文档结构和描述其内容的国际标准语言,是所有电子文档标记语言的起源 、、、等都是HTML的标记 2014年后为HTML5版本 1.3.2 CSS1、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 DOMDOM是一种与浏览器、平台语言无关的接口,使得用户可以访问页面上其他的标准组件 DOM与JavaScript结合起来实现了Web网页的行为与结构的分离 1、DOM由来 为了定义访问和操作HTML文档的标准 2、HTML DOM Level 当前为DOM Level3版本 1.3.5 BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件的途径以及操作方法 由于没有相关的BOM标准,每种浏览器都有自己的BOM实现的方法 AJAX(Asynchronous JavaScript and XML):也称为异步JavaScript和XML,它是多种技术的综合,打破了使用页面重载的惯例技术组合,可以部分更新网页内容 1.3.7 jQueryjQuery是一套跨浏览器的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、head和body元素 2.2头部head 2.2.1标题title标记是开始标记,是结束标记,两者之间的内容为显示在浏览器的标题栏上的信息 2.2.2元信息meta标记是开始标记,是结束标志。两者之间所包括的内容为网页上显示的信息 2.3.2 body标记属性1、单标记 或 2、双标记 第一个标记是开始标记(首标记),第二个标记是结束标记(尾标记) 内容 标记可以互相嵌套,但不能交叉 2.4.2 HTML属性 2.5注释注释信息 2.6 HTML文档编写规范 2.6.1 HTML代码书写规范1、在HTML代码书写时不区分大小写 2、回车符和空格在HTML页面显示时均不起作用。需要时可使用和;来实现换行和插入空格 2.6.2 HTML文档命名规则(1)文档的拓展名为htm或html (2)文档名称只能由英文字母、数字或下划线组成 (3)文档名称不能包含特殊符号 (4)文档名称区分大小写 (5)Web服务器主页一般命名为index.html或default.html 2.7 HTML文档类型 2.7.1 标记向这里添加内容 3.1.2标题字标记或 3.3.3水平分隔线hr标记![]() 内部链接:网站内部文件之间的链接。将URL设置为相对路径则为内部链接 外部链接:网站内的文件链接到站点内容外的文件。将URL设置为绝对路径则为外部链接 5.3超链接的应用 5.3.1创建HTTP文件下载超链接链接内容 url指向要下载文件所在的相对路径或绝对路径 5.3.2创建FTP站点访问超链接如不设置图像的宽度和高度,图像的大小和原图一样 单位可以是像素也可以是百分比 6.1.4设置图像的边框Value为边框的宽度,用数字表示,单位为像素 6.1.5设置图像对齐方式![]() 滚动内容 1、HTML里面的CSS规则 (1)写在body中某个标记的属性部分 (2)写在head标记里面 2、写在单独的文件中,该文件称为CSS文件,文件名后缀为.css 7.2使用CSS控制Web页面1、标记选择器(元素选择器):直接使用HTML标记名称作为选择器 2、类选择器 3、id选择器 4、伪类选择器 5、CSS属性选择器 1、内联样式表(行内样式表) 2、内部样式表 3、外部样式表 1、CSS继承:子标记会继承父标记的所有样式风格,并且可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格不会影响父标记。但并不是所有属性都会自动传给子元素 2、CSS层叠:即对同一内容设置了多个不同类型样式产生冲突时的处理,CSS规定如下优先级:行内样式>id样式>class样式>标记样式 第8章 DIV与SPAN 8.1 DIV图层DIV是分区或分节的意思 即图层在同一水平上有重叠的地方 8.2.2 DIV层叠即图层不在同一水平面上的“层叠” 首先要将position属性设置为absolute,然后利用z-index属性控制层叠关系 8.3 div标记与span标记1、span标记的使用 2、div与span标记的区别 包括英寸、厘米、毫米、磅和pica(皮卡) 9.1.2相对单位包括em、ex、px、% 9.2 CSS字体样式 9.2.1字体大小font-size属性1、背景颜色background-color属性 语法和上面的颜色color属性相同 2、背景图像background-image属性 3、背景图像重复background-repeat属性 4、背景附件background-attachment属性 fixed:表示在文字页面滚动时,背景附件固定不滚动 5、背景图像位置background-position属性 6、background复合属性 1、边框属性border-style属性 2、边框宽度border-width属性 3、边框颜色border-color属性 border-color:color 4、边框border复合属性 先将整个页面水平分为三个区域,再将中间区域分为两列或三列 ·1、采用“表格+超链接”来设计 2、采用“无序列表+超链接”来设计 1、下拉导航菜单 2、横向二级导航菜单 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页面结构对标题进行组合,可连续设置多个标题标记 1、常用的浏览器属性前缀 2、CSS3前缀解决方案 3、CSS样式重置方案 参考文献——《Web前端开发技术》 by 储久良 |
CopyRight 2018-2019 实验室设备网 版权所有 |