一、input标签
1.<input>实现按钮效果
-与表单相关的按钮效果
-<input type="button" value="按钮">
2.<button>标签表示按钮
-与表单无关的按钮效果：<button>按钮</button>
-类似于<input type="submit"> - 提交表单
3.<input type="image">
-基本用法 - 也可以显示图片
-鼠标点击图片时 - 也有提交表单的作用
<input type="image" src="imgs/girl.jpg">
不同于<img src="imgs/girl.jpg">（只是图片）二、基本选择器
1.选择器的优先级别
通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器
2.元素选择器 - 定位当前页面的指定标签名
ID选择器 - 定位当前页面中指定ID属性值的标签（只能匹配一个标签，无法重复使用）
类(class)选择器 - 定位当前页面中指定class属性值的标签
通配符选择器 - 匹配当前页面所有内容
属性选择器 - [attr] - 匹配含有指定属性(属性名为attr)的标签(元素)。
3.优先级别：内联样式 > 外联样式。
4.!important
设置当前内容的选择器的级别为最高;
注意 - 打乱CSS选择器的默认优先级别顺序;
建议 - 尽量不要使用.三、关系选择器
1.祖先与后代的关系 - 后代选择器 A B
2.父级与子级的关系 - 子选择器 A>B
3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B
4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 A~B四、组合选择器
1.组合选择器 - 选择器之间使用逗号隔开，之间为并集如：
h1, h2, h3 {font-size: 18px;}
其中：<h1>标题一</h1>
<h2 >标题二</h2>
<h3>标题三</h3>
2.组合选择器 - 选择器之间没有任何分隔，之间为交集
1） p#p1 { color: lightcoral; } 都选中
<p>这是一个段落内容.</p>
<p id="p1">这是一个段落内容.</p>
2） p.mini { font-size: 12px; } 只选中p元素。
<h2 class="mini">标题二</h2>
<p class="mini">这是一个段落内容.</p>五、颜色值
1.使用英文单词描述颜色
-常用的颜色使用比较方便
-问题
-比较特殊的颜色，表示比较麻烦
-不同浏览器对单词描述的颜色存在色差
-建议 - 开发中，尽量不要使用
2.颜色基本由三原色（红、绿、蓝）组成
-rgb(红, 绿, 蓝)
-每个颜色值的范围 - 0 ~ 255
- #红绿蓝
-每个颜色使用两位表示
-值的范围 00 ~ ff
-举例
-#000000六、伪类
伪类 - 设定指定状态下的样式
<a>标签链接 - 默认样式
未被访问的样式 - 字体颜色为蓝色
鼠标悬浮在链接元素时 - 鼠标样式变化
当鼠标点击链接元素时 - 字体颜色为红色
已被访问的样式 - 字体颜色变化
：hover ：active ：visited ：link ：focus七、伪元素
：：before ：：after等八、块级元素与内联元素
1.块级元素
独占一行（自动换行） - 所有的块级元素都是垂直排列的
<h1> <p> <ul> <table>
2.内联元素
内联元素是水平方向排列的
内联元素 - 设置高度和宽度是无效的（高度和宽度由文字决定）
<a> <td> <img>九、语义化
所谓的语义化
-每一个指定的HTML元素， 具有明确的指定含义。
HTML编写静态页面时
1. 使用常见的HTML元素 + CSS样式
-<table>、<h1>、<p>等
2. 使用语义化的HTML元素 + CSS样式
-HTML5新增了很多语义化标签
3.若<div>与<span>元素 + CSS样式，这两个标签都是无语义化的表示十、div与span
1.<div>标签是块级元素 - 独占一行
- 默认的宽度为父级元素宽度的100%
- 默认的高度为 0
作用：用于布局
2.<span>元素是内联元素
