HTML 与 CSS｜ 青训营笔记

Bao
106 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天。本篇笔记是对第一天的课程内容总结，并结合了自己以往的学习笔记对内容，进行了一定的梳理。有意见和建议也欢迎在评论区交流讨论呀~

知识点

  • HTML 简介与基本标签
  • 语义化
  • CSS 样式简介
  • CSS 工作方式 页面渲染
  • CSS 选择器 与 属性和值 层叠 cascade（样式如何匹配）
  • 布局与盒模型：正常流、弹性盒子、网格、浮动盒子、定位

HTML 简介与基本标签

HTML：超文本标记语言（HyperText Markup Language）

它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。——百度百科

J161JN7D@)@NGFG9V1S4KQF.png

HTML 有着丰富的标签，由于篇幅不过多展开，推荐查阅 HTML（超文本标记语言） | MDN (mozilla.org)

HTML 标签的部分作用：

  • 支持网站 SEO（meta 标签）
  • 引入 iframe 模板
  • 显示 SVG 图形
  • 引入图片视频
  • 描述网页结构（页眉、页脚、侧边栏）

HTML 与 DOM 树

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。 DOM 将整个文档作为一个树形结构，树的每一个结点表示一个 HTML 标签或标签中的文本项。其中的文档一般指代的即是 HTML 文档，树形结构与 HTML 层次结构相同

tupian

HTML 语义化

语义化是什么？HTML 的元素、标签、属性都是有一定意义的

image.png 像 button head nav footer 这些标签都是有语义的，一眼就能看出来它的作用是什么。

理论上，通过一些手段，使得像 div span 这些无语义的标签“表现得像某些标签” 例如通过添加点击事件与 CSS 样式，可以使 div 标签长得与 button 一样，但这在机器（浏览器、屏幕阅读器）眼中，它就是一个没有任何含义的标签。

在开发中，开发者需要遵循语义化的建议，尽可能使 HTML 中使用的元素、标签、属性是有意义的，否则你的代码将犹如有口音一般难以用于沟通理解。

使用语义化规范优势：

个人认为语义化的理念不管是在 HTML 里面，还是日常的高级语言编程中都是非常重要的，没有人希望维护变量全是 a，b，c 的代码。以及对可访问性的理解，是一种人与人之间在虚拟世界中沟通交流的规范。

CSS 简介

层叠样式表 （Cascading Style Sheets，CSS），用于定义页面元素的样式，设置字体、颜色、位置、大小、动画等。由选择器、属性与属性值构成的声明组成。

CSS是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。——MDN

CSS 渲染方式

CSS 样式加载解析完成后会与 DOM 树结合并生成渲染树，用于实现页面渲染。

K$8C6Y5H3[C{Q{2832UM5]J.png

CSS 属性匹配与选择器

用于找出页面中匹配的元素，设置其样式

  • 标签选择器
  • 类选择器
  • id 选择器
  • 属性选择器
  • 伪类与伪元素选择器
  • 通配选择符 *

选择器组合

L8BJ_C_DK}I79M4FYK0UX7U.png

组合优先级计算

样式匹配冲突解决决定因素：

  1. 重要程度
  2. 优先级
  3. 资源顺序

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是“个十百千” — 四位数的四个位数：

  1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
  2. 百位： 选择器中包含ID选择器则该位得一分。
  3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  4. 个位：选择器中包含元素、伪元素选择器则该位得一分。
选择器千位百位十位个位优先级
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
内联样式10001000

属性继承

CSS 属性存在父子继承关系，可以设置显示继承、不继承、默认继承。

CSS布局与盒模型

CSS布局确定了内容大小与位置

盒模型

border box 和 content box 区别：height 与 width 大小指代的区别

内容盒子是内容的大小， content_box.png

布局

  • 常规流 Normal Flow
    • 行级
    • 块级
    • 弹性盒子 FlexBox
    • 网格布局 Grid
  • 浮动布局
  • 定位
    • 相对定位
    • 绝对定位

参考文章

avatar
文章
阅读
粉丝