【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（一）

发布时间：2024年01月24日

HTML 教程- (HTML5 标准)

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

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML很容易学习！相信您能很快学会它！

HTML 编辑器

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML，教程将为大家推荐几款常用的编辑器：

接下来将为大家演示如何使用 VS Code 工具来创建 HTML 文件。

本地编辑器

当然了，每一种操作系统都带有简单的文本编辑器，如果不想使用上面的软件的话，我们也可以使用本地的文本编辑器

  • Windows：记事本
  • Linux：vi、vim、Emacs
  • Mac：TextEdi

VSCode演示

选择一个合适的位置新建文件夹。

打开VSCode

使用Ctrl O打开刚刚创建的文件夹。以后所有的HTML实例都会保存在该文件夹下面

创建第一个HTML文件

选中刚刚创建的文件夹-> 新建文件，输入代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

在这里插入图片描述

我们可以直接点击 运行 -> 启动调试 选择相对应的浏览器进行打开查看

也可以在文件夹中打开该文件，选择对应的浏览器。

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好，我建议统一用 .html。

实时预览插件

Live Prrivw插件安装

在这里插入图片描述

插件使用

安装完插件后，回到代码界面。

右键-> 显示预览，这样我们我们的每一步操作都可以实时预览了！

在这里插入图片描述

HTML简介

实例一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

实例解析

https://boardmix.cn/app/share/CAE.CLWx5g0gASoQVHn8xrnR7j9-XX-AcyOPezAFQAE/x9bMM4，
点击链接加入boardmix中的文件「HTML简介」，可以进行编辑查看。

在这里插入图片描述

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
  • 元素描述了文档的标题
  • 元素包含了可见的页面内容

  • 元素定义一个大标题

  • 元素定义一个段落

注：在浏览器的页面上按下F12按键或者右键查看页面源代码，就可以看到组成标签

什么是HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

这是一个段落。

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Microsoft Edge）是用于读取HTML文件，并将其作为网页显示。

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

在这里插入图片描述

HTML 网页结构

我们使用F12查看刚刚编辑的源代码

只有区域（红色选框）才能显示出来。

在这里插入图片描述

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">  #修改为`UTF-8`或`GBK`
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

utf8和gbk都是字符编码方式，用于将字符转换成计算机可以识别的二进制数据。 它们的区别在于编码方式不同，utf8是一种变长编码方式，可以表示Unicode字符集中的所有字符，而gbk是一种定长编码方式，只能表示汉字和部分符号。

PS:牛牛学习的语言没几个，语言领悟能力也不算强，所以大部分都是借鉴别人的。但是只要学过来的就是自己的。所以还请各位看官手下留情，多多包涵。牛牛也欢迎给位看官指正、讨论交流！

文章来源:https://blog.csdn.net/qq_47493625/article/details/135818729
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章