从零到壹，HTML——HTML 元素、属性详解

by Aman

前言：上一篇《从零到壹 | HTML—— HTML 基础》中，我们对 HTML 有了初步的认识，在完全掌握的基础上，这一篇我们将会接触大量常用的“标签元素”及其“属性”等。

知识点很多，但是，细细的看下去，收获一定很大。

1 学完这篇要达到的目标

随便打开一个页面，鼠标指到任意位置都知道该用什么标签就算 OK 。

1.1 提前给出总结

我们在选用标签时，就去跟他的本质功能去做对应，尽量选用语义化的标签来构建整个页面框架：

如果是标题，就用；

如果是一段话，就用

；

如果不知道他是什么，如果这个东西能占一行，就用

；如果没有一行，就一个小小的位置，就用；

如果是可点击的就用一个链接；

如果像那种并列一排排的，甚至还有一点一点，就用“列表”；

如果看到一个表格，就用；

如果看到了一个输入框，就用。

2 细说各元素，各属性

2.1 元数据

2.1.1 指定文档编码

2.1.2 适配移动端页面（理解并牢记）

注释：

宽度 = 设备宽度

用户缩放 = 不允许

初始比例 = 1

最大比例 = 1

最小比例 = 1

2.1.3 定制页面图标（即页面标签前边的小图标）

注释 ：href="favicon.ico" 这里边放这个图标的图形文件地址。

2.1.4 设置 referer（图片所在的当前这个页面的地址）

2.1.5 添加页面描述（即我们在搜索时看到的网站介绍）

2.2 头部元素里边还可以放：CSS 和 JS

注释：正如上篇中所说，头部元素里边所有的标签元素都不会显示给用户，但它会承载一些与页面描述相关的东西：CSS 样式、meta、title 等。

注释：我们这里的

标签，来引入的 CSS 样式属于我们最常用的外部样式表。有一点我们必须清楚：HTML 建立内容的“结构”，CSS 提供“样式”和“表现”。

2.3 列表

任务：写出以下图片（本文摘取）的 HTML 。

效果及源码链接（https://jsbin.com/wexariyuwi/1/edit?html,output）

Oli-Zhao 的前端一万小时

一、学完这篇要达到的目标

随便打开一个页面，鼠标指到任意位置都知道该用什么标签就 OK。

提前给出总结（我们在选用标签时……

如果是标题，就用 ;

如果是一段话，就用

如果是可点击的就用一个 链接；

如果像那种并列一排排的，甚至还有一点一点，就用“列表”；

……

注释 1：

是 Unordered List——无序列表的简称；而是 Ordered List——有序列表的简称。二者唯一的区别就是，有序列表是 123…… 开头，而无序列表是小黑点开头。其他格式一样，不再赘述；

注释 2：

或直接嵌套的标签是

标签，他们之间不允许再嵌套任何标签。需要嵌套的话，要嵌套在

标签里；

注释 3：这个乍看如乱码一样的字符就是我们 HTML 中的“实体”，lt 是 less than “小于”的简称；gt 是 greater than “大于”的简称。

然后前边加一个&字符——实体都是以&开头，以结尾。我们想显示出这样一个文本，我们在 HTML 中是不能直接打出等这种符号的，否者会被浏览器直接识别成元素，因此我们要进行特殊处理。

更多实体请参考 ：实体符号参考手册（http://www.w3school.com.cn/tags/html_ref_entities.html）

2.4 自定义列表

即一个文档里一个标题一个介绍，一个标题一个介绍……：

任务：写出以下图片（本文摘取）的 HTML。

效果及源码链接（https://jsbin.com/digoqiyera/1/edit?html,output）

Oli-Zhao 的前端一万小时

二、细说各元素，各属性

1. 元数据 :

-- 指定文档编码：

-- 适配移动端页面：

-- 定制页面图标（即页面标签前边的小图标）：

注释：href="favicon.ico" 这里边放这个图标的图形文件地址。

2.5 超链接标签

2.5.1 简单链接

2.5.2 外部链接

将 target 设置成时，点击这个链接，浏览器会新开一个窗口打开该网页：

2.5.3 返回页面顶部链接

2.5.4 图片链接

用图片来作为链接可点击的对象。

2.5.5 下载链接

2.5.6 电话链接

2.5.7 Email 链接

2.6 表格

任务：将上文中“实体”示例的表格用 HTML 写出来。

效果及源码链接（https://jsbin.com/gayezabano/1/edit?html,output）

Oli-Zhao 的前端一万小时

/*注释 1*/

table{

border-collapse: collapse;/*注释 2*/

}

th,td{

border:1pxsolid green;/*注释 3*/

}

显示结果

描述

实体名称

实体编号

空格

 

 

小于号

<

<

>

大于号

>

>

……

注释 1：

/*注释 1*/

table{

border-collapse: collapse;/*注释 2*/

}

th,td{

border:1pxsolid green;/*注释 3*/

}

我们 CSS 的引用可以采用在表头里边加样式元素来实现，注意格式。

这里边的是我们元素的属性——实际工作中对于本元素这个属性可以不用写，所有浏览器都可以知道你用这个元素就是指的是 CSS 。属性的作用是用来提供元素的一些额外信息。

注释 2：

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值：

separate 默认值：边框会被分开，不会忽略 border-spacing 和 empty-cells 属性；

collapse ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；

inherit ：规定应该从父元素继承 border-collapse 属性的值。

注释 3：

这里是设置、元素的“边界、边框—— border”的样式。

solid：线；

dashed：破折号；

dotted：点

注释 4：

表格开始。

注释 5：table head 表头开始（在页面展示时会以加粗的方式显示）。

注释 6：

tr = table row 表格的一行，下边只能嵌入或元素。

td = table data cell 表示行中的一个列；

th = 是表头里边用于和 td 同样作用的元素。

注释 7：

……

colspan 属性规定单元格可横跨的列数。这里我们让他横跨了 4 列（注意看页面效果）；而对应的横跨多个行数是 rowspan 属性。——这两个属性是用在、元素里的。

后记：这篇的学完，我们也算是渐入佳境。稍后把下一篇的“表单”学完，那基本上我们可以把一个页面的大体框架写出来了。

对于其他非常用剩余标签、属性，我们将在后边的学习、工作中各个击破。

加油！