初识HTML
对于html相信大家都不陌生，但是具体掌握哪些常用标签大家都还有印象吗？接下来带大家回顾一下html中常用标签有哪些。
html的作用其实就是来描述网页内容。
按标签形态上分，其实可以分为双标签和单标签。
双标签：包含开始标签和结束标签，例如链接标签a，它的写法是<a></a>。
单标签：只有开始标签，没有结束标签，例如图片标签img，它的写法是<img> 或者 <img/>。
按标签样式划分，又可以分为块元素，行元素，行内块元素。
其实后面结合CSS（层叠样式表，用来描述网页的样子）之后，我们更多会把标签转化为另外一个词来表达，就是元素，所以可以先简单理解为标签和元素是同个东西。
那上面三个元素到底是什么区别呢？
首先块元素：单独占据一行，且设定宽度和高度都有效果 其次行元素：不会单独占据一行，且设定宽高无效 最后行内块元素：就是结合了行元素和块元素的特点，即单独占据一行，设定宽度和高度都有效果
其实它们三之间是可以互相转换的，具体实现等后面说到CSS再给大家细说。
综上html语法:双标签，就是需要用一对尖括号<>括起来的标签名称，结束标签需要在<>中先用反斜杠/再加上标签名；单标签，一个尖括号括起来的标签名，反斜杠/加在标签名称后面，可以省略反斜杠（更多时候单标签的写法不带反斜杠）。
那下面就让我们按照分类一起学习html基础标签有哪些吧！
标题标签
其实就是h1-h6，依次为:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
我们可以清楚看到，标题标签都是双标签，且需要知道从h1到h6标题字号是逐级递减，就是说级数越高，字号越小，在网页中的权重越弱。
何为网页权重，就拿正常的一篇文章来说，我们认为大标题在一篇文章中存在且有且只有一个对吧，那此时在网页内容展示上，大标题我们会使用h1标签来描述，其余小标题可以任意选择标题标签进行描述。
当然标题标签使用恰当也利于SEO。SEO是指搜索引擎优化
段落标签
<p></p>
p标签也是块元素，在多个p标签排列的时候独占一整行。
- align 控制文本位置，取值left（默认）居左、center居中、right居右
<p align='center'>鹅鹅鹅</p>
超链接标签
<a></a>
a标签实现链接跳转到其他网页，使用该标签有几个必要标签属性
标签属性：就是标签本身拥有哪些特性，针对双标签是放置在开始标签内部，且在标签名之后，用空格隔开配置属性；针对单标签，直接在标签名之后空格隔开配置，格式是属性名='属性值'，具体写法如：百度一下
- href：存放超链接地址
- target：控制链接窗口打开方式，取值有_self（默认） 、_blank、 _top 、_parent，前两个比较常用，含义分别为在当前窗口打开、另起一个新窗口打开、顶级窗口打开、父级窗口打开
- title：鼠标悬停显示内容（基本任何标签都有该属性）
除了链接跳转以外，a标签还常用来控制锚点，主要是通过href属性，href='#锚点名称'
什么是锚点？
比如一本新华字典，如何快速定位到我们要查找的那个字，通过拼音首字母快速定位，那锚点也一样，通过锚点快速定位到要到的位置上。
<a href='#first'>第一章</a>
<a href='#second'>第二章</a>
<a href='#third'>第三章</a>
<p id='first'>第一章段落内容</p>
<p id='second'>第二章段落内容</p>
<p id='third'>第三章段落内容</p>
锚点名称匹配上网页内容id属性一致的，直接定位
<a herf="#">回到顶部</a>
<a href='void:javascript(0)'>点击无任何效果，不跳转</a>
图片标签
<img>
- src：图片路径
- alt：图片路径失效显示内容
- title：鼠标悬停显示内容
路径分为相对路径和绝对路径
相对路径指针对当前操作文件存在的路径去找目标文件所在路径
绝对路径指不论当前操作文件路径在哪，都存在的文件路径
图1：
图2：
如上图分别用相对路径和绝对路径展示header.png，代码如下
在index1.html中
相对路径
<img src='./demo1/image/header.png'>
./代表和当前文件同层，可以省略，简写为demo1/image/header.png
../代表返回当前操作目录的上一层目录
../../代表返回当前操作目录的上两层目录
...以此类推
绝对路径
<img src='C:\Users\Administrator\Desktop\project\demo1\image'>
换行
<br>
作用就是换行，单标签
表格标签
<table></table>
- border：设置表格边框，默认无边框
- bgColor：表格颜色
- cellspacing：单元格与单元格之间的距离
- cellpadding：内容内边距
<thead></thead>
设置表头
<tbody></tbody>
表格主体内容
<tr></tr>
表格的每一行
<td></td>
表格每一行里头的每一个单元格
表格中常常需要用到跨行或者跨列的问题，如下图，有一个单元格占了好几行空间，称之为跨行，使用属性rowspan，反之跨列，使用属性colspan，且这两个属性用在标签td身上才能生效。
<table border="1" cellspancing="0" cellpadding="10">
<tr>
<td>参考值</td>
<td>炎症类型</td>
<td>呼吸道疾病</td>
</tr>
<tr>
<td rowspan="5">
<255pdd</td>
<td rowspan="4">非嗜酸性..
</td>
<td>非嗜酸性哮喘</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>小气道嗜酸</td>
<td>d</td>
</tr>
</table>
表单标签
<form></form>
基本属性：
- method：数据提交方式，默认值get，取值get、post
- action：提交到后端处理路径
输入框
<input>
默认文本输入框，通过type标签属性可以展示不同的输入框
- text 文本
- number 数字
- password 密码框
- radio 单选框
- checkbox 复选框
- button 普通按钮
- submit 提交按钮
- reset 重置按钮
文本框
<input type='text'>
密码框
<input type='password'>
单选框
<input type='radio' name='sex' value='1'>男
<input type='radio' name='sex' value='2'>女
name属性主要是后续表单数据提交给后端，后端接收的时候一个字段标识
value属性代表表单元素的值
复选框
<input type='checkbox' name='hobby' value='篮球'>篮球
<input type='checkboxcheckbox' name='hobby' value='足球'>足球
<input type='checkbox' name='hobby' value='羽毛球'>羽毛球
普通按钮
<input type='button' value='普通按钮'>
提交按钮
<input type='submit'>
重置按钮
<input type='reset' value='重置'>
文本域
<textarea></textarea>
通过标签属性cols、rows控制文本区域大小，取值为数字
<textarea cols="4" rows="5"></textarea>
下拉框
<select></select>
<option></option> 是select的子选项
<select>
<option value=''>请选择省份</option>
<option value='1'>北京</option>
<option value='2'>上海</option>
<option value='3'>福建</option>
</select>
容器标签
<div></div>
<span></span>
以上两个标签实际上是无具体语义标签，只不过在实现页面布局上比较常用到的两个标签。
div是典型的块元素，span是典型的行元素，都可以用来存放内容的容器。div里头基本可以包裹所有标签。
以上内容，纯属自己所学之总结，如有缺漏或不足的地方还请大佬们补充，有理解错误的地方希望大佬们轻点喷！
