小红帽学前端 | 1.3 常用 HTML 元素

前言上次我们介绍完 head 元素里面的东西，主要就是了解元数据的一些东西，也算摸明白整个 HTML 文件的一个结构了吧。然后聊了那么多枯燥的概念，今天来整点实际的，我们直接上手写页面，写一个丑的一批的网页简历（没有 CSS 写样式搭配，是真的丑。）。如下：

借助这个来了解一下我们常用到的这么几个 HTML 元素。

本文的笔记代码我丢到 GitHub 上面去了，最好可以去看看，然后自己琢磨搞出来练练手。

1 常用元素概览

HTML 元素很多，但是常用的就那么几个。我们先看一下全景，然后在一个一个去用他。

不同的元素有着不同的作用，我们简单做个分类，今天我们了解有下面的这些元素。

布局相关
1
div span
文本元素
1
h1 - h6, p
列表元素
1
ul ol li
表格元素
1
table tr th td

其他元素

1	button(按钮) a（链接） img（图片）

2 布局元素 div span

这两个都是用于布局的布局容器，本身是没有任何语义的。也正因为如此，他们采用于布局，用于给元素分组分模块。比如像下面这种

1
2
3

<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

按钮树与用户交互最为常见的元素啦，他用起来也简单。

1	<button onclick="alert('I want you')">I want you</button>

就是展示一个按钮，然后给他的点击事件（onclick）绑定一个方法，让用户点击之后弹出出一个对话框。

7.2 链接元素 a

我们平常有 word 的时候应该用过超链接吧，这个就是网页里面的链接，他就是用于从当前页面链接到其他地方的。

1	<a href="http://www.lijiayuan.top">lijiayuan.top</a>

上面 a 元素的内容就是网页上显示的东西，然后元素的 href 属性就是链接跳转的地址。当我们在网页点击这个内容的时候，我们就会直接跳转到 http://www.lijiayuan.top 这个网址。

7.3 图片元素 img

常言道「一图胜前言」，所以我们的网页里面肯定是要放图的啦。放图就用 img 元素啦。

1	<img src="./img/avatar.png" alt="照片" width="auto" height="100">

img 元素的 src 属性是指显示图片的地址，可以是本地的也可以是网上的。然后 alt 属性是指当你的 src 给的地址没有图片的时候会显示的文本。按道理是要写的。height,width 属性就不说了，就是图片的高宽啦。

讲在最后

上面这这个元素基本就是我们平常用的比较多的元素啦。其实基本用到的就只有这些。但是在 HTML5 之后的话，出现了许多新的语义化的标签，这个就自己看或者我们到时候再讲咯。因为不想写太多，所以元素内的一些属性没有细说，只是让大家知道这么简单去用咯，深入一点的了解，自己来或者看后面我写不写吧。

看完这一篇，大家其实基本的 HTML 都会写啦，只不过是写的很难看而已。无所谓，难看大家也要写下去，练一下，可以模仿我给的 demo。（基本学前端都是模仿过来的）。反正就是一句话，多敲代码。