欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web网页设计之HTML_1. 走进HTML

程序员文章站 2022-04-09 23:17:56
开讲啦,这个是我们的一个新的起征点啊,也是重要的一个点,不学这个,我们学的数据库,JDBC以及后端的JAVA就都瞎了,因为我们以后是做Web开发的,做桌面开发的相对较少,而这个HTML+css+jQuery就是我们学习整个前端必须要学习的东西,因为这就和盖房子一样,先打好地基,才能起楼,不然打不好地基,不管设计的再好的楼都屹立不住。当然啦,以后我也会去讲一些前端的框架,比如Layui、BootStrap、Vue等等,但是在这之前,先学会这几个基本的。好了,废话不多说了,开始干它!一、认识Web上...

开讲啦,这个是我们的一个新的起征点啊,也是重要的一个点,不学这个,我们学的数据库,JDBC以及后端的JAVA就都瞎了,因为我们以后是做Web开发的,做桌面开发的相对较少,而这个HTML+css+jQuery就是我们学习整个前端必须要学习的东西,因为这就和盖房子一样,先打好地基,才能起楼,不然打不好地基,不管设计的再好的楼都屹立不住。当然啦,以后我也会去讲一些前端的框架,比如Layui、BootStrap、Vue等等,但是在这之前,先学会这几个基本的。

好了,废话不多说了,开始干它!

一、认识Web

上面开场白中我们提到了这个Web,我们先来说这个东西,老样子,先百度百科。

Web网页设计之HTML_1. 走进HTML

可以看到啊,这个Web是全球广域网,英文全称叫 World Wide Web,也叫做万维网,也就是www,这个我们大家都见过啊,好比百度,www.baidu.com,这个就是一个万维网,我们可以在世界上任何有网络的地方访问到它,让它提供给我们服务。

这个万维网,是没有任何系统限制,你可以在有网络的地方使用Internet访问任何你想要的访问的网站,访问里面的资源,大概弄个图

Web网页设计之HTML_1. 走进HTML

你呢,去请求www.baidu.com,然后经过互联网,什么DNS服务器、域名解析等等,最后请求到了百度的服务器,然后百度服务器一看有人请求,它会响应你的请求,将资源响应给你,这样你就能看到百度的内个页面了。

同样,二狗子也是,去请求这个CSDN,也是通过互联网,DNS域名解析之后,最后也请求到了CSDN服务器,然后CSDN服务器再给你做响应,你就能看到CSDN的资源了。

这个就是万维网,大概讲述一下,如果有同学好奇,可以自己去搜索相关资源,去学习。

二、认识HTML

知道了Web以后,我们再来说这个HTML,先百度百科

Web网页设计之HTML_1. 走进HTML

可以看到啊,HTML被称为超文本标记语言,看清楚啊,是标记语言,不是编程语言!!!这个语言呢,可以通过这一系列标签,将这个文字、图片、视频、表格啥的通过你的浏览器展示出来。

我们呢,到时候可以通过Tag(也就是标签),来去将我们想到的,描绘到页面上。

这个Tag呢,一般是由尖括号包围的关键词,比如<html>,而且啊,这个一般都是成对出现,好比有开始,也有结束,再举例:<html>内容...</html>,这样子的。

一个HTML网页由很多很多的这样的Tag组成,除去Tag之外,还有就是我们上面说的文本,就这两个,没有其他的了。

我们也称这个HTML网页是一个文档,这个文档会被我们的浏览器读取到,而浏览器不会去直接将这个标签显示出来,而是去解释了我们文档里的这个Tag,将解解释好的内容呈现出来,这也就是你现在看到的页面。

知道这些之后,我们自己来弄一个这个HTML页面,我们感受一下。

三、创建HTML页面

这里呢,我推荐一个工具,WebStorm,大家可以看我的这个视频进行安装啥的。

链接:https://www.bilibili.com/video/BV1ZV411B797

安装好以后,我们打开它

Web网页设计之HTML_1. 走进HTML

大概界面就这样,我专门弄了一个study的目录,用来做教学。大家也可以自己弄一个哦~~~

然后我们创建一个HTML的页面

Web网页设计之HTML_1. 走进HTML

Web网页设计之HTML_1. 走进HTML

是的,没有错啊,这个就是HTML页面,具体里面的内容,我们后面去说,先来使用一下

我们再两个 body 标签中添加内容,我们加一段文本,你好,html

Web网页设计之HTML_1. 走进HTML

然后点击角落的这个东西

Web网页设计之HTML_1. 走进HTML

我这里选择火狐

Web网页设计之HTML_1. 走进HTML

可以看到啊,我们已经成功弄出来第一个自己的HTML了

这一篇就说到这里,下一讲我们详细介绍HTML。

 

 

 

本文地址:https://blog.csdn.net/weixin_45908370/article/details/107397661