1.HTML入门标签语法

总是成对出现<>,如：<html>为开始标签，</html>为结束标签。除了某些个例，如<br />，<img>,<input/>(单标签）。
vscode里还需安装小插件，简单。大致要安装open in browser（右击选择浏览器打开html文件）,auto renametag（自动重命名配对标签）,chiese(中文包）,css peek(追踪至样式）。

在vscode中写代码基础步骤：

第一步，新建文件然后保存，注意是先保存，然后在把文本后缀改成.html;
第二步，打出！，然后点击弹出的小框中第一个感叹号就能得到网页编写的一整套格式。

三种特殊必备标签（不用自己手打）

<!DOCTYPE html>是文档类型声明标签，不属于html标识符，告诉浏览器采取html5版本来显示。
<html lang="en">告诉浏览器或者引擎这是一个英文网站，中文是"zh-CN"。不过即使是英文网站，中文还是会正常显示出来，中文网站英文也会正常显示。
<meta charset="UTF-8" />字符集，其中UTF-8被成为万国码，基本包含了全世界所有国家需要用到的字符，除此之外常用的值还有：GB2312,BIG5,GBK。一定要写，否则会乱码。具体原理后面分析。

2.HTML常用标签

标题标签

<h1>我是一级标题</h1>有<h1>-<h6>六种标签，重要性从大到小，<h1>为最大。

段落和换行标签

<p>我是一个段落</p>。特点：文本在一个段落中会根据浏览器窗口大小自动换行；段与段之间保有空隙。
<br />强制换行，为数不多的单标签之一。（换行不会有较大缝隙）

文本格式化标签

<strong>加粗标签</strong>和<b>加粗标签</b>
<em>倾斜标签</em>和<i>倾斜标签</i>
<del>删除线标签</del>和<s>删除线标签</s>
<ins>下划线</ins>和<u>下划线</u> （以上均推荐前一种方式，与其更加强烈）

`<div>`和`<span>`标签

这两个标签没有语义就是当盒子看，用来装内容。
<div>这是头部</div> division表示分割分区，用来布局，一行只能放一个,独占一行。
<span>今日价格</span>span意为跨度跨距，一行可以放多个

图像标签和路径

图像标签
<img src="图像URL" />image的缩写，意为图像。属于空标签，只包含属性并且没有闭合标签。要显示图像需要使用源属性(src)。URL指储存图像的位置。
<src>图片路径，必须属性
(必须) <width>定义宽度
<height>定义高度
<alt>替换文本属性可以为图像定义一段可替换的文本。
<title>提示文本。鼠标放到图像上，显示的文字。
<border>设定图片边框
注意：

图像标签可以有多个属性，但必须在标签名后面。
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
属性采取键值对的格式，即属性="属性值"。 路径（前期铺垫知识）
目录文件夹：普通文件夹，里面存放了页面所需相关素材，如:HTML文件，图片。
根目录：打开目录文件夹第一层就是根目录。方便用vscode打开文件夹。
路径之相对路径(重要) 同一级路径图像文件位于HTML文件同一级如< img src="baidu.gif >。
下一级路径图像文件位于HTML文件下一级如< img src="images/baidu.gif"/>。
上一级路径图像文件位于HTML文件上一级如< img src=”../baidu.gif >。
路径之绝对路径(较少使用) 但有一种是网络中的绝对地址，直接输入网址。如<img src="http://www.tupian.cn/2018czgw/image/logo.png" />

前端基础随记｜ 青训营笔记