html与JavaScript回顾

<table>标签中 THEAD TFOOT TBODY 表格由行所组成,行由单元格组成 表格中默认都有一个标签tbody

THEAD TFOOT表格列信息 TBODY 控制表格分行下载,可先显示部分内容,避免全部解析后一起显示

 

<form>标签  与服务器交互

action属性: 指定数据提交的目的地

get与post get会把提交的信息显示在地址栏上,post不会 get对于敏感信息不安全 post安全 get最长2083 提交数据体积受地址栏的限制, post没有,可以提交大体积数据 get将提交信息封装在请求行,也就是http消息头之前. post 数据体中,也就是http消息头之后的空行后

对于服务端而言: 表单尽量用post提交,因为涉及到编码问题  tomcat默认的解码方式是 iso8859-1 对于post提交的中文。 在服务器端可以直接用setCharacterEncoding("gbk")就可以解决 对于get提交的中文。 在服务器端只能通过 iso8859-1将数据解码一次,在通过指定码表如GBK进行解码

使用表单的组件不一定要使用form标签,只有需要将数据进行提交的时候才用到form标签

 

体标签 <pre>标签保持数据原样格式输出 <p>标签 段落分隔 <b>加粗  <strong> <i>斜体 <u>下划线 <sub>下标 <sup>上标 <marquee direction=""> 由右向左飞入 direction飞入方向(left right up down)                                     behavior飞入方式 slide常用

头标签

href:   mailto:111@163.com  发送邮件   thunder://.... 迅雷下载 target="_blank" 在新窗口中打开 打开超链接的方式

<meta>   <meta name="keywords" content="超人"/> name 属性 :网页的描述信息 http-equiv 属性:模拟http协议的响应消息头 <meta http-equiv="refresh" content="3;url=http://www.sina.cn"/> 无指定url则在本页面刷新

<link> rel 属性:描述目标文档与当前文档的关系 type 属性:文档类型 meida:指定目标文档在哪种设备上起作用

<link rel="stylesheet" type="text/css" media="screen,print" href="a.css"/>

正则表达式 (弊端:阅读性较差) 1.匹配 String matches(regex) 2.获取(查找) Pattern p = Pattern.compile("a*b"); Matcher m = p.matcher("aaaaab"); boolean b = m.matches();

while(m.find()){   System.out.println(m.group()); } 3.切割String split(regex); 4.替换String replaceAll(regex,str)

网络爬虫   通过网络以及IO读取网页中的源文件,并且通过规则获取网页中的符合规则的数据

eg: mial爬虫

  String mailreg="[a-zA-Z0-9]{6,12}@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+";

组的含义:将部分进行封装以便重用

特殊字符 避免被解析 <: &lt; >: &gt; &: &amp 空格: &nbsp;

标题: <h1> .... <h6>

<a href="http://www.sina.com.cn">新浪</a>

被点击后,会启动引所对应解析程序取查找指定主机 1. 先去查找本地主机的hosts文件.如果没有找到该主机对应的ip地址 2. 取公网的 DNS服务器上找对应的ip地址

定位标记 <a name="top">页首</a>

<a href="#top">回到页首</a>

文本区域<textarea>

表单组建通常都需要定义name和value属性,因为要将数据发送给服务端 服务端只有知道了该name的值才可以对提交的数据进行分别获取

css层叠样式表   将网页中的样式分离出来,完全由CSS来控制   增强样式的复用性以及可扩展性

  格式:       选择器{属性名:属性值;属性名:属性值;....}

css和html相结合的四种方式

1.每一个html 标签都有一个 style属性

2. 当页面由多个标签有相同样式时,可以进行复用       <style>     css代码   </style> 3 当有多个页面中的标签样式相同时,还可以将样式单独封装为一个css文件    <style>       @import url("1.css");    </style>

4.通过html中head标签中的 link标签链接一个css文件 <link rel="stylesheet" href=".css">

技巧: 为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件

一个CSS中使用CSS的import将多个标签样式文件导入 然后 在html页面上,使用link标签导入这个总的css文件

eg:

  1.css:

  @import url("p.css");   2import url("div.css")

  <link rel="stylesheet" href="1.css"/>

选择器:样式要作用的标签容器

当样式分离后,html作用在于用标签封装数据. 然后将CSS家在到指定标签上

选择器分类: 1.标签选择器 2.类选择器: 其实就是每一个标签中的class属性,用 .的形式表示      只用来给CSS使用。可以对不同标签进行相同样式设定 3.ID选择器: 其实就是每一个标签中的ID属性。 但是要保证ID唯一性.用#来使用

   ID不仅可以被CSS使用,还可以被JAVASCRIPT使用

选择器优先级; ID>class>标签

扩展选择器: 1.关联选择器: 其实就是对标签中的标签进行样式定义.选择器 选择器... 2.组合选择器: 对多个选择器进行相同样式定义。 多个选择器用,隔开 3.伪元素选择器: 其实就是元素的一种状态   a:link:超链接被点前状态   a:visited:超链接点击后状态
  a:hover:悬停在超链接上   a:active: 点击超链接时

定义这些状态时,有一个顺序 L V H A

  p:first-letter   p:first-line   :focus:

CSS滤镜: 通过一些代码完成丰富了样式

网页设计:css+div

div: 行级区域 span:块级区域 p:行级区域 p中不要嵌套div   

 

JS 弱类型语言 基于对象和事件驱动 特殊常量值:undefined,当变量未初始化就被使用,该变量的值就是undefined.

js中0就是false,非0就是true(通常用1表示)      null是false

js中连接两个或者多个表达式时要用&&或者||      如果用&或者|则会进行位运算

true 可直接进行运算 eg:

document.write<script type="text/javascript">    //表格显示99乘法表    document.write("<table>");    for(var x=1;x<=9;x++){     document.write("<tr>");     for(var y=1;y<=x;y++){        document.write("<th>"+y+"*"+x+"="+y*x+"</th>");     }       document.write("</tr>");    }           document.write("</table>");      </script>();

js中的数组可变长,不存在下标越界,可存放不同了类型数据

var arr = [4,11,14,2,3,5];

var arr = new Array();

JS函数function

  function show(){     alert("show");   }   show();  
无重载形式,带return,js中函数本身就是一个对象,函数名就是对象名

argments 可用来遍历参数

argments.length

动态函数: var show = new Function("x","y","var sum= x+y; return sum;"); 匿名函数: 通常用于事件的处理: window.onload = function{ alert("加载完毕"); }

with(stu){ alert(name+".."+age); } 确定对象作用的范围

遍历属性 for(s in stu){   alert(s+".."+stu[s]); }

遍历数组 for(x in arr){   alert(arr[x]); }

//整数进制转换 parseInt("110",2); toString(2);

//给已有的对象添加方法 让对象本身获得功能 Arry.prototype.getZuiDa = getMax;

DOM:document object model 将一些标记型文档中的内容当成对象

dom三层模型: dom1: 将html文档封装成对象 dom2: 将xml文档封装成对象 dom3: 将xml文档封转成对象

DHTML: 动态HTML html css dom javascript 综合 html: 将数据进行封装 dom: 将标签封装成对象 css: 负责标签中数据的样式 javascript:将三者进行融合,通过程序设计方式来完成动态效果的操作

xmlHttpRequest --> AJAX

<div id="divid"> haha </div>

 

var obj = getElementById("divid"); obj.tagName obj.innerText 

function show(){ return "show run"; } var method = show(); var method = show; 第一句表示的是show方法运行后的结果赋给method变量 第二句表示的是将show指向的对象的地址赋给method,那么method也指向了该对象 那么通过method(); 的形式来调用这个show方法

alert(p["name"]+".."+p.age);

JS中有一些已经定义好的对象 String,Math,Date,Array,Function prototype可以获取指定的对象引用

常见的全局方法(不需要对象调用)  Globel parseInt(numstr,[radix]); var num = parseInt("110",2); // 6  按二进制转换

var x = 6; var y = x.toString(2);// 110  获取6的二进制

节点类型: 标签型节点:类型:1 文本型节点:类型:3 注释型节点:类型:8 document:   类型: 9

一般字体16px <a href="javascript:void(0)" onclick="changeSize('10px')">改变字体大小</a> 取消超链接

function changeSize(size){   var node = document.getElementById("newsId");   node.style.fontSize = size; }

var tabNode = createElement("table"); var trNode = tabNode.insertRow(); var tdNode = trNode.insertCell(); tdNode.innerHTML();

 

常用function

正则表达式判断 中文还是英文

 
英文function isEnglish(s){
    s = s.trim();
    var p = /^[A-Za-z]+$/;
    return p.test(s);
}
中文
function isChinese(s){
    s =s.trim();
    var p = /^[\u0391-\uFFE5]+$/;
    return p.test
}
posted on 2012-11-08 14:16  wencansz  阅读(177)  评论(0编辑  收藏  举报