简易学习了HTML的语句
例如:
span 是一个没有任何样式的段落标签
pre 是一个有带格式的p标签,可以保留缩进、换行(用于展示代码)
div是没有任何样式的块级元素 用来包裹内容和分割内容
<iframe> 这是一个框架元素,用来显示其他内容
label 本身不会有任何的视觉效果,但是优化了鼠标用户的用户体验
熟悉CSS的用法
例如:
css选择器有5种
.class 类名选择器
#id id选择器
tagName 元素名选择器
* 通配符选择器
html,body,.box 分组选择器
css样式分为
内联样式 写到元素内部的
<div style=”width: 200px;”>这是一个div</div>
内部样式 写到head里面的style标签
外部样式 独立的css文件;
margin: 外边距
padding:内边距
margin简写属性
margin:0;
上下左右全部为0;
margin:10px 20px;
上下为10 左右为20
margin:10px 20px 30px
上为10px 左右为20px 下为30px
margin:10px 20px 30px 40px;
上 右 下 左
/*圆角属性*/
border-radius: 5px;
/*浮动属性*/
float:right;
float:left;
/*相对定位*/
position: relative;
相对于自身的静态位置定位
left 相对于原先的静态位置的left走,偏移了多少距离
right
top
bottom
字体左右居中
text-align: center;
行高等于高度时,字体上下居中
line-height:字体行高
学习了部分JavaScripts
例如:<script type=”text/javascript”>
window.οnlοad=function()
console.log();
题目1:交换ab(在不引入第三个变量时)
解:利用数学公式的+-*/;
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>swap</title>
</head>
<body>
<script type=”text/javascript”>
window.οnlοad=function(){
var a=2;
var b=8;
console.log(‘a=’,a,’b=’,b)
console.log(‘交换之后’)
document.write(‘a=’,a,'</br>’,’b=’,b,'</br>’,’交换之后’,'</br>’);
a=a*b;
b=a/b;
a=a/b;
console.log(‘a=’,a,’b=’,b)
document.write(‘a=’,a,'</br>’,’b=’,b);
}
</script>
</body>
</html>
题目2:打印9*9乘法口诀表
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>99乘法表</title>
</head>
<body>
<script type=”text/javascript”>
window.οnlοad=function(){
document.write(‘乘法口诀表’+'</br>’);
for (var i = 1; i < 10; i++) {
for (var j = 1 ;j<=i ;j++ ) {
console.log(‘%d * %d = %d’, i, j, i*j);
document.write(j,’*’,i,’=’,i*j,’ ‘);
}
document.write(‘</br>’);
}
}
</script>
</body>
</html>