一、HTML

1. 默认标签

meta标签：charset/name/http-equiv，描述网页属性

<meta charset='utf-8'>  定义文档字符编码
<meta name='keywords' content='HTML'>  关键词
<meta name='description' content='HTML 基础'>  页面描述
<meta name='viewport' content='...'>  移动端定义屏幕显示网页区域
<meta "http-equiv"='expires' content='31 Dec 2021'>  自定义，向特定网站提供信息

title标签：页面的标题，显示在浏览器标签页上
style标签：CSS样式
link标签：链接
script标签：可执行脚本（js）

<script type="text/javascript" src="javaxcript.js">
<script defer>  立即下载，延迟执行，dom被完成解析显示后执行，只对外部脚本有效
<script async>  立即下载脚本，不妨碍其他操作，只对外部脚本有效

2. 常用元素

内联元素（行内元素）：只占据边框所包含空间，不可设置宽高

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素：占据其父元素的整行，总是从新行开始

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行内块元素：行内排列，可设置宽高

<img>、<input>、<td>

3. 语义化-区块

header标签：介绍性或者辅助导航信息，如标题、logo、搜索框、作者名称等，不能放在footer、address、或另一个header标签里面
nav标签：提供导航链接，如菜单、目录、索引等
article标签：独立的文档、页面、应用、站点，可独立分配或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等等
section标签：按主题将内容分组，通常出现在文档的大纲中
aside标签：独立的部分，通常放在侧边栏，用于广告展示、tips、引用内容等
footer标签：表示最近一个章节的页脚，通常包含改章节作者、版权数据或文档链接等信息，不包含在大纲中

4. 语义化-分组

figure标签：包裹被独立引用的内容，图标、插图、代码等，通常有一个标题
figcaption标签：与其相关联的图表的说明/标题，通常位于figure标签的第一或者最后一个
blockquto标签：块级引用，cite属性表示该来源的url

<figure>
    <blockquto cite="网址">
        <p>段落</p>
    </blockquto>
    <figcaption>标题</figcaption>
</figure>

dl/dt/dd标签：用于描述一组键值对，通常用于元数据、术语定义等场景

5. 语义化-文本

cite标签：引用作品标题，包括论文、文件、书籍、电影的引用
time标签：机器可读的时间和日期，datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期
address标签：联系信息
mark标签：在引用中使用，表示需要引起注意
code标签：代码片段
small标签：免责声明、注意事项

6. 多媒体元素

-img标签：src图片嵌入路径、alt图像的文本描述、decoding解码方式、loading懒加载 -picture标签：元素通过包含零个或多个source元素和一个img元素来为不同显示设备场景提供相应的图像版本
media属性：依据的媒体条件渲染相应的图片，类似媒体查询
type属性：MIME类型，根据浏览器支持性渲染相应的图片

video/audio标签：src视频嵌入路径、controls是否展示浏览器自带控件、autoplay是否自动播放、source表示视频的可替代资源

7. HTML解析

DOM：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问，将web页面和脚本语言连接起来

构建DOM熟
样式计算，构建CSSOM树
将DOM和CSSOM组合成一个Rebder树
布局计算
绘制

三、CSS

1. 选择器

通用选择器：选择所有元素。
元素选择器：所有指定该类型的HTML元素
ID选择器：具有特定ID的元素，一个文档中，每个 ID 属性都应当是唯一的。
类选择器：具有特定类的元素，按照给定的 class 属性的值，选择所有匹配的元素。
属性选择器：按照给定的属性，选择所有匹配的元素 伪类选择器：
伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子： a:visited 匹配所有曾被访问过的 <a> 元素。
伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
例子： p::first-line 匹配所有 <p> 元素的第一行。

2. 盒模型

块级盒子（Block box）和内联盒子（Inline box）
margin:设置外边距
border:设置边框
padding:内边距
width&height；内容宽高
box-sizing：修改宽高的定义范围
display：改变盒子是块级或内联属性
弹性布局display：flex；定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

3. 定位

静态定位position：static，默认定位方式
相对定位position：relative，应然占据原来位置
绝对定位position：absolute，相对于一个非static定位的父元素进行定位
绝对定位position：fixed，相对于窗口的绝对定位
定位权重z-index，值越小越底层

4. 装饰

文本text：用于定义与文本修饰相关的功能，例如下划线，文本阴影和强调标记。去除下划线text-decoration:none
背景background：用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size， background-attachment。对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。
边框border：用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。
阴影box-shadow
文字阴影text-shadow
鼠标样式cutsor
过渡transition：为一个元素在不同状态之间切换的时候定义不同的过渡效果
动画animation

5.调试

从页面上选择一个元素，可以通过以下方法：

右键该元素，选择审查元素（Inspect）
从 DevTools 左侧 HTML tree 中选择该元素
如果查看 HTML 右边的 Rules view 栏，能看到元素的 CSS 属性与值。

6.扩展

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。

这里是一些最流行的CSS预处理器:

7.革新

学会用javascript的力量武装css

三、UI设计

背景：前端可能要对产品最终呈现出的形态负责
功能导向：交付功能、简约设计、用简单的笔纸开始、先开始后迭代
设计原则：页面要有层级，突出重点；页面布局、颜色、样式的设计要协调、整齐，整体要有一致性
《写给大家的设计书第四版》四个原则：对比、重复、亲密性、对齐
设计体系：居中布局；保持内容的一个合适宽度（常用600-800px）、维持可读性、多列布局
间距：保持元素之间的间距、提供规范的选项供开发时选择、多留白、表达关联关系，通过行高和列表间距突出亲密关系
文字：提供规范的选项可供选择、结合字重和颜色配合设计层级、对齐baseline重心对齐、行高与字号成反比
功能色：红色警告、黄色提示、绿色通过
色盘：深色前景，浅色背景
不能打破层级平衡
可以增加图标以适应色盲用户
图片上的层级：增加蒙层、或者文字增加阴影突出重点
自学资源：MDN官网、菜鸟教程等

HTML、CSS、UI设计