前端结构组成
<HTML> <CSS> <JAVASCRIPT> -->静态网页
HTML中含有大量的已经定义好的标签.标签结构:<html> <head> <meta /> <title></title> </head> <body> </body></html>
CSS的引入格式 1:HTML标签中直接定义,例如:style="border:1px solid green"
2:HEAD标签中定义<SYTLE> table{...}... </STYLE>
3:从外部引入: <LINK REL="STYLESHEET" HREF="CSS/SAP.SCC">
CSS常用方法 text-align 水平居中 -- line-height垂直居中 -- border-radius圆角 - border-bottom(top等)设置哪条线的边框
CSS中的选择器: 三大基本选择器: ID选择器(id) 类选择器(class) 标签选择器(tagName)
定义方法分别是 根据id(最好唯一) #id{...} -- .class{...} -- table{....}
其他选择器 DIV SPAN{找寻DIV下的所有SPAN标签} DIV> SPAN{找寻DIV下所有的直接子标签SPAN} DIV[name='div1']{找寻name属性为div1的所有DIV}
JS的引入格式 1:任意位置定义<script> JS代码 </script> 注意:script标签应该放置在body末尾,否则会引起页面加载未完毕,但是js代码执行了,导致js中的某些参数为 undefined,解决方案:放置在body末尾,添加window.onload方法,将部分代码放置在window.onload = function(){部分代码};
2:<script src="JS/js.js"></script>导入外部的js文件
<BOM> bom的对象有window,location,history,screen,navigator,
常用的window open(url) ,close() , alert(弹出输出框) , confirm(弹出确认框) , prompt(弹出输入框) ;
location, reload():刷新 属性href=url(可以直接设置,地址栏将会直接跳转)
history forward(+number) back(+number) go(number) 前进几个页面,后退几个页面 go(无论正负)个页面
<DOM> document->window.document(window几乎都是可省略的)
Node->Document->Html->{Head,Body}
方法: Element GetElementById(id) ; Elements getElementsByTagName(标签名) ;
Elements getElementsByName(name属性) ; Elements getElementsByClassName(class属性)
向某个子标签添加子节点
例如:Table中添加tr
var table = document.getElementsByTagName('table')[0];
var tr = document.createElement("tr");
var td1 = document.createElemtn('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode("赵日天");
var text2 = document.createTextNode("男");
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);//此处即将<tr><td>赵日天</td><td>男</td></tr>添加到table的节点末尾
某个标签删除某个子标签
例如TABLE中删除TR
var tr = document.getElementById("delTr");
var table = tr.parentNode();
table.removeChild(tr);
根据table的子标签tr中的某个td删除tr
var td = document.getElementById("delTd");
var tr = td.parentNode();
var table = tr.parentNode();
table.removeChild(tr);
设置属性方法
Xxx.setAttribute("属性名","属性值");
Xxx.属性名 = "属性值";
第二种方法尽量不要多用,因为其在对class和onclick等属性赋值的时候会出现无法赋予属性的问题.
事件:
1:单击事件 onclick
2:双击事件 ondblclick
3:鼠标移动到某模块上 onmouseover
4:鼠标在某模块上移动 onmousemove
5:鼠标移出某模块 onmouseout onmouseleave
6:鼠标在某模块上按下 onmousedown
7:鼠标在某模块上按下抬起onmouseup
8:键盘按下 onkeydown
9:某模块值发生了变化 onchange
10:表单提交动作出发 onsubmit
11:表单项重置输入框等 onreset
12:某模块加载完毕 onload
事件绑定方式
1:示例:<input type='button' onlick='fun()'> js: function fun(){执行的代码}
2:示例:<input type='button' id='btn'> document.getElementById("btn").onclick = function(){.......}
3:示例:<input type='button' id='btn'> function fun(){...}; document.getElementByID('btn').onclick = fun;
Bootstrap前端框架->导入jar包(复制css,js,font文件夹,jquery.js(非常重要!bootstrap中很多js,css依赖于jquery))
新建的html页面中,需要引入css下的两个bootstrap.min.css和bootstrap.theme.min.css ,然后引入jquery,在引入bootstrap.min.js!!!!!!必须先引入jquery
Bootstrap引入之后,实现的栅格方法,任何设备的每一行都是由12个格子组成.分别有xs , sm , md , lg (xsmall,small,middle,large)
层级关系:
<div class='container'(两边留白)>/<div> <div class='container-fluid'></div>(两边占满)
<div class='row'></div>定义一行
<div class='col-md-4'></div>定义该div占了一行的4个格子,当屏幕是sm尺寸的时候,该div直接占满一行
<div class='col-md-4 col-sm-6'></div>定义该div占了md的一行4个格子,当屏幕尺寸是sm的时候,该div占屏幕的6个格子
******bootstrap中的css属性有一个thumbnail ,用于将大图片缩小到匹配的大小.
其余的查看文档!
<XML>相比于HTML, 1具有非常严格的语法.
2标签全部是自定义的
3HTML用于页面展示,XML用于存储数据
XML约束:dtd(不够严格) schema(常用且严格)
XML文件第一行必须写<?xml version='1.0' ?>否则报错
schema约束:
<?xml version='1.0' ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns="www.gouyao.com"
targetNamespace="www.gouyao.com" elementFormDefault="qualified">
<xs:element name="users">
<xs:complexType>
<xs:sequence>
<xs:element name="user">
<xs:complexType>
<xs:sequence>
<xs:element name="id" type="xs:string"/>
<xs:element name="name" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema> 此处即为一个最简单的schema约束!
<?xml version='1.0'>
<users xmlns:xsi = 'http://www.w3.org/2001/XMLSchema-instance'
xmlns='www.gouyao.com'
xsi:schemaLocation='www.gouyao.com user.xsd'
>
<user>
<id>001</id>
<name>ad</name>
</user>
<users>
XML文件的解析方式: DOM:以DOM树的形式一次性将整颗DOM树加载进内存,很耗资源,但是可以执行CRUD(增删查改)操作
SAX:应用于移动端:采取只读单行的模式,类似于Iterator ,只读取一行,只能执行读操作,消耗内存很小.
解析XML的框架:DOM4J
Jsoup(JsoupXpath)(已学)(需要导入Jsoup包)使用JsoupXpath需要导入JsoupXpath包
|
|
收藏
淘帖
踩
