web基础知识规则

要学习web首先就需要学习最基础的规则，web基础主要分为5部分
布局基础、ES5语法、DOM、BOM以及事件，而其中布局基础是比较重要的。
在准备好所需要使用的软件visual studio code并且安装完所需插件之后，我们就可以开始最基础的部分了。
首先一个项目一般包含3个文件夹，如图
css、img以及js，在创建完一个较为完整的文件夹之后，我们就可以开始在visual studio code中打开文件夹进行编辑了，也可以直接把文件夹拖到visual studio code上面，这样更快捷。
下面这段代码就是一个网站最基本的结构
head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。head标签一般包含以下标签：title、style、script、link、meta、base。
这里最基础的网站代码中出现了title标签，title用于定义文档的标题。而body中的内容一般就是网站中的内容，网站中有什么文字，文字是什么颜色的，有什么图片，通常代码都会在body中体现。也就是说网站中的大部分内容相关的代码全部都在body中。

在html中，元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。

块级元素通常有如下特点：

1. 在浏览器显示时总是独占一行
2. 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
3. 可以包含内容、行内元素和其他块级元素
4. 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度

下面是常见的一些块级元素
这其中从article往下开始，都是html5新增的标签，这些标签我们称为语义化标签，虽然在网站内容的表现形式上它们和没有任何含义的div标签一样，但是如果所有标签都使用无语义的div，就会导致你的代码写完了之后你的同事想看懂每段代码分别对应网站中的什么位置就需要多花一些时间，所以使用语义化标签是为了其他人看到代码就能一目了然，知道每段代码分别对应网站中哪一部分的内容。

下图是各个语义化标签的语义

除了语义化标签外，文章中的内容因为重要程度不一样，所以大小肯定也有区别，比如文章的大标题和一级标题甚至是二级标题以及正文内容肯定要使用大小不一样的字体的。这个时候就需要使用h1-h6标签了，从h1-h6，文字的大小是逐渐从大到小的，除此之外h标签和标题一样还具有一定的搜索权重，也就是我们可以搜索h标签中的内容来找到我们需要的网站。

p标签通常用来表示一个段落，而ul和ol分别是无序列表和有序列表，区别如图
很显然，无序列表前面是黑点，有序列表前面是数字。

接下来就是行标签，直接上图
除了上述特点外，行标签还具有换行的时候被解析的特点，简单说就是换行时行内元素之间会产生间隙。
一张图看懂行标签
span是最基本的行标签，用来在一行中显示内容或选项，而a标签则可以在内容上直接添加一个超链接，href后面是链接地址，而target默认情况下是在当前页面进行跳转，如果想要再打开一个页面，像上面这张图片里那样写就行了。

i是斜体，b是加粗字体，sub是下角标，而sup则是上角标，下角标常用于化学表达式，上角标常用于指数和幂数。

em是有搜索权重的斜体，而strong是有搜索权重的加粗字体。

如果想要改变字体颜色，可以在style中添加代码进行修改，但需要注意的是修改颜色的代码的上级必须是想要修改的内容所在的标签。

最后说说行内块级元素，特点直接看图

行块标签同时拥有一些行内元素和块级元素的特性，主要是图片，看下面这段代码
图片1用的是本地图片的地址链接，而下面的链接则是某个网站的一张图片的链接，这两种链接方式都是可以的。
当我们在style中只给出图片的宽度时，高度也会跟着发生等比例变化的。
title是鼠标悬停在该图片上会出现的提示文本，而alt是图片无法正常显示时的提示文本，这2个都可以为空。

最后是标签的改变，标签分为三种类型：块标签、行标签、行块标签，我们可以用display把一个类型的标签变成另外一个类型的。