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

HTML

前端的边界

node.js ⇒ 开发服务器端的应用

electron / react native ⇒ 开发客户端的应用

WebRTC ⇒ P2P多人会议

WebGL ⇒ 3D游戏的效果

HTML基本内容

DOM树

列表

ol 有顺序 每一项: li

ul 无顺序 每一项: li

（定义列表）dl 每一项: dt 补充 dd

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
	<dd>张丰毅</dd>
</dl>

链接

**//替换当前页面**
<a href="<https://www.bytedance.com/>">
  字节跳动官网
</a>

**//打开新的**
<a href="<https://www.bytedance.com/>" target="_blank">
  字节跳动官网
</a>

音视频

加controls ⇒ 加默认控制按钮

eg

<audio src="/assets/music.ogg" controls > </audio>

输入

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

**//滑动条**
<input type="range">

<input type="number" min="1" max="10">

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

**//文本块**
<textarea>Hey</textarea>

选择

单选 <input type="radio" name="sport" />

多选 <input type="checkbox" />

下拉框

<select> + <option>

or (可输入，也有默认)

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

文字展示

blockquote 块引用

cite 短引用

<q>A</q> 等同于 “A”

<code> 代码

长代码：<pre> <code> </code> <pre> //pre表示与格式化

突出重点: <strong> （加粗）<em> (斜体)

CSS

CSS使用方式

<!-- 1.外链 -->

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

<!-- 2.嵌入 -->

<style>

li { margin: 0; list-style: none; }

p { margin: 1em 0; }

</style>

<!-- 3.内联 -->

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

选择器

通配选择器

css: *{} 使用：全部

标签选择器

css: h1{} 使用：<h1>A</h1>

id选择器

css: #logo{} 使用：<h1 id = “logo”>A</h1>

类选择器

css: .done{} 使用：<h1 class = “done”>A</h1>

（id 唯一 class 不唯一）

属性选择器

css: [disabled]{} 使用：<input value="zhao" disabled />

eg1.

css:

a[href="<http://www.w3school.com.cn/"][title="W3School>"] {color: red;}

有效果 <a href="www.w3school.com.cn/" title="W3School">W3School</a>

无效果 <a href="w3school.com.cn">W3School</a>

eg2.

限定属性的值 <input type="password" value="123456" />

css： \input[type="password"] {}

eg3.

<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^="#"] =⇒ #开头

a[href$=".jpg"] =⇒ $结尾

伪类选择器

(不基于标签和属性定位元素) = 状态伪类 + 结构性伪类

状态伪类

eg.

<style>
a:link {}
a:visited {}
a:hover {}
a:active {}
:focus {
  outline: 2px solid orange;
}
</style>

:focus 对于input输入框 / 链接按下多了个框 outline：外框

结构性伪类

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
</ol>

<style>
li {}

li:first-child {
  color: coral
}

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

效果图

选择器组合

后代组合：nav a 只要a在nav里面都可以满足

亲子组合： nav > a a只能直接在nav里面

相邻选择器 A + B， B满足css的样式

颜色

RGB & HSL（H：色相， S：饱和度，L：亮度）

eg: hsl(176,100%,77%) 0~ 360，0~100%，0~100%

加不透明度 rgba hsla

字体

font-family ：。。。。

通用字体族

规范化

字体最后写通用字体族

先写英文字体，再写中文字体（提高性能）

WebFonts

使用方式

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

字体大小

长度：px，em

百分比：相对父元素的字体大小

行高：

数字1.6表示字体大小的1.6倍

简写

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

文本对齐：中间/左/右/两端(justify)对齐

空白符

white-space

normal 合并多个空格

nowrap 合并多个空格，强制不换行 （wrap :换行/包装）

pre 保留所有的空格和换行符号

pre-wrap 保留所有的空格和换行符号，会加上自己的换行（因为太长）

pre-line 合并空格，保留换行符号

选择器的规则

特异度

比大小

具体：

1.行内样式(Inline Style), 有最高的优先级

2,统计ID选择符的数量,比大小，越大越好，相同转3

3.统计类选择符(如，.test)，属性选择符(如，[type=”submit”])和伪类(如，:hover)的总和,越大越好，相同转4

4.统计元素类型选择符(如，div)和伪元素(如，:first-letter)

eg ”.btn .primary” 会覆盖 “.btn” =⇒ 实现复用

CSS的继承

eg：color的属性值

强制继承设置为：inherit;

eg：

* {
  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

布局

相关技术：常规流 浮动 绝对定位

盒模型

margin-border-padding-content

width 和 height 对应content 如果设置为100%，一定要看父级有没有指定高度

padding-top/bottom/left/right 对应padding

border-top/bottom/left/right 对应boarder

eg:  border: 1px solid #ccc; //粗细 样式 颜色

margin-top/bottom/left/right 对应margin

margin 在 垂直方向上会重叠，取max

box-sizing :border-box 表示= border + padding + content

指定 box-sizing: border-box; 然后 写width: 100%; 比较合理，就不会有滚动条

overflow : visible / hidden / scroll（滚动条）

display 属性

block 块级盒子 eg.

<style>
  .container {
    display: flex;
  }

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

  .a {
    flex-grow: 2;
  }

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

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px
//类似 1 1 1
//    1 1