Tony学前端（二）：居然有懒人专用写法？

本文共有5100字，预计阅读时间：25分钟

在文章末尾可以观看本课的视频

唉，自从开始学做网页，我每周要少打半个小时游戏，哼！！

首先我们复习一下上次我们都讲了哪些：

组成网页的三要素：

元素、样式和脚本；分别是html、css和js（Javascript）。

为什么叫html：

html是指超文本标记语言，不是超人的文本，另外还讲了标记的含义。

标签：

标签由尖括号包围关键字，分为开口标签和闭合标签。

学习了三个标签：

：标签界的大地主。

：头部标签，头部我们暂时不去管它（但是不能没脑子哦）。

：身体标签，我们学习的标签都在身体里。

接下来我们继续前进！！

有一个重要问题，我们用什么来写html？

我们写html，就像编辑剧本一样，所以写html的工具又叫编辑器。我们可以打开记事本来输入html内容，保存以后将其扩展名改为.html或.htm就可以用浏览器打开了。

我们可以用哪些编辑器？

记事本太low，最初阶段可以用editplus、notepad++等，等熟练了以后就可以用功能更强大的SublimeText、Dreamweaver、webstrom等等，我们讲课的例子都是用editplus编写的。

我们继续讲标签：

在一篇文章里，标题总是最醒目的，而标签就把元素标记为标题。标签有六兄弟，根据标题中字体的显示大小分别从至，我们根据实际情况来使用恰当的标签。

我们依次来写6个标签，分别是到：

我是h1,最大的标题

我是h2,标题二兄弟

我是h3,更小一些

我是h4,我还要小

我是h5,我已经很小了

我是h6,我最小

我们看看文字大小的效果：

有一个我们要注意的地方，要尽量把标签用在真正的标题上。而不是在正文中。如果想在正文中显示不同大小的文字，应该使用样式，后面我们很快就要学到。

对于标签我们要牢记的是，它有六个兄弟！

我们葫芦娃可有七个兄弟！

我们已经知道了用标签来标记文章里的标题，那文章里的详细信息就应该用

标签来标记了。

标签标记的是段落，不像标签有六个兄弟，

标签就一种，因此在

标签里显示的文字大小总是一样的，现在我们结合标签和

标签来演示一下：

我们写一份期中考试复习要点说明的片段：

期中总结及要求

考试时间为90分钟，总分100分.

一、考试范围

六年级第一学期1.1——2.7

二、重点复习

整除的概念，常考请选择第一个数能整出第二个数的问题（注：若有两整数相等，此为正确答案，排除相等的情况是小数能整除大数，大数能被小数整除）

我们来看一下效果：

结合和

标签，我们已经可以开始写一点格式整齐的内容了，我们继续加油，学习更多的知识，让我们的网页变得更丰富多彩起来！

接下来我们思考一个问题：

标签不像标签有那么多的兄弟，那如果我想让

标签里的文字大小不一样怎么办？

一个非常重要的概念：标签的属性隆重登场！

我们已经学过了html的标签规范，是由尖括号包围的关键字。但是尖括号里不仅仅是容纳关键字，还可以容纳标签的属性，属性可以赋给标签更多的信息。像刚才我们碰到的问题可以通过标签的style属性来实现，我们先看示例，注意红色部分代码：

期中总结及要求

考试时间为90分钟，总分100分.

一、考试范围

六年级第一学期1.1——2.7

二、重点复习

整除的概念，常考请选择第一个数能整除第二个数的问题

（注：若有两整数相等，此为正确答案，排除相等的情况是小数能整除大数，大数能被小数整除）

该html的效果为：

我们发现倒数第二行的字体变大了，而最后一行字体变小并且变成了红颜色，那为什么会产生这样的变化呢？

我们注意一下html中两句红颜色的代码，第一句是：

这里我们给

标签设置了一个属性，该属性的名称为style，style属性就是设置元素的样式属性，还记得我们上一次讲的样式吗？样式就是可以给html元素做修饰，让元素更漂亮，就像我们装修自己的房子一样。

而这一句的意思是把style的属性值设置为"font-size:16px"，font-size是一个样式名称，表明文字的字体大小，冒号后面跟的16px为font-size的具体值，其为16px，表明这个字体的大小时16px，px是像素单位，暂时不深入研究，只要记住这个值越大文字就越大。

因此，属性的写法格式就是：

并且属性是写在开始标签里的。

对于我们写的非常多的style属性的写法格式那就是：

实际应用中，我们往往要对一个元素设置多个样式，譬如不但要设置文字的大小，还要设置文字的颜色，那么我们来看示例代码中第二句有红颜色的代码：

这句的style属性就设置的更复杂了，因为我们设置了两个样式，分别是font-size:12px和color:red，color:red就是将文字的颜色设置为红色。而两个样式之间使用分号隔开的。因此如果style属性里包含多个样式的话，那么写的格式就是：

小朋友们写style属性一定要细心，首先单词不能错，另外里面的等号、双引号、冒号和分号等都不能写错，否则就不是我们的预期效果了。因此学习写代码是绝对能锻炼大家的细心的。

对于小胖同学的style我们可以这样写：

标签的常用属性有三个，除了刚才说的style属性，还有id和class属性。

id属性：可以唯一的标识一个标签，就像小朋友们在班级里的学号，这个学号总是唯一的。因此不同的标签应该要设置为不同的id值。

class属性：是描述标签的类型，就像班级里的小朋友分男生和女生，因此不同的标签可以有相同的class值。

在我们学html的时候，可能不太用到id和class属性，但是在学习css和js的时候，那几乎就要天天和这两个属性打交道了！

构成网页的基础就是文字，因此我们专门说下和文字有关的常用属性，这样大家就可以把文字设置的更丰富多彩了！

字体：文字的字体由font-family来设定，譬如我们常用的宋体、黑体、正楷、雅黑等等。我们如果不设置字体的话，那么就显示为电脑默认字体。也可以在font-family里指定多个字体，用逗号隔开，那么当前面的字体电脑里不存在的话，就会自动用后面的字体来显示。

font-family：宋体

font-family：微软雅黑

font-family：黑体，宋体

文字大小：文字的大小由font-size设定，其值为像素值，用px来表示，值越大那么文字也就越大。

font-size：12px

font-size：16px

font-size：20px

文字颜色：文字的颜色由color设定，可以直接写常用颜色的英文名，也可以写16进制的RGB值（这个现在不懂没关系）。

color：red

color：blue

color：#f00

字体风格：如果我们要将文字设置为斜体，那么可以通过font-style来设定，它可以设为三个值：normal、italic和oblique，分别表示正常、斜体和倾斜，其实后两种的效果感觉都差不多，全是斜的。

font-style：normal

font-style：italic

font-style：oblique

文字粗细：与字体大小不同，字体的粗细可以想象为肥胖度，由font-weight设定，其值由100至900共9档，其中400为正常粗细。另外也可以直接使用关键字normal（正常）、bold（粗体）、bolder（更粗）和lighter（更细）来表明粗细。

font-weight：200

font-weight：700

font-weight：bolder

划线装饰：有时我们想给一段文字加上下划线或中划线，这是由text-decoration来设定。常用的值有：underline（下划线）、line-through（中划线）、overline（上划线，这个很少用）等。

text-decoration：underline

text-decoration：line-through

text-decoration：overline

接下来我们利用文字的属性来演示一些效果：

我是默认字体

我是黑体

我是12px

我是20px

我是红颜色

我是有下划线的14px

我是蓝色的粗粗的斜斜的有下划线的26px

我是粗粗的斜斜的黑体的26px

对应的效果：

刚才我们讲了好些文字相关的属性，如果仔细观察的话，会发现其中分为两类：一种是font前缀开头的，这个实际上是文字（font）的专用属性，剩下的其实是html标签的通用属性。

font为前缀的属性

font-family：字体

font-size：大小

font-style：风格

font-weight：粗细

其他的通用属性

color：颜色

text-decoration：划线

如果是对于文本的专用属性，那么我们可以一起写在一个专用属性font中，其各个文字属性的先后顺序为font-style、font-weight、font-size、font-family，其中font-style和font-weight可以不用设置，但是font-size和font-family必须都要设置，并且顺序不能反，否则将没有效果。

因此，我们就有了懒人专用写法：

文字相关的属性我们先讲到这里，接下来我们继续讲其他的标签。

接下来我们说两个开口标签，

和。这两个标签都很简单：

代表的是一个回车，而是画一条水平线。通过这两个标签，可以更好的格式化我们的页面。

这里要注意的是开口标签中斜杠的写法，还记得在闭合标签中结束标签的写法吗？就是在关键字前加斜杠，而开口标签是没有结束标签的，因此这个斜杠就移到了关键字后面了。不过有时候你发现不写斜杠也可以，只是为了养成良好的习惯，我们还是应该按照规范来写！

接下来我们给之前的“期中考试注意点”加上水平线和回车，注意红色部分代码：

期中总结及要求

考试时间为90分钟，总分100分.

一、考试范围

六年级第一学期1.1——2.7

二、重点复习

整除的概念，常考请选择第一个数能整出第二个数的问题（注：若有两整数相等，此为正确答案，排除相等的情况是小数能整除大数，大数能被小数整除）

页面中，在标题“其中总结及要求”的下方增加了一条水平线，而在副标题"重点复习“的上方区域空白范围更大了，那个地方正是我们多加的回车：

今天的最后我们来讲一个看似很简单的问题：

看到这个标题，估计好多小朋友们都会不以为然，不就是敲空格键吗，我想敲几个就几个嘛！然而事情不像我们想的怎么简单，在html中，多个空格会被自动合并为一个空格！也就是如果你输入的是" 期中考试"，那么页面上只会显示为“ 期中考试”。

多个空格合并为一个

那我要输入连续的空格怎么办？Html里面用来表示空格，怪怪的！请注意&和;都不能缺少，放大了看就是：

所以如果想要输入两个空格的话，就应该这样写：

后面暂时没有了，今天的内容讲的有点多，我们来总结一下，今天我们主要学习了：

标签和

标签：

标签是标题，有六兄弟。

标签是段落。

标签属性：

标签属性可以赋予标签更多信息；属性的写法；用的最多的是id、class和style属性。

文字相关属性：

字体、大小、颜色、风格、粗细、划线；字体样式的懒人写法：font属性；font属性里样式的顺序。

回车、水平线和空格：

：回车。

：水平线。

：空格

本讲我们讲了一些实用的东西，下一次我们会继续讲与文本和格式相关的知识，这样小朋友就可以来尝试做一些页面了。

娃娃们加油，我们的目标是星辰大海！！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：