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

image

借助这个来了解一下我们常用到的这么几个 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>

image

可以看到两个 span 的元素内容是挤在一行的,而 div 的内容是各占一行的。

3 标题元素 h1 - h6

h1 - h6 元素代表了六个级别的章节标题的。h1 是最高的部分级别,h6 是最低的。按照语义化的角度看,这个元素就用于做标题的咯。

在 demo 页面中,每一项的标题就是用 h1 元素的。

4 段落元素 p

HTML 段落元素。表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。

反正就是你要是有几段文字的,想要展示的,那就丢到 p 元素里面咯,一个元素的内容就是一个段落。

5 列表元素 ul ol li

这个是列表元素。其中 ulol 分别定义无序列表和有序列表。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>

image

可以看到 ul 无序列表的列表项前面用一个黑点标注,ol 有序列表的列表项目前面就直接用数字依次排下来。

6 表格元素 table tr th td

有时候我们展示数据使用单纯的列表看起来不是特别直观,我们会使用表格。他里面涉及的元素还挺多的。其中 table 定义一个表格,tr 表示表格的一行,里面的 tdth 都是行内的列项目。其中 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>

上面的内容显示到网页就有了下面的效果。

image

然后 table 元素的属性有几个我们要拉出来看看。

属性 描述
border 定义表格的边框的宽度
cellspacing 规定单元格之间的空白
cellpadding 规定单元边沿与其内容之间的空白。(也就是内边距)

此外 td 元素有两个属性我们也要关注一下。

属性 描述
colspan 规定单元格可以横跨的列数
rowspan 规定单元格可横跨的行数

这两个有啥子用啊,很有用的,我们的表格不可能都是那么规规矩矩几行几列来着。有时候我们会存在合并左右两个单元格的情况,也有可能存在合并上下两个单元格的情况,就像下面这种情况。

image

这种这么搞啊,就是分别使用 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。(基本学前端都是模仿过来的)。反正就是一句话,多敲代码。


小红帽
120 声望4 粉丝