前端

这篇笔记记录了HTML与CSS部分的课程内容

一、本堂课重点内容

  • HTML标签
  • HTML语义化
  • CSS属性
  • CSS选择器
  • CSS页面布局

二、详细知识点介绍

1、HTML标签

  • 标题：h1~h6
  • 列表
    • 有序列表：ol
    • 无序列表：ul
    • 自定义列表：dl、dt、dd
  • 链接：a
  • 图片：img
  • 多媒体：video、audio
  • 输入
    • input
    • select、option
    • textarea
    • datalist

2、CSS属性

  • 字体属性（font）
  • 文本属性
  • 背景属性（background）
  • 边框属性（border）
  • …

3、CSS选择器

  • 通配符选择器

    * {
		margin: 0;
		padding: 0;
}

  • 标签选择器

    p {
		color: black;
		font-size: 16px;
}

  • id选择器

    #submit {
		color: white;
		border: 1px solid #000;
		background-color: #66ccff;
}

  • class选择器

    .title {
		color: black;
		font-size: 24px;
		font-weight: 700;
}

  • 属性选择器

    • 除了完全匹配之外，还可以匹配首尾的一部分字符串
    [type="button"] {
		color: black;
}
[type^="submit"] {
		/* 匹配type属性以submit开头的元素 */
		background-color: blue;
}
[type$="cancel"] {
		/* 匹配type属性以cancel结尾的元素 */
		background-color: grey;
}

  • 伪类

    • 状态伪类：link、visited、hover、active、focus
    • 结构性伪类：first-child、last-child、nth-child、before、after

  • 派生选择器

    • 直接组合：AB，同时满足A和B
    • 后代组合：A B，选中A的子孙B
    • 亲子组合：A>B，选中A的子元素B
    • 兄弟选择器：A~B，选中A之后且与A同级的B
    • 相邻选择器：A+B，选中紧跟A之后的B

  • CSS优先级（特异性）计算

    • 权重值计算：
    (0, 0, 0, 0)
(行内样式，ID选择器，class/属性/伪类选择器/，类型/伪元素)
    • 使用!important修饰的属性优先级最高
    • 权重相同时，定义靠后的优先

  • 继承与初始值

    • 某些属性会自动继承父元素的计算值，除非显式指定一个值
    • 每个属性都有初始值，可以通过initial关键字重置为初始值

  • CSS布局

    • 常规流
      • 行级
      • 块级
      • 表格布局
      • FlexBox
      • Grid布局
    • 浮动
    • 绝对定位：relative、absolute、fixed、static

三、课后个人总结

  • HTML和CSS的属性和功能繁多，仅凭课程是无法完全掌握的，仍需要积极地阅读各种官方手册和文档，保持时刻学习的心态
  • flex布局和grid布局对页面的排版有很大的帮助，需要花时间继续学习理解
  • 实践是巩固理论的最好方法，多敲一些代码才能更好地记住HTML和CSS的知识点

四、引用参考