HTML+CSS - 前端开发基础（1）- 必掌握知识点-#博学谷IT学习技术支持#

HTML 中常用标签

❗音频标签

<audio src=""></audio>

• 属性：src（路径）；control（控件）；autoplay（自动播放）；loop（循环播放）；

视频标签

<video src=""></video>

• 属性：src（路径）；control（控件）；autoplay（自动播放【谷歌要配合 muted 实现静音播放】）；loop（循环播放）；

链接

<a href=""></a>

• 属性：target：以哪种方式进行网页跳转（_self【默认】、 _blank【新页面】）

列表

- 无序列表
	- `<ul><li></li></ul>`
- 有序列表
	- `<ol><li></li></ol>`
- 自定义列表
	-`<dl><dt>名词</dt><dd>解释名词的内容1</dd><dd>解释名词的内容2</dd></dl>` 

表格

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

• 表格标题：<caption></caption>
• 表头单元格：

<table>
    <tr>
        <th></th> <!-- 表头单元格, 注意：嵌套在tr中 -->
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

• 表格的结构标签
  • thead、tbody、tfoot
• ❗ 合并单元格
  • rowspan（跨行合并）
  • colspan（跨列合并）

表单

• form 标签：表单域标签
• input 标签
  • type 属性：text、password、radio、checkbox、file、submit、reset、button
  • placeholder 属性：占位符，提示用户输入的文本
• button 标签
  • type属性：submit、reset、button
• 下拉菜单

  • <select>
        <option></option>
        <option></option>
    </select>
    

  • selected：默认选中
• 文本域
  • textarea
  • 工作中使用CSS设置样式效果（长、宽）
• ❗❗ label标签
  • 使用方法：直接用 label 把表单标签包裹起来，删除 for 属性。
• 有语义的布局标签（了解）
  • header、nav、footer、aside、section、article

CSS

CSS和CSS基本选择器

CSS引入方式

1. 内嵌式
   <style> </style>
2. 外联式
   通过 link 引入, 放在 head 中

<link rel="stylesheet" href="">

3. 行内式 CSS 写在 style 属性中

❗❗❗ 选择器

1. 标签选择器
   标签名 {}
2. 类选择器
   .类名 {}
3. id 选择器

• **#**id名 {}
• 注意：
  • id 选择器不是用来美化工作的，是为了配合 JS 工作的
  • id 在一个页面中是唯一的，不可重复的
  • 一个标签上只能有一个 id 属性值
  • 一个 id 选择器中能选中一个标签

4. 通配符选择器
   • *{}

font 字体

1. 字号
   • font-size （浏览器默认 16px）
2. 粗细
   • font-weight （整百数 100-900，normal【100】、bold【700】）
3. 倾斜
   • font-style （normal、italic）
4. 字体
   • font-family （三大类【无衬线、衬线、等宽】、宋体 …）
5. font 属性连写
   • ❗❗❗❗ font: style weight size family; （前两个可以省，顺序不可乱）

文本样式和 CSS 样式表

1. 文本缩进
   • text-indent
2. 文本水平对齐方式
   • text-align
3. 文本修饰
   • text-decoration
   • 值：underline、line-through、overline、none
4. 行高
   • line-height
   • 数字+px； 倍数；
5. 行高与 font 连写
   • font: style weight size/line-height family;
   • 垂直居中： 设置行高 = 自身高度值 （只适用于单行文本）

CSS 复合选择器

1. 后代选择器
   • 选择器1 选择器2 {CSS}
   • 注意：选中的是所有的后代，包括儿子、孙子 …
2. 子代选择器
   • 选择器1 > 选择器2 {CSS}
   • 注意：子代选择器只选中儿子
3. 并集选择器
   • 选择器1 ， 选择器2 {CSS}
4. 交集选择器
   • 选择器1选择器2 {CSS}
   • 注意：中间没有空格
5. hover伪类选择器
   • 选择器：hover {CSS}
   • 注意：
     1. 伪类选择器选中的元素的某种状态
     2. 任何标签都可以添加伪类，任何一个标签都可以添加鼠标悬停

CSS背景

1. 背景颜色
   • background-color
   • 背景颜色默认值是透明：rgba(0,0,0,0)、transparent
2. 背景图片
   • background-image
   • url(…)
3. 背景平铺
   • background-repeat
   • 值：repeat、no-repeat、repeat-x、repeat-y
4. 背景位置
   • background-position: 水平方向位置 垂直方向位置;
   • 位置表示：方位词（left、right、top、bottom、center）；数字 + px；
5. 背景属性连写
   • background: color image repeat position; （推荐顺序）
6. （拓展）img 标签和背景图片的区别
   • 重要的使用 img，不重要的使用背景图。

元素显示模式及转换

1. 块级元素
   • 特点
     1. 独占一行
     2. 可以设置宽高
   • div、p、h系列、ul、li、dl、dt、dd、form、nav …
2. 行内元素
   • 特点
     1. 一行显示多个
     2. 设置宽高不生效
   • a、span、b、u、i、s、strong …
3. 行内块元素
   • 特点
     1. 一行显示多个
     2. 可以设置宽高
   • input、textarea、button、select …
4. 元素显示模式转换
   • display:
     • block
     • inline-block
     • inline （用的少）
5. （拓展）HTML 嵌套规范注意点
   1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块 …
      但是：p 标签中不要嵌套 div、p、h等块级元素
   2. a 标签内可以嵌套任意元素
      但是：a 标签不能嵌套 a 标签

CSS 三大特性

1. 继承性
   • 可以继承的常见属性（文字控制属性都可以继承）
   • color、font系列、text-indent、text-align、line-height
2. 层叠性
   • 给同一标签设置不同的样式——>层叠叠加——>共同作用
   • 给同一标签设置相同的样式——>层叠覆盖——>显示最后的样式（要判断优先级）
3. 优先级
   1. 优先级公式：继承 < 通配符选择器 < 标签选择器 < class 选择器 < id 选择器 < 行内样式 < !important
      （谁的范围广谁的优先级低）
   2. 权重叠加计算 第一级 第二级 第三级 第四级
      ​ （ 0 ， 0 ， 0 ， 0 ）
      ​ 行内样式 id选择器 类选择器 标签选择器
      注意：!important 如果不是继承，则权重最高，No.1！

盒子模型

1. content 内容
   • 利用 width 和 height 属性默认设置盒子内容区域的大小
2. border 边框
   • border: 1px solid #fff;（不分顺序）
   • （了解）border-方位名词、border-width、border-style、border-color
   • 注意：boder 会撑大盒子的尺寸
3. padding 内边距
   • 四个值：上、右、下、左；三个值：上、左右、下；两个值：上下、左右；
   • 注意：padding 会撑大盒子的尺寸
4. margin 外边距
   • margin-方位名词
5. CSS3 盒子模型
   • 手动内减
   • 自动内减：给盒子设置属性box-sizing: border-box;
6. 清除默认内外边距

     * {
         margin: 0;
         padding: 0;
     }

学习心得总结

前期的 HTML 学习的较为轻松，但是音频标签和视频标签的单词总是容易记错。
CSS 的选择器有哪些 (基本的有四个，复合的有四个)，其中对交集选择器的理解有过误差。
学习 CSS 的时候思路清晰，但是使用起来的时候还是会有些模糊，还是要多加练习，多敲代码。