HTML

在 visual studio code 中新建 html 文件，输入 html ，在代码提示列表中选择 html:5 并回车后，会生成下面的代码：

<!--声明文档类型，这是HTML5的固定写法-->
<!DOCTYPE html>
<!--HTML文档的根元素，lang属性表示文档的语言，中文为zh-Hans或者zh-CN-->
<html lang="en">
<!--head里面的内容不会显示出来，用来定义一些元信息-->
<head>
    <!--网页编码-->
    <meta charset="UTF-8">
    <!--告诉浏览器如何渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--概念比较复杂，作用是更好地在移动端显示页面-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页的标题-->
    <title>Document</title>
</head>
<!--网页的内容-->
<body>
    网页内容放这里
</body>
</html>

HTML 容错率较高，即使有错误，浏览器也尽量渲染出内容。上面的代码可以精简为

<html>
    <head>
        <title>标题</title>
    </head>
    <body>网页内容放这里</body>
</html>

<html>、<body> 这些叫做标签，lang="zh-CN" 叫做属性，其中 lang 是属性名，zh-CN 是属性值。属性值用双引号括起来。

你可能听说过 reset.css 或者类似的东西，这些是为了重置一些标签的样式。为什么要重置呢？因为 HTML 标签会带有一些默认的样式，比如 li 标签前面会有小圆点，这些默认样式我们可能不需要，所以需要重置，也就是修改为我们需要的样式。

如果工作内容主要是开发后台管理系统，那么常用的标签就两个：span、div。这两个标签都没有任何含义，区别是，span 标签是一个行内元素，div 标签是块级元素。行内元素的大小由内容决定，块级元素总是会在横向占满可用的空间。至于其他标签，前端 ui 框架都已经封装好了常用组件，大多数情况下没有必要使用原生的 HTML 标签。但是，了解 HTML 标签及其特性，肯定会对开发和调试有好处。

CSS

CSS 相对 HTML 来说比较复杂。但由于前端 UI 框架的存在，需要掌握的 CSS 也不是很多了，同样的，全面掌握 CSS 是你相对其他前端开发者的很大的优势，在别人面对问题束手无策的时候，你可以脱离前端 UI 框架，从底层的 CSS 知识层面解决问题。

一段 CSS 代码是这样的：

/* '{'之前的一串叫做选择器，是为了选择特定的HTML标签 */
div.my-div > p:first-child {
    /* 下面4行是定位 */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* 下面3行是排版和文本样式 */
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6;

    /* 下面2行是flex布局 */
    display: flex;
    align-items: center;
}

必须熟练掌握的是 CSS 选择器，这是应用 CSS 样式的前提。

CSS 各种单位需要掌握，比如绝对单位 px，相对单位 %、em、rem，颜色表示方法 rgb()、rgba()、十六进制(#ff0000)、hsl() 等。

要注意属性的继承性，例如，父元素设置 color: red，所有子元素的文字颜色都会继承父元素的样式，除非子元素设置了自己的 color。又比如，父元素设置 border: 1px solid red，子元素不会继承这个样式。

然后是盒模型，这是 CSS 基础，与 HTML 的行内元素、块级元素有关联。

flex 布局用处特别多。没有 flex 布局的时候，你就需要掌握 浮动float、各种垂直居中的方法……等很多东西，现在有了 flex，就可以少学很多其他属性了，比如 float，以前也是一个难点，现在基本用不到了。

资料

初学者使用 W3School 比较好，非常简单易懂，也可以作为速查手册。建议先通读一遍 W3School 中的 HTML、CSS 部分。MDN 上的内容专业全面，但不太好理解，适合有一定的基础时再阅读。

End

标签: css, html