web基础

  •  

    h1是内连标签
  • a是块级标签
  • <br>换行标签
  • style="background-color: orchid;color:white"#style背景颜色标签,color:white是文字颜色
  • meta http-equiv="Refresh" content=""#最后双引号加时间,刷新时间标签
  • <strong>和<b>标签是加粗
  • <em>斜体标签
  • <sup>上标
  • <sub>下标
  • <hr>下划线
  • &it;小于&gt;大于&quot;引号&copy;版权号&reg;注册号
1 <img src="2a.jpg" height="592" width="508" alt="加载失败">

 

    • 　　　　src;要显示图片的路径
    • 　　　　alt;图片加载加载不成功显示该提示
    •    　　  title;鼠标放在图片上显示文字
    •   　　   width;图片的宽度
    •   　　   height;图片的高度
  • href;超链接,区域连接点
  • margin是剧中
  • solid transparent 是透明色
    基本翻译
    adj. 透明的；显然的；坦率的；易懂的
    网络释义
    Transparent:透明 | 通透 | 天仙配
  • target;新生一个页面,并进去
  • 加#表示要在本页找跳转标签
  • <ul>:无序标签
  • <ol>:有序标签
    • 　　<li>:列表中的每一项
  • <dl>:定义列表
    • 　　<dt>列表标题
    •       <dd>列表项

input标签<p>单行

  • 　 
     1 <form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data"><!--post隐藏类型,默认get为非隐藏
 2                                                              enctype="multipart/form-data" 大文件上传  -->
 3     <p>用户名<input type="text" name="query"></p>
 4     <p>密码  <input type="password" name="pwd"></p>
 5     <p>男<input type="radio" name="sex" value="1"></p>
 6     <p>女<input type="radio" name="sex" value="2"></p>
 7 
 8     <p>篮球<input type="radio" name="hobby" value="3"></p><!--type什么类型,name是key,value是值-->
 9     <p>战争<input type="radio" name="hobby" value="1"></p><!--radio#是单选框-->
10     <p>打球<input type="checkbox" name="hobby" value="2"></p><!--chechbox是复选框-->
11 
12     <p><input type="button" value="bts"></p>
13     <p><input type="file" value="file_name"></p><!--file类型是选择文件和上传文件窗口-->
14 
15 
16     <p>提交  <input type="submit" value="提交"></p>
17     <input type="reset" value="重置" />
18     
19 </form>


     

     

 css

  • hover是当鼠标放到上面会发生变化改变当前颜色
    • 　　 
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .touch{
 8             width: 200px;
 9             height: 200px;
10             overflow: hidden;
11             position: relative;
12         }
13         .touch .content{
14             position: absolute;
15             top: 0;
16             left: 0;
17             right: 0;
18             bottom: 0;
19             background-color: black;
20             opacity: 0.25;
21             color: white;
22             text-align: center;
23             visibility: hidden;
24         }
25         .touch:hover .content{
26             visibility: visible;
27         }
28         .touch .content .c1{
29             font-size: 32px;
30             padding: 30px;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="touch">
36         <div><img src="Z.jpg"></div>
37         <div class="content">
38             <div>zzzzzzzzz</div>
39             <div>666-888(e)</div>
40         </div>
41     </div>
42 </body>
43 </html>
      View Code

       

  • position
    • 　　fixed固定整个屏幕的某个位置
      • 　　 
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 2000px;background: moccasin"></div>
 9     <div style="position: fixed;right: 30px;bottom:50px;width: 90px;height: 90px;background-color: red"></div>
10 </body>
11 </html>
        View Code

         

  • absolute如果没有relative是和fixed一样的,但不固定
  • 图标font(font awsome)

 

 

 

  • javaScript
    • 　　 
      js函数

普通函数;
	functinon func(){
	
	}
匿名函数;
	functinon func(arg){
		return arg+1
	}
	setInterval("func()"2000);
	
	setInterval(functinon(){
	console.log(123);
	},2000)
	
自执行函数(创建函数并自执行):
	functinon func(arg){
		console.log(arg);
	}
	func(1)
	
	2,简洁
		(functinon(arg){
			console.log(arg);
		}(1)
		
序列化
	JSON.stringify()#将对象转换为字符串
	JSON.parse()#    将字符串转换为对象
	
时间
	var d = new Date()
	
	d.getxxx  获取
	d.setxxx  设置

作用域
	以函数作为作用域
	
面向对象
	functinon Foo(m){
		this.name = m;    #this代指对象(python的slef)
	}
	var obj = new Foo('we');   #创建对象时,new 后面加函数()
	
DOM
	查找
		直接查找
			var boj = document.getElementById(i1)#i1(id地址)
		间接查找
			文件内容操作
				innerText   仅文本
				innerHTML   网页全内容
				value
					input   value获取当前标签中的值
					select  获取选中的value值
	
	请输入关键字
		<input type="text" placeholder="请输入" />#placeholder占位符
		
	事件
		绑定事件的两种方式
			a. 直接标签绑定 onclick='xxx()'  onclick
			b. 先获取DOM对象,然后进行绑定
				document.getElementById('xx').onclick
				document.getElementById('xx').onfocus
				
		this 当前触发事件的标签
			第一种
				<input id='i1' type='button' onclick='ClickOn(this)'>
				
				functinon 	ClickOn(self){
					self 当前点击的标签
				}
			第二种
				<input id='i1' type=button'>
				document.getElementById('i1').onclick = functinon(){
					this 代指当前点击的标签
				}

       

posted @ 2017-06-16 22:27  自习室  阅读(44)  评论(0)    收藏  举报