前端与HTML | 青训营笔记

用户2501570094071
106 阅读10分钟

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

前言

问题：什么是前端？

使用Web技术栈解决多端下的图形界面交互问题

技术：HTML(内容、结构) +CSS(样式) +JS(行为) +HTTP

前端应该关注的方面

  • 功能
  • 美观
  • 兼容
  • 安全
  • 性能
  • ...............

HTML

HTML是什么？

全称：HyperText Markup Language

HyperText：图片、标题、链接、表格

Markup： <h1>文章标题</h1>

HTML语法：

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

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

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

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

右击——>检查元素，查看网页的DOM树

输入标签

<input> 的type:

  • text：普通文本（默认值）
  • range：拖动条
  • number：数字
  • date：日期
  • color：颜色板
  • .......

补充知识点：

当一个文本框需要实现输入提示功能：

文本描述标签

  • blockquote：表示比较长的引用，有个 cite 属性表示内容来自于那里
  • cite：表示一个作品的引用，且必须包含作品的标题
  • q：表示一个封闭的并且是短的行内引用的文本（看清楚不是 <p> 标签）
  • code：呈现一段计算机代码

HTML的语义化

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang 属性表示内容所使用的语言
如何做到语义化？
  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

语义化的意义

（1）谁在使用HTML

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键词、排序
  • 屏幕阅读器：给盲人读页面内容

（2）语义化的好处

  • 提升代码的可读性、可维护性
  • 便于搜索引擎优化
  • 提升无障碍性

注意： 在书写HTML时，要注意：传达的是内容，而不是样式！

CSS

CSS是什么？

全称：Cascading Style Sheets

作用：用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

链接css的三种方式：

  1. 外链：<link rel="stylesheet" href=" ">
  2. 嵌入：<style> </style>
  3. 内联：<p style=" "></p>

CSS是如何工作的？

CSS选择器Selector

选择器找出页面中的元素，以便给他们设置样式

选择器示例
通配选择器* { }
标签选择器h1 { }
类选择器.box { }
ID选择器#unique { }
属性选择器a[title] { }
伪类选择器（状态伪类）p::hover { }
伪类选择器（结构性伪类）p:first-child { }
伪元素选择器p::first-line { }
组合选择器h1.title
后代选择器article p
子代选择器article > p
相邻兄弟选择器h1 + p
通用兄弟选择器h1 ~ p

补充：

伪类选择器与伪元素选择器：

  • 伪类选择器是用来向某些选择器来添加效果。
  • 伪元素选择器则是用来将特殊的效果添加在选择器上。

其本质上在于是否创建了新的元素：

伪类的效果可以通过添加实际的类来实现 伪元素的效果可以通过添加实际的元素来实现

注意：

  1. 伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”
  2. 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾
  3. 伪对象要配合content属性一起使用
  4. 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
  5. 伪对象的特效通常要使用 :hover伪类样式来激活

常见伪元素选择器：

-     ::after
-     ::before
-     ::first-letter
-     ::first-line
-     ::selection
-     ::placeholder

常见伪类选择器：

（1）结构伪类选择器：

-     :first-child
-     :last-child
-     :nth-child(n)
-     :nth-last-child(n)
-     :first-of-type
-     :last-of-type
-     :nth-of-type(n)
-     :nth-last-of-type(n)
-     :only-child
-     :only-of-type
-     :root
-     :empty

（2）反选伪类选择器：

父元素 （空格） :not（标签名）

（3）目标伪类选择器：

-     :target

（4）UI元素状态选择器：

-     :enabled
-     :disabled
-     :checked

（5）动态伪类选择器：

-     :link
-     :visited
-     :hover
-     :active

（6）用户行为伪类选择器

-     :focus

颜色

RGB：对应 red、green、blue 三原色

十六进制：如#FFFF09 每两位分别表示 red、green、blue 三个颜色

HSL：对应的是色相（Hue）、饱和度（Saturation）、亮度（Lightness）

色相 （H） 是色彩的基本属性，如红色、黄色等；取值范围是 0 ~ 360

饱和度（S） 是指色彩的鲜艳程度，越高越鲜艳；取值范围是 0 ~ 100%

亮度 （L） 是颜色的明亮程度；越高颜色越亮；取值范围是 0 ~ 100%

Alpha 透明度

  • #FF0000FF
  • rgba(255, 0, 0, 1)
  • hsla(0, 100%, 50%, 1)

字体

font-family

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。

通用字体族名都是关键字，所以不可以加引号。

通用字体族：

  • Serif 衬线体： 笔画结尾有特殊的装饰线或衬线
  • Sans-Serif 无衬线体： 笔画结尾是平滑的字体
  • Cursive 手写体： 草书字体；这种字体有的有连笔，有的还有特殊的斜体效果
  • Fantasy： 主要是那些具有特殊艺术效果的字体
  • Monospace 等宽字体： 即字体中每个字宽度相同

使用建议：

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

使用 Web Fonts：

@font-face {
    font-family: "Megrim";
    src: url(https://XXX.woff2) format('woff2')
}

h1 {
    font-family: Megrim, Cursive;
}

letter-spacing、word-spacing

letter-spacing 指的是字母之间的间距

word-spacing 指的是单词之间的间距

white-space

用来设置如何处理元素中的空白

属性值：

  • normal：连续的空白符会被合并，换行符会被当作空白符来处理
  • nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
  • pre：连续的空白符会被保留。在遇到换行符或者
    元素时才会换行。
  • pre-wrap：连续的空白符会被保留。在遇到换行符或者
    元素，或者需要为了填充时才会换行。
  • pre-line：连续的空白符会被合并。在遇到换行符或者
    元素，或者需要为了填充时会换行

深入CSS

选择器的特异度（Specificity）

CSS 的继承

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

可以通过 inherit 参数 来让所有没有指定 box-sizing 参数的子元素都显式地继承父级的属性（box-sizing不会自动发生继承）

 * {  
     box-sizing : inherit; 
 } 
 html {  
     box-sizing : border-box; 
 } 
 .some-widget {  
     box-sizing : content-box; 
 }

html 下的子元素会显式继承html中设置的 box-sizing：border-box；

.some-widget下的子元素会显式继承html中设置的 box-sizing：content-box ;

CSS 的初始值

CSS 中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值。

CSS 的求值过程

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

  2. 自身属性：width / height / margin / padding / border / background

  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient等等

布局是什么?

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

布局相关技术

  • 常规流
  • 浮动
  • 绝对定位

Width

  • 指定 content box 宽度
  • 取值为 长度、百分数、auto
  • auto 由浏览器根据其他属性确定
  • 百分数相对于容器的 content box 宽度

Height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 宽度
  • 容器有指定的高度时，百分数才生效

Padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

Border

  • 指定容器边框样式、粗细和颜色
  • 三种属性（border-style、border-width、border-color）
  • 四个方向（border-top、border-right、border-bottom、border-left）

Margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

盒模型

块级 VS 行级

Block Level Box：块级盒子

  • 不和其他盒子并列摆放
  • 适用所有的盒模型属性
  • body、article、div、main....
  • display: block

Lnline Level Box：行级盒子

  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的 width、height 不适用
  • span、em、strong、cite.....
  • display: inline

display属性

block 块级盒子

inline 行级盒子

inline-block 本身是行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行

none 排版时完全被忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内
  • 常规流中的盒子，在某种排班上下文中参与布局

行级排版上下文、块级排版上下文、Table 排版上下文（现在用的少了）、Flex 排版上下文、Grid 排版上下文

行级排版上下文

全称：Inline Formatting Context（IFC）

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

IFC 内的排版规则

  • 盒子在一行内水平摆放
  • 一行放不下，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素（这里就可以实现文字环绕的效果）

块级排版上下文

全称： Block Formatting Context（BFC）

某些容器会创建一个 BFC

  • 根元素
  • 浮动、绝对元素、inline-block
  • Flex 子项和 Grid 子项
  • overflow 值不是 visible 的块盒
  • display: flow-root;

BFC 内的排版规则

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

Flex 排版上下文

一种新的排版上下文

Flex 可以控制子级盒子：

摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行

主轴与侧轴：

flex-direction

表示内部元素是如何在 flex 容器中布局的，定义了主轴的方向有四个属性：

justify-content

表示如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间

align-items

属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

使用 align-self 来给某一个子项来设置对齐方式：

可以设置 order 来给 flex 中可伸缩项目在布局时的顺序

Flex可以

设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

Grid 排版上下文

  1. display: grid 使元素生成一个块级的 Grid 容器
  2. 使用 grid-template 相关属性将容器划分为网格
  3. 设置每一个子项占哪些行/列

划分网格

示例：

用 grid line 和 grid area 表示区域

Float浮动

主要用于实现文字环绕效果

给图片指定浮动，可产生文字环绕图片的效果

img {
  float:left;
}

Position 属性

static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非 static 祖先元素定位
fixed相对于视口绝对定位
avatar
文章
阅读
粉丝