Web 前端：基础网页

为了这个分类内容完整性因此补齐了这篇文章。
这里主要是根据青春在线的培训以及自己当时的一些笔记进行到的整理，内容比较碎。
互联网上教程、文档也已经十分丰富了，在这里为大家提供一些索引以及自己的理解。

如何实现一个网页

从非技术、非标准的角度看网页

一个普通的网页抽象来说就是一堆元素的堆砌。这些元素可以是文字、图片还有视频等等，按照规定的位置排列，就构成了一个简单的网页。

在计算机中需要用代码去描述这些元素，以及这些元素的位置、形状、大小等等。HTML 与 CSS 就是承担的这个工作。

HTML 中文为超文本标记语言，暂且放下超文本的意义不去细究，HTML 重点在于标记。它通过一些固定的格式（称为标签），把一些文本做好标记，这样就能供计算机所识别。一段简单的 HTML 代码如下：

<h1>Hello，World</h1>
<h2>Hello, SDUT</h2>

这段代码可以让计算机通过 <h1></h1> 找到这句话，被这一对尖括号就是标签。

CSS 中文为层叠样式表，其重点在于样式。我们用 HTML 标记了各种元素，随后就可以使用 CSS 来为元素设置样式。CSS 通过不同的选择器选中 HTML 中的元素，然后描述元素的样式。一段简单的 CSS 代码如下：

h1{
    font-size: 20px;
    color: red;
}
h2{
    font-size: 16px;
    color: green;
}

我们将上述的 HTML 与 CSS 的代码结合就可以得到一个效果如下的网页：

简而言之：
HTML 和 CSS 都是负责描述的计算机语言。HTML 是描述页面上有什么元素（即页面的结构），CSS 是描述页面元素长什么样子（即元素的表现）。

再言之，要实现一个简单的网页，我们需要确定以下几点：

1. 页面上有什么元素 -> 结构
2. 元素长什么样子 -> 样式
3. 元素应该放在页面的哪个位置 -> 布局

因此学习的目标就是：

1. 学会使用 HTML 描述出页面的结构。
2. 学会使用 CSS 描述出元素的样式。

布局既和 HTML 有关又与 CSS 有关，内容较多且较为复杂，可以在学习 CSS 时进一步的体会。

开始学习

这里罗列一些基础概念以及一些自己的理解，更详细的内容可以参考菜鸟教程、尚硅谷等教学网站或者视频。

菜鸟教程
尚硅谷前端

HTML

1. 基础的网页结构
2. 标签
   1. 语义化标签
   2. 常用的标签
   3. 块元素和行内元素
3. 标签的属性
   1. id
   2. class
   3. src/url
   4. style

繁多的标签其实没有全部记住的必要，在开发中最多使用的还是 <div></div>。
学习 HTML 不比花费过多的时间，个人认为在简单认识 HTML 标签后立刻结合 CSS 进行学习是最好的。前端的重头戏还是在 CSS 和 JavaScript。

CSS

1. 选择器
   1. 元素选择器
   2. 类选择器
   3. id 选择器
   4. 兄弟选择器
2. 基础样式
   1. font-size
   2. color
   3. backgrou-color
3. 盒模型
   1. width/height
   2. border
   3. margin
   4. padding

相比于 HTML， CSS 更重要一点。
很多“朴实”的属性通过各种技巧结合起来就会有意想不到的效果，可以在哔哩哔哩上找一些前端视频学习一下，“精通CSS”和“精通C/C++”可能是一个难度的吧。
对于初学者来说，对于常用的属性要熟练知晓（因为编辑器都有代码补全，完全背过感觉没有必要），同时还有学会如何查找文档，这样在有需要的时候才能快速找到解决办法。

小 Tips

从前只是知道一个标签可以有多个 class，但是没有想过这样设计有什么用处，直到第一次了解到 Bootstrap。

我们可以利用这个特性，提前设置几个类选择器并为其设置样式，例如我们设置一个 .box_center{} 用以实现居中效果。那么之后凡是需要居中的标签，我们只需要在 class 中添加 box_center 即可，无需再重复书写这些属性。

另一个用到这个特性的地方是在微信小程序中实现的弹幕效果，通过数据绑定更新 class 名称从而触发动画的重新加载，最终实现了弹幕的效果。