版权声明：文章为作者自己原创文章，转载请注明出处。 https://blog.csdn.net/qq_37128049/article/details/84885680
HTML标签：
1. 表单标签
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* 使用的标签：from
* 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。并没有任何样子，只是定义一个范围，在提交之后，该范围标签内的数据会被提交。
2. 表单标签内的属性：
* action:指定提交数据的地址
* method：指定提交数据的方式。
3. 提交方式： ->> 方式一共有七种，有两种是最重要的提交方式。分别是get和post
1. get：
1. 请求的参数会在地址栏中显示
2. 请求参数大小是有限制的。
3. 不太安全。(因为会显示在地址栏中）
2. post：
1. 请求的参数不会再地址栏中显示。会被封装在请求体中。
2. 请求的参数大小没有限制（理论上）
3. 较为安全。
4. 注意:
1. 表单项中的数据要想被提交：必须指定其name属性。
* 用户名：<input name="username" />
* <input type="submit"> --> 提交按钮。
2. form表单就是用于向服务器提交数据。
* 如果要提交的数据：指定提交的url，指定提交的方式
* 要被提交的内容必须在from包裹中，input标签要指定自己的name属性。
5. 表单项标签：
1. input：可以通过type属性值，改变元素展示的样式。
2. type属性：
* text：文本输入框，默认值
* password：密码输入框（密码框与文本框的区别在于输入的字符会被隐藏密文“*”显示）。
* radio： 单选框
注意：
1.要想让多个单选框实现单选的效果，name的属性值必须是一样的。
2.一般会给每一个单选框提供value值。
3.checked属性，可以指定默认值。
4.如果想默认被选中，加一个checked。
6. 复选框：
1. checkbox：
<input type="checkbox" name="hobby" value="shoping">逛街
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="c">c
2. label：指定输入项的文字描述信息
3. 注意：
1. lable的for属性一般会和 input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
2. checked ：默认值。
3. 按钮： submit： 提交表单
4. button： 常和javascript使用。
5. image：图片提交按钮
6. src 属性指定图片的路径
7. select：下拉列表
<option>指定列表项 eg: <option>--请选择--</option>
8. textarea：文本域:
9. cols:每行字符数
10. rows：行数
11. placeholder： 提示信息
CSS：页面美化和布局控制
1.概念：
1. Cascading Style Sheets 层叠样式表
2. 层叠：多个样式可以作用在同一个html的元素上，同时生效。
2.好处：
1.功能强大
2.将内容展示和样式控制分离。
3.降低耦合度，解耦。
4. 让分工协作更容易。
5. 提高开发效率
3.CSS的使用：-->实际上就是说的“CSS与HTML结合的方式”
1. 内联样式： 在标签内使用style属性指定css代码。
* 如：<div style="color:red;">hello css</div>
2. 外联样式：在head标签内，定义style标签，style标签的代码内容就是css代码。
<head>
<style><div>
color : red
<style></div>
</head>
3. 外部样式：
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件。
a.css 文件：
<head>
div{
color:green;
}
<link rel="stylesheet" herf ="css/a.css">
</head>
<body>
<div>hello css</div></body>
4. 注意：
* 内联方式->内部样式->外部样式 css的作用范围越来越大。
* 1方式不常用，后期常用2,3.
* 3种格式可以写为：
<style>
@import "css/a.css";
</style>
* 快捷创建： 标签名+tab table+"+"+"tab"
5.css 语法：
* 格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
}
* 选择器：
筛选具有相似特征的元素。
* 注意：
每一对属性需要使用;隔开，最后一对属性可以不加。
6. 选择器： --> 筛选具有相似特征的元素
1.基础选择器
1. id选择器：选择具体的id的属性值元素
* 语法： #id属性值{}
（建议再一个html中id值唯一。）
2. 元素选择器：选择具有相同标签名称的元素 如div标签，p标签
* 语法： 标签名称{}
* 注意： id选择器优先级高于元素选择器。
3. 类选择器：选择具有相同的class属性值的元素。 标签内class="#"
* 语法：.class属性值{} 定义在标签内给标签class命名
（多个标签可以同时作用于同一个元素）
优先级： id选择器> 类选择器> 元素选择器
* 注意：在书写中id原则器的#是要加上的，class前有一个“.”；
2.扩展选择器
1. 通用选择器：选择所有选择器：
* 语法 ：*{}
2. 并集选择器：
* 选择器1，选择器2{}
3. 后代选择器：筛选选择器1元素下的选择器2元素（所有的后代都生效）
* 语法：父选择器1， 子选择器2{}
4. 子选择器：筛选选择器1的2选择器（只选择它的儿子，孙子不生效，就是说只能影响2同行同级别的同选择器）
* 语法：选择器1>选择器2 {}
5. 属性选择器：
* 语法： 元素名称[属性名='属性值']{}
如：input[type='text']{}
6. 伪类选择器：选择一些元素具有的状态
* 语法 元素：状态{}
* 如：
link：初始
hover：悬浮
active：点击
visited：访问过
7. 属性：
1.字体、文本
* font-size：字体大小
* color：文本颜色
* text-align:对齐方式
* line-height：行高
2.背景：
* backbround： 设置背景，复合属性
* 如：background：url（"img/logo.jpg"）no-repeat center;
（no-repeat（不重复））
3.边框：
* border：设置边框，复合属性。
* border-left-color：边框下面的颜色
* border：1px（边框长度）solid（实线）red;
4.尺寸：
* width：宽度
* height：高度
5.盒子模型: 控制布局
* margin：外边距 使用内部的盒子控制边距
* auto：水平居中
* padding：内边距 使用外部的盒子控制与内部的盒子的边距
* 默认情况下内边距会影响整个盒子的大小。
* box-sizing：border-box ; 可以设置盒子的属性，让width和height就是默认大小
* float:浮动
* left 左浮动
* right 右浮动
8. 注意：
1. placehorder ：默认提示
2. border-radius：设置边框圆角 如：border-radius：5px;
3. padding-left:10px; 设置内边距10px
4. 让超链接没有下划线：<a href="#" style="text-decoration: none">立即登录</a>