一、HTML基础
1.1 form
功能：用于向服务器传输数据，实现用户与服务器的交互，
表单属性：
accept-charset：规定在被提交表单中使用的字符集
action：规定提交表单地址
autocomp lete：规定浏览器自动完成表单（默认开启）
encype：规定被提交数据的编码（默认：url-encoded）。如果是上传文件需要将enctype="multipart/form-data"
method：规定在提交表单时所用的HTTP方法（默认GET）
name：规定识别表单的名称
novalidate：规定浏览器不能验证表单
target：规定action属性中地址的目标
1.2 input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="">
<div>
用户名<input type="text" name="sex" value="123" hidden>
</div>
<div>
密码:<input type="password" name="pwd">
</div>
<div>
性别:<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女
</div>
<div>
爱好：<input type="checkbox" name="hobbies" value="basketball" checked>篮球
<input type="checkbox" name="hobbies" value="sing">唱
<input type="checkbox" name="hobbies" value="dance">跳
<input type="checkbox" name="hobbies" value="rap">说唱
</div>
<div>
头像：<input type="image" name="asdasf">
</div>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
input属性：
type：编辑输入属性
name：表单提交时的键
value：表单提交时对应的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio与checkbox默认被选中的项
readonly：text和password设置成只读
disabled：所有input都适用
type属性：
text：单行输入文本
password：密码输入框
date：日期输入框
checkbox：多选框
radio：单选框
submit：提交按钮
rest：重置按钮
button：普通按钮
hidden：隐藏输入框
file：文本框选择
1.3 select标签
<div>
<select name="city" id="city" multiple>
<option value="1" selected="selected">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disable：禁用
selected：默认选中
value：定义提交时的选项值
1.4 label标签
定义：该标签为input元素定义标注
说明：label元素不会向用户呈现任何特殊效果；label标签的for属性值应当与相关元素的id属性值相同。
<label for="username">用户名</label>
<input type="text" id="username" name="username">
1.5 text area多行文本
<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
二、CSS
2.1 CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
2.2 CSS的引入方式
行内样式：在标记的style属性中设定CSS样式，不适合大规模使用。
<p style="color":red>lalala</p>
内部样式：嵌入式是将CSS样式写在网页的head标签对中的style标签对中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{ background-color: aqua}
</style>
</head>
外部样式：将CSS写在单独文件夹中，使用时引入，推荐使用。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2.3 选择器
2.3.1 基本选择器：
元素选择器、ID选择器、类选择器。
id选择器：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
color: blue;
}
</style>
</head>
<body>
<div id="a">asadfdhfj</div>
<div>asfsgrythsfvherte</div>
</body>
类选择器：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p{
color:rebeccapurple;
}
.a{
font-size: 35px;
}
</style>
</head>
<body>
<div class="p a">
lalala
</div>
<div class="a">hahah</div>
</body>
2.3.2组合选择器
后代选择器、儿子选择器、毗邻选择器、弟弟选择器
后代选择器：(后代都被选择)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div div{
color:darkred;
}
</style>
</head>
<body>
<div id="b" class="c">lalala
<div>大儿子</div>
<div class="a">二儿子
<div>孙子</div>
</div>
</div>
</body>
儿子选择器：(只选儿子，属性需为不可继承属性)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a>div{
background-image: url("1.jpg");
}
</style>
</head>
<body>
<div class="a">爸爸
<div class="b">儿子
<div class="c">孙子
</div>
</div>
</div>
</body>
弟弟选择器：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span~.a{color: dodgerblue}
</style>
</head>
<body>
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h4 class="a">h4</h4>
</div>
<p class="a">lalala</p>
</body>
毗邻选择器：(选择相邻位置)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div+p{color:grey;}p
</style>
</head>
<body>
<div>lalala</div>
<p>hahahaa</p>
<p>nanana</p>
</body>
2.3.3 属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>div[name="123"]{color: darkturquoise;}</style>
</head>
<body>
<div name="123"> div</div>
<div name="455">我是div</div>
<div>没有属性的div</div>
</body>
2.3.4分组与嵌套
分组：
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p { color: red; }
嵌套：
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p { color: red; }
2.3.5 伪类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{color:yellow;} 未访问链接
a:hover{color:blue;} 鼠标移动到链接上
a:active{color:orangered;} 点击链接
</style>
</head>
<body>
<a href="味蕾选择器.html">lalala</a>
</body>
2.3.6 伪元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
p:first-letter
</script>
</head>
<body>
<p>lalala<span style="color: darkkhaki">hahaha</span>llueluelue</p>
</body>
除了first-letter，还可以用before、after。before和after多用于清除浮动。
2.3.7 选择器优先级
选择器优先级为：内联样式＞id选择器＞类选择器＞元素选择器。
important可以无视优先级强制样式生效，由于过多使用不利于文件维护，因此不推荐使用。
2.4 CSS属性
2.4.1宽高
width属性为元素设置宽度，height属性为元素设置高度。应注意的是只有块级元素才能设置高度，内联标签的宽度有内容长度决定。
2.4.2 字体属性
字体大小：{fort-size:}
字体粗细：{fort-weight}。设置字体粗细有很多方法，normal--标准粗细；bold--粗体；bolder--更粗；lighter--更细；100~900--设置具体粗细，400等同于normal，而700等同于bold；inherit--继承父元素字体的粗细值,默认值。
文本颜色：
颜色属性用来设置字体颜色，有几种表达方法：十六进制、RGB值、颜色名称、alpha指定色彩透明度。
2.4.3 文字属性
文字对齐：
{text-align:属性；}，left：左对齐(默认)；right：右对齐；center：居中对齐；justify：两端对齐。
文字装饰：
{text-decoration:属性；}，none：默认标准文本；underline：定义文本下的一条线；overline：定义文本上的一条线；line-through：定义穿过文本下的一条线；inherit：继承父元素的text-decoration属性的值。
段落缩进：
{text-indent:32px;}：缩进32像素。
文字间距：
{letter-spacing:5px;}：文字间距5像素
2.4.4 边框属性
{boeder-2px; border-style:solid; border-color:red;}：边框宽度2像素，样式为实现边框，红色。
可简写为{border:2px solid red;}
样式：none：无边框；dotted：点虚线边框；dashed：矩形虚线边框；solid：实现边框。