在CSS之前，需要先介绍一下HTML的常用标签。
1.html与css的关系
2.程序
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Html和CSS的关系</title>
6 <style type="text/css">
7 h1{
8 font-size:12px;
9 color:#999;
10 text-align:center;
11 }
12 </style>
13 </head>
14 <body>
15 <h1>Hello World!</h1>
16 </body>
17 </html>
3.效果
4.注释
<!--注释文字 -->
5.p标签
<p>段落文本</p>
6.hx标签
文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
<hx>标题文本</hx>
7.strong与em标签
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。
并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
8.span标签
使用<span>标签为文字设置单独样式
标签是没有语义的，它的作用就是为了设置单独的样式用的
9.q标签
<q>标签，短文本引用。
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
10.blockquote
<blockquote>标签，长文本引用
浏览器对<blockquote>标签的解析是缩进样式。
11.br标签（*）
<br />标签作用相当于word文档中的回车。
这是一个空标签。
空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />
12.添加空格
要想输入空格，必须写入 。
13.hr
<hr>标签，添加水平横线
14.address
<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
在浏览器上显示的样式为斜体。
15.code标签
加入一行代码。
<code>var i=i+300;</code>
16.pre标签
需要在网页中预显示格式时都可以使用它。
如果是多行代码，可以使用<pre>标签。
标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
17.ul标签
添加信息列表。
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
18.ol标签
在网页中展示有前后顺序的信息列表。
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。
19.div标签
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
20.table标签
创建表格的四个元素：table、tbody、tr、th、td。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。
<th>…</th>：表格的头部的一个单元格，表格表头。也就是th标签中的文本默认为粗体并且居中显示。
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
21.为表格添加边框（css样式）
添加黑色边框。
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
22.caption标签
为表格添加标题和摘要。
A：摘要
<table summary="表格简介文本">。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
B:标题
<caption>标题文本</caption>
用以描述表格内容，标题的显示位置：表格上方，tr上方。
23.a标签
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
24.在新的窗口打开链接
<a href="目标网址" target="_blank">click here!</a>
25.img标签
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
26.form表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
<label for="username">用户名:</label>
<input type="text" name="username" />
27.输入框（文本，密码）
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
28.textarea文本域
<textarea rows="行数" cols="列数">文本</textarea>
29.单选框与复选框 radio/checkbox
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
30.下拉框select
设置selected="selected"属性，则该选项就被默认选中。
31.提交按钮
<input type="submit" value="提交">
value：按钮上显示的文字
32.重置
<input type="reset" value="重置">
value：按钮上显示的文字
33.label标签
如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label for="控件id名称">
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
来源：https://www.cnblogs.com/juncaoit/p/7227665.html