Appearance
一、HTML 基础与结构
内容概述
这一课主要聚焦于 HTML（HyperTexbt Markup Language）的基础知识，包括 HTML 的基本结构、标签的使用、文档的头部和主体部分等。目标是理解 HTML 是如何构建网页的基本框架和内容的。
教学目标
- 能够创建简单的 HTML 页面，包括文本格式化、超链接、列表、图片等元素。
- 理解 HTML 文档的基本结构和重要性。
具体内容
- 准备工作
- HTML 简介与历史
- HTML 文档的基本结构（
<!DOCTYPE html>,<html>,<head>,<body>等标签） - 头部元素（
<meta>,<title>,<link>,<script>等） - 文本格式化标签（
<h1>至<h6>,<p>,<b>,<i>,<u>,<s>,<strong>,<em>等） - 超链接（
<a>标签） - 列表标签（无序列表
<ul>, 有序列表<ol>, 列表项<li>） - 图片与媒体（
<img>,<video>,<audio>等） - 框架元素
- 表格（
<table>,<tr>,<td>,<th>等） - 区块元素
- 颜色
- HTML 字符实体
准备工作
- 安装 VSCode：用于编写代码
- 安装 Chrome 浏览器：用于预览和调试网页
下载地址：https://www.google.cn/chrome/?standalone=1&platform=win64
HTML 简介与历史
- 简介：HTML（HyperText Markup Language 超文本标记语言）是构建网页的标准标记语言。它使用一系列的元素（如标签）来描述网页的结构和内容。
- 历史：从 1991 年 Tim Berners-Lee 发明 HTML 至今，HTML 已经经历了多个版本的迭代，包括 HTML 2.0、HTML 3.2、HTML 4.01，直到现在的 HTML5。每个版本都引入了新的特性和改进。
HTML 文档的基本结构
HTML 结构
结构概述：HTML 文档由一系列的元素组成，这些元素通过标签来定义。一个基本的 HTML 文档结构包括
<!DOCTYPE html>,<html>,<head>, 和<body>标签。代码示例：
html<!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> <p>这是另外一个段落。</p> </body> </html>跟着做： 新建一个文本文件，将文件名改为
HTML文档的基本结构.html（注意后缀名），然后将以上代码示例粘贴进文件中，最后双击打开该html文件，我们会看到浏览器启动了一个新的标签页，展示出一个网页。注意！此处为了讲课方便，真实项目中不要将文件名命名为中文，在不同的操作系统中可能会产生问题，下同
效果如下：
下面是一个可视化的 HTML 页面结构：
注意，只有
<body>区域 (白色部分) 才会在浏览器中显示。<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，以下方式均可：txt<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
web 浏览器、查看网页源代码、开发者工具
Web 浏览器（如 Chrome 浏览器，Firefox，Safari，Microsoft Edge）是用于读取 HTML 文件，并将其作为网页显示的软件。
浏览器并不是直接显示 HTML 标签文本，而是识别标签然后转换成不同的内容显示出来，这个过程叫做渲染。
查看网页源代码：在浏览器中，可以通过右键菜单“查看网页源代码”来查看网页的初始源代码。
通过浏览器快捷键（如 F12 或 Ctrl+Shift+I）可以打开 “开发者工具”，可以结构化地查看网页源代码，例如标签的嵌套结构，以及标签的属性等。
安装 VSCode 的 Live Server 插件
原因
双击打开
html文件不是一个常规的操作来访问网页，这种方式打开的网页 URL，是通过本地文件协议访问的，存在一定的限制（例如通过本地文件协议打开的网页不能访问 ajax 请求，具体 ajax 请求是啥此处不多说，以后的课程会有讲解）。实际项目中，我们更多是把网页部署在 web 服务器上，然后通过域名或 ip，再加上端口的方式进行访问。
我们需要安装一个 VSCode 插件，叫做
Live Server，它可以在我们的电脑上快速启动一个本地 web 服务器，并打开浏览器预览网页，这种方式打开的网页更符合实际项目部署环境。安装
打开 VSCode，点击最右侧的插件库入口图标，在搜索框中输入
Live Server，然后点击安装按钮，安装插件，安装完成后如下图所示。
使用
使用 VSCode 打开
HTML文档的基本结构.html文件，右键，点击“Open with Live Server”
浏览器会自动打开一个新标签页，展示出我们刚刚打开的网页。URL 地址为：
http://127.0.0.1:5500/HTML文档的基本结构.html使用 Live Server 插件后，我们修改保存代码时，网页可以实时更新，无需手动刷新。
如果要停止服务器，点击 VSCode 窗口中的右下角的停止按钮即可。
HTML 标签
HTML 标签是由尖括号包围的关键词，比如
<html>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
标签分为： 双标签 与 单标签（绝大多数都是双标签）
双标签：
示例代码：
html<marquee>这是一个可以一直滚动内容的 html 标签</marquee>单标签：
示例代码：
html<input />标签名不区分大小写，但推荐小写，因为小写更规范
大多数标签可以嵌套，HTML 文档由相互嵌套的 HTML 元素构成。例如，我们可以尝试把上面的
input标签放到marquee标签的里面。代码示例:
html<marquee> 这是一个可以一直滚动内容的 html 标签 <input /> </marquee>存在一些标签不能嵌套的情况，后文会讲。
HTML 代码缩进：我们注意到上面的 HTML 标签在嵌套时，有缩进的表现。HTML 标签的缩进是一个编码习惯，旨在提高代码的可读性和可维护性。缩进通过使用特定数量的空格（space）（通常是 2 个、4 个或更多）或制表符（Tab）来实现，以便在视觉上区分代码的层次结构。在 HTML 中，连续多个空白字符（包括空格、制表符、换行符等）在渲染时通常会被浏览器合并成一个单一的空格字符。这是 HTML 的默认行为，旨在避免因为源代码中的格式化空格而影响页面的布局和显示。
跟着做： 将 HTML 标签的代码示例粘贴进
HTML文档的基本结构.html中，Ctrl+S 保存然后看看网页效果吧。
HTML 注释
HTML 注释：使用
<!--和-->之间的文本作为注释，浏览器会忽略这些文本，用于添加注释或说明。代码示例：
html<!-- 这是一个 HTML 注释, 在网页中不会显示 -->跟着做： 将 HTML 注释的代码示例粘贴进
HTML文档的基本结构.html中，保存网页刷新看看效果吧。
标签属性
标签的属性用于为标签添加额外的信息，如链接地址、图像路径、表单字段的名称等。
属性格式： 属性总是以名称/值对的形式出现，比如：name="value"
属性总是在 HTML 元素的起始标签中规定。
属性和属性值对大小写不敏感。不过，
W3C标准推荐使用小写的属性/属性值。不同标签所适用的属性有所不同，但有几个属性可以适用于大多数的 HTML 元素，例如
class、id、style等，我们将在后面再展开。代码示例：
html<input placeholder="请输入你的名字" />跟着做： 将
HTML文档的基本结构.html中的input标签增加一个placeholder属性，保存代码网页刷新后看看效果吧。
头部元素
<head> 元素包含了所有的头部标签元素。它不是网页的主体内容，而是为网页提供元数据（metadata），比如文档的标题、字符集声明、对 CSS 和 JavaScript 文件的引用、文档描述、关键词、作者信息等。这些头部标签元素不会显示在网页上，但是对于网页的呈现、搜索引擎优化（SEO）以及网页的可访问性都非常重要。
以下列出几个常用的头部标签元素：
字符集声明（<meta charset="UTF-8" />）
- 作用：指定 HTML 文档使用的字符编码。UTF-8 是一种针对 Unicode 的可变长度字符编码，能够用单个字节表示 ASCII 字符，用多个字节表示其他语言的字符，从而支持世界上几乎所有的文字系统。
- 重要性：确保网页在不同浏览器和设备上正确显示各种字符，包括特殊符号和外语字符。
页面标题（<title>）
- 作用：定义网页的标题，这个标题会显示在浏览器的标题栏或页面标签上。
- 重要性：对于 SEO 来说，页面标题是搜索引擎结果页面中最重要的元素之一，它直接影响用户点击率。同时，它也为用户提供了关于页面内容的快速概览。
样式表链接（<link rel="stylesheet" href="styles.css" />）
- 作用：通过
<link>标签的rel="stylesheet"属性，将外部的 CSS 文件链接到 HTML 文档中，以便为网页提供样式。 - 重要性：CSS（层叠样式表）用于控制网页的布局和外观，通过外部链接的方式，可以保持 HTML 结构的清晰，并方便样式的管理和复用。
内部样式表(<style>)
- 作用：
<style>标签在 HTML 中用于定义内部样式表。它允许开发者直接在 HTML 文档的<head>部分或文档内编写 CSS（层叠样式表）规则。这些规则用于控制 HTML 元素的布局、颜色、字体、间距等视觉样式。 - 重要性：对于小型项目或单个页面，
<style>标签提供了一种方便的方式来封装和组织页面的样式，而无需创建额外的 CSS 文件。
脚本链接（<script src="script.js"></script>）
- 作用：通过
<script>标签的src属性，将外部的 JavaScript 文件链接到 HTML 文档中，以便为网页添加交互性。 - 重要性：JavaScript 是网页开发中的重要技术之一，它允许开发者为网页添加动态效果和交互功能，提升用户体验。
等等。
文本格式化标签
标题标签（
<h1>至<h6>）：用于定义六级标题，<h1>最高级，<h6>最低级。这些标题标签不仅用于定义文本的格式，还对搜索引擎优化（SEO）至关重要。段落标签（
<p>）：用于定义文本段落。浏览器会自动在段落前后添加一些垂直间距，以区分不同的段落。加粗和斜体：
<b>和<i>标签分别用于加粗和斜体文本，但它们是样式化标签；<strong>和<em>则分别表示重要的和强调的文本，具有语义意义。下划线和删除线：
<u>用于下划线文本，<s>和<del>都可用于表示删除线文本，<del>具有语义含义，表示文档中的某些内容已被删除或不再准确。水平线(
<hr />)：在页面中插入水平线，常用于分隔内容。换行(
<br />)：用于在内容中插入一个简单的换行。 代码示例：html<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <p>这是段落</p> <b>b 加粗文本</b> <i>i 斜体文本</i> <strong>strong强调文本</strong> <em>em强调文本</em> <u>u 下划线文本</u> <s>s 删除线文本</s> <del>del 删除线文本</del> <hr /> <p> 这是一个长文本段落，内容很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长<br />很长 </p>
跟着做：新建一个文本格式化标签.html文件，尝试一下使用各个文本格式化标签，看看是什么效果。
超链接
<a>标签：用于定义超链接，可以链接到其他网页、文件、邮箱地址、位置等。属性：
href指定链接的目标地址，target指定链接打开的位置（如_blank在新窗口打开）。代码示例：
html<a href="https://www.baidu.com/">百度一下</a>
跟着做：新建一个超链接.html文件，看看 <a> 标签的效果吧
列表标签
无序列表（
<ul>）：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。使用<ul>标签定义，列表项用<li>标签表示。代码示例：
html<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>有序列表（
<ol>）：与无序列表类似，但列表项前有数字编号。代码示例：
html<ol> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol>定义列表（
<dl>）：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。代码示例：
html<dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dd>层叠样式表</dd> <dt>JS</dt> <dd>JavaScript</dd> <dd>一种脚本语言</dd> </dl>
跟着做： 新建一个列表标签.html文件，将以上代码粘贴进去看看网页效果。显示效果如下：
图片与媒体
<img>标签：用于嵌入图片，src属性指定图片的路径，alt属性提供图片的替代文本，width和height属性可以设置图片的宽度和高度，title属性可以设置鼠标悬停时显示的提示信息。代码示例:
html<img src="img/img.jpg" alt="景色图片" width="300" height="200" /> <hr /> <img src="https://cloudflare.cdnjson.com/images/2024/07/22/20228161660621024748_187.jpg" alt="景色图片" width="300" height="200" /><video>和<audio>标签：这两个标签是 HTML5 标准的实现，分别用于嵌入视频和音频内容，支持多种格式和属性来控制播放行为。代码示例：
html<p>花绽放的一瞬间：</p> <video width="320" height="240" controls> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" /> 您的浏览器不支持Video标签。 </video> <hr /> <p>霸王龙的叫声：</p> <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" > </audio>更详细的参数可以参考 MDN 文档：
`<video>`: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video `<audio>`: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio跟着做：新建一个
图片与媒体.html文件，使用上面的示例代码，看看效果。
框架元素
通过使用框架元素 <iframe>，你可以在同一个浏览器窗口中显示不止一个页面。
iframe 语法:
html
<iframe src="URL"></iframe>height 和 width 属性用来定义 iframe 标签的高度与宽度。
frameborder 属性用于定义 iframe 表示是否显示边框，设置属性值为 "0" 移除 iframe 的边框。
iframe 可以显示一个超链接点击后跳转到的页面，超链接的 target 属性值必须和 iframe 元素的 name 属性值一直才能对应。
代码示例:
html
<iframe
src="http://www.runoob.com/try/demo_source/demo_iframe.htm"
name="iframe_a"
width="200"
height="200"
frameborder="0"
></iframe>
<p>
<a href="https://www.runoob.com" target="iframe_a">
点击用iframe打开菜鸟教程
</a>
</p>跟着做：新建一个框架元素.html文件，使用上面的示例代码，看看效果。
点击超链接前：
点击超链接后：
表格
HTML 表格由
<table>标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由
<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）；表格可以包含标题行（<th>）用于定义表头单元格，通常包含标题信息，并默认加粗居中显示。- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header 的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、水平线、表格等等。
代码示例：
html<h4>默认表格:</h4> <table border="1" cellspacing="0"> <thead> <tr> <th>列标题1</th> <th>列标题2</th> <th>列标题3</th> </tr> </thead> <tbody> <tr> <td>行1，列1</td> <td>行1，列2</td> <td>行1，列3</td> </tr> <tr> <td>行2，列1</td> <td>行2，列2</td> <td>行2，列3</td> </tr> </tbody> </table>以上的表格实例代码中，
<table>元素表示整个表格，它包含两个主要部分：<thead>和<tbody>。<thead>用于定义表格的标题部分: 在<thead>中，使用<th>元素定义列的标题，以上实例中列标题分别为"列标题 1"，"列标题 2"和"列标题 3"。<tbody>用于定义表格的主体部分: 在<tbody>中，使用<tr>元素定义行，并在每行中使用<td>元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。表格边框属性 border，值为数值，单位为像素（px）。如果不定义边框属性，表格将不显示边框。
表格单元格间距属性 cellspacing，值为数值，单位为像素（px）。如果不定义单元格间距属性，表格将默认具有一定的单元格间距。
跨行或跨列表格:
代码示例：
html<h4>单元格跨两列:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>单元格跨两行:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
跟着做：新建一个表格.html文件，使用上面的示例代码，看看效果。
区块元素
大多数 HTML 元素被定义为块级元素或内联元素（也叫行内元素）。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。如：
<h1>,<p>,<ul>,<table>等内联元素在显示时通常不会以新行开始。如：
<b>,<td>,<a>,<img>等<div>标签：<div>元素是块级元素，没有特定的含义和额外的默认样式，它可用于组合其他 HTML 元素的容器，常见的用途是文档布局，如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。<span>标签<span>元素是内联元素，也没有特定的含义和额外的默认样式，可用作文本的容器。当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。<div>和<span>标签非常常用，结合 CSS 可以实现多种网页布局（第 3 讲再展开）在 HTML 中，并非所有标签都可以相互嵌套。嵌套标签的规则通常基于标签的语义和它们在文档结构中的角色。
块级元素（如
<div>,<p>,<h1>-<h6>,<ol>,<ul>,<li>,<table>等）通常不应该嵌套在内联元素（如<span>,<a>,<img>,<strong>,<em>等）内部。然而，内联元素可以嵌套在块级元素内部。<p>元素（段落）内不能直接嵌套<p>元素。如果尝试这样做，浏览器会关闭第一个<p>标签并开启一个新的<p>标签来包含后续内容。
颜色
HTML 颜色由红色、绿色、蓝色混合而成。
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。例如：红色为
#FF0000，绿色为#00FF00，蓝色为#0000FF。颜色色值格式除了可以用十六进制表示，还可以用 rgb 写法表示，例如：红色
rgb(255,0,0)，绿色rgb(0,255,0)，蓝色rgb(0,0,255)。除了自定义颜色，还可以使用一些浏览器预定义的颜色名，以下列举了一些常用的颜色名：
HTML 字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能随意使用小于号（<）和大于号（>），某些情况下会导致浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
txt&entity_name;如需显示小于号，我们最好这样写：
<（意为 less than），如需显示大于号，我们最好这样写：>（意为 greater than）。错误代码示例：
html<p> 同学们好，这一节课我们来学习<span>标签 </p>正确代码示例：
html<p>同学们好，这一节课我们来学习<span>标签</p>不间断空格：浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用
字符实体。错误代码示例：
txt<p>这里有4个空格： </p>正确代码示例：
html<p>这里有4个空格： </p>
综合练习题
目标：检验学生对 HTML 基本结构和常用标签的使用
要求：从零手写一个网页practice.html，仅使用 HTML 基本结构和常用标签，不使用 CSS 样式，实现以下效果：
提示：
- 所有链接地址可以写死
https://www.baidu.com/ - 订阅小图片自己网上随便找张图，显示大小为 30x30。
- 文本可以直接拷贝以下内容：
txt
W3C标准
W3C的各类技术标准在努力为各类应用的开发打造一个开放的Web平台（Open Web Platform）。尽管这个开放Web平台的边界在不断延伸，产业界认为HTML5将是这个平台的核心，平台的能力将依赖于W3C及其合作伙伴正在创建的一系列Web技术，包括CSS,SVG, WOFF, 语义Web，及XML和各类应用编程接口（APIs）。
Web平台文档计划（Web Platform Docs）：一个由W3C组织的、由开发者社区运行的、面向开发者的开放Web平台的在线帮助文档集。
开放标准原则（Open Standards Principles）：由IETF、W3C等共同倡导了开放标准组织的基本原则。
W3C的Web标准工作
W3C通过设立领域（Domains）和标准计划（Activities）来组织W3C的标准活动。
截至2014年3月，W3C共设立5个技术领域，开展23个标准计划。这些主要的标准工作包括以下七类：
Web设计及应用（Web Design and Applications）
Web设计及应用包括构造和渲染Web页面所需的各类技术标准，如HTML, CSS, SVG,
Ajax及其他用于构造Web应用（WebApps）的技术；这里也包括如何让Web页面及信息服务于残障人士、多语言环境下的国际化，及让Web页面在移动设备上更好、更容易获取的相关技术。
Web体系架构（Web Architecture）
Web体系架构主要关注Web的基础技术和原则，包括URIs及HTTP协议等。
语义Web（Semantic Web）
传统的Web由文档组成，W3C希望通过一组技术支撑“数据的Web”，即Web of
Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。具体技术包括RDF，SPARQL，OWL及SKOS等。
查阅W3C的标准及进展情况
您可以按照技术领域、标准的状态和稳定程度、发布日期、标题及发布标准的工作组等信息查询W3C的所有技术标准。
获取最新的W3C标准及其草案的更新及发布情况，请参阅标准进展相关的新闻报道，及标准进展汇总。
您也可以订阅相关信息。更多关于标准的信息，请参阅关于W3C标准，及关于标准的常见问题。
关于W3C标准的常见问题
Web标准是什么意思？什么是一个W3C的推荐标准（Recommendation）？
在发布标准规范之外，W3C还发布其他什么类型的文档吗？什么是Submissions？
如果我对一个W3C的推荐标准或草案有意见和建议，应当如何提交我的观点？
如果我对一个W3C的推荐标准或草案有意见和建议，应当如何提交我的观点？