卡其漫画页面大框架结构-HTML

356 阅读2分钟

前言

前端开发在目前市场的行情非常好,不管是就业还是薪资,而目前市场对于前端开发人员的需求量也非常的大。对于IT行业来说,前端开发是一个非常不错的选择。有很多的同学或者朋友对前端开发很感兴趣,在网上看过很多的资料,但是没有系统全面的,所以非常的迷茫。基于很多的原因,传智播客倾心打造出一套完成的系列的课程以供大家相互学习,提升自身技术水平和能力

主要内容

我们不以单纯知识点来给大家讲解,我们整个系列的课程都是以一个卡其漫画的项目来给大家去讲解前端的技术点和前端的各种技能。有了解过前端的朋友应该知道前端的知识体系非常的大,总的来说就是三大件: HTML、CSS、JavaScript。而HTML又是基础中的基础,接下来会先给大家讲解项目所有的相关的HTML知识: HTML的基本结构、HTML中大量的标签

下面这篇文章我们主要学习HTML的基本结构和HTML的标签

我们最终的做成的效果如下:


我们要搭建一个这样的网页,首先我们是需要掌握HTML的基本知识的。如同我们盖房子首先得把房子的整个架子搭建起来一样。在HTML整个结构中有一个基本的结构,我们以后要做的页面都需要有这样的基本结构那么我们基本结构是怎么样的呢?

html的基本结构
<!doctype html>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        
    </body>
</html>

在浏览器中显示如下:


HTML基本结构中代码的作用

<!doctype thml>: doctype ===> document type 文档类型     html: 遵循HTML5版本的语法
<html></html> : 网页的根标签   网页中所有的标签都是被这对标签包裹
<head></head> : 网页的头部   一般都是用来放在一些在页面不会显示的内容 
<title></title> : 标签  给网页设置一个标题
<body></body> : 主体  整个网页的主体  在浏览器上能看到的内容基本上都是放在body中

在我们所写的网页中每个页面都会有一个这样的基本结构,然后我们在这个结构中去书写其他的代码。那么页面中有那么的东西,我们又是如何来做的呢?接下来我们具体去讲解网页中的具体知识点。

预告:接下来我们将会结合卡其漫画讲解HTML中常用的标签的使用!!