(一) Html
 
a) 背景
H5,现在主流标准,可以编写网页端手机端。
b) 标签
A超链接
P段落
独自占有一行
Ul li  无序列表
去掉Ul和li的圆点和它自带的内外边距:
list-style-type: none;
margin: 0px;
padding: 0px;
Ol li  有序列表
也有去掉序号的方法 list开头
Img 图片
图片也可以放在超链接里面
还可以在css文件里操作它的样式,声明为 .class img {}
<a href="/test01/index.html"><img src="img/lg_movie_a12_2.png"</a>
Hr
H1  h2
Span 小区域
span是不独自占有一行的,需要加上display block让它称为块级元素
Div  框框
浮动之后就不独自占有一行了,清除浮动 clear both 清除
 
Table  tr/th  thead tbody  td 表格
<table border="5" cellspacing="5" cellpadding="5">
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周天</th>
</tr>
<tr>
<td>学习</td>
<td>考试</td>
<td>出们</td>
<td>打球</td>
<td>上网</td>
<td>休息一</td>
<td>休息二</td>
</tr>
</table>
 
 
Center
居中
Button
按钮标签
c) 布局
默认的:static    默认文档流布局
相对的:relative  从自己当前的位置 相对改变自己显示的位置
绝对的:absolute 定位在网页固定的位置
绝对的:fixed    定位在浏览器固定位置 跟着跑
要让模块浮在另一模块的上面,讲究子绝父相 
 
块级元素:
   默认占据一整行,设置宽高都可以实现
行内元素:
   从左向右依次排列,设置宽高无效果。完全取决于内容大小
块级转行内:float..
 浮动清除:clear:both  如果不想下面的代码被上面的浮动影响。
行内转块级:display:block
 
 
 
d) 表单
   Form 
   Input
Type= text
              Password
  Radio 单选
Checkbox 多选 复选
  File
  Button
  Submit
提交
  Reset
重置
      Date
日期
Select  option
<select>
<option value=”1”>现实的</option>
</select>
<textarea>
 
e) 盒子模型
 
外边距 :margin
内边距:padding
边框:border
 
f) 样式表
 
<style>
A{}  标签选择器
.xx{}  类选择器
#id {}  id选择器 
</style>
Color
Background-Color背景色
Background-image
Border:soild red 1px;
Font 字体
Font-size
Line-height
Width
Height
Text-align:center
文字居中方法
Padding
Margin
Float
position
位置 四种
 
(二) Javascript
a) 基本语法
 
Var a = 1;
Var a ={“name”:”zhi”,”age”:“22”}
a.name
 
var c = [1,2,3,4,5,6,7,8]
var c = new array();
c.push(“dd”);
 
if
 
for
 
b) Dom对象
 
Var zujian =  Document.getElementById(“ddd”);
Var zujians =  Document.getElementsByName (“ddd”);
 
Zujian.innerhtml=“ddddd”
Var cc = Zujian.innerhtml;
 
Zujian.value=22    值
 
<form id=”ddd”>
Document.getElementById(“ddd”).submit();//手动提交表单
c) Bom对象
 
Alert()
弹框
setTimeout("suan()",2000)
方法延时执行
setInterval("daojishi()",1000)
方法循环延时执行
Console.log()
Open(“www.baidu.com”)
Location.href=””;//本页面跳转
Window. 能到浏览器窗口大小,
d) 字符串常用方法
re1 = new RegExp("垃圾","g");// 第一个参数: 要替换的文本,g 替换全部
 var Newstr = a.replace(re1, "**");
a :要被替换的字符串
re1 :替换规则
“**” :替换内容
Newstr:替换结果
 
表单校验
function phonejy(){
var phonenumber=document.getElementById("phone").value
var z=/^1[3456789]\d{9}$/ //正则表达式校验和测试格式
if(z.test(phonenumber)){
document.getElementById("er3").innerHTML="<span style='color:red'>手机号格式正确</span>"
}else{
document.getElementById("er3").innerHTML="<span style='color:darkgreen'>手机号格式不正确</span>"
}
}
(三) Jquery
a) 选择器
$(“a”) 所有a标签
$(“#id”) 返回第一个id组件
$(“.ccc”) 所有class=ccc的组件
 
$(“.ccc p”) 所有class=ccc p的组件 
 
 
b) 监听写法
$(“#dd”).click(function(){
 
})
Click
Keyup
键起
keypress
键落
Select  下拉列表 change方法
c) 常用方法
Hide
隐藏元素 绑定事件
Show
显示元素 绑定事件
Val()获取值 val(222)设置值
Attr(“src”)获取属性值
Attr(“src”,”1.jpg”)
Html(“dddd”)
Html()
Text()
Text(“dddddddddddddd”)
 
//获取所有input对象 挨个循环
$(":input").each(function(a,b){
//   a是 顺序号 下表
 $(b)//这个是每一个对象
    });
 
d) 节点操作
Append
追加
Clone
克隆
例子  吉普赛人占卜    9或者9的倍数符号是一样的
<!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
         
     </head> 
     <body>
         <div id="fuhao" style="font-size: 22px;">
             欢迎来到神秘的徐半仙占卜术中心。在这里你得不到爱情。但是能得到迷惑。
             请在心中默想一个2位数。减去他的十位数和个位数。得到的数字记在心中。不要告诉他
             点击下一步
             <input id="xyb" type="button" value="下一步" />
         </div>
         
         <script>
             var tx = ['α','β','γ','δ','ζ','η','θ','φ','ξ','ρ','ψ','ω']
             var sui1 = Math.floor(Math.random()*tx.length);
             
             $("#xyb").click(function(){
                 
                 $("#fuhao").html("<br>")
             
                 for (var i=1;i<100;i++) {
                     var sui = Math.floor(Math.random()*tx.length);
                     if(i%9==0){
                          sui = sui1;
                     } 
                     var ss = i+" : "+tx[sui]+"    ";
                      
                     $("#fuhao").append(ss)
                         if(i%10==0){
                             $("#fuhao").append("<br>")
                             $("#fuhao").append("<br>") 
                     }
                 }
                 $("#fuhao").append("<br> <input id='yc' οnclick='ok()' type='button' value='预测' /> ");
                  
             })
             
             function ok(){
                 $("#fuhao").html("您心中的图形是:"+tx[sui1])
             }
             
         </script>
     </body>
 </html>