一，表单
1，表单标签
<form> : 表单的最外层容器
<input> : 标签用于收集用户容器，根据不同的Type属性值，展示不同的控件，如输入框，密码框，复选框
action ： 用户输入的信息的提交地址
<input type=“” >决定了当前是什么控件。（单标签）
text : 文本输入框
password : 密码输入框
checkbox ： 复选框
radio ： 单选框 （在radio单选框中加入 name=" " 属性可以让单选框成为一组.）
submit ： 提交控件
reset ： 重置控件
button : 按钮控件
file ： 上传控件
textarea ： 多行文本框（双标签）
select，option（双标签） ： 下拉菜单控件
控件属性
selected ：select下拉菜单控件中默认选中有selected属性的option控件。
disabled ： 禁止操作（select input）
checked ： 选中操作 （input）
size ： 显示下拉个数
multiple ： 多选操作 （select input上传多个文件）
placeholder ： 输入框的提示信息
辅助表单lable ：提高用户体验，让选中范围变大
1 <input type="checkbox" name="submit" id="a"><label for="a">啊啊</label>
2 <label ><input type="checkbox" name="submit" id="">安安</label>
注 ： 表单嵌套没有必要的嵌套规则，比较随意。
2，HTML中的属性：
假如属性与属性值为同一个值的话可以简写。
例 selected="selected" 可以简写为selected
二，CSS基础
1，div和span?
span : 修饰文字
样式写到html标签身上的。
通过style属性添加的
区别：内联只针对当前标签，不能对样式进行复用。
建议：尽量不要写内联样式，推荐内部、外部两种写法。
2. 内部样式
<style>
...CSS
</style>
3. 外部样式
有一个单独的文件： xxx.css yyy.css
<link>定义是引入外部资源，标签引入样式文件
href属性：样式的地址
rel属性：确定文档（HTML）跟要引入的资源关系
区别：跟内部样式的，外部样式可以在多个页面之间复用CSS。
@import url('地址');
区别：https://www.cnblogs.com/my--sunshine/p/6872224.html
red、yellow、green、blue、white、black ... hotpink
0 1 10 11 100 101 110 111 ...
0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b ..
里面的值：0~255
rgb(0,0,0) (黑色) rgb(255,255,255) (白色) rgb(255,0,0) (红色)
repeat;默认
repeat-x;
repeat-y;
no-repeat;
经常在网页中变化的图，一般用图片。
而在网页中用于修饰的图，一般用背景。
x y : 0 0 ( 针对当前容器的最上角 )
像素 % | x(left center right) y(top center bottom)
fixed : 固定
fixed下的定位模式position是根据当前页面来偏移的
7,CSS边框
solid : 实线
dashed : 虚线
dotted : 点线
border-width：边框的大小
border-color：边框的颜色
border-left-style
border-right-style
border-top-style
border-bottom-style
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <form action="" text-align="center"> 11 <table> 12 <tr width="100px"> 13 <td height="30px"><label for="dzyx">电子邮箱：</label></td> 14 <td><input type="text" name="" id="dzyx"></td> 15 </tr> 16 <tr> 17 <td><label for="mima">设置密码：</label></td> 18 <td><input type="password" name="" id="mima"></td> 19 </tr> 20 <tr> 21 <td><label for="username">真实姓名：</label></td> 22 <td><input type="text" name="" id="username"></td> 23 </tr> 24 <tr> 25 <td align="right">性别：</td> 26 <td> <label><input type="radio" name="username" id="">男</label> <label> <input type="radio" name="username" id="">女</label></td> 27 </tr> 28 <tr align="right"> 29 <td>生日：</td> 30 <td> 31 <select name="" id=""> 32 <option selected disabled>请选择：</option> 33 <option value="">1997</option> 34 <option value="">1998</option> 35 <option value="">1999</option> 36 </select>年 37 <select name="" id=""> 38 <option value="" selected disabled>--</option> 39 </select>月 40 <select name="" id=""> 41 <option value="" selected disabled>--</option> 42 </select>日<br> 43 <span style="color: blue;">为什么要填写我的生日？</span> 44 </td> 45 </tr> 46 <tr align="right"> 47 <td>我现在：</td> 48 <td> 49 <select name="" id=""> 50 <option value="" selected disabled>请选择身份</option> 51 <option value="">学生</option> 52 <option value="">上班</option> 53 </select>（非常重要） 54 </td> 55 </tr> 56 <tr align="center"> 57 <td colspan="2"><img src="./imgs/dd.png" alt=""></td> 58 </tr> 59 <tr align="right"> 60 <td>验证码：</td> 61 <td><input type="text"></td> 62 </tr> 63 <tr > 64 <td colspan="2" style=" widows: 200px; height:50px; background-size:100% 100%"> 65 <img src="./imgs/liz.png" alt=""> 66 </td> 67 </tr> 68 </table> 69 </form>