我的前端小白之旅-初识HTML

发表于 | 分类于

什么是HTML？

HTML定义

引用《菜鸟教程》里面的描述就是：它是一种描述网页的语言
1.HTML的全称是HyperText MarkupLanguge(超文本标记语言)
2.HTML不是一种编程语言，而是一种标记语言
3.标记语言是一套标记标签（markup tag）
4.HTML使用标记标签来描述网页
5.HTML文档包含了HTML标签及文本内容
6.HTML文档也叫Web页面

其实上面的所有描述都可以总结为：HTML是一种由标签及内容组成的描述网页的标记语言(读起来很绕口，大家理解就行了)。但是HTML标签该怎么写呢,下面就是HTML标签的写法：

<标签>内容<标签>

HTML文档的基本框架

*注意：以下代码中的属性暂且不用管，后面会讲到。


下面我们看一个最简单的HTML页面，看看HTML页面到底长啥样

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
	<!-- 网页部分的代码在这里编写 -->
	<h1>我的第一个网页（内容）</h1>
</body>
</html>

上述代码片段就是在IDE中新建一个HTML文件自动生成的代码，我们来看一下这几行代码都是什么意思

类型声明


1
<!DOCTYPE html>

这句代码不是一个HTML标签，它是一个指示Web浏览器关于页面使用哪个HTML版本进行编写的指令，上面这种声明方法是在HTML5中的，表示这是一个HTML5文档。HTML5之前的声明方法大家可以进入HTML<!DOCTYPE>标签进行查看。

html标签


1
2
3
4
<html lang="en">
	<head></head>
	<body></body>
</html>

<html>这个元素标签的作用是告诉浏览器我就是一个html类型的文档，该标签由一个开始标签<html>和一个结束标签</html>组成的。里面包含了<head>和<body>两个部分。

head标签


1
2
3
4
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>

<head>标签的作用就是定义文档的头部，里面可以包含<meta>、<title>、<link>、<script>、<style>、<base>等这些标签。在上面的代码中有<meta>和<title>这两个标签，其中<meta>定义了相关页面的元信息，这里就定义了一个“charset”属性，并规定了外部脚本文件中使用的字符编码为“UTF-8c”。而<title>标签可以定义该页面的标题，就是我们通常在浏览器最上方显示的信息，告诉用户该页面显示的是什么信息。剩下了几个属性就不一一阐述了，大家可以通过菜鸟课程自行查看。

body标签


1
2
3
4
<body>
	<!-- 网页部分的代码在这里编写 -->
	<h1>我的第一个网页（内容）</h1>
</body>

<body>标签的作用就是定义具体的网页内容了，我们可以自行在这里面按规则填写任意我们想要填写的标签，从而组成一个完整的页面。上面的代码我们就在<body>中定义了一个<h1>标签，这是个标题标签。

总结

一个HTML文档的基本结构就是由<head>和<body>组成的，其中<head>标签定义该页面的一些基本的元信息，<body>标签用语定义页面的具体展示。
好了，在了解了这些之后，筒子们以后就可以快快乐乐的编写出自己想要的网页了。