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属性,还有idclass属性。

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学前端”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180208G188M100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券