首页 > 代码库 > 技术总结
技术总结
我们以前看到的传统的网页，都是用格式（table）来布局的，而现在的网页布局大多都是用div+css的布局，div+css有什么好处呢，它可以实现网页页面内容与表现相分离，但是网页的结构从来都没有变过，网页的基本结构包括三个
<html></html>标记它是HTML中最大的一个标记，它代表整个网页
<head></head>标记它是网页的头部，它可以修改网页标题，而且还可以修改浏览器用什么编码来解析当前的HTML文档 ，编码一般都会选UTF—8，
<body></body>标记它是网页的身体部分，就是我们看到的网页的内容，它里面有很多的标记，可以帮助开发网站的人，创造出更漂亮的网站
标记也可以分为双边标记和单边标记，<></>双边标记，<>单边标记
我们先来讲head里面的标记，
<meta>标记 它告诉浏览器要使用什么编码来解析当前的文档，可以实现网页刷新，可以实现网页跳转，还可以实现SEO优化
<meta http-equiv="Content-Type" content="text/html;charset=字符编码 ">
告诉浏览器用什么编码来解析当前的文档
<tlite>标记它可以改变网页的标题。
body标记它自身还有属性，属性：
background，它能设置网页的背景图片，默认会平铺。 ！！！如果同时设置了背景颜色与背景图片 背景颜色会被背景图片给覆盖
bgcolor，它能设置网页的颜色
除了这些基本的结构外，HTML还有注释，它可以帮助程序员更容易看懂自己的编码，也更容易方便修改编码，HTML注释：<!--注释的内容-->
我们先来说一下有哪些标记可以修改文本和字体
<b></b>或<strong></strong> 将文本加粗
<u></u>或者<ins></ins> 将文本加下划线
<i></i>或<em></em> 将文本加倾斜的效果
<s></s>或者<del></del> 删除线
<font></font> 给文本设置字体，颜色和大小
<font>属性：face(字体)、size、color
<marquee></marquee> 跑马灯标记，它可以让文本和图片进行移动或者来回移动
direction 滚动的方向 取值 left(默认值 从右向左进行滚动)、right、up、down
behavior 滚动的方式 取值：scroll(滚动 默认值) slide(滑动 只滚动一次) alternate(弹动 打乒乓球一样 )
width 设置宽度
height 设置高度
bgColor 设置背景颜色
scrollAmount 滚动的步长值 一步走多远 值越大速度越快
<a></a>标记就是超级链接，它可以在文本或者图片上加一个超级链接，用户点击某个含有链接的选项 就会跳转到目标的地址去
除了可以在图片上加一个超级链接外还可以帮图片加多个链接这就是图像热点，后面会讲到
属性：
href：要跳转的链接的URL地址
target：目标文件的打开方式 _self 在本窗口中打开 默认 _blank 在新窗口中打开
name：用来实现锚点链接 id 用来实现锚点链接，锚点链接其实就是你在点到一个超级链接后会回到锚点链接所设置的位置
实现锚点链接：
第一步：需要先定义一个锚点链接
<a name=”锚点名”></a>或者
<a id=”锚点名”></a>
第二步：然后找到这个定义的锚点链接
<a href=http://www.mamicode.com/”#锚点名”>回到顶部
<img />图片标记，它是用来把图片导入当前的文档中，它的属性除了有高和宽还有：
src 图片的地址 这里的地址可以是相对路径 也可以是绝对路径 还可以是互联网上面的图片地址
alt 当图片不存在的时候 显示的文字信息
title 当鼠标放在图片上面时 显示的文字信息
border 给图片设置边框
<p></p>标记，它是段落标记可以写文本
<div><div>标记，和p标记一样，大多会被CSS进行加工改造里面的文本
<span></span>标记它也和p标记一样可以写文本
p，div标记都是块元素标记它们会占据网页一整行的内容，不管里面的文本够不够占据网页的一整行内容
span和img标记是行内元素，它们不会占据网页一整行的内容。
<embed />标记它用来把多媒体（flash）导入到当前的网页上
属性：
src：要引入的源文件地址
width：设置宽度
height：设置高度
图像热点：
一定先要有图片
格式：
<img src=http://www.mamicode.com/”图片的地址” usemap=”#名称”>
<map name=”它要和img标记里面的usemap的属性值一样”>
<area shape coords=”” href=http://www.mamicode.com/”” title=”当鼠标放上图片上面时显示的文字”/>
<area />
<area />
</map>
area标记的属性：
shape：表示区域里面的形状 取值：rect(矩形)、circle(圆形)、poly(多边形)
coords：坐标值
如果形状设置为 rect(矩形)时 那么坐标值应该有4个:x1,y1,x2,y2
如果形状设置为 circle(圆形)时 那么坐标值应该有3个:x1,y1,r
如果形状设置为 poly(多边形)时 那么坐标值应该有根据多少边来决定
现在开始讲传统网页的布局table表格
table标记包括行<tr></tr>、列<td></td >、列<th></th>和标题<caption></caption>
<th>标记里面的文本会自动居中和加粗
标题<caption>它是表格标记的子标记
table属性：
border：表格的边框 取值：1~n
borderColor：表格中边框的颜色
width：设置表格的宽度 取值：固定值或者百分比 百分比它是相对于当前元素的父元素来作为标准
height：设置表格的高度 但是这个属性一般不建议使用 因为最好让内容把高度撑开
align：设置表格的水平对齐方式 取值：left(默认值)|right|center
bgColor：设置表格的背景颜色
background：设置表格的背景图片
cellpadding：表格中单元格里面的内容到单元格边框之间的距离
cellspacing：表格中单元格与单元格之间的距离
tr属性：
bgColor：设置行的背景颜色
background：设置行的背景图片
width：设置行的宽度
height：设置行的高度
align：设置行中的内容水平方向对齐方式 取值：left(默认值)|center|right
valign：设置行中的内容垂直方向对齐方式 取值：top(顶部对齐)|middle(默认值) 中间对齐 |bottom 底部对齐
td和th的属性：
width：设置单元格的宽度
height：设置单元格的高度
bgColor：设置单元格的背景颜色
background：设置单元格的背景图片
rowspan：跨行合并单元格
colspan：跨列合并单元格 ！！！首先要明确是跨行还是跨列 开始在第一个合并单元格里面写属性 再减去对应的单元格的数量 n-1
除了这些还有三个隐藏的标记
<thead></thead> 表示表格的头部
<tbody></tbody> 表示表格的主体部分 可以有多个
<tfoot></tfoot> 表示表格的尾部 它一般是用来做统计用
除了传统的网页结构还有一些是要让客户填写内容的网页，这种网页一般在注册的时候看到，这些网页一般用<form></form>标记，也可以叫表单标记。
属性：action
表单的数据的处理程序 将表单的数据交给“谁”来进行处理
如果说没有填写action这个属性 那么则表示提交给当前的页面来进行处理
如果有写 则表示交给指定的程序来进行处理
method
表单数据的提交方式 取值：GET|POST
如果method这个属性没有填写 那么表单数据它默认是以GET方式进行提交
GET方式提交：它会将表单的数据显示在浏览器的地址栏中
GET的方式的缺点：1、 数据不安全 因为浏览器地址栏看的见 2、 它提交的数据量非常小
POST方式进行提交数据
1、 表单数据不会显示在浏览器的地址栏中 它是经过一定的加密后直接发送给PHP程序来进行处理
2、 相对安全一些 但是不是绝对的安全
3、 它能够处理大量的数据 比如说上传图像时 一定要使用POST方式
提到注册第一要写的肯定是用户名，那条输入框是怎样的代码呢
单行文本框：<input type=”text” name=”名称” value=http://www.mamicode.com/”值” size=”设置长度”/> 在这里value属性值指的是用户输入的数据 明文显示出来
密码输入框和上面的有点不同
<input type=”password” name=”名称” value=http://www.mamicode.com/”值” size=”设置长度”>
除了这些还要有提交按钮，多选按钮和单选按钮
提交按钮：
<input type=”submit” value=http://www.mamicode.com/”内容” name=”名称” />
多选按钮：
<input type=”checkbox” name=”名称” value=http://www.mamicode.com/”值” />
单选按钮：
<input type=”radio” name=”名称” value=http://www.mamicode.com/”值” disabled=”disabled”/>
checked 这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身 checked=”checked”它表示默认选中的意思
disabled：这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身 disabled=”disabled” 这表示当前的表单控件不可以用
enabled：这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身 enabled =” enabled” 这表示当前的表单控件可用 默认值
readonly 这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身 readonly =” readonly” 这表示当前的表单控件不可以用
一组单选按钮要实现只能选择一个 只需要将这一组单选按钮 name属性值要一样
接下来讲CSS，css一般用来对div进行内容的修饰
它要修饰文档里面的内容，就要选中那个内容，所以就有了选择器，选择器可以分为两大类，一类是基本选择器，另一类是复合选择器
基本选择器：通用选择器、标签选择器、ID选择器、类选择器
复合选择器：多元素选择器，后代选择器、子元素选择器
它对文本修饰的代码与HTML的代码有一些不同
text-decoration:文本修饰线 none(去除修饰线)、underline(下划线)、overline(上划线)、line-through(删除线)
color：设置文本的颜色
font-size：设置字体大小 值要在单位 px
font-style：设置文字的样式 取值：italic(斜体)
font-weight：设置文本的加粗效果 取值：normal(正常) 、bold(加粗)
font-family：给文本设置字体 可以一次写多个字体 每一个字体要加双引号
text-align：设置文本的水平对齐方式 取值：left|center|right
text-transform：改变字母的大小写或者首字母大写 取值：lowercase(小写) 、uppercase(大写)、Capitalize(首字母大写)
line-height：设置行高 将一行文本在一个容器内垂直方向居中 它的值应该要与height这个属性的值一样
text-indent：首行缩进 取值:px 或者em (1个em指一个汉字的位置 ) 值可以是负数
除了这些还可以把列表样式开头的数字和图案进行修改和删除
list-style-type：取值：none(无)、disc(实心圆)、circle(空心圆)、square(小方块)
list-style-image：它是用来设置列表前的图片 例如：list-style-image:url(图片的路径);
CSS还会把HTML里的标签看成一个盒子，可以在里面进行填充或者压缩又或者移动，
padding它是“内填充”的意思！它有四个方向，它可以移动盒子里面的内容物
margin它是“外边距”的意思！它也有四个方向，它可以移动盒子的位置
CSS还有一个非常奇特的属性，那就是浮动。
浮动：float它有两个方向一个向左一个向右，盒子浮动会向上一直到网页的顶端或者是没有浮动的盒子下面。
能浮动当然还能取消浮动，只要在浮动盒子里最后一行加个div标记，并且用选择器选定这个div，在里面写clear:both就可以清楚浮动
最后来讲一下定位，定位有固定定位、相对定位、绝对定位、
固定定位：position:fixed;
下面写： 定位的坐标
作用是可以将元素死死的固定在网页当中，不会因为下拉网页而消失。
相对定位：position:relative;
下面写： 定位的坐标
它是基于自己的位置来移动，一般配合绝对定位使用
绝对定位：position:absolute;
下面写： 定位的坐标
绝对定位元素它是相对于“祖先定位元素”为作为参照物来进行定位！
“子绝父相！” ----儿子是绝对定位 老爸是相对定位
下面来说说怎样做网页特效，网页特效是网页中必不可少的部分，它是用javaScritp来实现的
javaScritp中有很多变量，它们可以进行储存，名字也可以自己去定义。
变量它有自己的类型分别是：
string 字符串 就是文本上的字体
number 数值 文本上的数字
Boolean 布尔值 只有两个值true和false 布尔值相当于开关
null 空型 指这个变量里面没有内容
undefind 未定义
它们可以互相转换，只要首字母大写再加个括号把要转换的变量括起来就可以了
它们还可以被运算，运算符号：+、—、X、/、%、++、——
% 余数用来判断奇偶数，++是累加，——是递减
赋值运算符常用的就两个：=、+=
=是重新赋值，+=是把值加到另一个值上，
JavaScript做特效都要有一个或多个方法，这些方法被一个叫函数的代码所包裹，代码可以把这些方法引用到网页上。
方法有很多，它们都对应着不同的对象，有string对象、Array（数组）对象、Date对象、Math对象和number对象。对象里还有属性。
（提到数组就来解释一下吧，数组它里面可以储存很多的字符串、数值和布尔值，
格式：var 变量名 = [数组元素1,数组元素2]）
函数是怎样包裹这些方法
function 函数名(参数1,参数2,参数n){
//函数体
}
又是怎样调用它们的呢
函数名()
函数名里的参数是形参，也就是一个假的可以代替的参数，可以在调用函数的括号里写入参数来代替这个形参，这个参数叫实参。
函数里还有一个关键字：return。翻译过来就是返回，它可以把在函数里的在它上面的代码返回给函数，而它下面的代码则不会读取到。
函数除了有函数名也可以没有函数名，这种叫匿名函数，匿名函数可以实现自调用，也可以用在网页读取完后再调用。
除了这些最重要的是要输出这些函数和函数里面的函数体，因为JavaScript的代码不会写在body标记内，所以代码里的内容不会出现在网页内，所以我们就有了输出的代码，输出有三种
window.alert(数据或者变量名)弹出警告窗口 window.document.write(数据或者变量名)向body标记输出内容 console.log()将数据输出在浏览器的控制台中
网页在读代码是从上至下读，但是也可以让它跳过一条代码，这就是if语句，if是如果的意思
格式：if(条件表达式){ 如果条件表达式成立那就执行第一个语句，如果不成立那就执行第二个语句，
//语句块
}else{
//语句块2
}
if语句可以有一个或多个分支，只要在else后面再多加一个条件表达示即可。
除了可以分支，也可以重复循环一条代码，这就是for循环。
格式： 1 2 4
for(变量初始化;条件表达式;变量更新){
3
//循环体
}
第一步：变量初始化 声明一个变量然后给其赋值 它只执行一次
第二步：判断条件表达式是否成立 如果条件表达式成立 就执行第三步 如果条件表达式不成立就退出循环
第三步：建立第二步成立的基础上 执行循环体
第四步：变量进行更新 立马又来执行第二步 判断条件表达式是否成立！
Document Object Model 文档对象模型
它主要是用来提供了操作HTML文档的属性与方法
DOM的分类
核心DOM：为操作XML和HTML文档的提供了属性与方法
HTML DOM：它是用来专门操作HTML文档和XHTML文档
XML DOM：它是用来专门操作XML文档的 就业班讲
CSS DOM：它是用来专门操作style这个属性
DOM主要是找到HTML里的标记或者是标记里的属性进行增删改查。
可以找标记又或者是id属性值和class属性值。
但是写JavaScript代码会写很长一串，这时候有聪明的程序员就发明了一种可以写更小的代码来实现JavaScript的特效，这就是jQuery。
什么是jQuery，它其实是一个JavaScript写的代码库！开放源代码
里面包含了所有的JavaScript的方法，并且把这些方法的代码简化掉，就可以不用写那么多代码了。
它也是要找对象进行修改加特效（duang,duang,duang）所以它也有自己一套选择器
基本 #id 根据id的属性值来获取元素TagName 根据标签名来获取元素selector1,selector2 匹配列表中的选择器.class 根据class的属性值来获取元素
层级 祖先元素 后代元素 匹配祖先元素下面的指定的后代元素parent > child 匹配父元素下面的指定的子元素 prev + next 匹配当前元素的下一个兄弟元素 要求这两个元素必须邻居 prev~siblings 匹配当前元素的下面的指定所有的兄弟元素
简单 :first 匹配第一个元素 :last 匹配最后一个元素 :eq(index) 匹配下标值为指定值的元素 :not(selector) 匹配不包含指定选择器的所有元素
内容 :contains(text) 匹配内容中包含指定值的元素:empty 匹配内容为空的元素:has(selector) 匹配内容中包含指定选择器的元素:parent 匹配内容不为空的元素
可见性 :hidden 匹配隐藏的元素 CSS中:display:none:visible 匹配显示的元素 CSS中：display:block
属性 [attribute=value] 匹配属性等于指定值的元素 input[name=”username”]
子元素 :nth-child(index/even/odd) 匹配索引值为指定值或者索引值为奇偶的子元素 这里的是从1开始的
表单
表单对象属性
选择器语法： $(‘选择器’)
通过$()获取的对象统一都称为jQuery对象
jQuery对HTML标签中的属性可以进行修改、增加和删减
attr(name) 获取当前对象的指定的属性的值
attr(key,value) 给当前对象设置属性值
attr(properties) 一次给当前对象设置多个属性值 要求参数必须是一个JSON对象
removeAttr(name) 移动当前对象的属性名和属性值
还可以对style和class属性值进行修改、增加和删减。
jQuery有一些方法可以实现特效，这些特效的代码比用JavaScript来实现的代码要短好多。
比如隐藏和显示效果，滑动效果，淡入淡出效果
除了用选择器将标签属性进行增加，也可以用另一种方法进行增加
这种方法叫插入，分内部插入和外部插入，一般多使用内部插入
$(selector).append(content) ：将content追加到selector选择器内部的最后面
$(content).appendTo(selector)：将content追加到selector选择器内部的最后面
$(selector).prepend(content) ：将content追加到selector选择器内部的最前面
$(content).prependTo(selector) ：将content追加到selector选择器内部的最前面
除了jQuery可以更加减少代码量，还有一种方法可以让程序员更快速的建立网页框架，那就是bootstrap
它是基于 HTML、CSS、JAVASCRIPT 的。
移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持。所有的主流浏览器都支持。响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
它有一个中国的官网www.bootcss.com，里面写了很多的全局的css样式。有排版样式、列表样式、表格样式、按钮样式、图片样式……
帮助程序员进行更加快速的排版。
第一步：变量初始化 声明一个变量然后给其赋值 它只执行一次
第二步：判断条件表达式是否成立 如果条件表达式成立 就执行第三步 如果条件表达式不成立就退出循环
第三步：建立第二步成立的基础上 执行循环体
第四步：变量进行更新 立马又来执行第二步 判断条件表达式是否成立！
技术总结