web基础2

Posted alen-z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web基础2相关的知识,希望对你有一定的参考价值。

html
标签 属性
<!-- aaa -->
标签分类
自闭合标签
<meta charset="UTF-8"/>
<link>
主动闭合
<title>$Title$</title>

各种符号
&nbsp;&gt;&lt;
www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

20标签
html
head
body
p 段落,每个标签之间有空行
br 换行,没有间距
h1-h6 标题
span 行内标签,白板,
div 块级标签,白板, id, style=‘height:600px;‘
input type=text/password/button/submit value=登陆 name=‘xxx‘/‘query‘自闭合 行内标签
from action=‘url‘ method=‘GET/POST‘
input type=‘radio‘ name=‘name一样互斥‘ value=‘xx‘ checked=‘checked‘
input type=‘checkbox‘ name=‘name相同,key相同发送时在一起‘, value=‘xx‘, checked=‘checked‘
input type=‘file‘ name=‘filename‘
from enctype=‘multipart/form-data‘
input type="reset" value=‘重置‘
textarea name=‘xx‘ 非自闭合,默认值写中间
select name=‘classify‘ size=10(默认为1) multiple=‘multiple‘
option value=‘xxx‘ selected=‘selected‘ xxx /option
optgroup label=‘xxxx‘

a a标签,href=‘url‘ target=‘_blank 跳转 行内标签
锚,href=‘#id3

img src=‘path/*.jpg‘ style=‘height:200px;width:200px;‘ alt=‘xxx‘ title=‘girl‘

ul 符号
li xxx /li
li xxx /li
/ul

ol 序号
li xxx /li
li xxx /li
/ol


dl 分层
dt xxx /dt 标题
dd xxx /dd 内容
/dl
table 表格 border = 1 边框
thead/ 表头/
tr 行
th 列 /th
tbody/ 表内容/
tr 行
td 列 /td colspan=‘2‘ rowspan=‘2‘

label 用户名 /label for=‘username‘与input标签id=username关联
fieldset
legend 登陆 /legend
/fieldset
CSS
颜色 RGB
位置

style=‘backgroud-color:#2459a2;‘
style=‘height:48px;‘
style=‘width:48px;‘
style=‘‘
style=‘‘
style=‘‘
style=‘‘

CSS样式 / CSS文件
-id选择器
-class选择器
-div标签选择器
-关联选择器/层级选择器
-组合选择器
-属性选择器
link rel=‘stylesheet‘ href=‘commons.css‘
注释
/* */
边框
border=‘1‘ solid:red dotted red
border-top-color
border-top-style
border-top-width
border-right-color/style/width
border-bottom-color/style/width
border-left-color/style/width
背景色
background-color
float
float:left
div style=‘clear: both;‘
display 行内标签转换, 行内标签无法设置 高度/宽度/边距margin
display:inline/block
display:inline-block
display:none 标签消失
padding margin(0,auto) 内边距 外边距
body margin:0 auto
margin-top:1px 外边到top的距离
padding-top:1px 内部到top的距离
text-align
text-align:center 内容水平居中
vertical-align:middle 上下居中

height,width,line-height,color,font-size,font-weight
line-height:48px 上下左右范围内水平居中,垂直方向
font-weight: bold 加粗
font-size:48px 字体大小
color: 字体颜色

自适应
定义小于xx px , 使用其他样式
media

页面变形
外层div限制像素宽度,内层定义百分比
小于像素宽度,会出现滚动条

position
<div style=‘width:50px;height:50px;position:fixed;right:0px;top:1px;bottom:1px;‘></div>
absolute 绝对位置,不能随网页移动,一般和relative一起使用时,相对于父类标签的固定位置
<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0;left:0;‘></div>
</div>

opacity:0.5 透明度(0-1)
z-index:10 分层次优先级
<div style=‘z-index:10;position:fixed;top:50%;bottom:50%;left:50%;right:50%;margin-left:-200px;margin-top:-200px;‘>

overflow 图片超过div隐藏或滚动条
<div style=‘height:200px;width:300px;overflow:auto/hidden‘>
<img src=‘1.jpg‘>
</div>

hover 当鼠标移动到标签上时生效
background-color:blue

background
background-image:url(‘image/4.jpg‘);如果div大于图片,默认图片重复置放
background-repeat:no-repeat/repeat-x/repeat-y 不堆叠/横向/纵向
background-position-x/y:10px;




请求头/请求体
get方法,打包成一个字典提交submit
数据拼接到URL中发送
post方法
数据放到内容发送

javascript基本语法
IE是JS的解释器,代码存在于HTML中
执行顺序先执行head,后执行body的JS
//
/* */
<script src=‘commons.js‘> #链接外部文件
<script type=‘text/javascript‘>
function func(){
func..
}
alert(123)
</script>

www.cnblogs.com/wupeiqi/articles/5602773.html
变量
全局变量 name = ‘xx‘
局部变量 var name = ‘xx‘

基本数据类型
数字
age = 18;
parseInt(string)
parseFloat(string)
字符串
x.charAt() #根据索引取值
x.substring(1,4) 1-3字符
x.length 总长度
x.trim()
x.concat(y) # 拼接
x.indexof(‘le‘) #返回
x.slice(start,end) 切片
x.toLowerCase()
x.toUpperCase()
x.split()
x.search(regexp)
x.match(regexp)
x.replace(regexp,replacement)

setInterval("",2000); 每2秒执行‘‘内容 定时器
console.log(xx)
tag = document.getElementById("i1") # id值
content = tag.innerText
f = content.charAt(0)
l = content.substring(1,content.length)
new_content = l + f
tag.innerText = new_content

布尔boolean
true/false

数组
a=[11,22,33]
length
push(xx) #尾部追加
pop() #尾部获取一个
unshift(xx) # 头部插入
shift(xx) # 头部移除
splice(start,deleteCount,value,...) 起始位置,删除个数,插入的值
slice() #切片
reverse() #反转
join(sep) #
concat(val,...)
sort()

字典(对象类型)
a ={‘k1‘:‘v1‘,"k2":"v2"}

for循环
1,循环索引
a=[11,22,33] / 字典
for(var item in a){
console.log(a[item])
}
2,
for(var i=0;i<10;i++){
...
break;
continue;
}

3, while (codition){
...
}



条件 == != === #值和类型都相等 !== #严格比较 && ||
if(){
....
}
else if(){

}
else{

}

switch(name){
case: ‘1‘:
console.log(123);
break;
case: ‘2‘:
console.log(456);
break;
...
default:
console,log(999);
}

函数:
function func(arg){
return arg+1
}

匿名函数:
setInterval(function(){
console.log(123)
},5000)

自执行函数:
(function(arg){
console.log(arg)
}(1)

序列化:
JSON.stringify(list1)
JSON.parse(string1)

转义:cookies 服务端发来的字符串,确认之前的登陆状态
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

eval:
val = eval(表达式‘1+1‘)
exec(执行代码,解释代码if,for,...)
eval = eval + exec

时间
Date类
var d = new Date() 时间对象
d 为当前时间
d.get...()
n = d.getMinutes() + 4
d.setMinutes(n)

作用域:
JS默认以函数作为作用域
函数的作用域,在函数未调用前,就已经创建
函数的作用域存在作用域链,并且也在作用域之前创建
xo = ‘alex‘
function func(){
var xo = ‘eric‘
function inner(){
var xo = ‘tony‘
console.log(xo)
}
inner()
}


xo = ‘alex‘
function func(){
var xo = ‘eric‘
function inner(){

console.log(xo)
}
return inner
}

var ret = func()
ret()


xo = ‘alex‘
function func(){
var xo = ‘eric‘
function inner(){

console.log(xo)
}
var xo = ‘tony‘;
return inner
}

var ret = func()
ret()

JS函数内部局部变量提前声明
function func(){
console.log(xxoo)
var xxoo = ‘alex‘
}
func() # 输出undefined


面向对象:
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
# Foo的原型
Foo:prototype = {
‘sayName‘: function(){
console.log(this.name)
}
}

var obj = new foo(‘we‘);
obj.name
obj.sayName()

this代指对象(python self)
创建对象时用new关键字 函数()




DOM
HTML的文档对象
document.getElementById() # 当个元素
document.getElementsByTagName() # 通过标签,数组多个元素
document.getElementsByClassName() # 通过class属性
document.getElementsByName() # 通过name属性
间接查找
tag = document.getElementById()
tag.parentElement # 父标签
tag.children # 所有子标签
tag.firstElementChild # 第一个子标签
tag.lastElementChild #最后一个子标签
tag.nextElementSibling # 下一个兄弟标签
tag.previousElementSibling # 上一个兄弟标签

标签.innerText / = # 获取(只获取文本)/修改
obj innerText = <a href=‘#‘>百度</a> 已字符串的形式修改
标签.innerHTML 获取的是全部内容
obj innerHTML = <a href=‘#‘>百度</a>
标签.value
input/select/textarea标签生效, 获取选中的value值
标签.selectIndex
select标签的索引操作
样式操作:
tag.className = ‘c1‘ #tag标签的className = ‘c1‘
tag.classList # 返回class列表
tag.classList.add() # 添加class指定样式
tag.classList.remove() # 删除class指定样式
修改当个样式
tag.style.fontSize = ‘16px‘;


tag = document.getElementById("test")//checkbox.checked
tag.checked = true/false

<div onclick="func();">点我</div>
<script>
function func(){
....
}
</script>


属性操作
obj.setAttribute(‘xxx‘,‘alex‘)
obj.removeAttribute(‘xxx‘)
obj.attributes

创建标签到HTML中
<input type=‘button‘ onclick=‘AddEle():‘ value="+"/>
<input type=‘button‘ onclick=‘AddEle2():‘ value="+"/>
<div id=‘i1>
<input type=‘text‘ />
</div>
<script>
function AddEle(){
//创建标签
//将标签添加到i1里面
var tag = ‘<p><input type=‘text‘ /></p>
//注意:第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
document.getElementById(‘i1‘).insertAdjacentHTML("beforeEnd",tag);
}
</script>
<script> # 第二种方式
function AddEle2(){

var tag = document.createElement(‘input‘);
tag.setAttribute(‘type‘,‘text‘);
tag.style.fontSize =‘16px‘;
tag.style.color = ‘red‘;
document.getElementById(‘i1‘).appendChild(tag);
}
</script>

提交表单
<form id=‘f1‘ action="http://www.oldboyedu.com">
<input type=‘text‘ />
<input type=‘submit‘ value=‘提交‘ />
<a onclick="submitForm():">提交吧</a> # 任何标签都可以通过DOM提交表单
</form>
<script>
function submitForm(){
document.getElementById(‘f1‘).submit()
}

其他
console.log 输出
alert 弹窗
confirm 确认返回true , 取消返回false
location.href # 获取当前url , 也可以赋值
location.reload()

obj = setInterval(func(),5000ms) # 定时器
clearInterval(obj);

setTimeout(function() {
console.log(‘timeout‘)
},5000) #定时器只执行一次,显示log5秒

clearTimeout(obj)


事件
onclick
onblur
onfocus

行为 样式 结构 分离?

onmouseover=‘t1(0) # 鼠标移入
onmouseout=‘t2(0)‘‘ # 鼠标移出

<script>
var myTrs = doucument.getElementByTagName(‘tr‘);
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = ‘red‘;
}

myTrs[i].onmouseout = function(){
this.style.backgroundColor = ‘‘;
}
}

function t1(n){
var mtTrs = document.getElementsByTagName(‘tr‘)[n];
mtTrs.style.backgroundColor = ‘red‘;
}

function t2(n){
var mtTrs = document.getElementsByTagName(‘tr‘)[n];
mtTrs.style.backgroundColor = ‘‘;
}
</script>













































































































































































































































































































































































































































































































































以上是关于web基础2的主要内容,如果未能解决你的问题,请参考以下文章

JAVA WEB代码片段

Java Web学习总结JSP

代码片段 - Golang 实现简单的 Web 服务器

高效Web开发的10个jQuery代码片段

高效Web开发的10个jQuery代码片段

web前端开发JQuery常用实例代码片段(50个)