这是我参与[第五届青训营]办学笔记创作活动的第1天

本章内容主要围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术 - HTML 基础语法和基本功能。以及进一步深入的，在实际研发过程中如何做到HTML语义化和HTML高效的编写原则。

1.1 什么是前端？

前端工程师就是使用Web技术栈解决多端用户交互问题。

1.1.1 前端技术栈

前端三大件：HTML, CSS, JavaScript

1.1.2 前端关注的问题

功能：最核心的，需要满足用户需求
美观：页面的整洁和可读性，满足审美需求
无障碍：是否适用于所有人群
安全：网站的基本保障
性能：怎样以最高的效率展示

总结：前端是面对用户的第一战线，核心是要关注用户的体验

1.1.3 前端的边界

1.2 什么是HTML？

HTML即超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
代码：<!doctype html>开头告诉浏览器以什么形式去渲染，如果没有这行就会使用一种较老且怪异的形式进行渲染。

1.2.1 DOM树

把HTML代码转换成一个树形结构备用，即为DOM树，每个节点也就为DOM节点。

1.2.2 HTML基本语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

标题h1~h6
<h1>字体排印学</h1>

列表标签：

有序列表：<ol>+<li>
无序列表：<dl>+<li>
定义列表：<dl>+(<dt>:<dd>)

输入：

<input placeholder="请输入用户名">
&lt;input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">

下拉选择<select>+<option>
强调标签<strong>,斜体标签<em>

1.2.3 内容划分

1.2.4 HTML的语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言

语义化：HTML标签的特定含义，开发者需要遵循。

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

HTML与前端入门 | 青训营笔记