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

html主要负责定制页面的结构，构成页面的主体。

前端要注意的方面：美观、安全、兼容、功能、体验、性能、无障碍。

前端与HTML

技术发展

Node
Electron
React Native
Web RTC
Web GL
WebASSEMBLY

开发环境

浏览器

IE/Edge
Chrome
Firefox
Safari

编辑器

VSCode
Vim
WebStorm

html文件主体

head：存放页面的信息
body：存放页面的主要内容

<html>
        <head>
                <title></title>
        </head>
        <body>
        </body>
</html>

常用的标签

标题标签

h1~h6从大到小的标题

<h1>字体排印学</h1>
<h2>历史</h2>
    <p>活字的雏形或可追溯至公元前两千年前后美
        索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
        均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
    <p>中国在唐代就已经出现雕版印刷术，公元868
        年的《金刚经》是现存最古老的印刷品之一，使用
        的技术即是木雕版印刷。</p>
<h2>应用</h2>
    <p>...</p>

列表标签

有序列表：ol li
无序列表：ul ui
自定义列表：dl dt dd dt与dd并不是一一对应的，可以出现多对多的情况

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

a标签(超链接)

<a href = "...." target = "?" >
href：超链接地址
target：_blank(新开一个页面)  _self(自身跳转页面)

多媒体标签

<img/>
<audio></audio>
<video></video>

input标签

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

blackquote标签

<blockquote cite="...">引用某一段文字

code标签

<code>const add = (a, b) => a + b;
const multiply = (a, b) => a * b;</code>引用代码

文字标签

<strong></strong>
<em></em>

内容划分

了解CSS

什么是CSS?

CSS是定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

在页面中使用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>

选择器

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
*{
    color: red;
    font-size: 20px;
}
</style>

标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
hi {
    color: orange;
   )
p {
    color: gray;font-size: 2apx;
   )
</style>

id选择器

<h1 id="logo"><img
    src-"https : / /assets.codepen.iof 5947 7/ h5-logo.svg” alt="HTML5 logo” width=”48”/>
    HTINL5文档
<h1>
<style>
#logo {
    font-size: 6opx;
    font-weight: 200;
    }
</style>

类选择器

<h2>Todo list</ h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn css</li>
    <li>Learn JavaScript</li>
</ul>
<style>
.done {
    color: gray ;
    text-decoration: line-through;
    }
</style>

属性选择器

<lahe1>用户名:</label>
<input value="zhao" disabled />
<label>密码:</label>
<input value="121456" type="password" />
<style>
    [disabled]{
        background: feee;
        color: 4999;
}
</style>

伪类选择器

标签放前类放后

颜色

RGB

rgb(53, 0, 0)
#000000(红，绿，蓝)

HSL

hsl(0,100%,50%)(红，绿，蓝)颜色比例

alpha透明度

#ff000000
rgba(255,0,0,0)
hsla(0,100%,50%,0)
最后一位是alpha透明度，0透明，1不透明

字体

font-family

通用字体族

Serif衬线体
Sans-Serif无衬线体
Cursive手写体
Fantasy夸张字体
Monospace等宽字体使用建议：
字体列表最后写上通用字体族
英文字体放在中文字体前面

font-size

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

font-style

字体形式

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

font-weight

字重

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
</style>

line-height

行高

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

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

font

font: style weight size/height family

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
  font: 14px serif;
}

text-align

文字对齐：left  center  right  justify

spacing

间距：
letter-spacing:  0px
word-spacing:  0px

text-indent

首段间距
text-indent:  48px

text-decoration

文字修饰：none  underline  line-through  overline

white-space

空白格：normal  nowrap  pre  pre-wrap  pre-line

深入CSS

特异度

id>(伪)类>标签

样式覆盖

先进性基础的设计，然后对特殊的某点进行覆盖

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

对于某一标签是有继承的能力的，对于下列strong标签并没有定义，但却可以继承p标签的color属性。

<p>This is a <em>test</em> of <strong>inherit</strong></p>
<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

显式继承

inherit关键字将不可继承的属性变得可以继承，也就是显式继承。

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

初始值

CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color: initial

CSS求值

filtering：对应用到该页面的规则用以下条件进行筛选:选择器匹配、属性有效、符合当前media等
cascading：按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值
defaulting：当层叠值为空的时候，使用继承或初始值
resolving：将一些相对值或者关键字转化成绝对值，比如 em 转为 px，相对路径转为绝对路径
formatting：将计算值进一步转换，比如关键字、百分比等都转为绝对值
constraining：将小数像素值转为整数

布局Layout

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

常规流

行级
块级
表格布局
FlexBox
Grid 布局

content->padding->border->margin->box

行级和块级

width

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

height

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

padding

指定元素四个方向的内边距
百分数相对于容器宽度分为padding-top，padding-bottom,padding-left,padding-right

border

三种属性
- 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
百分数相对于容器宽度

<div></div>

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

overflow

visible：全部可见，超过盒子界限
hidden：隐藏超过盒子界限的内容
scroll：在盒子边界形成滑动框

块级和行级

块级元素：body、article、div、main、section、h1-6、p、ul、li 等
行级元素：span、em、strong、cite、code 等，内容分散在多个行盒 (line box) 中
display属性：
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散
- none：排版时被忽略

行级排班上下文

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 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠

下列代码span是行级元素，div是块级元素，不会生成IFC，生成的是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>

Flex Box

一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

dispaly：flex，自左向右的排版方式，即使是块级元素也会按照flex方式排班。

flex-direction
- row
- rwo-reverse
- column
- column-reverse

主轴对齐

justify-content
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly

侧轴对齐

align-items
- flex-start
- flex-end
- center
- stretch
- baseline
align-self
order

Flexibility

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

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

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

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

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

flex缩写

Grid布局

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

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

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

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

grid line：网格线
grid erea：网格区域

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

.a {
  grid-area: 1/1/3/3;
}

.a {
  grid-area: 2/2/4/4;
}
.b {
  grid-area: 1/1/3/3;
}

绝对定位

position属性
static：默认值，非定位
relative：相对自身原本位置偏移，不脱离文档流
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right 设置偏移长度流内其它元素当它没有偏移一样布局
absolute：绝对定位，相对非static祖先元素定位
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
fixed：相对于视口绝对定位(总是相对于窗口进行定位)

HTML与CSS ｜ 青训营笔记