前端知识——HTML、CSS
一、HTML
<!DOCTYPE html>文档类型， 确定使用什么规则来解析，这样浏览器才能知道你使用的类型
head
meta charset=utf-8 告诉浏览器编码是什么
</>自闭合标签，一般会在后面加上一个斜杠
title 只有这个是用户可以看到的
<title name="wzc"></title>主动闭合，只要在标签里面写上XXX=XXX就是标签的属性
刷新和跳转
<meta http-equiv="REFRESH" Content="1"/> 每一秒刷新一次
<meta http-equiv="REFRESH" content="3; Url=http://www.baidu.com"/> 3秒钟以后跳转到百度
IE兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Link
icon浏览器标签的小图片
<link rel="wzc icon" href="www.png">
块级标签：div标签、h1、p等，占一整行
内联标签（行内标签）：span标签、a标签、select等，自己有多大就占多大
body，用户能看到的所有内容
HTML里面特殊的符号是需要使用特殊的代码的
p标签——段落
br标签——换行，并且是自闭合标签
a标签——href跳转，a标签特有的 。target="_blank"另打开一个新窗口进行跳转。锚——在a标签里面创建href="#l1" ,在后面的div里面使用id="l1" 。#的功能是寻找页面中id=l1的标签，将其标签放置在页面顶部，而且需要注意一点，id在整个页面里面是不可以重复的
<a href="#l1">第一章</a>
<a href="#l2">第二章</a>
<a href="#l3">第三章</a>
<div id="l1" style="height: 500px">第一章内容</div>
<div id="l2" style="height: 500px">第二章内容</div>
<div id="l3" style="height: 500px">第三章内容</div>
H标签——其实就是标题，对应的就是标题的大小，而且H标签只有6个，1-6是一个递减的过程
<h1>a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>
<h6>a</h6>
<h6 style="font-size: 65px;">a</h6>
input系列标签：
text——输入框
password——加密输入框
radio——选择按钮，默认不互斥，需要使用name=相同名字来进行互斥
checkbox——多选按钮
file——上传文件，并且如果要是上传文件的话，需要在form里面添加属性：enctype="multipart/form-data"
button——按钮
subimit——提交当前表单
reset——充值表单
testarea——可以实现多行文本操作，备注功能
select标签：下拉框，option就是具体的下拉内容，多个select就可以实现多级下拉框。multiple可以支持多选，而且可以显示多个，加上size可以设置默认能看到几个。optgroup label="aaa"标题分类作用。
form——要提交的内容放置的form标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://1.1.1.1:8000/index/" method="post">
<p>用户名<input type="text" name="wzc" /></p>
<p>密码<input type="password" name="pwd" /></p>
<input type="submit" value="提交">
<textarea name="www"></textarea>
</form>
</body>
</html>
这个直接把数据提交到1.1.1.1:8000
label标签——通过显示的内容和某个功能结合起来
ul标签——无序编号
ol标签——有序编号
dl标签——标题，dt——内容
table标签——里面用到了tr、th、thead
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<table></table>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">11</th><!--左右合并-->
<!--<th>22</th>-->
<th>33</th>
</tr>
<tr>
<td>dd</td>
<td>ss</td>
<td>aa</td>
</tr>
<tr>
<td>dd</td>
<td colspan="2" rowspan="2">ss</td><!--左右合并,上下合并-->
<!--<td>aa</td>-->
</tr>
<tr>
<td>dd</td>
<!--<td>ss</td>-->
<!--<td>aa</td>-->
</tr>
</table>
<hr/>
<table>
<thead>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
</thead>
<tbody>
<tr>
<td>dd</td>
<td>ss</td>
<td>aa</td>
</tr>
<tr>
<td>dd</td>
<td>ss</td>
<td>aa</td>
</tr>
<tr>
<td>dd</td>
<td>ss</td>
<td>aa</td>
</tbody>
</table>
</body>
</html>
两种使用table标签的方式
iframe标签
fieldset标签
二、CSS
1、存放位置：
单独css文件 底
html头部
标签属性 高
2、效果
coloer:red;
display:none——隐藏起来
inline——行内标签
block——块级标签
inline-block——行内标签，但是有块级标签属性
边距
margin：外边距（本身不增加）
padding：内边距（本身增加）
漂浮： float:left
position:
relative
absolute -- 固定窗口，滚动移动
fixed -- 固定，窗口
fixed
absolute
relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="common.css" />-->
<style>
/*标签选择器，找到所有的标签应用以下样式*/
div{
color: green;
}
/*id选择器，找到标签id等于i1的标签，应用以下样式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class选择器，找到class=c1的所有标签，应用一下样式*/
.c1{
background-color: red;
}
/*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">1</div>
<div class="c5">1</div>
<div class="c6">1</div>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">sdfsdf</div>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="i1">baidu</a>
<div>99</div>
<div>99</div>
<div>99</div>
<div>
<div>asdf</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
background-image: url("1.jpg");
height: 50px;
width: 50px;
background-position: 202px -564px;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height: 500px;border: 1px solid greenyellow">
<div style="width: 20%;background-color: crimson;float: left;">ffff</div>
<div style="width: 30%;background-color: blueviolet;float: left;">a</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 500px;width: 400px;border: 1px solid royalblue;position: relative">
<div style="height: 100px;background-color: aqua;position: relative">
<div style="position: absolute;bottom: 0;right: 0">
111
</div>
</div>
<div style="position: absolute;bottom: 0;right: 0">
222
</div>
</div>
<div style="position: absolute;bottom: 0;right: 0">
333
</div>
</body>
</html>
