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 属性。——这两个属性是用在、元素里的。
后记:这篇的学完,我们也算是渐入佳境。稍后把下一篇的“表单”学完,那基本上我们可以把一个页面的大体框架写出来了。
对于其他非常用剩余标签、属性,我们将在后边的学习、工作中各个击破。
加油!
领取专属 10元无门槛券
私享最新 技术干货