专栏首页叶子陪你玩编程带你了解网页是怎样做出来的

带你了解网页是怎样做出来的

随便打开一个网页,这里用某首页举例外观如下:

鼠标右键,可以查看它的源代码:

对的,你没有看错,就是上面这些密密麻麻的字符拼凑在一起就构成了这样的一个百度首页,淘宝网站的一个个商品网页,视频网站等也是同样的原理组成的。网页组合在一起就构成了网站,许许多多的网站互相连接在一起就构成了互联网,当然背后还有很多的技术暂时就省略掉了。

因为有了互联网,我们的生活学习工作才能够如此的便利,那刚才哪些密密麻麻的的字符都是什么意思呢?为什么它们拼凑在一起就会出现排版好的各种文字,图片视频等。

什么是HTML语言

定义:

HTML是HyperText Markup Language三个英语单词的缩写,简称:HTML。中文名:超文本标记语言。是一种用于创建网页的标准标记语言。

之前文章讲过,标记语言的百科解释,具体详细内容可以点击 这里。标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。 标记语言不仅仅是一种语言,就像许多语言一样,它需要一个运行时环境,使其有用。提供运行时环境的元素称为用户代理。

怎样使用HTML标记语言

上面的文字概念看上去很难理解,下面就通过具体的标记符号来认知HTML这门标记语言。

常用HTML标签

网页上通常我们可以看见有大小不一,颜色也不一样的字体;还有图片,链接,表格等,这些外观之所以会表现的不一样,那是因为它们用了不同的符号标记-标签。

HTML 标题

标题(Heading)标签,通过h1-h6标签来定义6级不同大小的标题,通常前面三种就可以了。

HTML 段落

段落(Paragraph)标签,通过标签 p 来定义的,表示这是一个段落。

HTML 链接

HTML 链接是通过标签 a 来定义的。href后面填写网页地址,点击后可以跳转到百度的网站去。

HTML 图像

HTML 图像是通过标签 img 来定义的。src是填写图片的地址的。

上面只是简单的介绍了常用的一些标签,更多详细的内容可以看官方文档,这里推荐菜鸟教程https://www.runoob.com/html/html-tutorial.html,个人觉的还是很不错的,查阅基础,简单入门还是很方便的。

最简单的一个网页模板

在你的桌面上创建一个名字叫做 template.html的文件。

里面填上下面的内容,就变成一个最简单的网页模板文件了,双击打开在浏览器就可以看见了,里面的内容可以更具自己的需要去改变。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>网页标题</title></head><body>    <!-- 网页内容开始-->    <h1>标题</h1>    <p>这是网页内容,我想要做一个属于自己的网站</p>    <img src="yezi.jpg" width="200" height="200"/>      <!-- 网页内容结束--></body></html>

运行效果:

你没看错,网页就是这样实现的,网页其实就是一个利用HTML标记语言编写的一个文件,只要按照它的格式要求就可以,而浏览器就是运行HTML标记语言的环境(浏览器看到html结尾的文件就知道是HTML比较语言,就会解析到对应的格式外观),在其它地方可能就看不到网页这种效果了。

网页访问原理

其实访问网站就是访问某个文件,我这里访问的是本地文件内容,所以图片的地址栏显示的就是我的网页来源地址,所以只要你只到某个电脑的文件地址,然后有权利获取,那么你就可以访问到对应的文件了。

能理解了,但是为什么访问http://www.baidu.com也可以获取到文件了,实际上原理也是一样的

实际上原理也是一样的),baidu.com就是一个存放网页的地址。下面我查看了一个百度的IP地址是220.181.38.148,通过这个也是可以访问到百度的首页的,和前面的baidu.com是等效的。每一个IP地址全世界都是独一无二的,代表某个位置;但是如果要记住IP地址数字去访问网页比较难,所以出现域名了,比如baidu.com就是域名,我的yeching.info也是域名。它们都是一一对应到一个IP地址的,同理域名也是独一无二的。它两中间还存在一个DNS解析器,当地输入baidu.com,实际上通过DNS解析器就获取到对应的IP地址,也就到达对应的电脑(也叫服务器),获取到对应的文件了。

访问yeching.info实际上就是获取到我在阿里云买的服务器上的首页地址文件 index.html,只不过我把index.html隐藏了。

整个网站其实就是由许许多多的网页构成的,比如我在github 上的静态网站,就是纯粹由一个个网页组合在一起的。

里面存放了很多HTML文件。

这个网页就对应这里面的一个html文件。

拓展

到这里相信你对HTML标记语言应该有点了解了,网页除了HTML内容外,还有CSS和JavaScript,简单点说,HTML相当于网页骨架,CSS给网页添加外观的,JavaScript让网页可以进行交互动起来等。

下面是一个效果图,通过css让标题,段落和图片改变了外观,通过javascript点击段落会弹出一个提示警告框。

更多内容留就给你自己探索了,可以上菜鸟教程或者类似的其它网站非常多,编写代码可以在本地练习,当然也可以找那种带实时预览效果的工具,这里推荐https://codepen.io/pen/,可以编写HTML,CSS和JavaScript都可以。

本文分享自微信公众号 - 叶子陪你玩编程(gh_cd062460d25e),作者:青叶子

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 标记语言-Markup Language

    标记:就是用一些符号来区分不同的内容的,就好比全班同学的书本都放在一起,有些外观是一样的,要如何区分开呢?有些人会写个名字,有些人会折个角等,目的就是让每个人都...

    用户7054460
  • python是如何利用穷举法去解数学问题?

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • 【python入门系类课程 第四课 循环的威力】

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • html段落标签、换行标签与字符实体

    <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下:

    Devops海洋的渔夫
  • html+css学习笔记014-H5新标签0浏览器兼容

    Mr. 柳上原
  • HTML网页概述:简单介绍和基本结构分析

    我们都知道,HTML只是一种标记语言,并非脚本语言。标记语言的意思就是,标记某种文档的语言。

    邂逅千寻
  • Python3 爬虫快速入门攻略

    1、定义:网络爬虫(Web Spider),又被称为网页蜘蛛,是一种按照一定的规则,自动地抓取网站信息的程序或者脚本。

    py3study
  • 正式学习第一天下午——基础标签及其属性

    今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    二十三年蝉
  • 弱鸡谈GitHub是怎样的一个存在

    安装好客户端之后,你就不用记一大堆Git命令,直接可以在客户端里以图形界面往仓库里push代码了,客户端长下面这个样子。

    谭庆波
  • GitHub学习文档-1

    首先 GitHub 是一个平台级的软件,在 PC端,网页端,手机端都有相应的应用,下面都是根据 GitHub 的网页端介绍的。GitHub 可以看做是一个面向开...

    Wizey

扫码关注云+社区

领取腾讯云代金券