青训营HTML+CSS学习笔记 ｜ 青训营笔记

不是风动7783
62 阅读3分钟

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

前端与HTML

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈（HTML+CSS+JS,http网络协议等）

前端工程师就是使用web技术栈解决多端图形用户交互问题

HTML（内容）

CSS（样式）

Javascript（行为）

Snipaste_2022-07-25_15-05-02

前端应该关注哪些方面的问题？

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性

前端常用的开发环境

Snipaste_2022-07-25_15-08-49

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
</body>
</html>

html的主体结构

DOM树

Snipaste_2022-07-25_15-13-54

基本语法：

  • 标签和属性不区分大小写。推荐小写（为了与框架中的组件区分开来）
  • 空标签可以不闭合，比如input，meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required，readonly

datalist标签能够在用户输入时给一个已有的提示

<datalist>
    <option>可以提示的内容</option>
    <option></option>
    <option></option>
</datalist>

内容划分

Snipaste_2022-07-25_15-30-13

语义化：

  • html中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写html
    • 有序列表用ol；无序用ul
    • lang属性表示内容所受用的语言

HTML是传达内容的，而不是样式

理解CSS

CSS用来定义页面元素的样式

基本语法:

Snipaste_2022-07-25_15-43-09

CSS的三种使用方法

1、外链

<link rel="stylesheet" href="/assets/style.css">

2、嵌入

<style>
    li{ margin: 0; list-style: none}
    p{margin: lem 0;}
</style>

3、内联

<p style="margin:lem 0">Example Content</p>

CSS是如何工作的：

Snipaste_2022-07-25_15-50-04

CSS的选择器有

  • 标签选择器
  • 通配选择器
  • id选择器
  • 类选择器
  • 属性选择器
  • 伪类选择器
    • 不基于标签和属性元素定位
    • 几种伪类
      • 状态伪类
      • 结构性伪类

Snipaste_2022-07-25_16-01-28

颜色：

  • RGB
  • HSL
  • 颜色名字

通用字体族：

Snipaste_2022-07-25_16-08-46

font-size：

  • 关键字
    • small,medium,large
  • 长度
    • px,em
  • 百分数
    • 相对于父元素的大小

属性继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值

不可继承的属性，可以使用inherit关键字值来继承父元素的属性(显示继承)

CSS求值过程：

Snipaste_2022-07-25_16-34-23

Snipaste_2022-07-25_16-38-37

Snipaste_2022-07-25_16-39-19

Layout布局：

  • 确定内容的大小和为位置的算法
  • 依据元素、容器、兄弟节点和内容等信息

布局相关技术：

常规流（行级、块级、表格布局等）、

浮动、

绝对定位

盒模型：

Snipaste_2022-07-25_16-44-40

CSS实现三角形，将内容区设置为0，其他三个边设置成无

块级：不和其他盒子并列摆放，适用所有的盒模型

行级：和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

行级排版上下文

  • Inline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个FC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文

  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
    • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display:flow-root;

BFC内的排版规则

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

Flex Box

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放方向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
avatar
文章
阅读
粉丝