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" />

超链接标签

1.链接的语法格式

<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>[a"anchor的缩写，意为“锚”"]
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

2.链接分类

外部链接
如：<a href="http://www.qq.com"target="_blank">腾讯</a>
内部链接（网站内部页面之间的相互连接）
如：<a href="index.html">首页</a>
空链接（没有确定链接目标）
如：<a href="#">首页</a>
下载链接（地址链接的是文件.exe或者压缩包）如：<a href="img.zip">下载文件</a>
网页元素的链接
如<a href="http://www.baidu.com"><img src="img.jpg"/></a>
锚点链接：点击链接快速定位到页面中的某个位置
如：<a href="#live">个人生活</a>和<h3 id="live">个人生活</h3>(标题处也更改成这样）点击个人生活，就跳转到了标题标签中有live的地方。

HTML中的注释和特殊字符

1.注释
（快捷键ctrl+/）
2.特殊字符

空格号： 
小于号：<
大于号：>
以上三个重点记住，其余若需再查阅即可。

表格标签

表格的主要作用
主要用于显示、展示数据。
表格的基本语法
<table>：最大的框
<tr>：行
<td>：行里面的每一小单元格
<th>：表头标签，表格中的第一行。如：<th>姓名<th/>，其中的文字会居中并加粗。

表格属性<写到表格标签`<table>`里面>

列表标签

用来布局页面。分为无序列表，有序列表，自定义列表。
1，无序列表（重要）
<ul>
<li>列表项1</li>
</ul>
ul里面只能放li,li里面可以放任意标签
2,有序列表
<ol><li></li></ol>与无序有相同性质。
3,自定义列表（重点）
<dl>
<dt>名0词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1.dl里面只能包含dt和dd.dt和dd里可以放任意标签。
2.dt和dd没有字数限制，经常是一个dt对于多个dd。

表单标签

目的：为了收集用户信息。
组成：表单域，表单元素（控件），提示信息。
1.表单域
实现用户的收集和传递
<form action="url地址（传给的后台）"method="提交的方式（get/post）"name="表单名字">
</form>
2.

前端学习笔记HTML