一、表单
input
应用场景：登录 注册 搜索 --- 用户输入 input
他们的共同点是用户输入之后才可以进行
表单的作用：供用户输入
表单域 form action：提交地址 method提交方法get和post
5.0之前没有placeholder新增功能，之前是value（提示的文字需要用户删除，而且字的颜色也没有变暗）实现的
<input> -- type属性取值不同则功能不同
文本框：text
密码框：password
单选框：radio（实现单选功能）
- 单选功能：把input加name属性且保证取值相同即可
- 默认选中：xhtml1.0 checked=“checked”；html5.0如果k==v，省略等号引号保留一个单词也是键值对的意思 – checked
- 扩大触发区域（在添加文字也有选择功能的时候）：
- Xhtml1.0：文字放到label标签里面，保证label标签的for属性值和radio的id属性值相同
- Html5.0：文字和radio放到一个label标签里面即可
复选框：checkbox
上传文件：file
提交按钮：submit
普通按钮:button
重置按钮：reset
- submit w3c已经封装好了提交的功能，后端不需要再写功能
- 重置按钮有重置这个功能，但是基本不用，没有需求
- button按钮有提交功能，但是老是出错，不用
文本域：textarea标签
- 焦点框：获得焦点 失去焦点
- outline为none可以取消焦点框
下拉菜单：select嵌套option 默认选中selected
小拓展知识：
表单提交中get和post方式的区别有5点
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据
队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各
个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5.get安全性非常低，post安全性较高。
代码：
1
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 <style>
9 textarea{
10 /* 禁用拖拽功能 */
11 resize: none;
12 width: 500px;
13 height: 300px;
14 /* 去掉焦点框 */
15 outline: none;
16 }
17 </style>
18</head>
19<body>
20 <!-- 将来发送数据 收集好之后再发送 -- 收集功能的是form标签 form:表单 表单域 -->
21<form action="提交地址" method="post">
22 <!-- form里面的功能标签叫表单控件 -->
23 <!-- placeholder="请输入用户名" 是html5.0新增功能 -->
24 <!-- **** 获取用户输入的内容就是获取value属性的值而已 -->
25 文本框：<input type="text" value="设置会员名">
26 <br><br>
27 密码框：<input type="password">
28 <br><br>
29 单选框：<input type="radio" name="sex" value="man" id="nan"><label for="nan">男</label> <label><input type="radio" name="sex" value="woman" checked>女</label>
30 <!--
31 单选功能：input 加name=“” 取值相同:
32 只要表单就是为了提交数据：应该是键值对的方式提交，值是vlaue属性值，key是name属性值
33 sex=man
34
35 1.sex=man
36 2.sex=woman 后边的键值对覆盖前面的键值对所以加name保证取值一样可以实现单选功能
37 -->
38 <br><br>
39 复选框： <input type="checkbox" checked>读书 <input type="checkbox">旅游 <input type="checkbox">打游戏
40 <br><br>
41 上传文件：<input type="file">
42 <br><br>
43
44 文本域：
45 <textarea></textarea>
46 <br><br>
47
48 下拉菜单：
49 <select>
50 <option>北京</option>
51 <option selected>上海</option>
52 <option>广州</option>
53 </select>
54
55 <br><br>
56 <input type="submit" value="同意并注册">
57 <input type="button" value="普通按钮">
58 <input type="reset">
59 <button>按钮</button>
60</form>
61
62</body>
63</html>
二、表格
知道有这么个东西，碰到的时候能认识就好了，用的少，只在数据统计的时候用。
国内2005年互联网网站大量改版：从表格布局改版成div布局
表格布局：浏览器读取所有代码显示效果
Div布局：浏览器读取一部分代码则显示一部分效果
现在表格用来做网站的 数据统计区域
表格 table
行 tr
单元格 td
表头 th
代码：
1
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 <!--**** 结构：table嵌套tr，tr嵌套td，table是表格，tr是行，td是单元格 th是表头 -->
11 <table border="1">
12 <tr>
13 <th>1</th>
14 <th>2</th>
15 <th>3</th>
16 </tr>
17 <tr>
18 <td>1</td>
19 <td>2</td>
20 <td>3</td>
21 </tr>
22 <tr>
23 <td>1</td>
24 <td>2</td>
25 <td>3</td>
26 </tr>
27 </table>
28</body>
29</html>
三、常用特殊效果小标签
- 带有强调语义的标签，搜索引擎很喜欢，搜索关键字，抓取网页的时候，会更排名靠前。是一种技术推广手段。
- 在写标签的时候，提前写好，否则在加选择器的时候，推广改掉之后，你的属性都会变，省去麻烦。
功能 | 强调语义 | 普通语义 |
倾斜 | em | i |
下划线 | ins | u |
加粗 | strong | b |
删除线 | del | s |
代码：
1
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 <style>
9 b{
10 font-size: 40px;
11 color: blue;
12 }
13 </style>
14</head>
15<body>
16 <b>加粗</b>
17 <i>倾斜</i>
18 <u>下划线</u>
19 <s>删除线</s>
20 <!-- 所有标签都是有语义的 ：强调语义 普通语义 -->
21 <strong>python</strong>
22 <em>emem</em>
23 <ins>ins</ins>
24 <del>del</del>
25</body>
26</html>
四、*选择器
选择器就是找标签的方法，找到之后让它去执行css。
组选择器写标签的时候顺序无所谓
1、层级选择器/后代选择器 -- 空格
1
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 <style>
9 /* 空格父子级就是层级选择器：最终选中子级执行键值对 */
10 ul li{
11 color: red;
12 }
13 </style>
14</head>
15<body>
16 <ul>
17 <li>ul里面li</li>
18 <p>pppppp</p>
19 </ul>
20 <ol>
21 <li>ol里面的li</li>
22 </ol>
23</body>
24</html>
2、组选择器 – 逗号
1
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 <style>
9 /* body{
10 color: red;
11 } */
12
13 /* 通配符选择器：选所有标签 */
14 /* *{
15 color: green;
16 } */
17
18 /* 逗号表示组选择器 */
19 h1,span,div,p{
20 color: blue;
21 }
22 </style>
23</head>
24<body>
25 <h1>logo</h1>
26 <span>span</span>
27 <p>pppp</p>
28 <div>divdiv</div>
29</body>
30</html>
3、伪类选择器： 以冒号开头 ：hover -- 表示鼠标滑过 鼠标悬停
1
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 <!-- <style>
9 a:link{
10 /* 单击前 */
11 color: red;
12 }
13 a:visited{
14 /* 单击后 */
15 color: green;
16 }
17 a:hover{
18 /* 鼠标悬停 */
19 color: blue;
20 }
21 a:active{
22 /* 点击时 */
23 color: pink;
24 }
25 </style> -->
26 <style>
27 a{
28 color: red;
29 }
30 a:hover{
31 color: green;
32 }
33 </style>
34</head>
35<body>
36 <!-- 伪类表示状态 超链接用到几率多 当什么什么时候 -->
37 <!-- 伪类以冒号开头，后面紧跟一个w3c定义好的表示伪类的单词 -->
38 <a href="#">东晓</a>
39</body>
40</html>
五、**盒子模型
5.1 布局
边框线：border：粗细 颜色 线条种类；
内边距 padding
外边距：margin
margin和padding的设置方法完全一样，可以英文单词，可以四值写法。
加border和padding会撑大盒子：
- 手动减宽度高度；
- css3.0 启动盒子内减模式 box-sizing：border-box
占位尺寸：padding + border + content
手动写宽和高是css2.0上的作法；
css3.0上box-sizing：border-box
为了在形式上显示div的一个换行后的占位效果，外边距有可能显示的很多，其实没变。
5.2 边框线：
单独设置单独方向的边框线border-方向英文单词 top bottom left right
Solid – 实线
dashed – 虚线
dotted – 点线
5.2 padding-英文单词
5.3 padding多值写法
1：四个方向相同
2：上下 左右
3：上 左右 下
4： 上 右 下 左
代码：
1
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 <style>
9 div{
10 width: 300px;
11 height: 200px;
12 background: #ccc;
13 /* border 多值写法，各个值用空格隔开即可，值不分先后顺序 */
14 /* border: 粗细 颜色 线条种类; */
15 border: 1px red solid;
16 /* 内边距：边和内容之间的距离 */
17 padding: 20px;
18 /* css3.0 启动盒子内减模式的属性 */
19 box-sizing: border-box;
20 /* 外边距 margin */
21 margin: 50px;
22 }
23 </style>
24</head>
25<body>
26 <!-- 比喻句 标签 和 生活盒子： 快递盒：产品 纸箱子 填充物 -->
27 <div>女装</div>
28 sdfasdfasdf
29</body>
30</html>
盒子模型详解：
1
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 <style>
9 div{
10 width: 200px;
11 height: 200px;
12 background: pink;
13 }
14 .box1{
15 /* border-方向英文单词 top bottom left right */
16 border-top:red 1px solid;
17 border-right: 5px green dashed;
18 border-bottom: 5px blue dotted;
19 }
20 .box2{
21 padding-top: 10px;
22 padding-right: 20px;
23 padding-bottom: 40px;
24 padding-left: 80px;
25 }
26 /* padding可以和border一样取多值写法？最多写几个值 */
27 .box3{
28 /* 4值： 上 右 下 左 -- 从上顺时针一圈 */
29 /* padding: 10px 20px 40px 80px; */
30 /* 3值: 上 左右 下 */
31 /* padding: 10px 40px 80px; */
32
33 /* 2值： 上下 左右 */
34 padding: 10px 80px;
35 }
36 </style>
37</head>
38<body>
39 <!-- border -->
40 <div class="box1">box</div>
41<br><br>
42 <!-- padding -->
43 <div class="box2">box</div>
44 <br><br>
45 <div class="box3">box</div>
46</body>
47</html>
版心居中：
1
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 <style>
9 div{
10 width: 1000px;
11 height: 300px;
12 background: green;
13 /* 版心居中保证margin左右方向一样 */
14 margin: 0 auto;
15 }
16 </style>
17</head>
18<body>
19 <!-- 版心 居中：水平居中 1000 -1200 -->
20 <!-- 版心：网页真实有效内容的标签 -->
21 <div></div>
22</body>
23</html>
css初始化：
1
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 <style>
9 blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
10 margin: 0;
11 padding: 0;
12 }
13 ul,ol{
14 /* 去掉列表符号 列表样式 项目符号 */
15 list-style:none;
16 }
17 </style>
18</head>
19<body>
20 <!-- css reset -->
21 <h1>logo</h1>
22 <p>ppppp</p>
23 <div>div</div>
24 <ul>
25 <li>lili</li>
26 </ul>
27</body>
28</html>
六、overflow属性
解决内容查出父级如何显示的问题
hidden 溢出隐藏
auto 溢出滚动，超出了才滚动
scroll 溢出滚动，无论是否超出都滚动
代码：
1
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 <style>
9 div{
10 width: 300px;
11 height: 200px;
12 background: pink;
13 /* 默认值 超出显示 */
14 /* overflow: visible; */
15 /* **** 超出隐藏 溢出隐藏 */
16 /* overflow: hidden; */
17 /****** 溢出滚动：如果内容超出则加滚动条 */
18 overflow: auto;
19 /* 溢出滚动：无论内容是否超出都显示滚动条的位置 */
20 /* overflow: scroll; */
21 }
22 </style>
23</head>
24<body>
25 <div>解决内容查出父级</div>
26</body>
27</html>
七、display属性
转换元素类型：换行 – 块标签 不换行 – 行内
标签 == 标记 == 元素
块：换行，宽高生效，如果不写宽度占父级100% block
行内：不换行，宽高不生效，尺寸和内容一样大 inline
行内块：不换行，宽高生效 inline-block
Display：none 隐藏 配合js
元素类型 == 标准流/文档流
代码：
1
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 <style>
9 div{
10 width: 200px;
11 height: 200px;
12 background: green;
13 /* display: inline; */
14 /* display: inline-block; */
15 /* 不占位隐藏 */
16 /* display: none; */
17 visibility: hidden;
18 }
19 span{
20 width: 500px;
21 height: 300px;
22 background: blue;
23 display: block;
24 }
25 /*
26 不换行的标签 -- 行内：书写宽高不生效；尺寸和内容一样大
27 换行的标签 -- 块：书写宽度高度生效，不写宽度，宽度和父级一样大
28 行内块 ：宽度高度生效，在一行显示
29 拓展：浏览器执行 行内和行内块标签的时候当做文字处理，如果是文字之间敲空格或回车会识别一个空格的距离
30 */
31 </style>
32</head>
33<body>
34 <div>div</div>
35 <div>div</div>
36 <span>span</span>
37 <span>span</span>
38</body>
39</html>
八、**浮动
浮动：让块标签在一行没有间距的显示
None 默认值
Left 标签都左侧对齐显示
Right 右侧对齐显示
浮动的时候就是元素不再占用标准流的位置，但是会占用上层位置，就好像浮起来一样。
- 下面三个盒子，都设置了左浮动的时候，会按书写代码的先后顺序，依次排开。
- 如果是右浮动的话，还是按书写代码的先后顺序依次排开。也就是都设置浮动了，那么他们都浮起来了，会占用上面的位置。
- 如果是一个设置了左浮动，但是另外两个没有设置左浮动，那么就会出现下面的状况：1号设置了左浮动，他会不占用标准流的位置，浮起来，那么2号和3号会从标准流从头开始排序，也就是会出现1号套在了2号里面。（举的例子是下面的代码显示，不代表其他。）其他的话，就是相当于1号浮起来了，2号会从头开始，忽略了1号的位置。
代码：
1
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 <style>
9 .box1{
10 width: 100px;
11 height: 100px;
12 background: red;
13 float: right;
14 }
15 .box2{
16 width: 200px;
17 height: 200px;
18 background: green;
19 float: right;
20 }
21 .box3{
22 width: 300px;
23 height: 300px;
24 background: blue;
25 float: right;
26 }
27 </style>
28</head>
29<body>
30 <div class="box1"></div>
31 <div class="box2"></div>
32 <div class="box3"></div>
33</body>
34</html>
九、**定位
让任意的标签叠加显示
Static – 静态定位 默认值
相对 relative
1 <style>
2 div{
3 border: 1px solid red;
4 position: relative;
5 left: 200px;
6 top: 200px;
7 }
8 /*
9 特点：
10 1、参照物：它自己原来的位置
11 2、占位
12 3、不改变元素类型特点
13 */
14 </style>
绝对 absolute
1 <style>
2 div{
3 border: 1px solid red;
4 width: 500px;
5 position: absolute;
6 left: 0;
7 top: 100px;
8 }
9 /*
10 特点：
11 1、参照物：以最近的已经定位的父级为参照物，如果没有这样的父级则以浏览器为参照物
12 2、不占位脱离标准流
13 3、元素类型特点:行内块
14 */
15
固定 fixed
1 <style>
2 div{
3 border: 1px solid red;
4 width: 500px;
5 position: fixed;
6 left: 0;
7 top: 0;
8 }
9 /*
10 特点：
11 1、参照物：浏览器
12 2、不占位脱离标准流
13 3、元素类型特点:行内块
14 */
15 </style>
改变定位标签的位置：配合偏移量属性 left top bottom right
K：v;
Left:xx;
占位：就是我离开了原来的位置，但是原来的位置还给我留着。
固定定位和绝对定位最大的区别就是，设置了固定定位的元素不变化，但是网页其他内容会动。就好像网站里面，那些讨人厌的小广告，好像粘在了屏幕上一样，一直不改变位置。
只要是以浏览器为参照物，那么屏幕的分辨率就会干扰位置。
定位的应用：
1
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 <style>
9 /*
10 1、****验证子级绝对父级相对
11 2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中
12 3、定位的标签z-index改变显示顺序
13 4、opacity测试内容和背景透明
14 5、background只透明背景
15 */
16 .father{
17 width: 500px;
18 height: 300px;
19 border: 1px solid black;
20 margin: 0 auto;
21 /* position: relative; */
22 position: absolute; /* 绝对的定位元素类型具备行内块特点：一行显示多个 auto无法进行计算*/
23 left: 50%;
24 margin-left: -250px;
25 top: 50%;
26 margin-top: -150px;
27 }
28 .father div{
29 width: 100px;
30 height: 50px;
31 }
32 .son1{
33 background: green;
34 position: absolute;
35 left: 50px;
36 top: 30px;
37 z-index: 9;
38 }
39 .son2{
40 background: pink;
41 position: absolute;
42 left: 100px;
43 top: 50px;
44 z-index: 10;
45 /* opacity: 0.3; */
46 background: rgba(0,0,0,0.5);
47 }
48 </style>
49</head>
50<body>
51 <!-- 工作中：相对和绝对配合使用： 子级绝对，父级相对 -->
52 <!-- 定位默认后来者居上 z-index，取值是整数，取值越大显示顺序越靠上 -->
53 <!-- 设置透明度 完全透明 完全不透明 半透明 -->
54 <!-- opacity:0-1闭区间 内容和背景一起透明 -->
55 <!-- 只透明背景：background:rgba(1,2,3,4); r==red g==green b==blue a==alpha 0-255 -->
56 <div class="father">
57 <div class="son1">son1</div>
58 <div class="son2">son2</div>
59 </div>
60</body>
61</html>
十、小知识点
div 默认有换行的功能
dr标签 也是换行
工作中很少用 ；空格的实体符号，到时候会用距离调整
有的网站刷新页面后单选框默认有一个选中的选项，因为根据数据处理，用户群体默认一选项占比大，节省大部分用户的时间成本。
浏览器会默认给盒子一些值，我们需要将这些值取消，这些代码百度上都有，开源的。
下面这些标签都被废弃了，兼容性不好。blockquote缩进标签一个块的大小；fieldset线中有个缺口写文字；hr做水平分割线用；pre格式化输出（代码里面文字原样输出到网页位置）；
div没加宽度，那么会默认和父级的宽度一样；
