HTML入门

最新推荐文章于 2025-08-12 06:02:38 发布

刘文景

最新推荐文章于 2025-08-12 06:02:38 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

文章标签： html tag 标签

本文链接：https://blog.youkuaiyun.com/liutongl_5/article/details/44599561

本文介绍了HTML的基础知识和快速入门方法，包括如何编写HTML代码、使用标签定义类和分类，以及如何添加中文和使用meta标签指定编码。此外，还提供了一些常用的HTML标签和属性的使用方法，以帮助读者快速创建个人主页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML概览，快速编写简单网页。

<!--

开始时候学过一点C，也学过一点HTML。后来重拾C的时候发现，还是什么也干不了，尤其是我这种追求GUI的人。再然后听同学说Python容易上手，也是面向对象编程，就去学了Learn Python The Hard Way，结果学下来发现也没有GUI，兴趣大减。。。后来我表哥说学网页吧，于是重新捡起HTML。

记得预科第一次学的时候背了一堆tag，后来发现帮助不大，也很消磨兴致，尤其是对于我这种记忆力差的人。我还不愿将就着用WordPress，就用Dreamweaver边码代码边看效果，当时大概弄出来个社团首页然后预科结束了那个首页也再没用到过。

这次是想弄个个人主页，开始想用Python弄个日历APP，安卓+windows+网页端。。。现在看来坑太大了。。。然后一个学长做了个QQ机器人游戏，不过被腾讯封了N次，心灰意冷想用网页版。我说一起弄吧于是就开始学HTML了。。。

开始看网易公开课哈佛的CS75，老师确实很厉害，不过只讲概念不讲代码，收获还是有的，比如刚意识到CSS单独分出去的重要性。。。不过具体到代码还要自己慢慢码。。。

-->

HTML快速入门：

都说HTML中文是超文本标记语言。不过说了之后还是一头雾水，什么标记语言，中文也是第一次听说，所以也不提这些高大上的B格颇高的词汇了，直接说HTML怎么用吧。

首先，怎么写HTML？打开记事本或者word文档就可以编辑，退出之后将后缀名改为.html即可。使用各种编译器，或者Dreamweaver也可以进行编辑。

所谓“标记”其实就是“贴标签”(tag)，这也是HTML中最重要的部分了。贴标签最重要的就是为了定义类，分类，然后方便批量操作和编辑，比如调整字体，调整位置。

最基本的正式HTML代码都会有以下几个标签：

<!DOCTYPE HTML>

放在最最开始，意思是Document Type： HTML。
声明这个文档是HTML写的。

在这之后添加：

<html>

</html>

代表HTML代码包含其中，这就是<html>标签，第二个</html>代表html标签的关闭，一般标签中包含</ ****>的都代表此段标签作用范围的结束。

一般来讲，对于文件名为HTML后缀的文件，浏览器都会默认为HTML格式，所以以上步骤不写，浏览器也都会成功识别成HTML，不过为了养成良好的习惯，也为了防止某些浏览器出乱子，还是写上吧【反正基本每次都复制粘贴就好了】。

最基本的标签还包括：

<html>
<head>
    <title>网页标题</title>
</head>

<body>
    网页内容
</body>
</html>

<head>部分即HTML的头文件，里面的内容不会显示在浏览器窗口中。不过<title>标签中的文字会显示在浏览器上方，比如“新浪首页”，“腾讯首页”，起到这个作用。

而<body>中则会显示浏览器窗口中的各个部分，比如这篇博客。

值得注意的是，大多浏览器HTML的默认编码不支持中文，因此如果直接复制粘贴以上文字的话在浏览器中有可能产生乱码。普遍的解决办法是告知浏览器使用“utf-8”或者“gbk-2312"编码，则需要添加：

<head>
    <meta http-equiv = "content-type" content = "charset=utf-8;" />
    <meta http-equiv = "content-type" content = "charset=gbk2312;" />
    
</head>

以上两行<meta>标签在实际操作中选择只选择一行即可。<meta>标签是用于定义HTML文档页面信息的标签，详情可参考w3school的说明。由于这种标签是单一出现的（不作用于实际文本），因此不存在<meta></meta>的使用形式，而是直接采用<meta ******** />的关闭形式。

在HTML主题中的常用标签有：

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>正文</p>

    <h3>三级标题</h3>
    <div>分区模块</div>

</body>

其中，一级标题二级标题三级标题，以及正文，都会使用HTML默认格式，当然也可以通过自行添加属性进行自定义。<div>是division的缩写，意为”分区“，是近期网页排版的重要工具（在2000年前后都是广泛使用<table>表格进行整体排版）。

例如：

<body>
    <h1 style="font-size: 6px; text-align: center; color: red;">一级标题</h1>

    <p style="background-color: yellow;">
正文
<a href="www.163.com">网易首页</a>
<br />
<a href="www.sina.com">新浪首页</a>
</p>

</body>

属性的添加方法就是在起始标签中添加键值对，property = "value"，其中style属性中的细节需要更多的键值对补充。由于style繁琐的特性，并且可能经常重复性的用到，因此人们也会使用CSS进行批量定义，有点也在于可以节省传输流量。

引文中的新标签<a>定义超级链接的文字。更多标签以及属性请参考w3school的教程。【一般不需要全部记忆，用到时通过此网页查找。】

本篇博文主要是对于HTML的标签格式<tag>进行简单介绍。使用<tag>可以进行初级的网页编辑。

下一篇计划介绍CSS以及<div>形成的HTML排版盒子模型。

*注：本文各段代码未经过编译验证，如能无错运行实属幸运，也欢迎发现错误的同学进行指正=_=||