2015微信网站开发,做电影网站用的云盘,惠州网站建设创业,wordpress-seo近期应粉丝要求#xff0c;出多个前端大总结#xff0c;适合小白复习查阅 #第一章 Web基础知识 Web开发基本概念
1、万维网是一个由许多相互链接的超文本组成的系统#xff0c;通过互联网访问。
2、web#xff1a;worldwideweb#xff0c;万维网#xff0c;简称web出多个前端大总结适合小白复习查阅 #第一章 Web基础知识 Web开发基本概念
1、万维网是一个由许多相互链接的超文本组成的系统通过互联网访问。
2、webworldwideweb万维网简称webwww通常称为网页。
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语言基础 网页与网页文件。 网页浏览器中打开的一个页面 网页文件文本文件扩展名html、htm内容为HTML代码和文本内容。 网页与网页文件的关系浏览器中看到的网页实质为网页文件 网页页面的组成内容结构。 HTML简介 语言特点 发展过程 应用领域 HTML基本语法语法、语义、词汇。 HTML标记分类单/双标记HTML属性的概念。 HTML文档结构文档声明、html、head、body、title、meta。 开发工具简介 编辑器 浏览器 浏览器开发工具 帮助手册 #第三章 构建页面一 网页元素包含内容图片、文字、列表、超链接 在网页中插入文字文字、实体、注释
标题h1--h6
段落p
换行br/
水平线hr/
实体: nbsp; lt; gt; amp; quot;
注释:!--...--
在网页中插入列表及相关属性的设置。 有序列表 ol li../li /ol 无序列表 ul li../li /ul #第四章 构建页面二 在网页中插入图片及常用相关属性src、alt。 在网页中设置热区。 img src# alt.. usemap#ming map nameming idming area shapecircle coords180,139,14 hrefurl alt../area area shaperect coords0,0,110,260 hrefurl alt../area area shapetoly coords180,139,14 hrefurl 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设置是否显示框架的边框。(10) name框架的名字用来进行识别。 iframe srcURL widthx heighty scrolling[OPTION] frameborderx namemain/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 rows3 cols2.../textarea select name.. option value..../option option value..../option option value..../option /select #第六章 HTML4.01与HTML5 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语言基础 为什么使用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-size20px;(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表示方式如rgb128,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 urlimages/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、与leftrighttopbottom等属性共同使用
•2、如果父元素未设置position属性则以浏览器 窗口左上角为起始位置
•3、如果父元素设置了position属性则以父元素 左上角为起始位置
✓ 相对定位
✓ position:relative
•1、与leftrighttopbottom等属性共同使用
•2、以自身本应在的位置为起始位置 float和position相似点
1、都是将元素浮动起来
2、元素一旦设置就与父元素没关系了 float和position
不同点
1、position与top、left等配套使用
2、float位置移动通过margin、padding等实现
3、overflow和clear对position无效
4、布局通常使用float而不是position 布局示例。 #第十二章 CSS盒子模型 行内元素、块级元素的概念及display属性的用法。
CSS盒子模型简介。
Web中的盒子一个矩形区域内容包裹在盒子中。盒子的 堆叠与嵌套形成整个页面的内容排布。 盒子模型
宽度
高度
边框
内边距
外边距 根据HTML元素的显示特征可分为
➢块级元素block level element
• 元素在显示时会独占一行并同时具有宽、高、内外边距特征。
• 举例form – 交互表单 h1 – 1级标题 hr – 水平分隔线 p – 段落 table – 表格 ul – 无序列表
➢行内元素inline element
• 在显示时通常不会以新行开始横向排列到最右端自动折行。
• 举例a – 链接 img – 图片 input – 输入框 select – 项目选择 font – 字体设定 b – 粗体 i – 斜体 strong – 粗体强调 Displayblock/inline/none border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
➢边框的宽度border-width
➢边框的颜色border-color
➢边框的样式border-style border-width20px四面
border-width20px 10px上下左右
border-width20px 10px 5px 10px上右下左
复合
borderwidth style color border:1px solid #cccccc
padding、margin与border相同 #第十三章 CSS高级内容 CSS高级选择器
分组选择器
派生选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
导航栏
图片库
图片透明
CSS颜色
CSS单位
网络安全字体
CSS听觉参考手册 #第十四章 divCSS布局实战 浏览器调试工具的使用方法。 网页中选定需要修改或查看样式的网页元素右键审查元素。 根据实例资料完成页面搭建。 网页设计基本流程 需求获取制作UI效果图网页设计与实现 分析网页结构用HTML实现网页结构用CSS实现网页结构布局填充网页内容修饰网页样式调整浏览器兼容性网站上线运营布局技巧总结。 网页布局遵循从整体到局部的原则。margin容易产生边界的重合边界重合时利用padding或border来避免。使用浮动功能时记得适当清除指令。#第十五章 浏览器兼容性调整 浏览器兼容性问题简介。
常见的浏览器兼容性问题。 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、对标准浏览器进行兼容 编写代码时要了解客户群的浏览器使用情况。编写代码时以标准浏览器Firefox/Chrome为参考暂时不考虑特殊浏览器行为IE6类。一般情况下先做一些通用设置把兼容性问题扼杀在萌芽中。
3、标准的网页代码 尽量使代码符合w3c标准借助w3c提供的HTML验证器和CSS验证器对代码进行网上标准化验证
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验证。 #第十六章 网页视觉设计 网页布局 网页尺寸
栅格布局页面栅格、产品栅格 栅格系统 栅格设计系统又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格是一种平面设计的方法与风格。维基百科网页设计中的栅格系统 以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。栅格系统的设计原理及应用 在网页设计中我们把宽度为“W”的页面分割成n个网格单元“a”每个单元与单元之间的间隙设为“i”,此时我们把“ai”定义“A” 。留白 、版块间距均为10px
、版块与内容间距为10px
、内容单元之间间距为10px 4、内容的间距均为10px 网页风格 版式轴型、自由型、框型、T字型、标准T字型、同字型、混合型 1、轴型图片和文字内容集中在页面的中轴位置可以是横轴也可以是纵轴分布。 2、焦点型图片和文字集中在页面的某一位置用对比强烈的颜色或者图片表达。 3、格型图片和文字被比较均匀的方格所划分。 4、框型主要内容在中间的较大区域而导航栏和常规栏目则分布在类似边框的周围区域。 4、自由型没有固定的版式和风格完全随意安排文字和图片的位置。 5、混合型两种或两种以上的页面版式结合使用。 风格 欧美风格 欧美国家惯用的设计风格一类简洁明了、色彩单一一类构图复杂、色彩浓烈。 韩国风格 韩国惯用的界面设计色彩清爽、多用蓝、绿色、多用大图片、渐变色、人物和卡通矢量图。 中国风格 具有中国古典风格的设计古色古香以具有中国特色的花纹或图案来装饰。 网页用色色彩原理、色彩的心理感受、网页色彩运用 网页设计趋势 #第十七章 网页元素设计 文字设计
字体、字体
标题、正文文字设计
文字颜色
行、与段落
图片设计
logo设计
banner设计
背景图片设计
网页配图
图文混排
表单设计
Tab设计
按钮设计
图标设计 #第十八章 网页设计规范 页面规划
尺寸兼容
栏目
布局
页面元素
颜色运用
创意设计
细节设计
交互设计
统一设计
醒目
用户体验友好性设计
