1. 前端做什么

用 web 标准技术 html css js svg http 等

做界面与交互

功能+美观+无障碍+安全+兼容+性能+体验

2. 知识图谱/技术栈

2.1. 语言

2.2. 行业标准

2.3. 框架

2.4. 兼容性

2.5. 编程思想

2.6. 调试

2.7. 工程化

2.8. 安全性

2.9. 性能

2.10. 团队协作

2.11. 交互设计

3. 前端边界

node、electron、react native、webRTC、WebGL、WEBAssembly

4. HTML

4.1. doctype

4.2. 语义化

4.3. 标签

4.3.1. flow 流式元素:

4.3.2. 看规范

4.4. HTML 扩展

4.4.1. meta 标签(增加元数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 编码 -->
<meta charset="utf-8">

<!-- 指定http header -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

<!-- seo优化 -->
<meta name="keywords" content="关键词">
<meta name="description" content="页面介绍">

<!-- 移动设备的viewport 初始缩放比例,视口宽度 -->
<meta name="viewport" content="initial-scale=1">

<!-- 关闭IOS电话号码识别 -->
<meta name="format-detection" content="telphone=no">

<!-- 360等双核浏览器 指定渲染内核 -->
<meta name="renderer" content="webkit">

<!-- 指定IE渲染模式 -->
<meta name="X-UA-Compatibla" content="IE=Edge">

4.4.2. data-*属性(规范内-自定义的属性)

1
2
3
datasetAPI
<el data-id=""/>
el.dataset.id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 引入css -->
<link rel="stylesheet" href="" />

<!--
浏览器性能优化:dns预解析rel=dns-prefetch、资源预加载rel=prefetch、预渲染 rel=prerender
-->
<link rel="dns-prefetch" href="" /> <link rel="prefetch" href="" />
<link rel="prerender" href="" />

<!-- favicon:rel=icon -->
<link rel="icon" type="image/png" href="" />

<!-- RSS:rel=alternate -->
<link rel="alternate" type="application/rss+xml" href="" />

4.4.4. JSON-LD

LD:linkdata 链接的数据 (直接在页面嵌 json 数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "John Doe",
"jobTitle": "Graduate research assistant",
"affiliation": "University of Dreams",
"additionalName": "Johnny",
"url": "http://www.example.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "1234 Peach Drive",
"addressLocality": "Wonderland",
"addressRegion": "Georgia"
}
}
// 应用例如分享页面时的数据
// 搜索引擎能识别等等
// 分享链接带有一些标题图片等信息
</script>

4.5. Web 无障碍/Accessibility

4.6. 工具

4.7. 参考链接

全局属性

class id style

title

(兼容性最好的 tooltip😂)

tabindex

tab 键控制次序

lang

语言代码(利于语义化机器理解)(语言代码参考手册http://www.runoob.com/tags/html-language-codes.html)

dir

文本方向(rtl ltr auto)

accesskey

元素的键盘访问快捷键(例值为’h’则不同浏览器不同 OS 有不同的操作方式,例 chrome 是 alt + ‘h’)

(HTML5 全局属性)

data-*属性

属性名不要包含大写字母,在 data- 后必须至少有一个字符。
该属性可以是任何字符串

1
el.getAttribute("data-xx")

hidden

不需要属性值,隐藏元素,原理是 display:none

contenteditable

元素是否可编辑

contextmenu

(说是目前只有 firefox 支持,亲测没效果

1
2
3
4
5
<p contextmenu="mymenu"></p>
<menu id="mymenu">
<command label="xxx" onclick="fn()"/>
<command label="xxx" onclick="fn()"/>
</menu>

draggable:(与 HTML5drag 结合用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。可把该段落拖入上下的矩形。</p>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

dropzone 属性:

规定当被拖动的数据在拖放到元素上时,是否被复制### 动或链接,无浏览器支持

sppelcheck:

对元素的文本进行拼写检查

translate 属性:

规定元素内容是否要翻译,=yes|no

遗留

表单元素 属性 datalist select 下拉多选 input 的 multiple 属性 button 的 type 属性默认值
video 不能嵌套 img
p 不能嵌套 div
figure dfn cite 标签


“因为你永远不知道你不知道的有多少”