为什么要学些基础的内容
因为基础是考核候选者能力的最简单/有效的方法(本质就是应对八股文考试,实际工作中肯定不会记住所有的，有需要查一查，能记住八股文的内容当然最好)。
那为什么不是算法呢？算法固然重要，但是不是最直观的，并且常规的前端开发对算法的要求并不高。更有可能后面企业对基础知识考查会变少，算法会变多…
学习方法
- 如果是一个前端工程师，时长巩固
- 不是前端工程师，可以大概知道前端 HTML 构成
HTML 概念
HyperText Markup Language 超文本标记语言。
HTML 作用
HTML 就是负责描述页面的语义
一个 demo 认识 html
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>页面标题</title> </head> <body> <h1>标题</h1> <p>段落</p> </body>
</html>
| 标签 | 说明 |
|---|---|
**<!DOCTYPE html>** |
声明为 HTML5 文档 |
**<html>** |
元素是 HTML 页面的根元素 |
**<head>** |
元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 **utf-8**。 |
**<title>** |
元素描述了文档的标题，浏览器标签名 |
**<body>** |
元素包含了可见的页面内容 |
**<h1>** |
元素定义一个大标题 |
**<p>** |
元素定义一个段落 |
**<!-- 内容 -->** |
注释内容 |
字符集
| 字符集 | 说明 |
|---|---|
| UTF-8 | 字多，有各种国家的语言，但是保存尺寸大，文件臃肿； |
| gb2312 | 字少，只用中文和少数外语和符号，但是尺寸小，文件小巧 |
关键字和描述
head 和 meta
| head meta | 说明 |
|---|---|
| meta name=“Description” | 定义 html 页面描述有助于 seo 优化 |
| meta name=“Keywords” | 定义关键，告诉搜索引擎网页的内容 |
head 和 title
| 名字 | 说明 |
|---|---|
| title | 是网页的标题，也是有助于 SEO 搜索引擎优化的。 |
HTML 基本语法特点
不敏感形式
- 换行不敏感
- tab 不敏感
html 标签种类
- 容器级别（能容纳任何 html 元素）
- 文本级别（能容纳文字、图片、表单元素）
html 表现形式
- 双标签
<div></div> - 单标签
<img /> - 标签中的元素属性
<div id="ab"></div>
全局属性
更多的全局属性查看 MDN 总结的 全局属性。
html 语义化标签
HTML5 新特性、语义化
1.概念
HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
2.语义化的优点:
- 更好的展示展示效果
- 代码结构清晰，易于阅读与维护，
- 有利于搜索引擎优化（SEO）
1. 语义化标签
- header：定义文档的页眉（头部）；
- nav：定义导航链接的部分；
- footer：定义文档或节的页脚（底部）；
- article：定义文章内容；
- section：定义文档中的节（section、区段）；
- aside：定义其所处内容之外的内容（侧边）；
2. 媒体标签
- audio：音频
- video 视频
- form: 表单
- progress： 进度条
- meter 度量器
HTML 注释
<!--注释的内容-->
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
| 大于号 | > |
> |
|
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ’ | 撇号 | ' (IE 不支持) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 镑（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 欧元（euro） | € |
€ |
| § | 小节 | § |
§ |
| © | 版权（copyright） | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
html 图片
插入图片的方法：
<img **src="baby.jpg" ** alt="提示" />
| img 属性 | 属性说明 |
|---|---|
| src | 地址属性名 |
| alt | 不能正常显示的备用显示文字 |
超链接
<a href="1.html">结婚照</a>
| a 属性 | 属性说明 |
|---|---|
| href | 表示 a 指向的链接 |
| title | 悬停显示文本 |
| target | _blank新建一个窗口，另外还支持：_self/_parent/_top |
列表
有序
有序列表使用 ol > li 方式进行书写，注意 li(容器标签) 元素不能单独存在。
<ul><li>A Cat</li><li>A Dog</li>
</ul>
无序
无序列表使用 ul > li 方式进行书写，注意 li(容器标签) 元素不能单独存在。
<ul><li>A Cat</li><li>A Dog</li>
</ul>
自定义
| dl | 定义列表 |
| dt | 定义标题（容器标签） |
| dd | 定义描述（容器标签） |
使用什么标签根据语义来做是做好，这样最大程度的满足了机器和人的阅读。
div
使用广泛的元素（本意是 division），如上面元素所示，是一个容器元素任何元素都能用。
span 的却别
与 div 有很多的相似之后， span 表示一个区域标签，一般用于放置文本。
表格
| 表格相关元素 | 说明 |
|---|---|
| table | 包裹元素 |
| th | 定义表格的表头 |
| tr | 定义表格的行 |
| td | 定义表格单元 |
几个核心元素
<table border="1"><tr><td>1111</td><td>1122</td></tr><tr><td>2211</td><td>2222</td></tr>
</table>
表单
form 元素
文本框
- input type=text
密码框
- input type=password
单选按钮
- input type=radio
复选框
- input type=checkbox
下拉列表
<select><option>A</option><option>B</option><option>C</option><option>D</option><option>E</option><option>F</option><option>G</option>
</select>
多行文本框（文本域）
<textarea cols="30" rows="10"></textarea>
常见属性：
- cols 属性列
- rows 属性行
查看更多 textarea 属性
三种按钮
1）普通按钮：
<input type="**button**" value="I'm a button" />
2）提交按钮：
<input type="**submit**" />
3）重置按钮：
<input type="**reset**" />
HTML 元素
块元素
块级（block）元素的特点：
- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的 100%，除非设定一个宽度；
- 它可以容纳内联元素和其他块元素
| 块元素 | 说明 |
|---|---|
| p | 段落 |
| table | 表格 |
| blockquote | 引用 |
| center | 居中对齐 |
| dir | 目录列表 |
| div | 常用块级标签 |
| form | 表单 |
| h1 | 标题（6 个级别） |
| hr | 水平分割线 |
| isindex | input prompt |
| menu | 菜单列表 |
| ol | 排序列表 |
| pre | 格式化文本 |
| ul | 无序列表 |
内联元素
内联（inline）元素的特点：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变；
- 内联元素只能容纳文本或者其他内联元素。
| 块状元素 | 说明 |
|---|---|
| abbr | 缩写 |
| acronym | 首字 |
| b | 粗体 |
| big | 大字体 |
| br | 换行 |
| cite | 引用 |
| code | 引用代码 |
| dfn | 定义字段 |
| em | 强调 |
| i | 斜体 |
| img | 图片 |
| input | 输入框 |
| label | 表格标签 |
| q | 行内引用 |
| s | 中划线 |
| select | 项目选择 |
| small | 小字体 |
| span | 常用内联容器，定义文本内区块 |
| strike | 中划线 |
| strong | 粗体强调 |
| sub | 下标 |
| sup | 上标 |
| a | 锚点 |
可变元素
根据上下文确定块状元素和内联元素：
| 可变元素 | 说明 |
|---|---|
applet |
java applet |
button |
按钮 |
del |
删除文本 |
frame |
inline frame |
ins |
插入的文本 |
map |
图片区块(map) |
object |
object 对象 |
script |
客户端脚本 |
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享