Tony学前端(一):超文本是超人的文本吗?

2018/07/29  |  云课堂  |  by 老潘  |  浏览 62

手机扫码观看


功课都这么忙,还要学做网页,又占用我打游戏的时间,哼!

今天开始给小朋友们讲怎么做网页,网页也属于程序设计的范畴,学好了做网页,那么小朋友们也就会更细心、更有逻辑性,少犯马大哈的错误这个对于学习上面也是很有帮助的。

这一讲将大致说一下网页的组成部分,随后再讲一点点的html。我们首先演示一个页面,看看效果,随后分析一下页面的组成:

我们可以看到这个页面有标题,有段落,还有图片等等,这些东西都是网页里的元素。另外我们仔细看,那个“10厘米”的字是红颜色的,显得与众不同,明显有不一样的样式,颜值特别高。

刚才我们已经接触到了两个概念:元素样式,接下来我们再学习一个概念:

(哎呀,这题目好难啊,我做不出,怎么办?咦,好像点击这里可以显示解题过程的,试试看!)

(哈哈,解题过程出现了!

回想刚才的过程,我们是点击了一个链接,才出现解题过程的,也就是说我们需要通过某种动作来触发特定的效果,而这种操作在网页里是无处不在的,譬如点击一个按钮跳转到另一个页面、输入框里敲一下回车又会有提示出来等等。

这种操作的处理逻辑就像剧本一样是事先编写好的,所以我们称之为脚本,脚本使得网页有了交互性。当然如果脚本写错了,那么网页的运行也会出问题,我们叫做出bug啦,所以小朋友们一定要仔细!

到现在为止,我们已经知道了网页的三要素:页面包含的元素让页面更漂亮的样式和让页面具有交互性的脚本,而在我们的网页编写中,实现这三部分的分别是htmlcssjavascript(简称js)。我们以造房子来比喻的话那分别就是:

  • HTML撑起了整个网页的骨架,各种HTML元素就好像造房子的材料,同时HTML也决定了网页的结构,就像新房子里有几个卧室、几个客厅厨房卫生间等等。
  • CSS让网页更加五彩缤纷,就像我们给新造好的房子装修,儿童房和大人房可以不同的装修,让房间变得更舒适漂亮。
  • JavaScript让网页活动起来,有了交互性,在我们新造好的房子里装上电灯、安上水管等,这样我们一按开关灯就亮了,打开水龙头就有水流出。


接下来,我们会先学html,把房子造起来;再学css,让房子变得漂漂亮亮;最后学习Javascript,让房子与我们互动起来!加油吧,娃娃们!

一、首先我们要知道,为什么叫html?

Html的全称是 Hyper Text Markup Language,中文意思是指文本标记语言

1. 超文本是超人的文本吗?

当然不是啦!首先“文本”二字说明html本质是文本。而“超”字是表明其不仅仅只描述文本,还可以将图像、声音、视频等非文本元素组织起来,就像我们在网页上看到的不仅仅只有文字一样。

原来与超人没有关系。。。

2. 标记是啥?

“标记”表明HTML是通过做标记的手段来呈现效果的,并且这个标记的规则是统一的。

还是不明白吗?咱们接着往下看。

关于标记概念的特训:

回想起老师考前让我们复习的时候,总是要让我们划重点!于是不同的小朋友可能会做不同的标记,于是会出现这样的情况:

而我们编写html,也是对描述的元素做标记,譬如这个词是标题,要大一点;那句话是重点要加一个下划线;这个地方要放张图片漂亮点。。。等等。

同时我们看到小朋友们做的标记是不一致的,如果把小雅的书给小明,可能小明就搞不清重点在哪里了,这个就说小朋友做的标记格式不统一!


而做为网页来说,我们要在不同规格的电脑上浏览,还要在手机、平板或其他电子设备上看,因此必须要保持一致,不能我这边看到这个字是红颜色的,到了其他电脑上就变成蓝颜色了。因此我们对于html做的标记必须统一,必须有一套规范,而我们学习的正式这套规范!

二、标签

我们之前讲了标记,html里的标记有一个专门的说法叫标签,以后我们会一直听到标签这个词,直到耳朵长茧!那么标签究竟是怎样的呢?

标签有一对尖尖的括号!

标签就是由一对尖括号包围的关键字,比如<html>,要注意必须包裹的是关键字,如<熊孩子>肯定就不能算是标签了!

标签一般来说是成对出现的,在前面的叫开始标签,在后面的为结束标签,开始和结束标签之间的就是标签要描述的元素。结束标签总是</xxxx>的形式,如前面的<html>标签对应的结束标签就是</html>,<p>标签对应的结束标签就是</p>。

如果一个标签有结束标签,那又称为闭合标签。那么的没有结束标签的,我们称之为开口标签。不过开口标签的数量很少!

我们开心果都是开口的!

1. 第一个标签:html

一看这个标签名字就知道它很特别,所有的html内容必须在<html></html>之内,因此一个页面我们看起来是这样的结构:

<html>标签就像一个大地主,在范围之内的都是我的!


接下来,我们看看head和body标签

根据标签字面意思,小朋友们肯定会有这个疑惑:


2. head头部标签

在html的头部<head>标签内,是描述页面的各种属性和信息,包括页面的标题、关键字、编码等信息,同时我们引入的外部文件、编写的JavaScript、CSS样式等一般都放在头部。

不明白不要紧,后面我们再慢慢讲,近一阶段我们主要讲<body>里的元素。

3. body身体标签

<body>描述了页面的主体,我们要在网页上展示的元素都在主体里面!我们后面讲的标签都是放在<body>里面的。

因此我们的页面结构就是这样的:

一个写html的程序猿:

好了,今天我们就讲这么多了。


我们总结一下,今天我们主要学习了:

网页构成的三要素:元素、样式和脚本,也就是html、css和javascript。

html名称的由来、标记的含义。

什么是标签,标签的使用规则,闭合标签和开口标签。

最后学习了三个标签:<html>、<head>和<body>。


本讲还是以介绍和了解为主,主要是为了让小朋友们对网页产生兴趣,下一次我们会讲更多的标签。