前言 上次我们介绍完 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。(基本学前端都是模仿过来的)。反正就是一句话,多敲代码。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。