小红帽学前端 | 1.3 常用 HTML 元素
前言 上次我们介绍完 head 元素里面的东西，主要就是了解元数据的一些东西，也算摸明白整个 HTML 文件的一个结构了吧。然后聊了那么多枯燥的概念，今天来整点实际的，我们直接上手写页面，写一个丑的一批的网页简历（没有 CSS 写样式搭配，是真的丑。）。如下：
借助这个来了解一下我们常用到的这么几个 HTML 元素。
本文的笔记代码我丢到 GitHub 上面去了，最好可以去看看，然后自己琢磨搞出来练练手。
1 常用元素概览
HTML 元素很多，但是常用的就那么几个。我们先看一下全景，然后在一个一个去用他。
不同的元素有着不同的作用，我们简单做个分类，今天我们了解有下面的这些元素。
- 布局相关
div span
- 文本元素
h1 - h6, p
- 列表元素
ul ol li
- 表格元素
table tr th td
- 其他元素
button(按钮) a（链接） img（图片）
2 布局元素 div span
这两个都是用于布局的布局容器，本身是没有任何语义的。也正因为如此，他们采用于布局，用于给元素分组分模块。比如像下面这种
<div class="header">...</div> <div class="main">...</div> <div class="footer">...</div>
就把整个页面分成了三个模块。
这两个元素唯一的不同就是，div 是块级元素，span 是内联级元素。
元素就分这两种。其中块级元素会独占一行，不能和其他元素并排，可以设置固定的宽高。内联元素可以与其他内联元素并排，不能设置宽高。
比如我们看看下面的代码会显示啥
<span>GitHub:</span> <span><a href="https://github.com/lijiayuan365">https://github.com/lijiayuan365</a></span> <div>网站：<a href="http://www.lijiayuan.top">lijiayuan.top</a></div> <div>电话邮箱...</div>
可以看到两个 span 的元素内容是挤在一行的，而 div 的内容是各占一行的。
3 标题元素 h1 - h6
h1 - h6 元素代表了六个级别的章节标题的。h1 是最高的部分级别，h6 是最低的。按照语义化的角度看，这个元素就用于做标题的咯。
在 demo 页面中，每一项的标题就是用 h1 元素的。
4 段落元素 p
HTML 段落元素。表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
反正就是你要是有几段文字的，想要展示的，那就丢到 p 元素里面咯，一个元素的内容就是一个段落。
5 列表元素 ul ol li
这个是列表元素。其中 ul，ol 分别定义无序列表和有序列表。li 是他们列表里面的列表项目。看个代码就知道了。
<ul> <li>熟练掌握 HTML，CSS，JavaScript 等前端技术；</li> <li>熟悉使用 DIV + CSS 布局；</li> <li>熟悉运用 jQuery，Vue，WePY 等前端开发框架；</li> <li>熟悉前端开发规范、工程化、组件化，模块化开发；</li> <li>了解面向对象设计原则，常见的数据结构与算法及设计模式；</li> <li>了解服务端语言 Java，Node.js 和 HTTP 协议；</li> </ul> ... <ol> <li>用 Express 搭建后台，用分层思想优化后台项目结构</li> <li>使用 Antv-G6 设计工作流绘制组件</li> <li>使用 Vue 动态组件实现表单字段的动态渲染</li> <li>...</li> </ol>
可以看到 ul 无序列表的列表项前面用一个黑点标注，ol 有序列表的列表项目前面就直接用数字依次排下来。
6 表格元素 table tr th td
有时候我们展示数据使用单纯的列表看起来不是特别直观，我们会使用表格。他里面涉及的元素还挺多的。其中 table 定义一个表格，tr 表示表格的一行，里面的 td 和 th 都是行内的列项目。其中 th 是列标题。看个代码就明白了。
<table border="1">
<!-- 表格标题行 -->
<tr>
<th>时间</th>
<th>单位</th>
<th>工作内容</th>
<th>岗位</th>
</tr>
<!--表格第二行内容-->
<tr>
<td>2018.06 - 2018.10</td>
<td>XX 公司</td>
<td>做了啥牛逼的事情，取得啥牛逼的成绩</td>
<td>前端开发工程师</td>
</tr>
<tr>
<td>2018.06 - 2018.10</td>
<td>XX 公司</td>
<td>做了啥牛逼的事情，取得啥牛逼的成绩</td>
<td>前端开发工程师</td>
</tr>
</table>上面的内容显示到网页就有了下面的效果。
然后 table 元素的属性有几个我们要拉出来看看。
| 属性 | 描述 |
|---|---|
| border | 定义表格的边框的宽度 |
| cellspacing | 规定单元格之间的空白 |
| cellpadding | 规定单元边沿与其内容之间的空白。（也就是内边距） |
此外 td 元素有两个属性我们也要关注一下。
| 属性 | 描述 |
|---|---|
| colspan | 规定单元格可以横跨的列数 |
| rowspan | 规定单元格可横跨的行数 |
这两个有啥子用啊，很有用的，我们的表格不可能都是那么规规矩矩几行几列来着。有时候我们会存在合并左右两个单元格的情况，也有可能存在合并上下两个单元格的情况，就像下面这种情况。
这种这么搞啊，就是分别使用 colspan="2" 和 rowspan="2" 来让一个 td 占据两个 td 的列（行）。代码如下：
<table border="1" cellspacing="0">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<!-- 此处 td 占据两列 td 的空间（就是合并左右两个单元格吧）-->
<td colspan="2">2列</td>
<td>1</td>
</tr>
<tr>
<!-- 此处 td 占据两行 td 的空间（就是合并上下两个单元格吧）-->
<td rowspan="2">2行</td>
<td>rrr</td>
<td>rrr</td>
</tr>
<tr>
<td>eee</td>
<td>eee</td>
</tr>
</table>上面空间安排的刚好，要是空间多或者小，出现多余的 td 会怎么样呢？自己玩玩。
7 其他元素
7.1 按钮元素 button
按钮树与用户交互最为常见的元素啦，他用起来也简单。
<button onclick="alert('I want you')">I want you</button>就是展示一个按钮，然后给他的点击事件（onclick）绑定一个方法，让用户点击之后弹出出一个对话框。
7.2 链接元素 a
我们平常有 word 的时候应该用过超链接吧，这个就是网页里面的链接，他就是用于从当前页面链接到其他地方的。
<a href="http://www.lijiayuan.top">lijiayuan.top</a>
上面 a 元素的内容就是网页上显示的东西，然后元素的 href 属性就是链接跳转的地址。当我们在网页点击这个内容的时候，我们就会直接跳转到 http://www.lijiayuan.top 这个网址。
7.3 图片元素 img
常言道「一图胜前言」，所以我们的网页里面肯定是要放图的啦。放图就用 img 元素啦。
<img src="./img/avatar.png" alt="照片" width="auto" height="100">
img 元素的 src 属性是指显示图片的地址，可以是本地的也可以是网上的。然后 alt 属性是指当你的 src 给的地址没有图片的时候会显示的文本。按道理是要写的。height,width 属性就不说了，就是图片的高宽啦。
讲在最后
上面这这个元素基本就是我们平常用的比较多的元素啦。其实基本用到的就只有这些。但是在 HTML5 之后的话，出现了许多新的语义化的标签，这个就自己看或者我们到时候再讲咯。因为不想写太多，所以元素内的一些属性没有细说，只是让大家知道这么简单去用咯，深入一点的了解，自己来或者看后面我写不写吧。
看完这一篇，大家其实基本的 HTML 都会写啦，只不过是写的很难看而已。无所谓，难看大家也要写下去，练一下，可以模仿我给的 demo。（基本学前端都是模仿过来的）。反正就是一句话，多敲代码。