Web前端基础

一、HTML：超文本标记语言

　1、网页基本元素

　　<h1>——<h6>：标题标签

　　<p>：段落标签

　　<br/>：换行标签

　　<hr/>：水平标签

　　<em>：斜体标签

 　　<strong>：加粗标签 

　　<img>：图像标签　　<img　src="url"　allt="文本"　title="text"　width="x"　height="y"/>

　　<a>：超链接标签　　<a　href="url"　target="目标窗口位置">链接文本或图像</a>　　_blank：在新窗口中打开链接文件　_self：在当前浏览器窗口

　　锚链接步骤：A、创建跳转标记　<a　name="marker">乙位置</a>

　　　　　　　　B、创建跳转链接　<a　href="#marker">甲位置</a>

　2、特殊符号

　　&nbsp;：空格

　　&gt;：大于号＞

　　&lt;：小于号＜

　　&quot;：引号"

　　&copy;：版权符号

　3、列表

　　3-1：无序列表：导航、侧边栏新闻列表

　　　<ul>

　　　　<li></li>

　　　</ul>

　　3-2：有序列表：试卷、问卷选项

　　　<ol>

　　　　<li></li>

　　　</ol>

　　3-3：定义列表：没有顺序，每个标签独占一行

　　　<dl>

　　　　<dt></dt>

　　　　<dd></dd>

　　　</dl>

　4、表单：<form　action="表单提交位置"　method="提交方法">...文本框、按钮等表单元素</form>

　　4-1：元素

　　　1>文本框：text

　　　2>密码框：password

　　　3>单选按钮：radio　　初始默认选中：checked="checked"

　　　4>复选框：checkbox

　　　5>按钮：　禁用控件：disabled="disabled"

　　　　普通按钮：submit　

　　　　重置按钮：reset

　　　　提交按钮：submit

　　　6>文件选择框：file

　　　7>下拉列表框：select　子标签：option　默认选中：selected="selected"　size：列表可看到的行数

　　　8>多行文本域：textarea　列宽：cols　行宽：rows　只读：readonly="readonly"

　　4-2：关联表单元素

　　　<label　for="关联元素ID"></lable>

　　4-3：form的action

　　　/：根目录

　　　./：当前目录

　　　../：上级目录

　5、表格　标题：caption　表头：th　页眉：thead　内容：tbody　页脚：tfoot

　　　<table>

　　　　<tr>

　　　　　<td>　</td>

　　　　</tr>

　　　</table>

　　属性：border：边框宽度

　　　　　width：表格宽

　　　　　bgcolor：背景色

　　　　　cellspacing：单元格之间的间距

　　　　　cellpadding：单元格边框与内容之间的间距

　　　　　align：单元格的对齐方式

　　　　　valign：文本的数值芳心对齐方式

　　　　　rowspan：单元格所跨的行数

　　　　　colspan：单元格所跨的列数 

　6、iframe标签：创建文档的内联框架

　　　属性：src：需引入的文档路径

　　　　　　width/height：设定框架的宽与高

　　　　　　scrolling：是否显示滚动条

　　　　　　frameborder：框架的边框

　　　　　　name：内联框架的名称

二、CSS：级联样式表

　1、语法：

　　<style　type="text/css">

　　选择器{

　　　　属性：属性值;

　　　}

　　</style>

　2、选择器

　　2-1：标签选择器：HTML标签

　　2-2：类选择器：.类名{　属性：属性值;　}　　　

　　　　　　在使用标签的class属性引用类样式：<标签名　class="类名">标签内容</标签名>

　　2-3：ID选择器：#ID名称{　属性：属性值;　}

　　　　　　<标签名　class="类名">标签内容</标签名>

　　　　★ID是唯一的，不能重复

　　2-4：并集选择器

　　　　　标签名,.类名,#ID名称{　。。。　}

　　2-5：交集选择器

　　　1>标签.类选择器{　。。。　}

　　　2>标签#ID选择器{　。。。　}

　　2-6：后代选择器

　　　p　span{　。。。　}

　　　<span>标签是<p>标签的后代

　3、引入方式

　　3-1：行内样式

　　3-2：内部样式表：<style　type="text/css">　</style>

　　3-3：外部样式表：

　　　1>链接式：先加载样式表，后加载页面　<link　href="style.css"　rel="stylesheet"　type="text/css"　/>

　　　2>导入式：先加载页面，后加载样式表　<style　type="text/css">　@import　url("style.css");　</style>

　4、优先级

　　　行内样式表＞内部样式表＞外部样式表

　　　ID选择器＞类选择器＞标签选择器

　5、属性：

　　5-1：字体属性：font

　　　font-style：字体风格

　　　font-weight：字体粗细

　　　font-size：字体大小

　　　font-family：字体类型

　　5-2：文本属性

　　　color：颜色

　　　line-height：行高

　　　text-align：对齐方式

　　　text-decoration：文本装饰

　　5-3：背景属性:background

　　　background-color：背景色

　　　background-image：背景图片

　　　background-position：背景开始位置

　 　background--repeat：背景填充方式　　

　　5-4：列表属性：list-style:none  

　　　list-style-image：将列表设置为列表标志

　　　list-style-type：设置列表项标志的类型　

　　5-5：超链接伪类　★love　hate

　　　a:link{color:　}　　　未访问的链接

　　　a:visited{color:　}　　已访问的链接

　　　a:hover{color:　}　　当有鼠标悬停在链接上

　　　a:active{color:　}　　被选择的链接

　　5-6：鼠标形状的控制：cursor

　　　pointer：超链接的指针

　　　move：对象可移动

　　　default：默认光标

　　　wait：指示程序正在忙

　　5-7：盒子模型

　　　border：边框

　　　padding：内边距　★顺序：上右下左

　　　margin：外边距　　★顺序：上右下左

　　5-8：块元素和内联元素

　　　1>块元素：独占一行，可以定义height和width　　div、p、ul、li

　　　2>内联元素：不独占一行，不能定义height和width　　span、a、lable

　　　3>相互转换：display

　　　　块元素→内联元素：display:inline;

　　　　内联元素→块元素：display:block;

　　5-9：浮动属性

　　　float：　left→左浮动

　　　　　　　right→右浮动

　　　　　　　none→元素不浮动

　　　clear:both：清除浮动　　　

　　5-10：overflow：对溢出的元素处理方式

　　　hidden：隐藏溢出元素

　　　scroll：对溢出元素加滚动条

　　5-11：定位属性：position

　　　relative：相对定位

　　　absolute：绝对定位 

　　　fixed：相对浏览器固定定位

　　　★当父容器的position为非static，子元素的定位position如果是absolute，那么此时子元素相对父容器来进行定位

三、JavaScript：是一种描述语言，基于对象和事件驱动的脚本语言

　1、引入方式

　　1-1：HTML标签中引用

　　1-2：<script>标签中直接书写　<script　type="text/javascript"></script>

　　1-3：使用外部JS文件　<script　type="text/javascript"　 src="**.js"></script>

　2、常用输入/输出/确认

　　alert();　弹出一个提示信息框

　　prompt("提示信息","输入框的默认信息");　弹出输入框

　　confirm("确认信息？");　确认则返回true，取消则返回false　弹出确认框　

　3、基础语法

　　3-1：注释　跟java一致

　　3-2：变量声明

　　　var　变量名=值;

　　3-3：数据类型

　　　undefined、null、number、boolean、string

　　3-4：typeof运算符：判断变量返回值的类型

　　　返回值：undefined、string、boolean、number、function、object

　　3-5：数据类型转换

　　　1>转换函数

　　　　parseInt()：字符串转换为整数

　　　　parseFloat()：字符串转换为浮点数

　　　　toString()：返回字符串

　　　2>强制类型转换

　　　　Boolean()：转化为逻辑值

　　　　Number()：对象转化为数字

　　　　String()：对象转化为字符串

　　3-6：运算符号

　　　　==：判断值相等

　　　　===：判断值和类型都相等

　　3-7：逻辑控制语句

　　　1>条件结构

　　　2>循环结构　for...in：遍历对象成员　

　　　　for(变量　a　in　对象Obj){　获得Obj[a]　}　

　　　3>循环中断

　4、函数

　　4-1：系统函数

　　　parseInt()：解析一个字符串转换为一个整数

　　　parseFloat()：解析一个字符串转换为一个浮点数

　　　isNaN()：检查某个值是否是数字，返回true、false

　　　eval()：计算表达式值

　　4-2：自定义函数

　　　function　函数名(参数1,参数2。。。){　语句　}

　　4-3：匿名函数

　5、事件

　　onload：当页面加载

　　onunload：离开页面

　　onfocus：聚焦

　　onblur：失去焦点

　　onchange：改变事件

　　onsubmit：表单提交时发生

　　onmouseover：鼠标移到对象上发生

　　onmouseout：鼠标离开时发生

　　onclick：对象被单击时发生

　　ondbclick：对象被双击时发生

　6、程序调试

　　6-1：程序错误分类

　　　1>语法错误

　　　2>逻辑错误

　　6-2：try...catch语句

　　　try{　在此运行代码　}catch(err){　在此处理错误　　err.message}

　　6-3：输出调试法

　　　alert()

　　　document.write()

　　　console.log()

　7、BOM

　　7-1：Window对象：浏览器中打开的窗口

　　　1>常用属性

　　　　history：用户访问过的URL信息

　　　　location：用于窗口或框架的Location对象

　　　　document：对Document对象的只读引用

　　　2>常用方法

　　　　alert();　弹出一个提示信息框

　　　　prompt("提示信息","输入框的默认信息");　弹出输入框、确定按钮

　　　　confirm("确认信息？");　确认则返回true，取消则返回false　弹出确认框、确定、取消按钮

　　　　open("弹出窗口的url","窗口名称","窗口特征")：打开一个新的浏览器窗口，加载给定URL所指定的文档

　　　　close()：关闭浏览器窗口

　　　　setTimeout()：在指定的毫秒数后调用函数或计算表达式（只执行一次）

　　　　setInterval()：按照指定的周期（以毫秒计）数来调用函数或计算表达式（循环执行多次）

　　　3>窗口特征

　　　　height、width：窗口文档显示区的高度、宽度

　　　　left、top：窗口的x坐标、y坐标

　　　　toolbar：是否显示浏览器工具栏　

　　　　scrollbars：是否显示滚动条

　　　　location：是否显示地址字段

　　　　status：是否添加状态栏

　　　　menubar：是否显示菜单栏

　　　　resizable：窗口是否可调节尺寸

　　　　titlebar：是否显示标题栏

　　　　fullscreen：是否使用全屏横式显示浏览器

　　7-2：History对象

　　　1>方法

　　　　back()：加载上一个浏览的文档

　　　　forward()：加载下一个浏览过的文档

　　　　go(n)：n为整数，跳转第n个浏览过的文档

　　7-3：Location对象

　　　1>属性

　　　　href：设置或返回完整的URL，设置跳转

　　　2>方法

　　　　reload()：重新加载当前的文档，刷新页面

　　　　replace()：新的文档替换成当前文档

　　7-4：Document对象

　　　1>属性

　　　　title：返回或设置当前文档的标题

　　　　URL：返回当前文档的URL

　　　2>方法

　　　　write()：向文档写HTML表达式、文本或者javascript代码

　　　　getElementById()：根据元素的id拿到每一个元素

　　　　getElementsByTagName()：根据标签名字、标签名称拿到相应标签的所有元素

　　　　getElementsByName()：根据元素的name属性取值拿到元素

　　7-5：定时函数

　　　　setTimeout(fn,millisec)：在指定的毫秒数后调用函数或计算表达式（只执行一次）

　　　　setInterval(fn,millisec)：按照指定的周期（以毫秒计）数来调用函数或计算表达式（循环执行多次）

　　7-6：清除定时函数

　　　　clearInterval(timer)方法：取消由setInterval()设置的timeout

　　　　clearTimeout(timer)方法：取消由setTimeout()设置的timeout

　8、DOM

　　8-1：访问节点

　　　1>使用getElement系列方法访问指定节点　　　　　

　　　　getElementById()：根据元素的id拿到每一个元素

　　　　getElementsByTagName()：根据标签名字、标签名称拿到相应标签的所有元素

　　　　getElementsByName()：根据元素的name属性取值拿到元素

　　　2>使用层次关系访问节点

　　　　parentNode：返回节点的父节点

　　　　childNodes：返回子节点集合，childNodes[i]

　　　　firstChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

　　　　lastChild：返回节点的最后一个子节点

　　　　nextSibling：下一个节点

　　　　previousSibling：上一个节点

　　　3>兼容写法　　

　　　　获取第一个节点：oFirst=oParent.firstElementChild　||　oParent.firstChild

　　　　获取最后一个节点：oLast=oParent.lastElementChild　||　oParent.lastChild

　　　　获取上一个节点：oPre=oParent.previousElementSibling　||　oParent.previousSibling

　　　　获取下一个节点：oNext=oParent.nextElementSibling　||　oParent.nextSibling

　　8-2：操作节点属性值

　getAttribute()：获取某个节点的属性值　　节点对象.getAttribute("属性名");

　　　setAttribute()：设置某个节点的属性值　　节点对象.setAttribute("属性名","属性值"); 

　　8-3：创建和新增节点

　　　creatElement(tagName)：创建一个名为tagName的新元素节点

　　　ANode.appendChild(BNode)：把B节点追加到A节点的末尾

　　　insertBefore(ANode,BNode)：把A节点插入到B节点之前

　　　Node.cloneNode(deep)：deep为true则复制该节点以及该节点的所有子节点，为false则 只复制该节点和其属性

　　8-4：删除和替换节点

　　　removeChild(node)：删除指定的节点

　　　replaceChild(newNode,oldNode)：用newNode来替换oldNode

　9、js你内置对象

　　9-1：String：用于支持对字符串的处理

　　　1>属性：

　　　　length：字符串对象长度

　　　2>方法：

　　　　charAt(index)：返回在指定位置的字符

　　　　indexOf(str,index)：查找某个指定的字符串中首次出现的位置

　　　　substring(index1,index2)：返回位于指定索引index1和index2之间的字符串，包含index1，不包含index2

　　　　spit(str)：将字符串分割为字符串数组

　　　　toLowerCase()：把字符串转换为小写

　　　　toUpperCase()：把字符串转换为大写

　　9-2：Date：用于操作日期时间　var　myDate=new　Date([参数]);

　　　　getDate()：返回一个月中的每一天，值：1—31之间

　　　　getDay()：返回星期中的某一天，值：0—6之间

　　　　getHours()：返回小时数，值：0—23之间

　　　　getMinutes()：返回分钟数，值0—59之间

　　　　getSeconds()：返回秒数，值0—59之间

　　　　getMonth()：返回月份，值0—11之间

　　　　getFullYear()：返回年份，值为四位数

　　9-3：Array：用于在单独的变量名中存储一系列的值　var　数组名称=new　Array();

　　　　1>数组读取

　　　　　A、采用for循环读取

　　　　　B、采用for...in循环读取

　　　　2>属性

　　　　　length：设置或返回数组中元素的数目

　　　　3>方法

　　　　　join()：把数组的所有元素通过分隔符进行分隔连接，拼接成一个字符串

　　　　　sort()：对数组排序

　　　　　push()：向数组末尾添加一个或更多元素，并返回新的长度　　　

　　9-4：Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

　　　　ceil()：对数进行上舍入

　　　　floor()：对数进行下舍入

　　　　round()：把数四舍五入为最接近的整数

　　　　random()：返回0—1之间的随机数

　10、设置元素样式

　　10-1：动态改变页面元素的样式

　　　步骤一：使用getElement系列方法获取元素

　　　步骤二：通过属性改变样式

　　　　方法1：style属性

　　　　　DOM元素.style.样式属性="值";

　　　　　★最常用CSS属性中display设置HTML元素的隐藏与显示

　　　　　　DOM元素.style.display="none"　|　"block";

　　　　方法2：className属性

　　　　　DOM元素.className="类名称";

　　　　　★className属性可设置或返回元素的class样式

　　★如果样式属性中带有“-”号，要省去“-”，并且“-”后的首字母要大写

　11、javascript:;代表执行一个空事件

四、表单验证：对输入数据进行验证

　1、表单验证的必要性

　　1-1：减轻服务器的压力

　　1-2：保证数据的可行性和安全性

　2、表单验证的步骤

　　2-1：点击提交按钮时会触发表单的onsubmit事件

　　2-2：在 onsubmit事件中进行验证

　　　1>获取表单元素的值

　　　　利用DOM方法获取需验证的表单元素的value值

　　　2>根据业务规则，判断获取的数据是否符合要求

　　　　简单的业务验证用String对象的属性和方法

　　　　复杂的验证用正则表达式

　　2-3：所有需验证的表单元素通过后，才能提交表单

　　2-4：否则给出提示，并重复验证

　3、常见的验证内容

　　3-1：形式

　　　1>弹出框（层）提示

　　　2>输入框周边有提示语句

　　3-2：内容

　　　1>判断是否为空

　　　2>判断是否为数字

　　　3>判断是否符合某些特定的内容格式（邮箱、手机号、身份证等）

　　　4>判断你输入的数据的长度。。。

　4、文本框对象

　　4-1：属性

　　　id：设置或返回文本域的id

　　　value：设置或返回文本域的value属性的值

　　4-2：方法

　　　blur()：从文本域中移开焦点

　　　focus()：在文本域中设置焦点，即获得鼠标光标

　　　select()：选取文本域中的内容

　　4-3：事件

　　　onblur：失去焦点，当光标离开某个文本框时触发

　　　onfocus：获得焦点，当光标进入某个文本框时触发

　　　onkeypress：某个键盘按键被按下时触发

　5、正则表达式（RegExp）

　　5-1：创建语法

　　　1>普通方法

　　　　var　reg=/表达式/附加参数　

　　　　★g：代表全局匹配　　i：代表不区分大小写匹配　　m：代表可以进行多行匹配

　　　2>构造方法

　　　　var　reg=new　RegExp(表达式,附加参数);

　　5-2：RegExp对象方括号

　　　[abc]：查找方括号之间的任何字符

　　　[^abc]：查找任何不在方括号之间的字符

　　　[0-9]：查找任何从0到9的数字

　　　[a-z]：查找任何从小写a到小写z的字符

　　　[A-Z]：查找任何从大写A到大写Z的字符

　　　[a-zA-Z]：查找任何字母

　　　[red　|　blue　green]：查找任何指定的选项

　　5-3：RegExp对象常用符号

　　　/.../：代表一个模式的开始和结束

　　　^：匹配字符串的开始

　　　$：匹配字符串的结束

　　　\s：任何空白字符

　　　\S：任何非空白字符

　　　\d：匹配一个数字字符，等价于[0-9]

　　　\D：除了数字之外的任何字符，等价于[^0-9]

　　　\w：匹配一个数字、下划线或字母字符，等价于[a-zA-Z0-9]

　　　.：除了换行符之外的任意字符

　　5-4：RegExp对象重复字符串

　　　{n]：匹配前一项n次

　　　{n,}：匹配前一项n次，或者多于n次

　　　{n,m}：匹配前一项至少n次，但是不能超过m次

　　　*：匹配前一项0次或多次，等价于{0,}

　　　+：匹配前一项1次或多次，等价于{1,}

　　　?：匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

　　★RegExp对象的test()方法用于检测一个 字符串是否匹配某个表达式，匹配则返回true，否则false

　　5-5：String对象与正则表达式

　　　1>search(reg)：检索与正则表达式相匹配的值，返回查找位置的索引，否则返回-1

　　　2>match(reg)：查找到一个或多个正则表达式的匹配，返回数组或null

　　　3>replace(reg,str)：替换与正则表达式匹配的字符串

　　　4>split(reg)：把字符串分割为字符串数组

　

　　　　

　　　　

　　　　

　　

　　　　

                         ·