【前端开发3】什么是HTML?

《【前端开发3】什么是HTML?》由【贵阳网络推广_老吴博客】网于2016年12月17日整理发布
摘要

今天我们先体验一下网站的概念,HTML这个东西也简单介绍一下,如果大家要深入的学习HTML的话还是到百度去搜索下有关学习的资料。

贵阳网络推广网站搭建,超文本标记语言

 

 “超文本标记语言”的分解

 

今天我们讲HTML,他翻译过来叫“超文本标记语言”这是什么意思呢?有些翻译确实很难理解,我们一步步去说明一下;

 

首先这个“语言”:与浏览器沟通的一个方式,可以说是浏览器的“语言”。

 

再看“标记”:标记也可以称为标签,他有自己的格式或“语法”,他的体现为:英文输入的:<>一对尖括号,他里面放的就是文本。

 

“文本”:文本就是语言,这个语言也只能是英文,因为我们的编程语言都是老外发明的,这个可以了解吧。

 

比如:我们把文本放入<>尖括号里,<html>这时候浏览器就知道你说了句html,浏览器是一种程序,你向他说了句话后必须要告诉浏览器这句话已经说完了,有点像我们使用对讲机,说完话后总是回对方一句“over”来表示结束。

 

所以完整的句子是,<html></html>,这就叫标签对,有开始<html>有结束</html>。但我的浏览器有些标签也不是都需要标签对的,有的标签就使用单标签的形式,比如:<meta>标签但他也是要表示结束,我们就在原标签里文字后面加一个斜杠如:<meta />。

 

最后我们说“超”:现在我们的网页不单单只是文字和表格了,他还可以放各种格式的图片、视频、音频文件,说以就体现了我们超文本标记语言。

 

实战,我的第一个网站

 

好,我们要进入实战了,还记得上节课说的代码编辑器吧,我在这里用HBuilder这个编辑器来做教学演示,希望大家都下载下来了,我们在打开HBuilder编辑器,在最左上方找到“新建”按钮,会出个下拉框选项选择“HTML文件”如下图;

 

贵阳网络推广网站搭建,HBUIDER

 

选择“HTML文件”后会出个对话框,可以只对这个文件命名,其实我们所以的html文件和css文件还有JS文件的命名在搭建一个网站的时候都是有命名规律的,以后我们会详细介绍,现在暂时就用默认命名new_file.html,其他选项也是默认。如下图:

 

贵阳网络推广网站搭建

 

这时候编辑器就会给我们一个初始的结构界面,如下图;

 

贵阳网络推广网站搭建

 

我们看到了这几行代码,一个个去说,先来解释第一行代码:<!DOCTYPE html>,这个标签是告诉浏览器我所有以下的都是个文档DOCTYPE,文档的类型就是html。如下图;

 

贵阳网络推广网站搭建

 

既然是html的文档首先就要有html的标签对,这是一个网页最基本的标签以后要写的内容都是放在<html></html>他们的中间,<html>标志用于Html文档的最前边,用来标识Html文档的开始。而</html>标志恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,两个标志必须一块使用。看下图:

 

贵阳网络推广网站搭建

 

有了大的框架,那我们的网页也有自己的架构,就像人一样有头部、身体和脚部,不同的部位也用不同的标签来表示,如头部标签为<head></head >,头部标签里一般放<title></title>网页内容声明和其他声明和调用,以后我们会介绍。注意:<title></title>标志对只能放在<head></head>标志对之间。如图;

 

贵阳网络推广网站搭建

 

我们的身体部位就用<body></body>标签,<body></body>是Html文档的主体部分,在此标志对之间可包含<p>、</p>、 <h1>、</h1>、<br>、<hr>等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。

 

好,这就是组成Html的4个最基本的标签,也是一个网页组成的最基本因素。我们在里面加上自己的内容看看吧。如下图;

 

贵阳网络推广网站搭建

 

这样我们就可以用浏览器观看我们网页内容了,但记住要下载好谷歌浏览器,因为很多代码编辑器的默认浏览器都是谷歌浏览器,我们现在用的HBuilder编辑器也是。我们编辑好内容后ctrl+s保存在自己想保存的路径和文件里,我是为了方便直接保存在桌面了,然后点击编辑器上方的工具栏的浏览器浏览按钮。如下图;

 

贵阳网络推广网站搭建

 

好,我们看到了乱码,我们去把第四行的<meta charset="{CHARSET}">改成<meta charset="UTF-8" />再ctrl+s保存文件,刷新浏览器看看效果。如图;

 

贵阳网络推广网站搭建

 

这时候我们就做好了一个最基本最简单的网页了,今天我们先体验一下网站的概念,HTML这个东西也介绍完了,如果大家要深入的学习HTML的话还是到百度去搜索下有关学习的资料。

 

好,今天关于HTML基础知识分享就到这里,谢谢关注老吴博客一个专注网络推广营销的80后中年男人。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: