前端与 HTML&理解CSS | 青训营笔记

用户7923973128718
55 阅读4分钟

这是我参与「第五届青训营 」笔记创作活动的第1天。

前端与HTML

一、本堂课重点内容：

本节课可分为两部分。第一部分主要介绍前端是什么、要解决的问题和技术栈等。第二部分简要介绍了 HTML 的概念、语义化和常用的 HTML 标签。

二、详细知识点介绍：

HTML简介

HyperText Markup Language，全称超文本标记语言

<img src=”a.jpg” /> 可省略结束标签

浏览器将HTML代码解析为DOM树

HTML语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，如input、meta

属性值推荐使用双引号包裹

某些属性值可省略，如required、readonly

HTML标签

输入

<input type=”range”> 进度条

<input type=”date” min=”2018-02-10”> 输入日期并设置最小值

文本

<blockquote cite=”#”></blockquote> 块级引用

<cite></cite> 短引用，多用于作品，斜体

<q></q>短引用，加引号

<code></code> 代码

<pre><code></code><pre> 多行代码

语义化文档：MDN、W3C

四、课后个人总结：

HTML是前端学习中最基础的一课，需要掌握大量的标签规范，重难点在于区分各种标签的含义和用法，在不同的情境下选择最合适的标签。

对于个人而言，在学习HTML时最容易混淆的知识点是各种列表标签，包括无序列表、有序列表、自定义列表等，特别是表格标签的单元格合并。

理解CSS

一、本堂课重点内容：

了解 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。

二、详细知识点介绍：

CSS是如何工作的

cascading style sheets层叠样式表

  1. 加载HMTL
  2. 解析HTML、加载CSS
  3. 创建DOM树、解析CSS、添加样式到DOM节点
  4. 展示页面

选择器

属性选择器

<input value="aaa" disabled>
/* 选中带有特定属性的标签 */
<style>
	[disabled]{
		color:#999;
	}
</style>

<input type="password" value="123456">
/* 选中目标属性值的标签 */
<style>
	[type="password"]{
		color:red;
	}
</style>

[href^=”#”] 以#开头

[href$=”.jpg”] 以.jpg结尾

伪类选择器

状态性伪类

a:link 默认状态

a:visited 访问过

a:hover 鼠标悬停

a:active 鼠标按下去之后

:focus 链接被点击/输入框正在输入

CSS样式

white-space：空格处理

nowrap强制不换行

pre 保留所有空格和换行

pre-wrap 一行内显示不下时自动换行

pre-line 合并空格，保留换行

选择器特异度

id>(伪)类>标签

继承

文字相关可继承，盒模型相关不可继承

显式继承：

*{
	box-sizing:inherit;
}

初始值：设置为initial

CSS求值过程

  1. 获取DOM树和样式规则
  2. filtering：筛选匹配选择器，获取声明值
  3. cascading：选出优先级最高的属性值
  4. defaulting：当层叠值为空时继承或赋初始值
  5. resolving：将相对值或关键字转化为绝对值，相对路径转化为绝对路径，得到浏览器在不进行实际布局的情况下所能得到的最具体的值。如百分比
  6. formatting：将计算值进一步转换，百分比转为绝对值
  7. constraining：小数值像素转化为整数，获得实际值

布局

overflow：visible/hidden/scroll 控制内容大于盒子模型时的显示方式

常规流

行级排版上下文IFC

只包含行级盒子的容器会创建一个IFC

盒子在一行时水平摆放

  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动元素

块级排版上下文BFC

某些元素会创建一个BFC

  • 根元素
  • 浮动、绝对定位、inline-block
  • flex子项和grid子项
  • overflow值不是visible的块盒
  • display：flow-root

排版规则

  • 盒子从上到下排放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

FlexBox

display：flex

一种新的排版上下文，可以控制子集盒子的

  • 摆放流向（上下左右）
  • 摆放顺序
  • 盒子的宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

Grid布局

display：grid

使用grid-template相关属性将容器划分为网格

设置每个子项占哪个网格

浮动

文本环绕

绝对定位

position属性

static 默认值，非定位元素

relative 相对自身原本位置偏移，流内元素当它没有偏移一样布局

absolute 绝对定位，脱离常规流，相对于最近的非static祖先定位不会对流内元素布局造成影响

fixed 脱离常规流，相对于窗口绝对定位

三、课后个人总结：

CSS部分最容易混淆的知识点在于各种布局的区分，不仅需要对定义足够理解，还要上手实践才能掌握。

avatar
文章
阅读
粉丝