当下,无论是使用手机APP,笔记本电脑PC亦或是其他电子产品,连接网络查询我们需要的资讯信息已成为人们的一种学习和生活习惯。
比如:上面这张北京大学官网的网页截图。里面就有小图片、大的背景图片、文字、线条、表格、小图标等等,这些丰富多彩的内容又是如何被有机的组织在一起的呢?
从本文开始,我们分享推出关于网页制作的一系列学习内容。
关键词:网页的基本结构
01什么是HTML语言?
制作网页使用的是HTML语言,其英文全称:Hyper Text Markup Language,中文叫:超文本标记语言。
什么叫“超文本”呢?是因为网页上不仅仅只有文字,还有图片、视频、超链接、表单(后面会讲到)等等这些信息内容,它们已经不单单属于文字的范畴了。
就好像在“人”的前面加个“超”字,这个人一定具有某种特别的技能,网页也是如此,它不仅仅只是纯文字的呈现,还包括其他更丰富的元素,所以我们称其为“超文本”。
什么又叫“标记语言”?HTML使用标记标签来描述网页。所谓“标记标签”就是由一对尖括号包围的关键词组成,比如:、
、 等等(注意:是英文输入法下的尖括号)。标记标签一般都要成对出现,称为双标签,当然也有个别单标签的情况。就好比我们人类社会,一旦成年就需要成双成对结婚一样,也有个别独身主义者,这都是极端案例,不符合普遍规律。
标签对中的第一个标签是开始标签,第二个标签是结束标签,结束标签需在关键词前面加一个斜杠(/)。比如:。这就是一个完整的开始和结束标签的组合。
小节:HTML是用来描述网页的一种语言,叫超文本标记语言。它不是一种编程语言,而是一个标记语言,由一套标记标签组成。后面我们会学到很多这种标签的关键词。
02网页的基本结构
网页其实跟我们人类的身体结构类似,由头和身体两个部分组成,分别用head和body这两个单词表示。制作一个网页的基本结构如下:
特别需要注意其顺序,头(head)在上,身体(body)在下面,不能写颠倒了。无论是头、还是身体都包裹在我们的骨骼皮肤里,这外围的皮肤用一个统一的单词(html)书写即可,注意(html)这个“单词”是前面超文本标记语言的英文缩写。
除此之外,如上图,头(head)里面还嵌套了一对(title)的双标签,这代表网页的标题。在身体(body)里面嵌套了一对(p)标签,这在网页中表示段落标签。
HTML语言不区分大小写,可以大写、可以小写,和可以混合书写。它不像C语言等其他编程语言那样严谨,对单词的大小写没有特殊要求。建议大家写成小写字母,方便阅读源代码。
小节:基本结构
后期我们学习的所有标签基本上都是写在body这对标签里面的,也就是身体是我们网页呈现的主要部分。
03实践操作
编写网页的专门工具软件有很多,本文从初学者的角度,用电脑上的基础软件记事本就可以制作一个网页了。其步骤如下:
1、打开记事本
2、输入HTML代码,参照本文第二节内容
3、保存文件后缀名为*.html或*.htm文件,注意格式问题
4、双击打开网页预览效果
快来试试,制作你的第一个网页吧。
举报/反馈