HTML入门基础篇back

发布于 2021-03-10  956 次阅读  共 1289 字


作为WEB前端系列的第一篇文章,本文从最基础的HTML来开始介绍,本文针对零基础的对前端感兴趣的同学,保证所有人都能看得懂,并且能够理解,有基础的可以自动跳过本篇。

什么是HTML

HTML(Hyper Text Makup Language)即超文本标记语言,是用来描述网页的一种语言。HTML是一种在WEB上使用的通用标记语言。所谓标记语言,是一套标记标签(Markup Tag)。HTML使用标记标签来描述网页,包含了HTML标签文本内容。HTML文档也叫做web页面。

当然了,只是这样简单的说明可能大部分初学者还是不能体会到到底是什么意思,那么下面我们就以一个简单的例子来进行说明:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <ss>这是自己定义的一个没有默认属性的标签</ss>
</body>
</html>

当我们使用浏览器打开上面的文件,我们就会在浏览器看到下面的内容,我们可以看到使用h1-h3的标签的文本内容是会有默认格式的,而使用ss标签时,是完全没有格式而是默认属性的,这是因为在html中有很多标签是有自己的定义属性的,也就是说当我们使用这些标签的时候,文本内容就会有规定好的属性,而我们自己随便给的一个标签则是完全没有属性的。

那么我们学习HTML学什么呢,我们就是在学习这些标签的使用,比如我要在网页中显示一张图片那么我们就应该使用<img>标签,要在网页中显示一个链接,我们就应该使用<a>标签。

当然,在本章中我们只需要对标签的概念有个初步了解即可,关于web前端有哪些标签以及每个标签的使用方法,我们将会在下一篇进行详细介绍。

下面我们来看一下刚才的示例中每句话的具体含义:

  • <!DOCTYPE html>声明为HTML5文档
  • <html>元素是HTML页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8(由于在大部分浏览器中直接输出中文会出现乱码,所以要在头部将字符声明为UTF-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题

那么可能有些同学想问,我该怎么新建一个html的文件并且把代码输入进去呢,作文web前端系列的第一篇文章,大家可以随意新建一个txt文件,然后把代码输入到新建的这个记事本当中,然后重命名把后缀.txt改成.html,那么一个html文档就建好了。这就是一个最基础的wen网页了,双击打开该文件,在浏览器上是不是就看到了自己的网页了!

当然之后我们肯定是要用编辑器来进行编程的,因为到时候的代码量会很大,在后续文章我们会推荐大家使用VScode进行编程,并且手把手带大家进行下载安装!

这一篇的内容比较简单,主要是想让大家明白html中标签的含义

大家一起期待后续的学习吧!

#HTML常用标签介绍