黑马程序员-4个小时搞定html+css+javascript入门

                                                        ------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

声明标题并非虚假，因为之前都学过，这次4个小时算是复习，所以会相当的快，第二遍的学习效率比第一次感觉明显有差别，书读百遍其义自现的道理很精辟。

下面就将笔记整理一下，方便以后复习。

2013.4.17


1.浏览器是：接收浏览者的操作（浏览器使用webBrower控件（Trident引擎），webkit引擎）


2.动态页面是与服务器交互的叫动态页面，静态页面包括（html，javascript，等）


3.html中空格不会被显示，有转义字符&lt 小于号，&gt大于号，&nbsp空格，<p></p>段落，<br/>回车


4.<map><area></area></map>,地图标签


5.<pre></pre>标签中支持排版


6.<center><center>居中显示


7.<h1>-<h6>是不同标签的大小


8.<b> 这是粗体哦</b> <font color="red" size="34">字体标签</font>


9.超链接 URL表示网络资源中的地址<a href="http://www.baidu.com">这里就是链接，可以填写图片</a>


超链接深入了解：/表示网站根目录 ，../表示父目录，  ../../表示父目录的父目录


<a> 的 target属性设定为"_blank"就可以在新窗口中打开超链接
name属性给<a>取名字呀，例如<a name="#a">  <a href="#a">,称之为锚点


10.图片的<img src="1.jpg" /> alt属性，在图片不显示的时候显示文字
border属性指定边框，width，height 初始的时候最好给定大小，如果没有，加载是会界面乱


缩小图，用width还是会消耗流量，加载速度很慢


11.<ul>是无序的列表,<ol>是有序的


12.table，内部用tr行，td单元格，border属性设置为0来隐藏表格线
<tr>的属性：align水平，可选值：为left,right,center,
   valign水平对齐：top，middle,bottom
<td>也有align和valign。
还可以使用rowspan,colspan进行单元格的合并
表头的td可以用th代替，这样就会表头粗体居中显示，建议将<thead>代替<tr>

13.表单：<form action="要提交的服务器">,如果需要把数据提交到服务器，则需要将<input><textarea><select>等表单元素放在form中
<input value=“显示的内容”>  是主要的表单元素，type的可选值：submit type=图片地址（提交按钮）,button(普通按钮),checkbox(复选框),file(文件选择框)
hidden（隐藏字段），image（图片按钮）password(密码框)。radio（单选按钮），reset（重置按钮）text（文本框）

14.缩略图，用一个大图，一个小图，用一个超链接包含大图，链接到小图

15.text：表示一个文本框，size属性为宽度，value为值，maxlenth可以输入的最大长度，readonly只读，使用的时候最好写readonly=“readonly”

16.checkbox：checked属性表示是否被选中，<input type="checkbox" checkbed="checked">

17.radio：相同的name属性为一组，不同radio设定不同的value值，这样通过取指定name的值，就可以知道谁被选中了，不用单独判断

18.file：使用file，则form的enctype必须设置为multipart/form-data,method属性为post，才能提交给服务器

19.使用src属性指定图片的地址，用来实现美化的登录按钮

20.select标签，用来创建类似与winform中的ComboBox或者是ListBox
如果size属性值大于1就是listbox否则就是ComBox。<select multiple="multiple">那么就是可以多选的listbox了，例如可以选北京上海了

21.<select><option>北京</option><option>上海</option><option>天津</option></select>
<option value=1>，给value设定值，
将一个option select=selected，默认显示上海被选择啦（哪一项被选中）

22.optgroup用来分组

23.<textarea>多行文本，也是表单元素：有两个属性，cols,rows属性表示行数和列数

24.常见的标签：lable点击姓名的就可以选中控件 <label for="哪个控件的名称服务">

25.fieldset标签：  <fieldset>
  <legend>常用</legend> 这里指的是标题
  <input type="text"/> 
  <input type="text"/>
                   <input type="text"/>
  </fieldset>

26.样式表：css层叠样式表示用来美用户界面的，对页面元素进行更精细的设置，样式主要描述元素的字体颜色，背景颜色，边框等。
css主要有元素内联，页面嵌入，和外部引用三种使用方式。
1.元素内联，直接将样式写入元素的style属性中
例如<input type="text" readonly="readonly" style="background-color:#ff00ff"/>适用于样式没有可复用性的场合

2.页面嵌入：在head中加入
<style type="text/css">
input{border-color:Yellow.color.Red;}
</style>
表示页面中所有的input都是采用指定的样式。适合于样式复用，减小页面体积外部引用，将css内容写入css后缀的文件

3.外部引用，将css内容写入css后缀的文件，在web中添加一个样式表：
textarea{background:yellow}
然后在页中引用，在head中加入
<link type="text/css" rel="Stylesheet" href="s1.css"/>
适合于多个页面共享css

27.层（div） ，块（span）
层：<div></div>将内容放在层中，就以将这些内容当成一个整体，进行处理，比如整体隐藏，整体移动等。div非常强大和常用

span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不应该布局显示

28.常见的样式表
css计量单位：css中表示宽度，距离是有多种计量单位：px（像素）40%（百分比），em（相对单位）等。 width：20px。
background-color:red；背景颜色，color：文本颜色
border-style:solid边框风格，实线，还有dotted（点）等值；
border-color:边框颜色； 
border-width:1px
display:意思是否显示，可选值none（不显示） block（显示为块级元素，此元素前后会带有换行符。
inline(显示为内联元素，元素前面没有换行符)等。（用js做QQ页签）
cursor，鼠标在元素上时显示的光标图标，，可选值：cursor（默认光标）pointer（超链接上的手），text（输入bean） wait（忙沙漏）help（帮助）等
li不显示远点：list-style-type:none；一般设在li或者ul上
应用：图片:不显示边框

29.样式选择器：标签选择器，class选择器，id选择器
标签选择器，使某种标签元素全部显示相同样式
class选择器
.warning{background：blue；}
.hightlight{}
使用的时候 class=“warning”

30.样式优先级问题
优先表示子元素样式，

31.标签+class选择器
input.accountno{background:blue}
label.accountno{background:blue}

使用的时候
<input class="accountno" type="text">
<label class="accountno" >你说呢</label>

32.Id选择器：样式找元素
#username
{
font-size：xx
}
<input id="#username" type="text">

33.更多选择器
关联选择器
p strong{background-color:yellow}
表示p标签内strong标签的内容使用的样式
<strong>fdsfasdf</strong>
<p><strong>fdasfds</strong></p>

组合选择器：同时为多个标签设定一个样式
h1,h2,input{background:blue}

伪选择器：为标签的不同状态设定不同的样式：
A:visited：超链接点击过的样式； A;active：选中超链接时的样式
A:link；超链接未被访问时的状态； A:hover：鼠标移动超链接时的状态。
A:visited{text-decoration:none}

<html><head><title>贡的网页哈</title></head><body bgcolor="blue"><font color="red" size="32">你好</font><a href="http://www.baidu.com" >百度</a><br/><map name="a1"><area>12356</area></map><br/><br/><map name="a2"><area>djfald</area></map><br/><ul><li>第一帖</li><li>板凳</li><li>顶一下</li></ul><center><img  name="#a"src="1.jpg"  width="100" height="100" /></center></br><pre>我叫***呀，这是测试板块，为了更快的学习，所以需要练习，这个打字很快呀排版很轻松的，所以学习很给力    哦</pre></br></br></br></br><select><option>北京</option><option>上海</option><option>天津</option></select><select size="2"><option>北京</option><option>上海</option><option>天津</option></select></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><textarea cols="100" rows="7">帖子默认内容</textarea></br></br></br></br></br></br></br><a href="#a">跳转到第一个地图</a></body></html>

javascript：

2013.4.18

1.html只是描述网页长相的标记语言，没有计算，判断的能力，如果所以计算判断
（比如判断文本框是否为空，判断两次密码是否输入一致）都放在服务器端之行的话
网页的速度很很慢，所以要求浏览器中能执行一些简单的运算，判断。javascript就是一种在浏览器端之行的语言

2.javascript与java没有直接关系，唯一的关系就是javascript原来叫liveScript后面吸收了一些java的特性，升级为javascript
javascript是解释型语言，无需编译就可以随时运行，这样哪怕语法有错误（部分有错误也能运行）

3.head中添加<script type="text/javascript">
alert(new Data().tolocaleDatastring());
</script>
script标签可以放在任何位置，body执行之前head中的alert就执行了，如果script没有执行，body中没有

4.引用js文件，页面共享，可以减小网络流量，添加一个javascript文件
<script src="地址.js" type="text/javascript"></script>
地址.js文件中直接写alert代码就行了

5.事件：如果没有事件：<input type="button" value="点"/>
<a href="javascript:alert('hello')">点点></a>，交给javascript引擎处理
不区分单双引号
<a href="1.html" onclick="alert("heool")">点点</a>

迅雷开头是thunder://
qq:
ftp://
电驴： ed2k://这就是根据超连接的开头调用怎么样的程序来处理，来处理不同的网络协议
写在href中才要写javascript，其他的就不用写了，只有这个是特例

6.js中可以使用单双引号，主要是为了方便与html的集成，避免转义符的麻烦
js变量中有，null，undefined两种，null表示变量值为空，undefined表示为变量没有指向任何的对象，未初始化
js是弱类型的语言，声明变量时无法确定，只能通过var来声明，
（*）js中不使用var的属于全局变量
js是动态类型的分配变量

7.js中调试
使用vs，IE调试选项要打开，internet选项-高级，去掉禁用脚本
设置断点
案例：用循环语句计算1到100之间的整数和function（）{
var sum=0；
for（int i=0；i<100；i++）{sum+=i}
}alert(sum)

8.js中判断变量初始化
javaScript中变量，参数是否初始化的三种方法：
var x；
if(x==null)
{alert("null")}
if(typeof(x)=="undefined"){alert('undefined')}
if(!x)(alert('不x'))，推荐最后一种方法，变量不为空或者不为0

9.函数function 函数名（i1，i2），由于js是弱类型，所以就不用写参数的类型，没有返回值类型
也可以写alert(add(1,2))

function add(i1,i2)
{
if(i1>i2){ returni1+i2},没有返回值就是undefined

10.匿名函数（c#中使用委托指向函数）
var f1= function（i1，i2）{return i1+i2} f1相当于委托
}
使用的时候alert(f1(3,10))，直接将函数当参数来用
alert(function（i1，i2）{return i1+i2}),这样也行的

11.js实现面向对象基础，通过函数模拟出来的通过闭包（模拟类的实现）模拟出来的
String ，Data 都是对象
function Person（name,age）{this.name=name;this.age=age; this.Sayhello=function(){alert
"你好，我是"+this.name+",我"+this.age+“岁了”}}
var p1=new Person("tom",20); p1.Sayhello();,
function Person（name,age）可以看成是声明的构造函数
动态增加属性
p1已经new出来了，还可以增加属性 p1.Gender=男,
如果没有new的话 p1是undefined的，因为函数没有返回值

12.Array对象
js中数组是动态数组，大小不是固定的，相当于arrayList，随时添加东西，像C#中的 数组，arraylist，hashtable等的超强综合体
var names=new array();
names[0]="tom";
names[1]="jerry"
names[2]=lily"
for(var i=0; i<names.length;i++){alert(names[i])}
无需预指定大小，动态

13.练习
求一个数组中的最大值，定义成函数
function getMax(arr){var max=arr[0]; for(var i=0; i<arr.length;i++)(if(arr[i]>Max){max=arr[i]}) return max;}

var arr1=new Array();
arr[0]=21; arr[2]=90;

14.字符串元素反转，不适用reverse，第i个与第length-i-1；进行交换
function myreverse(arr){for(var i=0;i<arr.length/2){ temp=arr[i]; arr[i]=arr[arr.length-i-1];
arr[arr.length-1-i=temp;
}}

15.分割字符串
js中可以使用arr1.join('|');练习不适用
function myjoin(arr){
if(arr.length<=0){return;} var s=arr[0];
for(var  i=1;i<arr.length;i++){s=s+"|"+arr[i]}
return s;
}

var arr=new arr();
arr[0]="tom";
arr[1]="lily";
arr[2]="jerry";

如果直接alert(arr)，默认的帮忙听哦string了

16.js中的Dictionary字典用法
js中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个stack

var pinyins=new Array()；
pinyins["人"]="ren";
pinyins["口"]="kou";
pinyins["手"]="shou";

pinyins.pop 还可以当堆栈来用
pinyins[0]="tom"   key,value

alert(pinyins["人"]);   显示ren
alert(pinyins.人]);      显示ren
像hashtable，dictionary那样用，效率高

for( var k in pinyins) 没有foreach只有for但可以当foreach来用
{ }  打印为key，也就是k ，数组也是Dectionary用法的特例

var arr=new arry();
arr[0]="tom"

for(var k in arr)
alert(k);  打印出来的是0，1而不是tom
课下练习：网页版的火星文翻译

17. 数组简化声明
var arr[3,4,5,7,5]; 普通数组初始化
如果创建dictionary数组
var arr={"tom":20,"jim":40}使用键值对来赋值

18.for获得对象成员
for(var e in document)  docment就是一个对象
{
alert(e);
}
把所有对象的属性调用出来，对象的属性也是以key的方式存在的