面布局（layout）

header 头部/页眉；

index 首页/索引；

logo 标志；

nav/sub_nav 导航/子导航；

banner 横幅广告；

main/content 主体/内容；

container/con 容器；

wrapper/wrap 包裹（类似于container）；

menu 菜单；

sub_menu/second_menu 子菜单/二级菜单；

list 列表；

section 分区/分块（类似于div）;

article 文章；

aside 侧边栏/广告；

footer 页脚/底部；

title/sub_title 标题/副标题；

news 新闻；

hot 热点；

pro 产品（product）；

company 公司；

msg/info 信息（message）/消息；

ads 广告（advertisements）;

icon 小图标；

img 图片（image）；

copyright 版权；

contact_us 联系我们；

friend_link 友情链接；

tel 联系电话（telephone）；

address 地址；

& nbsp; 空格（&和n之间的空格去掉,不要忘记分号）;

<br/> (文字末尾添加)换行；

CSS样式（style） CSS 层叠样式表 (Cascading Style Sheets) ；

background 背景；

background: -webkit-gradient(top red orange yellow green lightblue blue purple) 颜色渐变；

position 位置/定位；

relative/absolute/fixed 相对定位/绝对定位/固定定位；

float 浮动；

clear 清除；

vertical-align: middle/top/bottom; 垂直居中/上/下；

line-height 行高；

margin 外边距；

padding 内边距；

border 边框；

solid/dashed/dotted 实线/线虚线/点虚线；

border-radius 圆角；

shadow 阴影；

display 展示；

hidden 隐藏；

block/inline-block 块元素/行内块；

overflow 溢出；

cursor 光标；

cursor:pointer; 鼠标移上变为小手；

animation 动画；

css sprites 雪碧图/图片精灵；

column 分列；

flex 弹性（布局）；

表单（form）与表格（table）

form 表单；

action 行为；

method 方式/方法；

input 输入框；

label 标签；

password 密码；

radio 单选框；

checkbox 复选框；

btn 按钮（button）；

submit/reset 提交/重置；

textarea 文本域；

select/option 选择框/选择项；

placeholder 占位符（起提示作用）；

search 搜索；

icon 小图标；

autofocus 自动聚焦；

disabled 禁用；

checked 选中（单选框/复选框）；

selected 默认选择项（下拉选择框）；

required 必填项；

readonly 只读；

table 表格；

thead/tbody/tfoot 表格标题/主体/底部；

colspan 跨列；

rowspan 跨行；

cellspacing 单元格间距（类似于margin）；

cellpadding 单元格边距（类似于padding）；

border-collapse: collapse; 边框合并（用于table上）；

脱离字幕的背单词mp3的特点：每个单词的完整的语音由单词读音、单词拼读、中文释义读音三部分组成，因此用这样的mp3背单词可以不用同步的lrc字幕，闭着眼睛也能背单词。

一、前提条件。为了制作高质量的背单词mp3，必须在要制作的电脑上有高质量的单词真人语音库(wav格式)，并安装高质量的TTS语音朗读引擎。wav格式的真人语音库及语音朗读引擎下载网址：http://www.lingoes.cn/zh/translator/speech.htm#lingoesenglish

当然，用口诀背英语单词 V3.399 绿色版的软件设置必须正确，软件的帮助文件中已有详细说明。

二、制作wav声音文件。以下制作高考单词3600mp3为例说明操作的主要步骤：

（一）打开“高考单词3600.xls”，复制要制作的内容。

（二）在用口诀背英语单词的主菜单上单击“录制wav”,打开“单词测试、朗读及录音”窗口，单击“粘贴导入”按钮，结果如下图所示：

为前端工程师，能根据需求快速确定样式的书写方案，回忆起曾经见过的 CSS 套路，如行云流水一般让界面成型，是多么地畅快。把样式早点搞定，不管是去写逻辑部分、捯饬基础设施，还是提早下班，都是很好的。

但人力终有穷，为什么有时候看着一个设计给出的需求得折腾半天才能实现出来呢？这和我们在初学英语时写作文磕磕绊绊、与外教对话磕磕巴巴是很相似的，归根结底还是「基础不牢」、「套路过少」。

那么那些快速打牢英语基础、记熟语言交流模板的外语达人是怎么「不用很麻烦很累就提升英语能力」的呢？

答案就是 Anki，一个艾宾浩斯遗忘曲线的全领域通用记忆系统，可以帮助你用科学的方法记忆任何事物：法语单词、《亲密关系》的读书笔记、排序算法……当然还包括 CSS啦！

Anki 是跨平台的开源软件，名字来源于日语「暗記（あんき）」，下载地址就在 Github 上：

桌面版： https://github.com/ankitects/anki

Android 版： https://github.com/ankidroid/Anki-Android/

其最基本的功能是添加问答卡片（点击上图中的「添加」按钮），熟悉前端数据流的你可能会意识到这就是 Model：

作为前端工程师，我们还会发现 Anki 的数据和展示是分离的，点击上图中的「卡片…」按钮，可以打开卡片编辑器，熟悉前端数据流的你可能会意识到这就是 View：

模板分为「正面模板」和「反面模板」：

「正面模板」即是 Anki 在复习时向你提问的界面的模板，以我写的卡片为例，其最终渲染结果是这样的：

而背面模板就是点击「显示答案」后展示的答案的模板。

你可以使用 JavaScript 来添加一些自定义的效果，可惜的是不能使用 npm 包，只能做一些倒计时、填空选择、文本高亮等等效果：

Anki 会隔一段时间帮你复习这个问题，例如问题可以是「如何用 CSS 画半透明带阴影的箭头？」，当你看到问题后花 5 秒回忆答案，然后点击「显示答案」。

如果完全想不起来要怎么画，脑子一片空白，感觉面试被问到这题就惨了，那请点击下图中的「生疏/错误」的红色按钮，Anki 会帮你计划下一次复习时间（一般是 10 分钟后复习巩固一次）。

如果想不起来，但是看到答案之后恍然大悟，奇怪自己刚刚为什么想不起来，就点击灰色的「困难/模糊」按钮；如果想起来了，就点击绿色的「犹豫/想起」；如果感觉这个卡片太简单了，最近不需要再复习，就点击蓝色的「顺利/正确」按钮。

那么我们在哪里可以找到别人整理好的 CSS 知识点卡包呢？

首先可以到官方的牌组分享网站上搜索，网址是 https://ankiweb.net/shared/decks/css，Ankiweb 和 Github 很类似，也是靠大家上传自己的成果互相分享共同建设的。

其次是自己逛 css-tricks.com、www.awwwards.com 等设计网站时，看到值得记忆的内容便摘录下来放到 Anki 里复习，如钱钟书作读书笔记一样，日积月累最终成就大师。

不一样的是钱钟书的笔记作完就堆起来，而信息化时代的我们可以由 Anki 这个调度器来调整复习的频率，让想记住的每个内容都永不遗忘。

对于任何一个知识点，我们都是「一回生二回熟，三回四回成朋友」，所以人脑的遗忘曲线是这样的一条曲线：

有时候你以为自己看完一个 CSS 样式分享觉得很酷，觉得自己会永远记住，下次肯定想得起来。但事实是 10 分钟左右就足够这个知识点从短期记忆中被清空，并不会进入长期记忆。除非有 Anki 这样的系统自动安排复习时间。

想了解更多记忆曲线相关的细节，可以看 NickyCase 的「如何永远记住任何东西」，本文记忆曲线相关图片来自他的交互式教程： https://ncase.me/remember/zh.html