HTML:一套浏览器认知的规则
HTML分为两个部分，头和身体。一个完整的网页相当于一个裸体的人，我们利用HTML给它穿上衣服，使它更好看。
下面我将为大家介绍一下HTML一些基本的标签，而这些基本的标签，基本上可以完成百分之九十以上的页面编写。
首先介绍一下一个网页的基本结构，分为头head，身体body；基本结构如下所示：
<!DOCTYPE html><html><head> ???<title></title></head><body></body></html>
HTML的注释为<!--需要注释的内容-->
我们需要做的就是在body中给这个基本的页面穿上美观的衣服。
<html></html>
HTML文档中的第一个标记，用于表示该文档是HTML文档，当浏览器遇到<html>标签时，就会按HTML的标准来解释文本。
<head></head>
头部，一般这里定义编码方式，、刷新页面和跳转时间等等。我们的css样式也写到这里。这里说一句，我们现在所见的网站大部分都是以div＋css组成，老式的网站一般都是使用table完成的。
<title></title>
html表头，也就是我们见到浏览器最上方的一段文字信息。
<body></body>
身体，一个网页所显示的静态效果，用户可以最直观的看到的效果。
废话了这么多，也没有实质性的东西，下面我给大家介绍我们要学习的10个标签，也就是body中的标签。
首先给大家介绍几种特殊符号： 空格 >大于号 < 小于号
为了方便大家学习，我下面给大家结合实例讲解
<p></p> ???????<!--段落标签，及块级标签--> ???????<span></span> ???<!--行内标签--> ???????<div></div> ???????<!--块级标签--> ???????<h1></h1> ????????<!--块级标签，可以设置为h1到h6,--> ???????<br> ????????????<!--回车标签-->
结合着四个标签，大家区分一下他们的差别在哪里，可简单写一些代码演示：
eg:
<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>区分4个标签</title> ???????????????</head> ???????????????<body> ???????????????????<p>这是一个p标签</p> ???????????????????<br> ???????????????????<span>这是一个span标签</span> ???????????????????<br> ???????????????????<div>这是一个div标签</div> ???????????????????<br> ???????????????????<h1>这是一个h1标签</h1> ???????????????????<br> ???????????????????<h2>这是一个h2标签</h2> ???????????????????<br> ???????????????????<h6>这是一个h6标签</h6> ???????????????</body> ???????????????</html>
为什么会存在这些标签呢？我们需要利用这些标签进行css操作和JS操作，使页面更加的美观。又扯远了。言归正传。
<input type="text" name="text"> ???????????<!--文本框，注册和登录框--> ???????<input type="password" name="password"> ???????<!--密码框，一般的浏览器都是密文显示--> ???????<input type="button" name="button"> ???????????<!--按钮--> ???????<form></form> ???????<!--表单，我们提交的登录信息都是通过表单上传到服务的-->
eg：
?<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>表单</title> ???????????????</head> ???????????????<body> ???????????????????<form action="http：//winford.top" method="POST"> ???<!--action既是提交的表单到那里，method是URL的信息，有两种形式，GET和POST，一般情况下使用POST，不懂得问baiduyixia,google--> ???????????????????????<input type="text" name="text"> ???????????????????????<br> ???????????????????????<input type="password" name="password"> ???????????????????????<br> ???????????????????????<input type="button" name="button" value="登录"> ???<!--value既是值，可以尝试每个input标签都加上value属性，查看效果--> ???????????????????????<br> ???????????????????????<p>上传文件</p> ???????????????????????<input type="file" name="fname"> ???????????????????????<br> ???????????????????????<input type="radio" name="gender">男 ???????????????????????<input type="radio" name="gender">女 ???<!--单选框，相同则互斥--> ???????????????????????<br> ???????????????????????<input type="checkbox" name="favor">写代码 ???????????????????????<input type="checkbox" name="favor">撩妹 ???<!--复选框--> ???????????????????</form> ???????????????</body> ???????????????</html>
<a href=""></a> <!--超链接标签,herf可以为网址也可以为绝地路径，也可以为相对路径-->
eg：
<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>超链接</title> ???????????????</head> ???????????????<body> ???????????????????<!--利用超链接也可以做锚--> ???????????????????<a href="#i1">我爱你</a> ???????????????????<a href="#i2">I LOVE YOU</a> ???????????????????<a href="#i3">i love you</a> ???????????????????<a href="#i4">wo ai ni</a> ???????????????????<div id="i1" style="height: 500px;">我爱你，一生一世</div> ???????????????????<div id="i2" style="height: 500px;">我爱你，海枯石烂</div> ???????????????????<div id="i3" style="height: 500px;">我爱你，永不分离</div> ???????????????????<div id="i4" style="height: 500px;">我爱你，天荒地老</div> ???????????????</body> ???????????????</html>
<img src=""> <!--图片标签，同a标签-->
?eg： ???????????????<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>img标签</title> ???????????????</head> ???????????????<body> ???????????????????<img src="一个图片的路径" style="height: 200px;width: 200px;" title="鼠标放到图片上显示的文字信息" alt="未找到图片现实的文字信息"> ???????????????</body> ???????????????</html>
<ul> <!--列表标签-->
<li></li>
</ul>
eg：
?<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>列表</title> ???????????????</head> ???????????????<body> ???????????????????<ul type="circle"> ???????<!--type的属性有三种disc：原点；circle：空心点；square:方点--> ???????????????????????<li>winford.top</li> ???????????????????????<li>winford.top</li> ???????????????????????<li>winford.top</li> ???????????????????????<li>winford.top</li> ???????????????????</ul> ???????????????</body> ???????????????</html>
<!--ul和li搭配是无序列表；也可以ol和li搭配是有序列表-->
<table></table> <!--表格标签-->
eg：
??<!DOCTYPE html> ???????????????<html> ???????????????<head> ???????????????????<title>表格</title> ???????????<!--合并单元格，左右合并colspan,上下合并rowspan--> ???????????????</head> ???????????????<body> ???????????????????<table border="1px"> ???????????????????????<thead> ???????????????????????????<tr> ???????????????????????????????<th>表头第一列</th> ???????????????????????????????<th>表头第二列</th> ???????????????????????????????<th>表头第三列</th> ???????????????????????????</tr> ???????????????????????</thead> ???????????????????????<tbody> ???????????????????????????<tr> ???????????????????????????????<td>表体第一列</td> ???????????????????????????????<td>表体第二列</td> ???????????????????????????????<td>表体第三列</td> ???????????????????????????</tr> ???????????????????????????<tr> ???????????????????????????????<td>表体第一列</td> ???????????????????????????????<td>表体第二列</td> ???????????????????????????????<td>表体第三列</td> ???????????????????????????</tr> ???????????????????????</tbody> ???????????????????</table> ???????????????</body> ???????????????</html>
<label></label> <!--用于点击文字使关联的标签获取光标-->
eg：
<!DOCTYPE html> ???????????<html> ???????????<head> ???????????????<title></title> ???????????</head> ???????????<body> ???????????????<label for="username">用户名</label> ???????????????<input type="text" name="user" id="username"> ???????????????<fieldset> ???????????????????????????????????<legend>登录</legend> ???????????<!--一个登录的界面，用处不大--> ???????????????</fieldset> ???????????</body> ???????????</html> ???????????????
可以完成99%的静态页面的HTML标签
原文地址：https://www.cnblogs.com/weimin1314/p/8260474.html