近期应粉丝要求,出多个前端大总结,适合小白复习查阅
?
Web开发基本概念
1、万维网是一个由许多相互链接的超文本组成的系统,通过互联网访问。
2、web:worldwideweb,万维网,简称web,www,通常称为网页。
3、web开发:进行网页页面制作及其阁下你给功能开发。
4、浏览器:显示网页内容,并让用户与这些文件交互 一种软件。(常用:IE、谷歌、火狐)
5、web服务器:提供web服务的计算机。
6、URL(统一资源定位符):互联网上标准资源的地址,可以从互联网上得到资源的位置和访问方法。
??? 组成:协议、服务器地址、资源路径。
7、网页文件的扩展名:html、htm。文件内容:HTMl代码和文本内容。
8、网页:浏览器中打开的一个页面。网站:一组域名相同的网页的集合。
9、B/S架构:不需要下载客户端,通过URL访问。有跨平台能力。无缝升级,客户端免维修。不能直接使用客户端硬件资源,用户体验单一。
10、C/S架构:需要安装特定的客户端程序。针对不同平台开发不同版本。升级应用需要重新安装。充分应用客户端硬件资源,构建大型3D效果应用。
11、互联网发展:web1.0??? web2.0?? 移动互联网
12、web开发过程:项目提出、需求分析、设计(UI设计、系统设计)、开发(前端开发、后台开发)、系统测试、发布维护。
13、网站类型:(1)、按网站主体性质划分:政府网站、教育科研网站、企业网站、商业网站、个人网站
?????????????????????? (2)、按网站功能划分:宣传展示型网站、营销型网站、电子商务、网上购物、门户网站
14、树形结构:有主页有分支有叶子。扁平结构:扁平结构可以理解为是一种特殊的树形结构, 只有主干和树叶,是当前流行的一种网站结构,对 搜索引擎特别友好。
15、页面分类:首页:也称主页,是一个网站的入口网页。
?????????????????????? 列表页:一般都是二级页面,是栏目的具体展示页。
?????????????????????? 内容页:一般就是具体内容的页面。
16、页面元素:文字、表单、视频、图片、音频、动画。
?
?
万维网:www,通常也称网页。
?
网页:浏览器中打开的一个页面。
?
网站:一组域名相同的网页的集合。
?
浏览器:显示网页内容,并让用于与这些文件交互的一种软件。
?
服务器:提供web服务的计算机。
?
URL:统一资源定位符,协议、域名、资源路径。
?
网站访问过程:
?????? ⑴ 通过输入网址(URL)指定要访问的网页。
?????? ⑵ 浏览器向服务器发送请求:请把XXX网页文件传送给我。
?????? ⑶ 服务器做出响应:把XXX网页文件传送给浏览器。
?????? ⑷ 浏览器解析网页文件,呈现出网页。
?
软件架构分类及各自特征:
????????? B/S架构
?????? 无需安装特定客户端程序,通过URL访问
?????? 跨平台能力(Windows、Linux、Android、IOS…) ?
?????? 无缝升级,客户端免维护 ?
?????? 不能直接使用客户端硬件资源,用户体验单一 ?
?????????? C/S架构 ?
?????? 需要安装特定客户端程序 ?
?????? 针对不同平台开发不同版本 ?
?????? 升级应用须重新安装 ?
?????? 充分应用客户端硬件资源,构建大型3D效果应用
?
web系统开发过程,及相关知识体系。
?????? 项目提出--需求分析--设计(UI、系统)--开发(前端、后台)--系统测试--发布/维护
?
网站类型
?????? 主体性质(政府网站、教育科研网站、企业网站、商业网站、个人网站)
?????? 功能划分(宣传展示型网站、营销型网站、电子商务、网上购物、门户网站、企业门户、在线?????? 交易平台、政府门户)
?????? 网站结构(树型结构、扁平结构(特殊))
?
网站页面
?????? 页面分类(主页、列表页、内容页)
?????? 页面元素(文字、图片、表单、视频、 音频、动画)
?
学习Web开发的意义
?????? ?掌握HTML、CSS语言
?????? ?? 能够构建内容丰富、界面美观的Web页面
?????? ?? 掌握相关开发、调试工具的使用方法
?????? ?? 为后续Java、PHP等 课程打下基础
?
?
?
?
?
?
?
?
?
网页与网页文件。
?????? 网页:浏览器中打开的一个页面
?????? 网页文件:文本文件,扩展名html、htm,内容为HTML代码和文本内容。
?
网页与网页文件的关系:?浏览器中看到的网页实质为:网页文件
?
网页页面的组成:内容+结构。
?
HTML简介
?????? 语言特点
?????? 发展过程
?????? 应用领域
?
HTML基本语法:语法、语义、词汇。
?
HTML标记分类(单/双标记),HTML属性的概念。
?
HTML文档结构(文档声明、html、head、body、title、meta)。
?
开发工具简介
?
编辑器
?
浏览器
?
浏览器开发工具
?
帮助手册
?
?
?
?
?
?
?
?
网页元素包含内容:图片、文字、列表、超链接
?
在网页中插入文字(文字、实体、注释)
标题<h1>--<h6>
段落<p>
换行<br/>
水平线<hr/>
实体:
?????? ? <? >? &? "
注释:<!--...-->
在网页中插入列表及相关属性的设置。
?????? 有序列表
?????? <ol>
?????? ? <li>..</li>
?????? </ol>
?????? 无序列表
?????? <ul>
?????? ? <li>..</li>
?????? </ul>
?
?
?
?
?
?
?
在网页中插入图片及常用相关属性(src、alt)。
?
在网页中设置热区。
?????? <img src="#" alt=".." usemap="#ming">
?????? <map name="ming" id="ming">
????????????? <area shape="circle" coords="180,139,14" href="url" alt=".."></area>
????????????? <area shape="rect" coords="0,0,110,260" href="url" alt=".."></area>
????????????? <area shape="toly" coords="180,139,14" href="url" alt=".."></area>
?????? </map>
?????? ·id属性和name属性表示名称,设置为相同值,与<img />标签的usemap属性匹配。创建?????? 图像与热区之间的关系
?????? ·alt属性:该区域的替代文本;
?????? shape属性:该区域的形状;(rect、circle、poly)
?????? coords属性:该区域在原始图片上的坐标值。
?????? href属性:该区域的链接地址;
?
在网页中插入超链接及常用相关属性(href、target)
?????? href:链接地址
?????? target:目标窗口在何处打开
????????????? _blank:在新窗口打开
???????????? _self:在当前窗口打开
???????????? _parent:在父窗口打开
????????????? _top:在顶层窗口打开
?
锚的应用。
?????? 锚点:网页中的某一位置。
?????? 锚点链接:在同一个页面跳到指定位置的方式。
创建锚点链接:
①建立锚点
?????? <a name=“锚点名称”>锚(显示在页面上的文本)</a>
②创建指向该锚的链接
?????? <a href=“#锚点名称”>……</a>
?
相对路径、绝对路径的概念。
?
在网页中使用内联框架(iframe)。
?????? <iframe>标签的常用属性是:
?????? src:文件的路径
?????? width: “内联框架”区域的宽度
?????? height:“内联框架”区域的高度
?????? scrolling:规定是否在 iframe 中显示滚动条:
?????? ???????????????? No:不出现滚动条? Yes:显示滚动条? Auto:自动出现滚动条
?????? frameBorder:设置是否显示框架的边框。(1,0)
?????? name:框架的名字,用来进行识别。
?
<iframe? src="URL"? width="x"? height="y"??? scrolling="[OPTION]" frameborder="x"? name="main"></iframe>
?
?
?
?
?
?
?
?
在网页中插入表格及简单样式修饰。
?
?????? ?词汇(标签):<tr></tr>
????????????? 语法:1. 成对出现 2. 嵌套于<table></table>标签内
?????? ??? ?????? 语义:定义一行 ?
?????? ??? 词汇(标签):<th></th>
?????? ??? ?????? 语法:1. 成对出现 2. 嵌套于<tr></tr>标签内
????????????? 语义:定义表头 ?
?????? ??? 词汇(标签):<td></td>
????????????? 语法:1. 成对出现 2. 位于<tr></tr>内
????????????? 语义:定义一个单元格
?????? ??? 相关属性
????????????? width:规定表格元素的宽度(pixels或%)
????????????? bgcolor:表格背景颜色
????????????? background:表格背景图
????????????? align:表格的对齐方
?????? ????? border: 表格边框的宽度(pixels)
????????????? bordercolor:表格边框的颜色
????????????? cellpadding :? 单元边沿与其内容之间的距离
????????????? cellspacing :?? 单元格之间的空白(pixels或%)
????????????? colspan:跨列
????????????? rowspan:跨行
在网页中插入表单及简单样式修饰。
?????? 标签:<form action=""? method="">? </form>??
?????? action:规定当提交表单时向何处发送表单数据 值:URL
?????? method:规定用于发送 form-data 的 HTTP 方法。 值:get/post
?
?????? 标签:<input? type=".."? name=".."? value="..">
?????? text
?????? password
?????? radio
?????? checkbox
?????? file
?????? submit
?????? button
?????? reset
?????? <textarea? rows="3" cols="2">...</textarea>
?????? <select? name="..">
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
?????? </select>
?
?
?
?
?
?
?
?
?
HTML5与HTML4.01。
?????? <object> 定义嵌入对象????? html4???? html5????
?????? <emject>????? 定义外部交互内容或插件?? html5
?????? <audio> 定义声音内容???????????? html5
?????? <video> 定义视频???????????????????? html5
?
HTML多媒体概述。
?????? video与audio。
??????
?????? object与embed
多媒体元素基本属性和常用方法。
Canvas基础知识。
使用canvas绘制简单图形。
HTML样式修饰性标签介绍
font规定文本的字体、字体尺寸、字体颜色。
?????? < font? color=“red” size=“5” face=“黑体”>< /font >
strong用于强调文本
?????? <strong>你好</strong>
b规定粗体文本
?????? <b>你好</b>
?
?
?
?
?
?
?
?
?
?
为什么使用CSS。
?????? 1、针对元素样式设置的属性太少
?????? 2、修改元素样式太麻烦
?????? 3、控制元素样式的代码冗余度过高
?????? 更专业的样 式修饰方法
?????? 更简约的布 局方法
?????? 更简便的样 式修饰方法
?????? 改一处动全局的方法
CSS简介。
?????? CSS是 Cascading Style Sheet 的缩写。译作 「层叠样式表」。 是用于(增强)控制网页样式?????? 并允许将样式与网页 内容分离的一种标记性语言。
?
CSS的基本语法:CSS代码是由一条条语句构成,而每一条语句的结构,都基本相同
??????
样式写法:选择器 {属性:属性值;属性:属性值;..... }
?
选择器
?????? 1、标签选择器——选择器是HTML标签。影响整个页面中该种标签的样式。
?????? 2、类选择器——以“.”开头定义的选择符。影响所有以class属性引用该类的标签样式。
????????????? 注意:类名的第一个字符不能使用数字
????????????? 元素可以加入多个类。把各个类名放在class属性中,各个类名之间用一 个空格分????????????? 隔。类名的顺序并不重要。
?????? 3、id选择器——以“#”开头定义的选择符。影响以id属性引用该选择符的标签样式。
????????????? 单一页面中,一个id选择器只能使用一次!
?
样式表
?????? 1、行内样式——在元素标签内通过style属性添加样式
????????????? 用途:指定网页中个别元素的显示效果。不符合 样式与内容分离原则不推荐用
?????? 2、页内样式——在head部分的style标签内添加样式
????????????? 用途:对页面中某些标签或元素设置样式风格。控 制当前页面样式,维护较困难
?????? 3、外部样式——引用外部建立的.css文件
????????????? 用途:可同时控制多个页面,适用于各类大型网站, 可用性最强,推荐使用。
?
样式优先级:
?????? 1、ID选择器 > 类选择器> 标签选择器
?????? 2、行内样式>页内样式>外部样式
?????? 3、就近原则,距离元素最近的样式优先级最高
?
注释方法: /*…*/? 多行注释
?
多个样式,在同一内容上共同实现, 叫做:CSS样式的叠加
?
文档中的某些元素,将沿用为其父元素所设置的 样式,这种特点叫做:CSS样式的可继承性
?
结构和样式分离思想。
?
CSS基本应用示例。
?
?
?
?
?
?
?
?
CSS字体相关类样式修饰。
?
字体系列:font-family:‘宋体’,‘仿宋’;
字体大小:font-size:20px;(2em;)
字体风格:font-style:italic(normal\italic\oblique);
字体加粗:font-weight:900;(100~900;)(lighter\normal\bold\bolder)
字体综合设置:font:italic? bold? 36px? '宋体';
?
?
CSS文本类样式修饰。
?
文本缩进:text-indent:2em;(20px;)
水平对齐:text-align:left(right\center)
文本修饰:text-decoration:none;(underline\line-through\blink)
文本颜色:color:red;(#000000;)
行高:line-height:2em;(20px;)
?
?
?
?
?
?
?
?
CSS超链接的修饰。
未被访问的超链接a:link
鼠标经过超链接a:hover
链接被点击的那一刻a:acitve
访问过的超链接a:visited
特定顺序设置: :link ,:visited,:hover, :active
超链接应用
CSS伪类的使用方法。
CSS伪元素的使用方法。
?
?
?
?
?
?
?
?
CSS背景类样式修饰
背景色:background-color
?????? 关键字(gray)
? ? 十六进制表示方式(#808080)
? ? rgb表示方式,如:rgb(128,128,128)
?
背景图像:background-image
?????? background-image:url(images/f1.png)
?
背景重复:background-repeat:repeat-x;
?????? repeat;默认
?????? repeat-x;
?????? repeat-y;
?????? no-repeat;
?????? inherit;继承父元素
??????
背景定位:background-position:50%50%;
?????? center
?????? top
?????? bottom
?????? right
?????? left
?
背景综合属性:background
?????? background:red?? url(images/11.png)?? no-repeat? center;
?
CSS列表类样式修饰
列表类型:list-style-type
?????? none?? 无
?????? circle? 空心圆
?????? square?? 实心方块
?????? decimal? 数字
?????? lower-alpha? 小写英文
?
列表项图像:list-style-image
?????? url(images/f1.png)
?
列表标志位置:list-style-position
?????? outside
?????? inside
?
列表综合设置
?????? list-style:square ??inside?? url(images/f1.png)
?
?
?
?
?
?
?
?
布局简介: 网页布局是指网页内容 在页面上所处位置的设计。
布局概念
?????? 页面尺寸:
分辨率:800x600时,页面尺寸:780x428个像素
分辨率:640x480时,页面尺寸:620x311个像素
分辨率:1024x768时,页面尺寸:1005x600个像素
布局常见版式
布局的方法
布局思想:由整体到局部
?
结构性标签div、span
?????? Div
????????????? ? div相当于一个容器(盒子)
? div标签可以把文档分割为独立的、不同的部分
? 通过id或class属性区分不同的容器
div具有盒子模型的所有属性, 布局时用来控制元素之间的距离和相对位置
?
应用浮动float
?????? 浮动:定义元素在哪个方向浮动,改变页面中对象的前后流动顺序
?????? Left??????? 左浮动
?????? Right????? 右浮动
?????? None????? 不浮动
?????? Inherit??? 继承父元素float属性
?
float所产生的问题
?????? 1. 浮动元素距离父元素边框的位置,是该侧的父元 素padding+自身margin的值
2. 通常不会超过父元素的边界
3. 元素一旦浮动就不属于父元素了
4. 浮动元素不会相互重叠
5. 不能上下浮动,通常只设一种浮动即可
6. 如果父元素宽度不够,浮动元素会另起一行显示。
?
Overflow
?????? 1、父元素不设高度并且子元素浮动时,使父元素高度自 动适应子元素高度。
2、父元素设置的高度或宽度小于子元素时,使父元素出 现相应滚动条或隐藏子元素超出部分内容
?
Clear
?????? 用来设置该元素边上没有其他元素可以浮动
?????? clear: left / right / both / none
?
相对定位、绝对定位
?????? ? 绝对定位
? position:absolute
?1、与left,right,top,bottom等属性共同使用
?2、如果父元素未设置position属性,则以浏览器 窗口左上角为起始位置
?3、如果父元素设置了position属性,则以父元素 左上角为起始位置
? 相对定位
? position:relative
?1、与left,right,top,bottom等属性共同使用
?2、以自身本应在的位置为起始位置
?
?
float和position相似点:
1、都是将元素浮动起来
2、元素一旦设置就与父元素没关系了 float和position
不同点:
1、position与top、left等配套使用
2、float位置移动通过margin、padding等实现
3、overflow和clear对position无效
4、布局通常使用float,而不是position
?
?
布局示例。
?
?
?
?
?
?
?
?
行内元素、块级元素的概念及display属性的用法。
CSS盒子模型简介。
Web中的盒子:一个矩形区域,内容包裹在盒子中。盒子的 堆叠与嵌套形成整个页面的内容排布。
?
盒子模型
宽度
高度
边框
内边距
外边距
?
根据HTML元素的显示特征,可分为:
?块级元素(block level element)
? 元素在显示时会独占一行,并同时具有宽、高、内外边距特征。
? 举例:form – 交互表单 ,h1 – 1级标题 ,hr – 水平分隔线 ,p – 段落 ,table – 表格 ,ul – 无序列表
?行内元素(inline element)
? 在显示时通常不会以新行开始,横向排列,到最右端自动折行。
? 举例:a – 链接 ,img – 图片 ,input – 输入框 ,select – 项目选择 ,font – 字体设定 ,b – 粗体 ,i – 斜体 ,strong – 粗体强调
?
Display:block/inline/none;
?
?
border-top? 上边框
border-right? 右边框
border-bottom? 下边框
border-left? 左边框
?边框的宽度:border-width
?边框的颜色:border-color
?边框的样式:border-style
?
border-width:20px;四面
border-width:20px 10px;上下,左右
border-width:20px 10px 5px 10px;上右下左
复合
border:width style color;?????? border:1px solid #cccccc;
padding、margin与border相同
?
?
?
?
?
?
?
?
CSS高级选择器
分组选择器
派生选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
导航栏
图片库
图片透明
CSS颜色
CSS单位
网络安全字体
CSS听觉参考手册
?
?
?
?
?
?
?
?
浏览器调试工具的使用方法。
?????? 网页中选定需要修改或查看样式的网页元素,右键,审查元素。
?
根据实例资料,完成页面搭建。
?
布局技巧总结。
?
?
?
?
?
?
?
?
?
?
浏览器兼容性问题简介。
常见的浏览器兼容性问题。
?????? 1、网页居中问题。问题症状:IE6下常规设置无法使页面居中。
????????????? 解决方案:body{text-align:center}
?????? 2、某些浏览器不支持某些属性。问题症状:IE6下不支持min-width、max-height等属性。
????????????? 解决方案:具体情况具体分析
?????? 3、png透明图片支持问题。问题症状:IE6下不支持透明图片。
????????????? 解决方案:js方法或css滤镜
?????? 4、不同浏览器的标签默认的外边距和内边距不同。问题症状:不加样式控制的情况下,各自的margin 、padding、p等差异较大。
????????????? 解决方案:CSS里??? *{margin:0; padding:0;}
?????? 5、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
????????????? 问题症状:常见症状是IE6中后面的一块被顶到下一行。
????????????? 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性;或使用hack方法
?
?
?
?
?
?
??????
?
?
CSS Hack跨浏览器解决方案。
?????? 1、使用合适的文档声明(DOCTYPE)
?????? 2、对标准浏览器进行兼容
3、标准的网页代码
4、借助浏览器开发者工具调试
?
IE条件注释。
?????? 1、HTML头部引用Hack(条件注释法)
????????????? <!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->
?????? 2、CSS类内部Hack(类内属性前缀法)
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
?
?
W3C验证。
?
?
?
?
?
?
?
?
网页布局
?
网页尺寸
栅格布局(页面栅格、产品栅格)
?
?
?????? 栅格系统的设计原理及应用
?
留白
?????? 1、版块间距均为10px
2、版块与内容间距为10px
3、内容单元之间间距为10px
?4、内容的间距均为10px
?
网页风格
?
版式(轴型、自由型、框型、T字型、标准T字型、同字型、混合型)
?????? 1、轴型:图片和文字内容集中在页面的中轴位置,可以是横轴也可以是纵轴分布。
?????? 2、焦点型:图片和文字集中在页面的某一位置,用对比强烈的颜色或者图片表达。
?????? 3、格型:图片和文字被比较均匀的方格所划分。
?????? 4、框型:主要内容在中间的较大区域,而导航栏和常规栏目则分布在类似边框的周围区域。
?????? 4、自由型:没有固定的版式和风格,完全随意安排文字和图片的位置。
?????? 5、混合型:两种或两种以上的页面版式结合使用。
??????
?
?
风格
?????? 欧美风格
??? 欧美国家惯用的设计风格,一类简洁明了、色彩单一;一类构图复杂、色彩浓烈。
?????? 韩国风格
?????? 韩国惯用的界面设计,色彩清爽、多用蓝、绿色、多用大图片、渐变色、人物和卡通矢量图。
?????? 中国风格
??? 具有中国古典风格的设计,古色古香,以具有中国特色的花纹或图案来装饰。
?
?
网页用色(色彩原理、色彩的心理感受、网页色彩运用)
?????????????
?
网页设计趋势
?
?
?
?
?
?
?
?
文字设计
字体、字体
标题、正文文字设计
文字颜色
行、与段落
图片设计
logo设计
banner设计
背景图片设计
网页配图
图文混排
表单设计
Tab设计
按钮设计
图标设计
?
?
?
?
?
?
?
?
页面规划
尺寸兼容
栏目
布局
页面元素
颜色运用
创意设计
细节设计
交互设计
统一设计
醒目
用户体验友好性设计
本文实例讲述了php进程(线程)通信基础之System V共享内存。分享给大家供大家参考...
[a-zA-Z][^]*\son\w+=(\w+|'[^']*'|""[^""]*"")[^]* [^]* Source=SRegExp.Replac...
简易教程 假设我们制作的是分班情况查询程序,将使用PHP7的环境以PDO的方式连接M...
文章目录 前言 一、面向对象基础 1、面向对象思想 2、三大特性 3、类与对象 4、...
最近在重新学习HTML的知识,算是对HTML的一个重新认识吧!别小看了这东西,一切...
Linus Torvalds 开启了 Linux 内核的又一个开发周期,宣布 5.10-rc1 发布了,而...
编者按:编程技术的发展真是日新月异。通过ASP等程序动态生成HTML网页似乎已不能...
一、代码预览 这两天在做struts2上的邮件发送。以前的项目有用到spring,用sprin...
防抖和节流到底是啥 函数防抖(debounce) 解释:当持续触发某事件时,一定时间...
本文实例为大家分享了jQuery实现简单评论区的具体代码,供大家参考,具体内容如...