前端学习第二章——HTML的正式开始

最新推荐文章于 2024-02-29 13:59:43 发布

小简(JanYork)

最新推荐文章于 2024-02-29 13:59:43 发布

阅读量476

点赞数 11

分类专栏：前端学习入门到精通 HTML5基础知识文章标签：前端 html css3 html5 前端开发

本文链接：https://blog.csdn.net/qq_60750453/article/details/121197783

版权

HTML5基础知识同时被 2 个专栏收录

14 篇文章 10 订阅

订阅专栏

前端学习入门到精通

7 篇文章 3 订阅

订阅专栏

HTML学习正式开始

首先，我们要知道，一个网页或者一个网站的前端基本是由三种语言组成的，HTML最多只能写出一个只有黑色文字和图片的网页！

那有人就问了：那我们学这个用什么用呢？纯文字图片的网页根本就不像我们所看到的网页啊！

所有这里有个知识点一定要记住：

我们的HTML是负责我们网页的整个布局与框架的，而我们平常网页看到的那些花里胡哨的效果是CSS与JavaScript来实现的，三者互相配合，就形成了我们的网站或者网页

用一个关系来描述：

HTML —— 结构，决定网页的结构和内容（ “是什么”）
CSS —— 表现（样式），设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为，控制网页的行为（ “做什么”）

结构就不用我解释了吧！就是整个框架的布局，就像建房子，先建出地基和大概房子的墙啊、房顶啊（与其说是建不如说是拼）
表现（样式）就是将这些模块一个个拼起来，然后上色，加一些效果，比如开门关门的结构、颜色、自动人脸识别门锁等等等等
行为就是我们常见的一些网站的弹出特性啊，或者加载效果等等

就这样理解就可以，我们需要的是知道如何使用它！

进入正式学习

好了我们上面讲了 head 标签里面的主要内容与用法，但是其实上面说的内容并不重要，了解一下就好，使用我们的开发工具都是会自动生成我们的html框架的！

我们上面说了，我们 html 里面最外层就两个标签，一个是 head，另一个就是 body，而我们body标签里面才是我们 html 内容存放的主体，body 里面才是我们网站页面中看到的内容！！！

所以说，我们HTML的学习，是从 body 正式开始的，好了，那我们就来开始慢慢深入了解前端HTML语言的内容吧！

body标签

好了，我们先前说了，body 标签才是我们网页看得到的主体部分，那么我们现在来看看 body 标签的作用

我们的前端到目前，才算是真正开始哦！上面的可以不记，这里后面的都要认真理解记忆了

body 标签我们就只要知道他是网页的主体就可以，除了上面 head 标签里面的几个标签，其他所有标签都是写在 body 里面

也就是说，body 里面的标签效果，都是给我们的网页浏览的用户看的，不是给浏览器和搜索引擎看的！

H标签（H1~H6）

小提示：我们的HTML是大小写不敏感的（即不区分大小写），比如 HEAD 和 head 是同样的效果

我们先来了解 body 标签里面的第一个标签—— H 标签我们在写作文，或者写一个笔记的时候，总会要写一个标题，如果是做笔记，可能会有一个主标题和几个副标题

那我们的HTML既然是个超文本标记语言，那必定少不了标题，那如何在网页中体现一个标题呢？

看代码：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
</body>
</html>

我们标题标签一共有6个，字体是从大到小，这里我们提到一个规范，我们的 H1 标签一般一个html文件里面只会用到一个，使用也很少用 h4 及以下的标签

标题的样式如下图：

这就是我们的第一个标签——H标签(标题标签)

p标签

我们写篇文章，有标题肯定有文章内容啊！我们内容肯定是有段落的，我们怎么用一个标签来体现一个段落呢？我们有一个段落标签，也叫 p 标签，我们 p 标签是一个块元素

小提示：什么是块元素？
块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。
说白了就是独占一行，会自动换行

我们的p标签就是表示一个段落，在 p 标签里面，无论你写多少内容，他都没问题，一个 p 标签表示一个段落

上代码:

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p><p>段落--------------------------------------------------------------------</p>
    <p>段落....................</p>
</body>
</html>

效果是这样的：

HTML的发展

经过前面的学习，我们已经初步了解HTML的大概编写方法了，但是我们想要学好HTML就必须去了解它的发展，我们来看看HTML的发展过程

经过一系列发展，我们现在一直稳定使用HTML5，预估也会停留在HTML5，因为他已经很完美了！
有兴趣可以去百度一下他的产生与发展历程，我这里就不多讲了！

!DOCTYPE 声明

其实上面我将HTML大致框架的时候，还漏了一点，之所以放在这里讲，是为了让你们更清晰的注意到这个知识点（实际上在强行解释 /微笑）

我们可以看到，我们上面的代码除了基本的HTML结构，在html标签的外面的最上面，还有一句代码）——<!DOCTYPE html>
这句代码是什么呢？

它是我们HTML文件的一个声明，告诉浏览器我们使用的语言版本，当然现在基本都是用HTML5了

我们看看HTML的其他版本声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

好了，就展示这几个，想要详细了解可以百度一下哦！
这个声明不需要去刻意记忆，只要链接就可以，因为现在基本都是HTML5版本

拜拜，下章再见！

小简(JanYork)

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
6
评论
前端学习第二章——HTML的正式开始

目录HTML学习正式开始进入正式学习body标签H标签（H1~H6）p标签HTML的发展!DOCTYPE 声明HTML5HTML 4.01XHTML 1.0HTML学习正式开始首先，我们要知道，一个网页或者一个网站的前端基本是由三种语言组成的，HTML最多只能写出一个只有黑色文字和图片的网页！那有人就问了：那我们学这个用什么用呢？纯文字图片的网页根本就不像我们所看到的网页啊！所有这里有个知识点一定要记住：我们的HTML是负责我们网页的整个布局与
复制链接

扫一扫