HTML和CSS

HTML和CSS
1：标签学习
1：文件标签 （构成html最基本的标签）
1：html：html文档的根目录
2：head：头标签。用于指定html文档的一些属性，引入外部的资源
3：title：标题标签
4：body：体标签
5：：html5中定义该文档是html文档
2：文本标签：和文本有关的标签
注释：
1：

to

:标题标签
字体大小逐渐递减
2：

：段落标签
3：
：换行标签
4：

---

：展示一条水平线
属性：
color：颜色
width：宽度
size：高度
align：对齐方式
center：居中
lift：左对齐
right：右对齐
5：：加粗
6：：斜体
7：字体标签
3：图片标签：
4：列表标签：
有序列表：
ol
li
无序列表：
ul
li
5：链接标签：
属性：
href：指定访问资源的url（统一资源定位符）
_blank：在空白页面打开
6：表格标签：
table:定义表格
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，这单元格的线合并为一条
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并行
rowspan：合并列
th：定义表头单元格
：表格标题
7：空标签（用来控制一些属性的）（方便控制）

8：表单标签：
:定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL
method：指定提交方式
分类：
get：请求参数火灾地址栏中显示，参数大小是有限制的，不太安全
post：请求参数不会在地址栏中显示，会封装在请求中，请求参数的大小没有限制，较为安全。
表单项中的数据要想被提交：必须指定其name属性
9：表单项标签：
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框中的内容发生变化，会自动清空提示信息
password：密码输入框
rodio：单选框
注意：
1：要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2：一般会给每一个单选框提供value属性，指定其被选中后提交的值
3：checked属性，可以指定默认值
checkbox：复选框
checked：可以来设置选中状态和没有选中状态（true/false）
全部选中就是先获取，然后在遍历一些=下，在用checked来设置
注意：
1：一般会给每一个单选框提供value属性，指定其被选中后提交的值
2：checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮：
submit：提交按钮，可以提交表单
button：普通按钮
image：图片提交按钮
src：指定图片的路径
label：指定输入项的文字描述信息
注意
label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点。

		select：下拉列表
			子元素：option：指定列表项
		textarea：文本域
			cols：指定列数，每一行有多少个字符
			rows：默认多少行
10：想让超链接标签在新窗口中打开：案例

CSS
1：css的使用：css与html的结合方式
1：内联样式
在标签内使用style属性指定css代码
如：

hello css

2：内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
如
这个是导入包的写法
注意：1，2，3种方式css作用的范围越来越大
2：选择器
分类：
1：基本选择器
1：id选择器：选择具体的id属性值，建议在一个html页面中id值唯一
语法：#id属性值{}
2：元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器
3：类选择器
语法：.class属性值{}
注意：类选择器选择优先级高于元素选择器
2：扩展选择器
1：选择所有元素
语法：*{}
2：并集选择器：
语法：选择器1，选择器2{}
3：子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
4：父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{}
5：属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{}
6：伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如：
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
3属性
1：字体、文字
1：font-size：字体大小
2：color：文本颜色
3：text-align：对齐方式
4：line-height：行高
2：背景
background
no-repeat center（不重复图片并且居中）
如：background: url(“”) no-repeat center;
3：边框
border：设置边框，复合属性
border-left:chartreuse 1px solid; 左颜色
border-right: blueviolet 1px solid; 右颜色
border-bottom: red 1px solid; 下颜色
border-top: saddlebrown 1px solid; 上颜色
4：尺寸
width：宽度
height：高度
5：盒子模型
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
解决方法：box-sizing：border-box；
float：浮动（为了解决div不在同一行的问题）
left：左浮动
right：右浮动
总结超级好用的方法：在div中用css设置水平垂直居中代码：（浏览器搜的）
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;