IT课程 HTML基础 009_Hello HTML
2024-10-30 10:35:21 # 学习 # HTML基础 #IT课程 #HTML课程 #CSS课程 #JavaScript课程 #Java课程 #计算机系统与网络 #hello world #hello html

什么是 HTML ？

网络，或更具体的说，万维网（World Wide Web）是由很多链接在一起的文档和资源构成的。这些文档和资源是用HTML编写的，它们被称为网页。HTML是网页的基础，定义了网页的结构和内容。

当你在浏览器中输入一个网址（例如，www.zhaojian.net）时，浏览器会发送一个请求到提供该网页的服务器。服务器会响应这个请求，并将请求的网页（也就是一些HTML）发送回浏览器。然后，浏览器会解析这些HTML，并将它们显示为你通常看到的网页。

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建和设计网页结构的标记语言。HTML 由一系列的元素（element）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（tag）可以为一段文字或者一张图片添加超链接，将文字设置为斜体、粗体、段落、列表等。

[!小结]

  • HTML 不是一种编程语言，而是一种标记语言
  • HTML 文档包含了HTML 标签及文本（为什么没有图片）内容
  • HTML文档也叫做 web 页面、网页

一个完整的HTML元素（element）

示例：

1
<p>hello HTML!</p>

效果：

HTML页面效果

结构解析：

HTML元素结构解析

[!小结]

  • 一个完整的HTML元素，由开始标签、内容、结束标签三部分组成；
  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方；
  • 内容（Content）：元素的内容；
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

一个完整的HTML页面

示例：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello HTML</title>
</head>
<body>
    <p>hello HTML!</p>
</body>
</html>

效果：

HTML页面效果

结构解析：

HTML页面结构解析

[!小结]

  • <!DOCTYPE html> — 声明HTML文档类型，文档类型是一个历史遗留问题，用于告诉浏览器该文档的版本和类型。
    HTML4 严格模式 DOCTYPE 声明：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <html></html> — html 元素，HTML页面中的所有内容，有时被称为根元素。
  • <head></head> — head 元素，它的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keyword）、页面描述、CSS 样式、JavaScript文件和字符编码声明等。
  • <meta charset="utf-8"> — meta 元素，用于提供有关 HTML 文档的元数据。charset 属性将你的文档的字符集设置为 UTF-8。
  • <title></title> — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body> — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
  • <p></p>— 段落元素，表示文本的一个段落。
元素名称
 作用 示例
<!DOCTYPE html> 定义 HTML 文档的类型和版本 <!DOCTYPE html>
<html> 定义 HTML 文档的根元素 <html lang="en">
<head> 包含文档的元信息，如标题、字符集声明、样式和脚本链接等 <head>...</head>
<title> 定义文档的标题，显示在浏览器的标题栏或页签上 <title>My Web Page</title>
<meta> 提供有关文档的元信息，如字符集、视口设置、关键词等 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link> 引用外部资源，如样式表和图标 <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon">
<style> 内部定义文档的样式 <style>body { font-family: Arial, sans-serif; }</style>
<script> 定义或引用脚本，可以包含在文档中或引用外部脚本 <script src="script.js"></script>
<noscript> 定义在浏览器不支持脚本时显示的内容 <noscript>Sorry, your browser does not support JavaScript.</noscript>
<base> 指定页面中所有相对链接的基本 URL <base href="https://www.zhaojian.net/">

链接：

Visual Studio Code

VS Code插件：
Remote - SSH
Remote Development

Google Chrome 网络浏览器
Google Chrome 网络浏览器（中国）

Microsoft Edge

上一页
2024-10-30 10:35:21 # 学习 # HTML基础 #IT课程 #HTML课程 #CSS课程 #JavaScript课程 #Java课程 #计算机系统与网络 #hello world #hello html
下一页