1.1 HTML 简介
HTML 介绍
HTML 是 Hyper Text Markup Language 的缩写，中文翻译为超文本标记语言。
- Hyper（超）：超（Hyper）是相对于线性（Linear）而言的，HTML 之前的计算机程序大多是线性的，即必须由上至下顺序执行，而用 HTML 制作的网页可以通过其中的超链接从一个网页跳转至另一个网页。
- Text（文本）：不同于一些编译型的程序语言，例如 C、C++ 或 Java 等，HTML 是一种文本解释型的程序语言，即它的源代码不经过编译而直接在浏览器中被翻译运行。
- Markup（标记）：HTML 的基本规则就是用标记语言（成对尖括号组成的标签元素）来描述网页内容如何在浏览器中显示。
- Language（语言）：HTML 是一种语言，但它是解释型语言。它所有的标记都会被浏览器翻译成最终显示的效果。
注意：HTML 不是一门编程语言，而是一种用来告诉浏览器如何组织页面的标记语言。
HTML 与浏览器的关系
浏览器是大家日常生活中都会用到的吧！浏览器可以用来检索、展示以及传递 Web 信息资源。Web 信息资源由统一资源标识符（Uniform Resource Identifier，URI）所标记，它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超级链接（ Hyperlinks），通过浏览器浏览互相关联的信息。
目前最为主流浏览器有五大款，分别是 IE、Firefox、Google Chrome、Safari、Opera。我们推荐使用 Chrome 浏览器，因为在 Chrome 上可以安装各种常用插件，这对于网页的美化、调试等方面有着非常大的作用。
在浏览器中，有一个重要的概念叫浏览器的内核。浏览器内核是浏览器的核心，也被称为渲染引擎，它是用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此在不同内核的浏览器中，网页的渲染效果也是不同的。
常见的浏览器内核有：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink。
HTML 开发工具
我们要写代码肯定是需要开发工具吧！这里就给大家介绍一些前端工程师会用到的开发工具 👻。
前端开发工具通常有 Dreamweaver、JetBrains WebStorm、VS Code、Sublime Text 等。这些专业工具除了能对 HTML 代码的关键字加亮显示以外，还可以显示代码及浏览器展示效果。
1.2 HTML 的基本结构
HTML 的基本结构
什么是标签
所有的字符内容都是用尖括号 < 和 > 括起来的，这样的内容被称为标签，其中 <> 代表开始标签，</> 代表结束标签。
HTML 标签有两种形式：
1. 双标签
<标签名>内容</标签名>2. 单标签
单标签没有开标签和闭标签之分，它只有一个标签，其写法如下所示：
<标签名>
或者
<标签名/>html 标签
在介绍 html 标签之前，我们先说说 <!DOCTYPE html> 的意思，它是文档类型声明标签，用于一个文档类型的声明，DOCTYPE 用来保证文档能够正确被读取，html 声明这是一个 html 文档。
html 标签标识该文档为 HTML 文档。它相当于是一个两层楼的房子框架，第一层是 body 楼，居民住在不同类型的房间中，第二层是 head 楼，里面放着居民的信息文件。
<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。
两个标签必须成对使用，网页中其他的所有标签都应该放在 <html> 和 </html> 标签之间。
基本语法：
<html>
...
</html>head 标签
head 标签是头部元素的家 🏠
常见的头部标签如下表所示：
| 标 签 | 描 述 |
|---|---|
<title> | 定义页面标题内容。 |
<meta> | 有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等。 |
<style> | 定义 CSS 层叠样式表的内容。 |
<link> | 定义外部文件的链接，最常见的用途是链接外部样式表。 |
<script> | 定义页面中程序脚本的内容。 |
meta 标签
meta 标签的功能是提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
其中，name、content 被称为属性，viewport 和 width=device-width, initial-scale=1.0 被称为属性值。
例如：我们添加一个作者的信息。
<meta name="author" content="Lee,1234567@qq.com" />
除了上面介绍的属性，这里再给大家介绍一个字符编码的属性，大家知道我们现在常用的是 UTF-8 编码，这种通用的编码使我们的页面内容能够在不同情况下被正确的解析。
在 meta 标签中，我们使用 charset 属性来规定字符编码，在解析文档时，会告诉浏览器我们使用的编码形式。使用如下：
<meta charset="utf-8" />
这里只是简单介绍了 meta 标签，若想了解更多内容，请阅读文档级元数据。
title 标签
<title> 标签是用来设置页面标题的，我们随便打开一个网页都可见其标题。例如，下方我打开了「蓝桥云课」和「蓝桥杯大赛」的官网，可以看见两个网站的标题是不同的。
它有以下几个方面的用处：
-
可以在浏览者保存该页面时成为默认的保存文件名。
-
可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
-
方便搜索引擎索引页面。
-
搜索引擎显示的页面标题往往就是网页
<title>标签的内容。
body 标签
body 标签界定了 HTML 文档的主体。在 <body> 和 </body> 之间放的是要显示在页面上的所有内容，如文本、超链接、图像、表格和列表等。
基本语法：
<body>
...
</body>实验总结
- 一个基本的 HTML 模版需要
<!DOCTYPE html>去声明文档的类型。 - 然后需要一对
html标签去搭建 HTML 房子的框架。 - 在房子里面有两层楼，头部信息住在
head标签楼里，页面显示内容住在body楼里。
扫一扫
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
