一、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 B2.父级与子级的关系 - 子选择器 A>B3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 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>元素是内联元素

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML/CSS频道！