什么是 HTML？
HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee 提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet 就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML 是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
- HTML 语言是一种标记语言，不需要编译，直接由浏览器执行；
- HTML 文件是一个文本文件，包含了一些 HTML 元素，标签等；
- HTML 文件必须使用 html 或 htm 为文件名后缀；
- HTML 是大小写不敏感的，<HTML> 与< html> 是一样的。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)；
HTML 标签是由尖括号包围的关键词，例如 <html>；
HTML 标签通常是成对出现的，例如 <html> 和 </html>；
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签；
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
常用标签
标签 h1 ~ h6
HTML 用 <h1> 到 <h6> 来定义正文标题，每个正文标题自成一段。
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
效果如下：
heading.png
标签 a
HTML用 <a> 来表示超链接，英文叫 anchor。 <a> 可以指向任何一个文件源：一个 HTML 网页，一个图片，一个影视文件等。点击 <a></a> 当中的内容，即可打开一个链接文件，href 属性则表示这个链接文件的路径。
<a href="https://avatars0.githubusercontent.com/u/5558904?v=3&s=460">Avatar of Github</a>
效果如下：
a1.png
a2.png
标签 table
HTML 表格用 <table> 表示，一个表格可以分成很多行（row），用 <tr> 表示，每行又可以分成很多单元格（cell），用 <td> 表示，表头用 <th> 表示。
<table border="1">
<tr>
<th>姓名</th>
<th>专业</th>
<th>学校</th>
</tr>
<tr>
<td>安洋</td>
<td>计算机</td>
<td>西安理工大学</td>
</tr>
<tr>
<td>王娇</td>
<td>自动化</td>
<td>西安电子科技大学</td>
</tr>
</table>
效果如下：
table.png
标签 ul 和 ol
- 无序列表采用符号标记每个列表项，比如黑色圆点。无序列表由
<ul>开始，每个列表项由<li>开始。 - 有序列表中，每个列表项前标有表示顺序的数字。有序列表由
<ol>开始，每个列表项由<li>开始。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
效果如下：
list.png
标签 input 和 form
<form> 标签用于为用户输入创建 HTML 表单。<input> 标签用于收集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选框等。
- 文本输入 type = "text"
- 提交按钮（提交表单） type = "submit"
- 复选框 type = "checkbox"
- 单选按钮输入 type = "radio"
- 密码输入框（即输入的文字用*表示）type = "password"
<form>
Username:
<input type="text">
<br>
<br> Password:
<input type="password">
<br>
<br>
<input type="radio">Male
<input type="radio">Female
<br>
<br>
<input type="checkbox">苹果
<br>
<input type="checkbox">香蕉
<br>
<input type="checkbox">葡萄
<br>
<br>
<input type="submit" value="Submit">
</form>
效果如下：
input.png
标签 div 和 span
<div> 可定义文档中的分区或节（division / section），可以把文档分割为独立的、不同的部分。<span> 标签被用来组合文档中的行内元素，<span> 没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。
<div> 和 <span> 默认都没有对标签内的对象进行任何格式化渲染，其主要用于应用样式表。两者最明显的区别在于 div 是块元素，而 span 是行内元素(也译作内嵌元素)。
<div>
<h3>This is heading 3</h3>
<p><span style="color:blue">Hello, </span>this is a paragraph</p>
</div>
效果如下：
div_span.png
标签 img
<img> 标签可以向网页中嵌入一幅图像，从技术上讲，<img> 标签创建的是被引用图像的占位空间，并不是直接在网页中插入图像，而是从网页上链接图像。。<img> 标签有两个必需的属性：src 属性 和 alt 属性。
效果如下：
img.png
标签 button
<button> 标签定义一个按钮，在 <button> 中可以放置内容，比如文本或图像。<button> 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
<button type="button">Submit</button>
效果如下：
button.png
标签 pre
<pre> 标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
<pre>
早发白帝城
朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。
</pre>
效果如下：
pre.png
标签 em 和 i
<em> 标签告诉浏览器把其中的文本表示为强调的内容，这意味着把这段文字用斜体显示。<i> 标签显示斜体文本效果，和 <em> 标签类似。
<em>我是em</em>
<br>
<i>我是i</i>
效果如下：
em_i.png
网友评论