html和css本日小结

1. 常用html标签复习

（1）标题标签 <h1> </h1> h1–h6

（2）段落标签<p> </p>

（3）列表标签

​ a. 无序列表 ul > li

​ b.有序列表 ul > ol

​ c.列表标签中不要放置其他标签，如标题标签。

（4）超链接（锚点）标签 <a herf = ".." target = ""> </a>

（5）图片标签<img src = ".." alt = "显示失败时的文字> "

（6）div标签：由于网页布局、划分区域，无语义

（7）span标签：行内标签

2. html常用属性

*  src -- 路径 id -- ID名  class -- 类名

• HTML元素分类：
  • 块元素：独立成行，可以设置宽高
  • 行内元素（内联元素，行级元素）：不独立成行，不可以设置宽高
  • 行内块元素：不独立成行，但可以设置宽高。eg：img，input，button
  • display属性：转换元素类型
    • block、inline、inline-block、none

3.表格与表单元素

• 表格：主要用来展示数据

  • 标签：

    <table>
        <thead> /*表头*/
            <th>..</th> /*标题*/
        </thead>
        
        <tbody>/*表体*/
            <tr>  /*行*/
                <td></td> /*单元格*/
            </tr>
            ...
        </tbody>
    </table>
    

  • 单元格合并 ： colspan = “合并的单元格数量” rowspan = “数字”

• 表单：向服务器发送数据

  <form>
      <lable for = "value">..</lable> /*id
       + label 获取焦点*/
      <input  id = "for-value" type = "text/password/.." placeholder = "define value">
      <select name = "" id = "">
          <option>..</option>
          ..
      </select>
  </form>
  

  • 提交按钮： 使用input标签，将type设置为“submit”
  • 单选框： 使用input标签，type设置为“radio” ，给各个单选项设置相同的class名，实现单选效果。

4.CSS选择器与常用属性

1.css格式：

标签 {
	属性1：属性值;
	属性2：属性值;
}

2.选择器：元素选择器，类选择器（.+类名 重复使用），id选择器（#+id名 单个使用），通配符选择器（* 匹配所有元素）

3.常用属性

（1）文本水平居中：text-align

（2）文本行高：line-height （单行文本时，将行高设置为文字大小可以实现垂直居中）

4.选择器补充（部分）

（1）层级选择器：selector1 selector2（选择S1下的S2）

（2）组合选择器：selector1，selector2（同时选中S1，S2）

（3）伪类选择器（增加行为）：selector:hover

（4）伪元素选择器（增加元素）：

• selector::after(S后加内容)

• selector::before（S前加内容）

• 属性： content：”要加的内容“

• 便于简化代码

  5.选择器权重

（1）相同选择器：后面的覆盖前面的

（2）不同的选择器：ID(100) > CLASS(10) > element(1)

（3）层级选择器：按权重累加计算

（4）设置最高权重： 在属性值后加 !important

6.引用CSS方法

（1）嵌入样式 ： style标签之间

（2）内联样式：写在对应标签内

（3）外部样式：<link rel = "stylesheet" herf = "xxx.css"

5.盒子模型

• 盒子宽(高)度：左右边距（上下边距） + 实际宽度（高度）
  • 改变内外边距会影响盒子的大小
  • 消除默认边距：利用通配符选择器初始化。
  • 元素居中显示： margin：0 auto；
  • 修改边距不改盒子大小：box-sizing：border-box；

6.浮动布局

• 俩div元素在同一行显示：将元素设置为浮动元素（float）

• 浮动元素特性：脱离文档流（不占位置了）

• 清除浮动：清除浮动给网页布局带来的影响。

  • 增加一个空的div，设置clear：both；

  • 利用伪元素选择器：给浮动元素的容器增加以下内容

    

7.CSS定位(position)

（1）绝对定位：absolute 不占位

• 脱离文档流: 默认参照物为浏览器视窗左上角

（2）相对定位：relative 占位

• 不脱离文档流：默认参超物为此元素原位置

（3）固定定位：fixed

• 脱离文档流：默认参照物为浏览器视窗位置

（4）坐标属性：top，bottom，left，right，z-index（两个元素重叠，谁显示在上面，默认值为0）

8.过渡效果

（1）transition：属性 秒数 过渡函数(运动速度) 延迟