By

Contents
  1. 1. HTML
    1. 1.1. html表单
  2. 2. CSS
    1. 2.1. CSS基本语法
    2. 2.2. CSS文本设置：
    3. 2.3. CSS颜色表示法
    4. 2.4. CSS选择器
    5. 2.5. CSS盒模型
    6. 2.6. CSS盒形使用技巧
    7. 2.7. CSS盒形实际尺寸
    8. 2.8. 盒模型使用技巧
    9. 2.9. 盒模型外边距合并
    10. 2.10. 盒模型margin-top塌陷
    11. 2.11. CSS元素溢出
    12. 2.12. CSS盒子类型
  3. 3. JS
    1. 3.1. 获取元素方法一：

HTML

段落/换行/字符实体

1
2
3
4
5
6
7
8
<body></body>  -->  里面写内容
<h1-6>test</h>  -->  标题
<p></p>  -->  文本段落
&gt;  -->  >大于号
&lt;  -->  <小于号
<br />  -->  换行
&nbsp  -->  字符实体 空格
<!-- -->&&/**/  -->  注释



块/含样式的标签

1
2
3
4
5
<div></div>  -->  块
<em>  -->  行内元素，强调
<i>  -->  行内元素，专业词汇
<b>  -->  行内元素，表示文档中的关键字
<strong>  -->  行内元素，表示非常重要的内容



图片插入/链接

1
2
3
4
5
<img src="路径" alt="定义属性" />  -->  优先使用相对路径，而不是绝对路径
点击图片可以，跳转到网址，跳转网址写到图片的前面，如<a herf="xxx"><img src="xxx"></img></a>
target="_black"，弹出新界面，写在<a href="xxx">网址里面
ol>li*3再加一个tab   -->  新建有序列表
ul>(li>a{新闻})*3  -->  新建无序列表



列表标签

1
2
3
4
ol>li*3再加一个tab   -->  新建有序列表
ul>(li>a{新闻})*3  -->  新建无序列表
dd  -->  术语解释
dt  -->  属于题目



表格，传统布局table布局

1
2
3
4
5
6
7
8
9
10
<table>  -->  定义一个表格
border  -->  定义边框的数值
cellpadding  -->  单元格内容与边框的距离
cellspacing  -->  单元格与单元格之间的距离
<tr>  -->  行
<td>  -->  列
align  -->  单元格内容的水平对齐方式
valign -->  单元格内容的垂直对齐方式
colspan  -->  单元格水平合并
rowspan -->  单元格垂直合并

html表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form>  -->  定义一个表单
<label>  -->  定义文字标注
<input>  -->  定义通用的表单元素
type属性
type="text"  -->  单行文本输入框
type="password"  -->  密码输入框
type="radio"  -->  单选框
type="checkbox"  -->  复选框
type="file"  --> 上传文件
type="submit"  -->  提交按钮
type="reset"  -->  重置按钮
type="image"  -->  图片作为提交按钮，用src属性定义图片地址
type="hidden"  -->  隐藏的表单域，用来存储值
value  -->  表单元素的值，提交后会显示在浏览器地址栏
name  -->  表单元素的名称，此名称是提交数据时的键名，提交后会显示在浏览器地址栏
<textarea>  -->  多行文本输入框
<select>  -->  下拉表单元素
<option>  -->  与<select>标签配合，下拉表单元素中的选项
for  -->  不常用属性，比如输入用户名时，正常点击用户名是无法进入输入框的，用for就可以了


CSS

CSS基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
相对路径下css文件夹，css文件
[推荐使用]第一种外联式调用方式在<head>里面，用<link xxx href="css/xxx.css">
定义一个块的样式：
div{
	font-size: 16px;  -->  字体大小
    color: red;  -->  颜色
}
第二种内嵌式调用方式在<style>里面使用，用class定义.xxx
定义一个块：
<div class="box">xxx</div>
第三种插入式调用方式在行内元素里面使用，用style定义元素属性
定义一个链接：
<a href="https://www.baidu.com" style"font-size:20px;color:yellow">百度</a>


CSS文本设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;  行高示例图片
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉，加上下划线就是underline
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中


CSS颜色表示法

1
2
3
4
5
颜色名直接表示，如red是红色,yellow是黄色
rgb表示，如rgb(255,0,0)表示红色
16进制数表示，如#ff0000 表示红色，这种可以简写成 #f00

CSS选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
一、标签选择器，应用在层级选择器中
就是直接定义一种标签
在<head>的<style>中使用
div{
	font-size:25px;
    xxx;
}
<body>
	<div>xxx</div>	使用同一文字大小25px
    <div>XXXX</div>	使用同一文字大小25px
</body>
二、id选择器，一般给程序使用，所以不推荐用
在<head>的<style>中使用
#box{
	font-size:25px;
    xxx;
}
<body>
	<div id="box">xxx</div>	使用上面定义的文字大小25px
</body>
三、类选择器，通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器
快速输出带class的div块  -->  .box01 + tab
在<head>的<style>中使用
.box01,.box02{	/*同时用到了组选择器，给两个组同时定义*/
	color: red;
}
.box01{
	font-size:25px;
    xxx;
}
.box02{
	font-size:20px;
    xxx;
}
<body>
	<div class="box01">xxx</div>	使用上面定义的红色，文字大小25px
    <div class="box02">XXXX</div>	使用上面定义的红色，文字大小20px
</body>
四、选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突
就相当于在div块里面，用来span，给span定义值
.box span{
	color:red
}
.box .red{
	color:pink
}
.red{
	color:red
}
<div class="box"><span>....</span><a href="#" class="red">....</a>
</div>
五、组选择器，详情见三选择器
六、伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容
就是鼠标经过一个链接时，链接改变形式
.link{
	font-size: 23px;
	color: yellow;
}
.link:hover{
	color: blue;
	font-weight: bold;
	font-style: italic;
}
<a href="http://www.baidu.com" class="link">百度</a>


CSS盒模型

1
2
3
4
5
6
7
最外层是盒子距离浏览器的数值，margin
中间是盒子壳的数值，border
border: 10px double #000;
里面是div距离盒子壳的数值，padding
padding和margin只设置一次或者几次的顺序
上右下左/上，左右，下/上下，左右

border是soild

margin是auto

CSS盒形使用技巧

1
margin: 20px auto 50px;  -->  auto默认水平居中，margin只能用水平居中，垂直居中不适用


CSS盒形实际尺寸

1
2
3
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下


盒模型使用技巧

1
2
3
4
5
6
7
设置元素水平居中： margin:x auto;
margin负值让元素位移及边框合并：margin: -1px;
text-align: center;		/*直接字体水平居中*/
line-height: 30px;		/*字高等于行高，能垂直居中*/


盒模型外边距合并

当两个垂直外边距相遇时，形成一个外边距，合并后的外边距的高度等于两个外边距中的较大值，比如50px和30px，取50px的那个

    1. 使用这种特性
    1. 设置一边的外边距，一般设置margin-top
    1. 将元素浮动或者定位

盒模型margin-top塌陷

  1. 外部盒子设置一个边框

    1
    2
    3
    4
    5
    6
    .box01{
    	width: 300px;
    	height: 300px;
    	background-color: gold;
    	border: 1px solid #000;		/*第一种用边框解决margin-top塌陷的方式*/
    }

  2. 外部盒子设置 overflow:hidden

    1
    2
    3
    4
    5
    6
    .box01{
    	width: 300px;
    	height: 300px;
    	background-color: gold;
    	overflow:hidden;		/*第二种用元素溢出解决margin-top塌陷的方式*/
    }

  3. 使用伪元素类：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix:before{
    	content: '';
    	display:table;
    }
    <body>
    	<div class="box clearfix">
    		<div class="box02">xxx</div>
    	</div>
    </body>


CSS元素溢出

overflow属性，上面的解决盒模型margin-top塌陷，第二种方式用来元素溢出的方法overflow

  1. visible 缺省值，溢出的元素可见
  2. hidden 将溢出的元素裁剪隐藏
  3. scroll 显示滚动条，不管是否溢出
  4. auto 溢出的时候产生滚动条，不溢出的时候不显示


CSS盒子类型

  1. 块元素
    div、p、ul、li、l1~l6、dl、dt、dd
    如果没有设置宽度，默认的宽度为父级宽度100%
  2. 内联元素
    行内元素，a/span/em/b/strong/i
    1.不支持宽/高/margin上下/padding上下
    2.宽高内容决定
    3.代码换行，盒子之间会产生间隙
    解决内联元素间隙的方法
1.去掉内联元素之间的换行
2.把内联元素的父级设置font-size为0px，内联元素自身再设置font-size为16px
    4.子元素是内联元素，父元素可以用text-align属性设置子元素的水平对齐方式

1
2
.con:hover .box2{
}

JS

获取元素方法一：

1. 把script放到div下面，不推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
	<meta charset="UTF-8">
	<title>获取页面元素</title>
</head>
<body>
	<div id="div1">这是一个30px的red_div标签</div>
    <script type="text/javascript">
		var oDiv = document.getElementById('div1')
		oDiv.style.color = "red";
		oDiv.style.fontSize = "30px"
	</script>
</body>



2. 在script中写入window.onload = function(){}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<meta charset="UTF-8">
	<title>获取页面元素</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1')
			oDiv.style.color = "red";
			oDiv.style.fontSize = "30px"
		}
	</script>
</head>
<body>
	<div id="div1">这是一个30px的red_div标签</div>
</body>