信管117132岳颖云——实训第一天：学习总结和作业
一、学习总结
（1）css的基本内容
1、css样式分为
内联样式 写到元素内部的
<div style="width: 200px;">这是一个div</div>
内部样式 写到head里面的style标签
外部样式 独立的css文件；
margin: 外边距
padding:内边距
margin简写属性
2、基本操作
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:字体行高
（2）HTML的基本内容
1、基本框架（以下加粗字体）
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<meta charset="utf-8">
<title></title>
<!-- 样式 -->
<style type="text/css"></style>
</head>
<!-- 身体 -->
<body>
<iframe src="https://www.baidu.com"></iframe>
<select>
<optgroup label="广东省">
<option>湛江</option>
<option>佛山</option>
<option>惠州</option>
</optgroup>
</select>
<label>
用户名：
<input type="" name="">
</label>
<fieldset> <!-- 这是一个半包围边框 -->
<legend>这是标题</legend> <!-- 这是一个标题 -->
用户名：
<input type="" name="">
</fieldset>
<h1>这是h1标签</h1>
<h6>这是h6标签</h6>
<p>这是一个<span>这是一个span标签</span>段落标签</p><p>这是一个段落标签</p>
<span>这是一个span标签</span><span>这是一个span标签</span>
<ul>
<li>无</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ul>
<ol>
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ol>
<p>这是一个p标签
<!DOCTYPE html>
<html>
<head>
<title>这是我的html</title>
</head>
<body>
今天星期一
</body>
</html>
</p>
<pre>这是一个pre标签
<!DOCTYPE html>
<html>
<head>
<title>这是我的html</title>
</head>
<body>
今天星期一
</body>
</pre>
<!-- 块级 -->
<div style="width: 200px;height: 200px;">这是一个div</div>
<div style="width: 200px;height: 200px;">这是一个div</div>
<!-- 行内块级 -->
<img style="width: 200px;height: 200px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif">
<img style="width: 200px;height: 200px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif">
<span style="width: 200px;height: 200px;">这是行内元素</span>
<span style="width: 200px;height: 200px;">无法直接设置宽高</span>
<!-- 行为 -->
<script type="text/javascript"></script>
</body>
</html>
2、样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<!-- 内部样式 -->
<style type="text/css">
div{
height: 200px;
}
</style>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- 内联样式 -->
<div style="width: 400px;">这是一个div</div>
<img style="width: 200px;height: 200px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif">
<div class="box">
<div class="content" ></div>
</div>
<div class="r-box">
<a href="">固定定位</a>
</div>
</body>
</html>
3、实例操练
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
获取节点
</title>
</head>
<body>
<div class="box">
<h1 class="text">这是一个标题</h1>
<h2 class="text">这是一个标题</h2>
<h3 class="text">这是一个标题</h3>
<p id="p1">这是一个段落标签</p>
</div>
<script type="text/javascript">
window.onload = function(){
// 通过id获取元素
var p = document.getElementById('p1');
console.log(p);
// 通过类名获取元素
var h = document.getElementsByClassName('text');
console.log('h =>',h[2]);
var div = document.getElementsByTagName('div');
console.log(div);
var ele = document.querySelectorAll('*') //通过css选择器 返回所有匹配元素
for (var i=0 ; i <h.length ;i++) {
h[i].onclick = function(){
console.log(this);
}
}
}
</script>
</body>
</html>
4、重点
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值
1、代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取输入框的值</title>
<script type="text/javascript">
window.onload=function(){
var bt=document.getElementById("bt2");
var btt=document.getElementById("bt1");
bt.onclick=function(){
alert(bt1.value);
}
}
</script>
</head>
<body>
请输入内容<input type="text" id="bt1" />
<input type="button" id="bt2" value="获取输入数据" />
</body>
</html>
2、示意图：
（2）题目：点击某个元素，更改该元素的样式
1、代码实现：
2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>js控制按钮样式切换</title>
<link href="my.css" rel="stylesheet">
</head>
<script type="text/javascript">
//左边按钮的点击事件
window.onload = function(){
var arr = document.getElementsByTagName('button');
for(var i = 0;i<arr.length;i++){
arr[i].onclick = function(){
//this是当前**的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
var name = this.id;
var btn = document.getElementsByClassName('btn2');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=name){
btn[j].className = 'btn1';
}
}
}
}
}
}
</script>
<body>
<div id="main" style="margin:auto 0">
<!--四个按钮-->
<div style="margin-top:2em;" align="center">
<div style="width:20%"><button id = "1" type = "button" class = "btn2"> 按钮1</button></div>
<div style="width:20%"><button id = "2" type = "button" class = "btn1"> 按钮2</button></div>
<div style="width:20%"><button id = "3" type = "button" class = "btn1"> 按钮3</button></div>
<div style="width:20%"><button id = "4" type ="button" class = "btn1"> 按钮4</button></div>
</div>
</div>
</body>
</html>
my.css
.btn1{
border:none;
height:3.5em;
background-color:#000000;
color:white;
font-size:1.2em;
margin-top:0.5em;
width:100%;
border-radius:1em;
}
.btn2{
border:none;
height:3.5em;
background-color:#3E8CD0;
color:white;
font-size:1.2em;
margin-top:0.5em;
width:100%;
border-radius:0px;
}
2、示意图
（3）（4）题目：互换变量值（不生成新的变量），乘法口诀
1、代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个javascript</title>
</head>
<body>
<script type="text/javascript">
//文档加载完成
window.onload = function(){
console.log(a);
// 变量名提升
//不声明新的变量 最后 a = 2; b = 8
var a = 8;
var b = 2;
console.log("a原先的值为："+a+",b原先的值为："+b);
a=a^b;
b=a^b;
a=a^b;
console.log("不声明新的变量进行a与b的互换后,a现在的值为："+a+",b现在的值为："+b);
console.log("打印九九乘法表");
// 用console.log打印99乘法表
for(var i=1;i<=9;i++)
{
//在每一行生成9列(*)
var str='';
for(var j=1;j<=i;j++)
{
str += j + '*' + i + '=' + (i*j) + ' ';
}
console.log(str);
}
}
</script>
</body>
</html>
2、示意图：