前端、HTML、CSS ｜青训营笔记

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

一.前端

1.什么是前端：

解决 GUI 人机交互问题
跨终端

- PC/移动浏览器
- 客户端/小程序
- VR/AR 等

Web 技术栈
解决图形界面下人机交互问题

2.前端需要的技术栈：

3.需要关注的方面：

人机交互，功能满足用户需求，无障碍，页面美观，安全、性能、兼容性

拓展方面

二.HTML

HyperText（图片、标题、链接、表格） Markup Language（<h1>文章标题</h1>）

1.DOCTYPE：

HTML5中一种标准通用标记语言的文档类型声明，指定使用的渲染模式，

目的： 告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档

2.DOM树

3.HTML语法：

标签和属性不区分大小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性可以省略，比如required、readonly

4.h1-h6

5.列表标签

<h2>有序标签：</h2>
<ol>
    <li>a</li>
    <li>b</li>
</ol>
<h2>无序标签：</h2>
<ul>
    <li>a</li>
    <li>b</li>
</ul>
<h2>缩进标签</h2>
<dl>
    <dt>导演</dt>
    <dd>陈凯歌</dt>
    <dt>主演</dt>
    <dd>张国荣</dd>
    <dd>范冰冰</dd>
</dl>

6.链接

a标签

href：点击之后跳转的地址

target="_blank"：target为窗口打开方式，_blank为新开页面

7.图片音频标签

1）图片标签

src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置

<img

src="lf3-static.bytednsdoc.com/obj/eden-cn…

alt="Metal movable type"

width="400"

2）音频视频标签

controls：展示默认播放界面

<audio

src="/assets/music.ogg"

controls

></audio>

<video

src="/assets/video.mp4"

controls

></video>

8.输入标签

输入：<input placeholder="请输入用户名">

滑块：<input type="range">

输入数字：<input type="number" min="1" max="10">

日期：<input type="date" min="2018-02-10">

文本框：<textarea>Hey</textarea>

效果：

9.选择标签

checkbox：多选

<p>

</p>

radio：只能选一个

<p>

</p>

下拉选择：

<p>

</select>

</p>

列表输入：

<option>Greece</option>

<option>United Kingdom</option>

<option>United States</option>

</datalist>

10.文字展示标签

<pre>:预格式化

<code>:放代码的标签

<em>：突出显示的词

<strong>:含义上的强调

<\blockquote cite="[t.cn/RfjKO0F">

<p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。</p>

</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

const add = (a, b) => a + b;

const multiply = (a, b) => a * b;

</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

11.内容划分

12.语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

- 有序列表用 ol；无序列表用 ul
- lang 属性表示内容所使用的语言

好处：

代码可读性
可维护性
搜索引擎优化
提升无障碍性

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

三.了解CSS

1.css组成：

2.三种使用方式：

外链
<linkrel="stylesheet"href="/assets/style.css">
嵌入
<style>
li { margin: 0; list-style: none; }
p { margin: 1em0; }
</style>
内联
<pstyle="margin:1em 0">Example Content

3.工作原理：

4.选择器（Selector）

找出页面中的元素，以便设置样式
方式：

- 标签名
- 类名
- id
- 属性
- 在dom树中位置

1）通配选择器：*{}

2）标签选择器：p{}，h1{}

3）id选择器：设置id后，#id{}

4）类选择器：设置class属性，.class值{}

5）属性选择器：标签中的属性，[属性]{}

6）属性值选择器：例：① input[type="password"] { } ，② a[href^="#"] {}：^以什么开头，③ a[href $=".jpg"] {}：$ 以什么结尾

4.伪类

不基于标签和属性定位元素

状态性伪类：根据元素某一状态选中，指定样式
结构性伪类：根据元素某一结构选中，指定样式

1)状态性伪类：

<\a href="example.com"> example.com</a>

<style>

a:link {

color: black;

}

a:visited {

color: gray;

}

a:hover {

color: orange;

}

a:active {

color: red;

}

:focus {

outline: 2px solid orange;

}

</style>

2）结构性伪类：

<ol>
<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>

5.组合 (Combinators)

名称	语法	说明	示例
直接组合	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

6.选择器组

标签：

body, h1, h2, h3, h4, h5, h6, ul, ol, li {

margin: 0;

padding: 0;

}

属性：

[type="checkbox"], [type="radio"] {

box-sizing: border-box;

padding: 0;

}

7.颜色

#00 00 00，rgb(0, 0, 0)

8.透明度（alpha ）

越小越不透明

#ff0000ff，rgba(255, 0, 0, 1)，hsla(0, 100%, 50%, 1)

9.字体（font-family）

h1 {

font-family: Optima, Georgia, serif;

}

body {

font-family: Helvetica, sans-serif;

}

1）通用字体族：

注意：

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

2）字体大小（font-size）

3）字体风格（font-style）：指定斜体等

4）字重（font-weight）：字体粗细

5）行高（line-height）：字体行高

6）对齐方式（text-align）： left center right justify

7）间距（spacing）：letter-spacing（单词之间），word-spacing（字符之间）

8）文本装饰（text-decoration）：none 、underline 、line-through 、overline

四.深入CSS

1.继承

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

1）初始值：

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

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

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

- background-color: initial

2）求值过程：

2.布局

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

1）相关技术：

2）盒子模型：

①width：

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

②height

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

③padding：

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

④border：

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

样式：

solid：实线
dashed：虚线
dotted：点状虚线
三种属性

- border-width
- border-style
- border-color

四个方向

- border-top
- boder-right
- border-bottom
- border-left

例子：

border: 1px solid #ccc;

border-left: 1px solid #ccc;

border-right: 2px dotted red;

border-width: 1px 2px 3px 4px;

border-style: solid;

border-color: green blue;

border-left-width: 3px;

border-top-color: #f00;

⑤margin：

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

margin:auto 水平居中

3.box-sizing: border-box

4.overflow

visible ：显示
hidden：隐藏
scroll：滑块

5.块级 vs 行级

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

6.display属性

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

7.常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局

8.行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则

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

9.块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC

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

10.BFC 内的排版规则

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

11.Flex Box

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

- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

12.Flex模式

flex-direction：

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

13.Grid模式

14.浮动

float：left，靠左或靠右

15.position属性

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

relative：

absolute：

标签组合 (Combinators)

名称	语法	说明	示例
直接组合	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

前端、HTML、CSS ｜ 青训营笔记

前端、HTML、CSS ｜ 青训营笔记

一.前端

1.什么是前端：

2.前端需要的技术栈：

3.需要关注的方面：

二.HTML

1.DOCTYPE：

2.DOM树

3.HTML语法：

4.h1-h6

5.列表标签

6.链接

7.图片音频标签

1）图片标签

2）音频视频标签

8.输入标签

9.选择标签

10.文字展示标签

11.内容划分

12.语义化

三.了解CSS

1.css组成：

2.三种使用方式：

3.工作原理：

4.伪类

1)状态性伪类：

2）结构性伪类：

5.组合 (Combinators)

6.选择器组

7.颜色

8.透明度（alpha ）

9.字体 （font-family）

四.深入CSS

1.继承

2.布局

1）相关技术：

2）盒子模型：

①width：

②height

③padding：

④border：

⑤margin：

3.box-sizing: border-box

4.overflow

5.块级 vs 行级

6.display属性

7.常规流 Normal Flow

8.行级排版上下文

9.块级排版上下文

10.BFC 内的排版规则

11.Flex Box

12.Flex模式

13.Grid模式

14.浮动

15.position属性

标签组合 (Combinators)

前端、HTML、CSS ｜青训营笔记

前端、HTML、CSS ｜青训营笔记

9.字体（font-family）