201711671206 高颖 信管1172
笔记:
html 超文本标记语言
新建一个文件夹,直接把文件夹拉入到sublime text3
在sublime里面 右键-新建文件
给新文件命名,带html文件后缀,ctrl+s 保存文件
在创建的新html文件中 输入 html 按tab键可以补齐代码
html文档的结构
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<meta charset="utf-8">
<title></title>
<!-- 样式 -->
<style type="text/css"></style>
</head>
<!-- 身体 -->
<body>
<!-- 行为 -->
<script type="text/javascript"></script>
</body>
</html>
——————————————————————————————————————————————————————
1.通过js获取输入框中的vlaue值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取输入框的值</title>
<script type="text/javascript">
window.οnlοad=function(){
var bt=document.getElementById("bt2");
var btt=document.getElementById("bt1");
bt.οnclick=function(){
alert(bt1.value);
}
}
</script>
</head>
<body>
请输入内容<input type="text" id="bt1" /><br>
<input type="button" id="bt2" value="获取输入数据" />
</body>
</html>
2.点击某个元素,更改该元素的样式
day1question2.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现点击按钮变换背景颜色</title>
<script type="text/javascript">function aa(){document.bgColor="Orange";}function change(c){document.bgColor=c;}
</script>
</head>
<body οnlοad="aa()">
<input type="button" value="橙色" οnclick="change('Orange')"/>
<input type="button" value="粉色" οnclick="change('pink')"/>
<input type="button" value="绿色" οnclick="change('green')"/>
<br />
<br/>
</body>
</html>
3.互换变量值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不引入第三个变量来对换值</title>
</head>
<body>
<script type="text/javascript">
//文档加载完成
window.onload = function(){
var a = 8;
var b = 2;
console.log("a的值为",a);
console.log("b的值为",b);
a=a+b;
b=a-b;
a=a-b;
console.log("a,b互换后:");
console.log("a的值为",a);
console.log("b的值为",b);
}
</script>
</body>
</html>
4.乘法口诀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var i , j;
for(i = 1;i <= 9;i ++){
document.write("<br>"); // i 为行的乘数,j 为列数 每一行打印完后换行
for(j = 1;j <= i;j ++){
sum = i * j;
document.write(i+"×"+j+"="+sum+" "+" ");
}
}
</script>
</body>
</html>