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

HTML

结束标签

有些标签，我们一般不在其中嵌套东西，所以不用写</xxx>了，直接<xx />就可以了。

HTML标签

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

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

属性值推荐用双引号包裹

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

列表

ol——order list，有序列表

ul——unorder list，无序列表

dl——定义列表，定义key-->dt(description title)、value-->dd(description definition)

链接

target="_blank"打开新窗口

音视频

audio、video，可以使用controls属性控制是否显示进度条啥的，如果不写，就不会显示。

输入

textarea——多行文本

type="checkbox"——多选

type="radio"——单选

<select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
</select>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

修饰标签

blockquote引用

cite短引用

code代码。注：多行代码会在前面再加一个pre

q标记短的引用。注：浏览器经常在引用的内容周围添加引号。

strong强

em需要突出表示的词

内容划分

语义化

要求

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

开发者应该遵循语义来编写HTML，而不是根据样式选择标签！

e.g.

不应该
<p style="font-size:32px">前端工程师的自我修养</p>
应该是
<h1>前端工程师的自我修养</h1>

必要性

开发者 - 修改、维护页面

浏览器 - 展示页面

搜索引擎 - 提取关键词、排序

屏幕阅读器 - 给盲人读页面内容

CSS

CSS 是什么？

Cascading Style Sheets

用来定义页面元素的样式

设置字体和颜色

设置位置和大小

添加动画效果

使用CSS

外链

嵌入

内联

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

选择器

通配选择器

<style>
* {
}
</style>

标签选择器

id选择器

适用于单个元素。一般情况下id是唯一的。

类选择器

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

根据有没有属性来选择。

甚至可以根据属性值来选择

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

甚至可以根据属性对应字符串的开头和结尾来选择

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类

状态伪类

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

结构伪类

e.g. first-child、last-child

下面实现：第一个元素橙色，最后一个元素没有下边框。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

选择器的组合

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  直接组合，记得标签名放前面。
  input.error {
    border-color: red;
  }
</style>

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

选择器组

用逗号隔开

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

RGB

e.g. #000000、rgb(0, 0, 0)

HSL

常用于一个颜色发生一些改变时，例如按下按钮，想让他更深一些，那么就可以调整L参数。

H——Hue，色相(H)是色彩的基本属性, 如红色、黄色等; 取值范围是0-360。

S——Saturation，饱和度(S)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。

L——Lightness，亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha透明度

e.g. #ff0000ff、rgba(255, 0, 0, 1)、hsla(0, 100%, 50%, 1)

字体

font-family

通常使用font-family属性设置字体。

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

为啥设置了多个font-family？本身family就是一个家族。不同设备上存的字体有限，从前往后遍历即可。

建议：

最后放上通用字体组

建议英文字体放前面，中文字体放后面

font-size

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

font-style

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }

  .normal {
    font-style: normal;
  }

  .italic {
    font-style: italic
  }
</style>

font-weight

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

有时候看着变化不明显，那其实是字体不支持。

line-height

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

不带单位，用例如1.6的数字，表示为字号的倍数。

font

font: style weight size/height family;
font: size family;

text-align

justify两端对齐。

spacing

letter-spacing

word-spacing

text-indent

首行缩进

text-decoration

下划线啥的

white-space

可以控制空白符（空格、换行符）的展示方式。

normal合并相同的

nowrap强制不换行

pre保留所有的

pre-wrap保留换行

通用字体组

Web Fonts

先用@font-face规定字体名称，规定完就可以在其他地方写在font-family里面了。

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

布局

是什么

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流

行级

块级

表格布局

FlexBox

Grid 布局

浮动

绝对定位

盒子模型

基本参数

height——指定 content box 高度，容器有指定的高度时，百分数才生效。

weight——指定 content box 宽度。

padding——如果指定为百分数，则相对于容器宽度而言。

border——指定容器边框样式、粗细和颜色

margin——指定元素四个方向的外边距

技巧——四条边颜色不同->三角形

border给干成0，四条边颜色不同，就可以出来三角形。

技巧——margin:auto水平居中

<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

技巧——指定border-box

box-sizing: border-box;

这样一来，你所指定的width和height就不是content-box的大小了！而是border-box的大小！

<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

margin塌陷

两个盒子挨在一块，一个有下margin，一个有上margin。是简单相加不？不是！

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

行级与块级

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

记得再看看

常规流 Normal Flow

行级排版上下文

即Inline Formatting Context (IFC)，只包含行级盒子的容器会创建一个IFC

IFC 内的排版规则：

盒子在一行内水平摆放

一行放不下时，换行显示

text-align 决定一行内盒子的水平对齐

vertical-align 决定一个盒子在行内的垂直对齐

避开浮动(float)元素*

简而言之，从左往右排。如果一行排不开，就会分成多行。每一行都是一个行级盒子。

下面这个例子中，如果缩的很小，会发现会自动换行。

这是因为——div内部都是inline-block

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

块级排版上下文

即Block Formatting Context (BFC)

某些容器会创建一个BFC

根元素

浮动、绝对定位、inline-block

Flex子项和Grid子项

overflow 值不是 visible 的块盒

display: flow-root;

BFC 内的排版规则

盒子从上到下摆放

垂直 margin 合并

BFC 内盒子的 margin 不会与外面的合并

BFC 不会和浮动元素重叠

简而言之，从上往下排。

混合（块级+行级）

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

在这个例子中，会有两个匿名的块级的盒子来包裹元素，即变成BFC了。

Flex布局上下文

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

摆放的流向 ( → ← ↑ ↓ )

摆放顺序

盒子宽度和高度

水平和垂直方向的对齐

是否允许折行

一旦给父元素设置了display: flex;属性，内部就是Flex布局上下文了

flex-direction

justify-content

align-items

align-self

order

flexibility

可以认为flex布局中的每一个子元素都是有弹性的。

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

flex-grow 有剩余空间时的伸展能力，然后下一步会按比例瓜分剩余空间。

flex-shrink 容器空间不足时收缩的能力

flex-basis 没有伸展或收缩时的基础长度

e.g. flex-grow

暂时无法在飞书文档外展示此内容

e.g. flex-shrink

暂时无法在飞书文档外展示此内容

当然可以用一个flex属性，把flex-grow和flex-shrink混合在一起。

grid布局

flex已经如此优秀了，为什么还会有grid呢？

因为flex是一维的，grid可以二维。

基本操作

display: grid 使元素生成一个块级的 Grid 容器

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

设置每一个子项占哪些行/列

e.g.

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px;

e.g.

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto;

e.g. 注：fr可以简单的理解为“份”

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto;

划分好空间后，就可以使用网格线来规定各个元素的位置了。

float浮动

有了flex和float，float用的就比较少了。float常用于图文排版了。

position属性

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

relative

在常规流里面布局，不脱离文档流

相对于自己本应该在的位置进行偏移

使用 top、left、bottom、right 设置偏移长度

流内其它元素当它没有偏移一样布局

absolute

脱离常规流

相对于最近的非 static 祖先定位

不会对流内元素布局造成影响

fixed

fixed可以看成absolute的特例，只不过是直接相对于视图定位。

强调的思路，Review！

HTML & CSS｜ 青训营笔记

HTML

结束标签

HTML标签

列表

链接

音视频

输入

修饰标签

内容划分

语义化

要求

必要性

CSS

CSS 是什么？

使用CSS

选择器

通配选择器

标签选择器

id选择器

类选择器

属性选择器

伪类

状态伪类

结构伪类

选择器的组合

选择器组

颜色

RGB

HSL

alpha透明度

字体

font-family

font-size

font-style

font-weight

line-height

font

text-align

spacing

letter-spacing

word-spacing

text-indent

text-decoration

white-space

通用字体组

Web Fonts

布局

是什么

布局相关技术

盒子模型

基本参数

技巧——四条边颜色不同->三角形

技巧——margin:auto水平居中

技巧——指定border-box

margin塌陷

行级与块级

常规流 Normal Flow

行级排版上下文

块级排版上下文

混合（块级+行级）

Flex布局上下文

flex-direction

justify-content

align-items

align-self

order

flexibility

grid布局

基本操作

float浮动

position属性

relative

absolute

fixed

HTML & CSS｜青训营笔记