根据W3C标准，一个网页主要由三个部分组成：结构（HTML）、表现（CSS）和行为（JavaScript）。

前端三剑客

根据W3C标准，一个网页主要由三个部分组成：结构、表现和行为。

结构：HTML用于描述页面的结构；
表现：CSS用于控制页面中元素的样式；
行为：JavaScript用于响应用户的操作。

我们举个例子来更好的理解三者的关系，如果我们把一个网页看做一个人，结构就是人的身体，表现就是人的衣服，行为就是人的思想和动作。

什么是HTML？

HTML（HyperText MarkUp Language，超文本标记语言），是一种标识性的语言。它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式。

第一个网页

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1>Hello, World!</h1></body>
</html>

下面，我们简单介绍一下这段代码：

.htm和.html是一样的，早期的Windows只支持三位扩展名。
<!DOCTYPE html>：这个写在最上方的为文档声明，告诉浏览器，该页面使用的HTML是哪个版本，这种写法是HTML5。
绝大部分的标签都是成对出现的，<标签名>称为开始标签，</标签名>称为结束标签。head和body标签称为html的子标签，html为二者的父标签，二者互为兄弟标签。h1称为html的后代标签，html称为h1的祖宗标签。
<html></html>：根标签，一个HTML页面有且只有一个根标签，所有的内容都应该写到根标签内。
<head></head>：head标签内的内容不会在网页中直接显示，head标签就是帮助浏览器解析HTML页面的。
<body></body>：body标签是网页的主体，网页中看到的内容都是写在body中。
<title></title>：设置网页的标题栏，搜索引擎检索页面时，会首先检索title便签中的内容，它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名。

注意：标签也叫元素。

标签的属性

标签中可以添加属性，属性写到开始标签中，属性以一个键值对的形式添加，标签中可以添加多个属性，属性之间使用分号分隔。我们可以将前面的代码修改一下：

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1><!--标签属性和标签之间需要有一个空格--><font color = "red"; size = "3">Hello</font>, <font color = "blue">World</font>!</h1></body>
</html>

这里我们使用font标签来修改字体的样式，HTML中，我们可以使用来写注释。

乱码问题

我们来看一段代码：

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1>张蒙蒙!</h1></body>
</html>

可以看到结果是乱码，这是因为编码解码方式不匹配，编码是utf-8，解码是GB2312，所以出现了这种问题，解决方法很简单，我们只需要告诉浏览器使用什么方式解码即可。

<!DOCTYPE html>
<html><head><meta charset = "utf-8" /><title>我的第一个网页</title></head><body><h1>张蒙蒙!</h1></body>
</html>

这里，我们使用meta标签来解决这个问题：

meta标签，可以用来设置一些元数据，如：网页的字符集、关键字等。
meta是一个自结束标签，前面我们说大部分的标签都是成对出现的，但是不包括自结束标签，编写一个自结束标签时，可以在标签最后加上/。如：<meta charset = "utf-8" />

『HTMLCSS』第一个网页相关推荐

关于『HTML5』第一弹
关于『HTML5』:第一弹建议缩放90%食用祝各位国庆节快乐!!1
JavaWeb『HTMLCSS』
前言:参考于尚硅谷的javaweb的笔记,复习专用第一节 HTML简介 1.名词解释 HTML是Hyper Text Markup Language的缩写.意思是『超文本标记语言』. html语言 ...
『统计学』第一部分：常用概率分布
本文将对统计学中常见的四种分布进行总结,包括二项分布.几何分布.泊松分布.正态分布. 在此之前,首先来看一下统计学中的一些基本概念: 『概率分布』首先,什么是概率分布? 要明白概率分布,首先考虑两个 ...
『HTMLCSS』内联框架和超链接
本片博客主要介绍内联框架和超链接相关的一些知识,最后有一个简单的练习. 内联框架内联框架,有点像图片标签:使用内联框架,可以在一个页面中引入一个外部页面,使用iframe标签来实现.简单属性如下: ...
『HTMLCSS』文本标签
本篇博客介绍一些常用的HTML文本标签. em和strong em表示一段内容中的着重点,表示语气上的强调:em在浏览器中默认是斜体. strong表示一段内容的重要性,表示语义上的强调:strong ...
「爬虫入门」拒绝跟热点搞python，直接在浏览器里体验『第一次』，理解原理=＞如鱼得水
简介:没用过爬虫,现在有门课正好需要我们去学,于是试了下.想从实践入手,因此,给自己提了个需求:『把微信公众号的授权管理页面的开白名单抓出来』.并没有什么难度,这是我第一次独立写 JavaScript ...
关于『HTML』:第三弹
关于『HTML』:第三弹建议缩放90%食用盼望着, 盼望着, 第三弹来了, HTML基础系列完结了!! 一切都像刚睡醒的样子(包括我), 欣欣然张开了眼(我没有) 敬请期待Markdown语法系列 ...
『网络安全』蜜罐到蜜网入门指南（一）蜜罐初识
网络安全,重于泰山,人人有责! 蜜罐,是一种网络安全产品.本文作为<『网络安全』蜜罐到蜜网入门指南>系列的第一篇,从网络安全着手,由浅入深,逐步介绍,带大家初步认识蜜罐. 一.网络安全如 ...
『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险
『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险文心大模型简介文心大模型ERNIE 3.0系列&&ERNIE-ViLG文生图系列使用文心大模型网页快速体验代码调用之ERN ...

『HTMLCSS』第一个网页