一、表单控件
1.下拉选择框
2.文本域 支持用户多行输入 可以由用户调整大小
3.提交按钮（将表单的数据提交给服务器）、重置按钮（将表单控件的值，重置为初始状态）、普通按钮（绑定自定义事件）、特殊按钮（<button>标签，如果放在form中作用和提交按钮一样，放在form外部需要绑定自定义事件）
4.label 标签
使用label标签包含要显示的文本
为label标签添加for属性，属性值与要绑定的空间的id属性值保持一致
<form action=""> <select name="province"> 下拉选择框 <option value="Hebei">河北</option> <option value="Shanxi">陕西</option> <option value="Sichuan">四川</option> </select><br> <textarea name="hh" cols="30" rows="10"></textarea> 文本域
<br> 换行 <input type="submit" name="" id="d"> 提交按钮 <input type="reset" name=""> 重置按钮 <input type="button" name="" value="button"> 普通按钮，可以绑定自定义事件 <button>登录</button><br> 特殊按钮，在表单中和提交按钮一样 <label>label单纯显示文本</label><br> <label for="d">点我就和点击提交一样</label><br> label标签的显示联系 <label>HH: <input type="text" name="en" placeholder="label"/> label标签的隐式联系 </label> </form> <button>绑定自定义事件</button> 表单外的button按钮
二、CSS：Cascading Style Sheet 层叠样式表 实现网页布局，美化页面元素
1.行内样式 / 内联样式：在具体的HTML标签中引入css代码
常见属性：font-size 设置字体大小，取值为像素值；color：设置文本颜色，取值为颜色的英文单词；background-color：设置背景颜色
<p style="font-size:20px;">大小为20像素值的文本</p>
2.文档内嵌：将css代码从标签中抽离出来，单独写在一起，使用<style></style>标签引入样式表
<style> CSS选择器 { 属性 : 值; 属性 : 值; ... } </style>
选择器：用来匹配文档中元素，并且为其设置样式，{}中是要给元素添加的样式声明
3.外部样式表 / 外链方式：创建外部的css文件，在HTML文档中只需引入外部样式表
优点：真正实现样式与结构的分离，便于维护，可以实现样式的复用
<link rel="stylesheet" href="url">
在url的样式表中添加选择器
4.样式表特点
层叠性：多个css样式共同作用于元素
继承性：父元素中设置的样式，子元素可以继承下来，大部分文本相关的属性都可以被继承，块级元素的宽度与父元素保持一致
优先级：发生样式冲突时，考虑优先级
从低到高：继承样式、浏览器的缺省设置、文档内嵌方式设置的样式（相同的优先级，代码的书写顺序决定最终样式，后来者居上）、行内样式优先级最高
三、css选择器：根据指定的选择模式匹配文档中元素，并为其设置样式
选择模式：选择符（匹配元素的依据）
1.标签选择器 / 元素选择器：根据标签名，匹配文档中所有的该元素，为其设置样式；常用于清除页面默认样式，以及设置基础样式
<style> 标签选择器 p{ color:red;
} </style>
2.类选择器：根据元素的class属相值进行匹配；写选择器时不要随便出现任何符号，类名自定义，禁止以数字开头，尽量简单易懂
组合使用，选择器1选择器2{ } 匹配同时满足选择器1和选择器2的元素并设置样式
注意：标签与类名组合使用时，标签在前，类名在后
每个元素都具备class属性，可以使用多个类名，多个类名之间使用空格隔开
<style> 类选择器 标签选择器和类选择器的组合使用 .c1{ background-color:blue; }
p.c1{
color:green;
}
</style>
3.ID选择器：根据元素的id属性值匹配元素，每个元素都具备id属性，并且id属性具有唯一性
页面中具有唯一性的元素，都可以使用id进行标识，并使用id选择器添加样式
页面中具有唯一性的元素：外围结构标签，搜索框
注意：id具有唯一性，不能重复使用相同的id值，在使用JS获取页面元素时，id时元素唯一的标识，出现重复时后面的额元素无法获取
<style> ID选择器 #top{ width:100%; height:100px; background-color:red; } </style>
4.群组选择器：为一组元素统一设置样式
<style> 群组选择器 div,p,span{ color:snow; } </style>
5.后代选择器：依托元素的层级关系匹配后代元素，后代元素包含直接子元素和间接子元素
<style> 后代选择器 为块级元素div下的所有span元素设置样式 div span{ color:red; } </style>
6.子代选择器：依托元素的层级关系，匹配直接子元素；在选择器1对应的元素中，匹配满足选择器2的直接子元素
<style> 子代选择器 只对div下的直接子元素span设置样式 div>span{ background-color:green; font-size:24px; } </style>
7.伪类选择器：针对元素的不同状态设置样式，可分为超链接伪类选择器和动态伪类选择器
伪类选择器必须与其他选择器结合使用
超链接伪类选择器：
：link 超链接访问前的状态
：visited 超链接访问后的状态
动态伪类选择器：
：hover 表示鼠标悬停时的状态
：active 表示鼠标点按时的状态
：focus 表示获取焦点时的状态，常用于输入框，接收用户输入时，就表示获取到焦点
设置超链接四种状态下的样式
a:link{}
a:visited{}
a:hover{}
a:active{}
书写顺序 ：LoVe/HAte 爱恨原则
<style> a:link{ text-decoration:none; color:black; } a:visited{ color:red; } a:hover{ color:blue; } a:active{ background-color:blue; } input:focus{ outline:none; } </style> </head> <body> <a href="https://www.baidu.com/">百度</a> <input type="text"> </body>