（一）主要内容
1、关于html的一些重点
html 超文本标记语言
新建一个文件夹，直接把文件夹拉入到sublime text3
在sublime里面 右键-新建文件
给新文件命名，带html文件后缀，ctrl+s保存文件
在新建的html文件中输入html 按tab键
html文档的结构
html是一个标记语言
开标签+闭标签
块级元素：可以直接设置宽高、默认占一整行
行内块元素：可以直接设置宽高、但是不占一整行
行内元素：不可以直接设置宽高、也不占一整行
div是没有任何样式的块级元素 用来包裹内容和分割内容
iframe是一个框架元素，用来显示其他内容
label本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验
caa选择器有5种
.class 类名
#id id
tagName 元素明白
* 通配符选择器
html，body，.box 分组选择器
js 事件语法
ele.action()=
function(){
}
2、关于css的重点内容
css样式分为
内部样式 写到head里的style标签
内联样式 写到元素内部的
<div style=“width：
200px；“>这是一个div</div>
外部样式 独立的css文件
margin 外边距
margin简写属性
margin：0；
上下左右全部为0
免人工：10px 20px；
上下10 左右20
margin：10px 20px 30px；
上10px 左右20px 下30px
margin：10px 20px 30px 40px；
上 右 下 左
/*圆角属性*/
border-radius：5px；
/*浮动属性*/
float：left
float：right
/*相对定位*/
position：relative
相对于自身的静态位置进行定位
left 相对于原先的静态位置的left走，偏移了多少距离
right
top
bottom
字体左右居中
text-align：center；
行高等于高度时，字体会上下居中
line-height 行高
3、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、html页面常用charset=utf-8
2、html文档文件格式：头部（head）、样式（style）、身体（body）、行为、脚本
3、html标签有很多，例如标题标签〈h1〉-〈h6〉，h1字很大，h6字很小
4、〈p〉是段落标签，会换行。但它展示计算机代码时无缩进、换行。
5、〈span〉用来写文本，用来包裹或分隔文本内容，无换行符，不会换行。是一个很纯洁、没有任何样式的段落标签，基本没有效果，但是可以用它搭配很多东西。
6、〈pre〉是一个有带格式的p标签。一般用于展示计算机代码，可以保留缩进、换行。
7、<是小于号，>是大于号。
8、〈i〉是斜体，〈b〉〈strong〉均为加粗。
9、html是一个标记语言，（单/双）标签（都）需要符合开闭原则：
双 开标签+闭标签〈body〉 〈/body〉 〈div〉〈/div〉
单〈br/〉
10、块级元素：默认占一整行，并且有换行符，可以设置宽高。
行内块元素：例如img标签，用来存放图片（本地或网上的图片）。没有占一整行，可以设置宽高（例如width:200px;height:200px）。
行内元素：可以直接堆在行内块元素后面，不能直接设置宽高，不会占一整行。只能嵌套它自身，不能嵌套行内块元素、块级元素。
11、<div>是用得最多的标签
12、iframe可以嵌套网络页面
13、〈a〉用来链接、跳转页面或下载东西
14、〈select〉〈option〉搭配，用来做下拉框
〈optgroup〉和下拉框配合使用，标题
15、input 输入信息
label能优化输入效果（鼠标点进哪里，都能获取输入框的焦点）
16、〈textarea〉多行文本输入框
〈button〉按钮
〈legend〉半包围框，标题。现在很少用
17、〈ul〉〈li〉无序列表，没有序号，只有小圆点
〈ol〉〈li〉有序列表，会有数字序号margin 外边距
18、margin-top 顶部外边距
margin-left 左部外边距
19、fdf 十六进制的颜色代码 紫色
6f6 绿色
20、href有引入作用，链接外部样式、图片
21、padding 内边距
border-radius 圆角属性
float：left浮动属性
22、position：relative 相对定位
position：absolute 绝对定位
是重要元素，用得比较多
top 从上往下
left 从左往右
固定定位一般用来做广告、导航条
23、console.log 打印日志
alert 打印警告
24、script 脚本可以用来调试程序
25、非变量的内容要用单引号引起来
（三）作业
1、通过js获取输入框中的value值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取输入框中的value值</title>
<style type="text/css"></style>
<script language="javascript">
function load() {
var input = document.getElementById("txbInfo").value;
window.alert ("您输入的用户名是："+ input);
}
</script>
</head>
<body>
<label>
<form name="myform">
用户名：
<form id="form1" runat ="server">
<input type ="text" id="txbInfo" name="txbInfo" style="width:80px;" />
<input type ="button" id="btnGet" name="btnGet" value="获取" style="width:50px;" οnclick="load()" />
</form>
<script type="text/javascript"></script>
</body>
</html>
输入用户名，点击获取：
2、点击某个元素，更改该元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1" οnclick="btn(1)">按钮1</button>
<button id="btn2" οnclick="btn(2)">按钮2</button>
<script>
flag = "btn1";
function btn1(){
document.getElementById("btn2").style.color = "black";
document.getElementById("btn1").style.color = "red";
}
function btn2(){
document.getElementById("btn2").style.color = "black";
document.getElementById("btn1").style.color = "red";
}
function btn(num){
if(num == 1){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn1").style.color = "red";
document.getElementById("btn1").style.backgroundColor = "pink";
flag = "btn1";
}
if(num == 2){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn2").style.color = "pink";
document.getElementById("btn2").style.backgroundColor = "red";
flag = "btn2";
}
}
</script>
</body>
</html>
这是点击两个按钮前的效果：
点击按钮1的效果如下：
点击按钮2的效果如下：
3、互换变量值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var num1 = 10;
var num2 = 20;
var temp = num1;
num1 = num2;
num2 = temp;
console.log(num1);
console.log(num2);
</script>
</head>
</html>
查看控制台的变量值：
4、打印九九乘法表
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title></title>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<script type="text/javascript" >
document.write("<table>");
for(var i=1;i<10;i++)
{
document.write("<tr>");
for(var j=1;j<=i;j++)
{
document.write("<td>"+i+"*"+j+"="+i*j+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
