web前端之HTML5 入门（1）：HTML简介和编辑器

最新推荐文章于 2024-03-30 21:07:42 发布

薛定谔的猫96

最新推荐文章于 2024-03-30 21:07:42 发布

阅读量587

点赞数

分类专栏：前端文章标签： HTML5

本文链接：https://blog.csdn.net/qq_42415326/article/details/89844928

版权

前端专栏收录该内容

123 篇文章 9 订阅

订阅专栏

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

首先首先看一个HTML 实例：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>

<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>

</html>

其中：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

显示结果如下：
在这里插入图片描述

那什么是HTML？

HTML 指超文本标记语言，是一种标记语言（不是编程语言），是一套标记标签 (markup tag)（简称标签），用来描述网页。
HTML 文档（也叫做web页面）包含了HTML 标签及文本内容

HTML5是HTML最新的修订版本，HTML5 是下一代 HTML 标准。2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。

HTML 标签?

HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）

如下：
在这里插入图片描述
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：
在这里插入图片描述
注意：只有 <body> 内容</body>区域 (白色部分) 才会在浏览器中显示。

`<!DOCTYPE>` 声明

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

<!DOCTYPE>声明有助于浏览器中正确显示网页。<!doctype> 声明必须位于 HTML5 文档中的第一行,HTML5 中仅规定了一种声明，使用非常简单：

<!DOCTYPE html>     #不区分大小写

HTML编辑器选择

可以使用普通文本编辑器（保存为.html文件就可以了）：

Windows 用户可以使用记事本；
Linux 用户可以选择文本编辑器vim

也可以使用专业的 HTML 编辑器来编辑 HTML，下面推荐几款常用的编辑器：

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/

编辑并保存完成后，启动浏览器，然后选择"文件"菜单的"打开文件"命令，或者直接在文件夹中双击 HTML 文件，就能运行显示结果类似如下：
在这里插入图片描述

中文编码

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">      #中文编码
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

薛定谔的猫96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端之HTML5 入门（1）：HTML简介和编辑器

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。首先首先看一个HTML 实例：<!DOCTYPE html><html><head><meta charset="utf-8"><title>页面标题</title></head>...
复制链接

扫一扫