html标签分为块级标签和行内标签，块级标签独占一行，多个行内标签排在一行直到排列不下。
常见的元素：
（1）行内元素：<a> <span> <img> <input> <select> <strong> <em>
（2）块级元素：<div> <ul> <ol> <li> <h1> <p>
（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>
块级标签：
-
<head> 标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。大部分文档头部包含的数据都不会真正作为内容显示给读者。
<head>
<title>...</title>
<meta>
<link><!--定义文档与外部资源之间的关系，最常用于链接样式表-->
<style>...</style>
<script>...</script>
</head>
-
<title> 标签
<title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的<title>标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
<head>
<title>这是网页标题</title>
</head>
-
<meta> 标签
- <meta> 标签提供了元数据。元数据不显示在页面上，但会被浏览器解析。
- <meta> 标签通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
- 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta name="keywords" content="HTML">
-
<body> 标签
把要在浏览器中展示出来的内容放到<body>标签中。
<body>
...
</body>
-
<p> 标签
如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
<body>
<p>文章段落</p>
</body>
-
<hx> 标签（x为1~6）
标题标签一共有6个，h1、h2、h3、h4、h5、h6，<h1>是最高的等级，字号最大。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
-
<ul>标签，<ol>标签
- 使用<ul>标签和<ol>标签，添加列表信息。
- <ul>标签，无序列表，默认样式：每项li前都自带一个圆点；<ol>标签，有序列表，默认样式：每项<li>前都自带一个序号，序号默认从1开始。
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
-
<div>标签
- <div>标签相当于一个容器，把页面上相互关联的一组元素放到同一个<div>标签中，然后给<div>标签命名，再进行排版。
- <div>标签中可以嵌套<div>标签。
<div id="版块名称">
<div class="版块名称">
<h6>小标题<h6>
<p>段落</p>
<img src="xx.jpg">
...
</div>
</div>
<div class="版块名称">
...
</div>
-
<table>标签
- <table>标签，网页上的表格。
- 创建表格的四个元素：
table、tbody、tr、th、td。
1、<table>…</table>：整个表格以<table>标签开始、</table>标签结束。
2、<tbody>…</tbody>：如果不加<thead>、<tbody>、<tfooter>, table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。也就是说table 可以按结构一块块的显示，不用等整个表格加载完后才显示。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
<body>
<table>
<tbody>
<tr>
<th>年级</th>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>一年级</td>
<td>2班</td>
<td>张三</td>
<td>90分</td>
</tr>
<tr>
<td>二年级</td>
<td>3班</td>
<td>李四</td>
<td>80分</td>
</tr>
</tbody>
</table>
</body>
效果图：
table标签.jpg
-
<caption>标签
- <caption>标签，为表格添加标题和摘要
- 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
- 标题是用来描述表格内容的，标题的显示位置是表格上方。
- <caption>标签，为表格添加标题和摘要
<table summary="表格简介文本（摘要）">
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
-
<form>标签
表单用于搜集不同类型的用户输入
- 数据传送的方式（get/post）。
- 数据被传送到的地方，比如一个PHP页面。
- 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间。
<form method="post" action="xx.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
- label标签
- label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。
- 如果在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
- 标签的 for 属性中的值与相关控件的 id 属性值一定要相同。
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
- 文本输入框、密码输入框
-
type：当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值(一般起提示作用)。
-
<form>
<input type="text/password" name="名称" value="文本" />
</form>
- 文本域，支持多行文本输入
在<textarea></textarea>标签之间可以输入默认值。
<textarea rows="行数" cols="列数">文本</textarea>
- 单选框、复选框
-
type： 当 type="radio" 时，控件为单选框；
当 type="checkbox" 时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：为控件命名，以备后台程序 ASP、PHP 使用。
checked：当设置 checked="checked" 时，该选项被默认选中。 - 同一组的单选按钮，name 取值要一致，这样同一组的单选按钮才可以起到单选的作用。
-
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
- 下拉列表框（节省空间）
- 在<select>标签中设置multiple="multiple"属性，就可以实现多选功能。
- 设置selected="selected"属性，则该选项就被默认选中。
<select multiple="multiple">
<option value="提交的值">显示的值</option>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
- 按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。- 使用提交按钮，提交表单信息
type：只有当type值设置为submit时，按钮才有提交作用；
只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。 - 使用重置按钮，重置表单信息
- 使用提交按钮，提交表单信息
<input type="submit" value="提交">
<input type="reset" value="重置">
-
<address>标签
<address>标签，添加地址信息，在浏览器上显示的样式为斜体。
<address>联系地址信息</address>
-
<br/>标签，<hr />标签
- 没有HTML内容的标签就是空标签，空标签只需要写一个开始标签就可以。比如：<br />、<hr />和<img />。
- <br/>标签，换行标签；<hr />标签，添加水平横线。
- 在 html 代码中输入回车、空格都是没有作用的。
- 在html文本中想输入回车换行，就必须输入<br />，想输入空格，就必须输入
。
行内标签：
-
<span>标签
<span>标签是没有语义的（和<div>标签类似），它的作用就是为了设置单独的样式用的。
<span>文本</span>
-
<a>标签
- 使用<a>标签，实现超链接。
- <a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，在新的浏览器窗口中打开使用
target="_blank"。
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>
锚链接
- name 属性规定锚（anchor）的名称。
- 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
- 可以使用 id 属性来替代 name 属性，命名锚同样有效。
同一页面：
<a href="#name属性的值">内容</a>
<a name="值"></a><!--目标位置>
不同页面：
<a href="网址#name属性的值">内容</a>
<a name="值"></a><!--目标网页位置>
使用mailto在网页中链接Email地址
mailto：邮箱地址。浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填入收件人地址。
cc=：抄送地址。在收件人地址后用cc=地址，可以填写抄送地址。
bcc=：密件抄送地址。在收件人地址后用bcc=地址，可以填写密件抄送地址。
;：多个收件人、抄送、密件抄送人。用分号隔开多个收件人的地址，可以把邮件发送给多个收件人。
subject：邮件主题。添加邮件的主题
body：邮件内容。添加邮件的内容
* 如果mailto后面同时有多个参数的话，第一个参数必须以?开头，后面的参数每一个都以&分隔。
<a href="mailto:邮箱地址" ?cc=地址 &subject="主题" &body=“内容”>发送邮件</a>
-
<img>标签
- <img>标签，为网页插入图片。
-
src：标识图像的位置。 -
alt：当图片下载不成功时，可以看到该属性指定的文本。 -
title：鼠标滑过图片时显示的文本。 - 图像可以是GIF，PNG，JPEG格式的图像文件。
<img src="图片地址" alt = "下载失败时的替换文本" title = "提示文本">
-
<em>和<strong>标签
- 语气上：<em> 表示强调，<strong> 表示更强烈的强调。
- 样式上：在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
-
<code>标签，<pre> 标签
- 在网页中显示计算机编程代码，当代码为一行代码时，使用<code>标签，如果是多行代码不能使用<code>标签，可以使用<pre>标签。
- <pre> 标签的主要作用：预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
- <pre>标签可以用来展示计算机的源代码和在网页中预显示格式。
<code>代码语言</code>
<pre>语言代码段</pre>
-
<q>标签
<q>标签，短文本引用。标签里面的内容不要加双引号，浏览器会自动添加。
<p>引用诗句<q>秋风生渭水，落叶满长安。</q> </p>
-
<blockquote>标签（块级标签）
<blockquote>标签，长文本引用。浏览器对<blockquote>标签的解析是缩进样式。
<blockquote>
闽国扬帆去，蟾蜍亏复圆。
秋风生渭水，落叶满长安。
此地聚会夕，当时雷雨寒。
兰桡殊未返，消息海云端
</blockquote>
