Web应用课 html基础标签和文本标签小结
html 文件结构
html 结构为树形结构，以<html> 为根节点，<head>，<body> 为 孩子
基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<html>标签
HTML <html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
一些属性：
* lang :<html> 元素上提供一个带有有效语言标记的 lang 属性，将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。
lang 属性的值是使用 ISO 639-1 语言代码来表示不同的语言。以下是一些常见的语言代码及其对应的字符串示例：
- 英语（English）：
en - 中文（简体）：
zh-CN - 中文（繁体）：
zh-TW - 西班牙语（Español）：
es - 法语（Français）：
fr - 德语（Deutsch）：
de - 日语（日本語）：
ja - 俄语（Русский）：
ru - 阿拉伯语（العربية）：
ar -
葡萄牙语（Português）：
pt -
参考这个文档： 全局属性
<title>标签
HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
<title>元素始终在页面的 <head> 块内使用。
注意：一个 <head> 元素只能包含一个 <title> 元素
<meta>标签
HTML <meta> 元素用于表示那些不能由其他HTML元素（如<base>、<link>、<script>、<style>或<title>等）表示的元数据信息。
<meta> 元素位于HTML文档的头部，提供关于文档的元数据信息，如字符编码、网页描述、作者、关键词等。这些元数据信息对于搜索引擎优化（SEO）和浏览器解析非常重要。
以下是一些常用的<meta>元素及其属性：
charset：指定文档的字符编码。viewport：指定移动设备上网页的可视区域。description：描述网页的内容。keywords：指定网页的关键词。author：指定网页的作者。robots：控制搜索引擎的爬虫程序对网页的索引和抓取行为。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个示例网页">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="robots" content="index, follow">
<title>示例网页</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
通过使用<meta>元素，可以提供有关网页的重要元数据信息，以便搜索引擎和浏览器正确解析和显示网页内容。
补充： <meta>常用属性viewport 方法，更好的理解该属性的使用 viewport meta 标记
<link>标签
HTML 外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
要链接一个外部的样式表，你需要像这样在你的<head>中包含一个<link>元素：
<link href="main.css" rel="stylesheet" />
这里有一些你经常遇到的其他类型。例如，这里是一个网站图标的链接：
<link rel="icon" href="favicon.ico" >
以下是<link>元素的一些常用属性：
href：指定外部资源的URL。rel：指定当前文档与外部资源之间的关系。type：指定外部资源的MIME类型。sizes：指定图标的尺寸（仅用于站点图标）。
注释
HTML注释是一种在HTML代码中用于添加注释或备注的特殊语法。注释的内容不会在浏览器中显示，而是被视为对开发者的说明或提醒。
HTML注释使用以下语法：
<!-- 这是一个HTML注释 -->
注释以<!--开始，以-->结束。在这两个标记之间的任何内容都被视为注释，并且不会在浏览器中显示。
HTML注释可以用于多种目的，包括：
- 解释代码的功能或用途。
- 暂时删除或禁用部分代码，以便调试或测试。
- 提醒自己或其他开发者有关特定部分的信息。
文本标签
<div>标签
<div>是HTML中最常用的块级元素之一，用于创建一个通用的容器或分区。它没有特定的语义含义，主要用于组织和包裹其他HTML元素，以便应用样式或布局。
<div>元素没有预定义的样式或行为，它在默认情况下不会对内容或布局产生任何影响。它的作用类似于一个容器，用于将一组相关的元素包裹在一起，形成一个独立的区块。
通过为<div>元素添加类名或ID属性，可以为其应用CSS样式或JavaScript操作，从而实现自定义的外观和行为。<div>通常与CSS一起使用，用于创建网页布局、构建网页结构和组织内容。
示例：
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is the content of my website.</p>
<img src="image.jpg" alt="Image">
</div>
在上述示例中，<div>元素用类名”container”进行了标识，并包裹了标题、段落和图像等元素。通过CSS，可以为”container”类添加样式，例如设置背景颜色、边框样式或内外边距等，以实现自定义的外观效果。
总结来说，<div>是一个通用的容器元素，用于组织和分组其他HTML元素，没有特定的语义含义，但在网页开发中具有重要的作用，用于构建布局和组织内容。
<span>标签
<span> 元素是一个通用的内联容器，用于包裹短语内容，没有特定的语义含义。它的作用类似于 <div>，但 <span> 是一个行内元素，而不是块级元素。
<span> 元素通常用于编组一小段文本或内联元素，以便应用样式或标识共同属性。可以为 <span> 添加类名或ID属性，并通过CSS样式或JavaScript操作来对其进行样式化或操作。
与 <div> 不同，<span> 适用于包裹短语或内联内容，例如单词、短语、字符等。它可以用于设置特定文本的样式，如字体颜色、背景颜色、字体大小等。
请注意，应该在没有其他合适的语义元素时才使用 <span>。如果有更具语义的元素可用于表示特定类型的内容（如标题、段落、列表等），应优先使用那些元素。
示例：
<p>
This is an example <span class="highlight">sentence</span> with a highlighted word.
</p>
<p>
Contact us at <span class="email">example@example.com</span> for further information.
</p>
在上述示例中，<span> 元素被用于包裹需要突出显示的单词和电子邮件地址。通过为 highlight 和 email 类添加样式，可以对这些文本进行特殊样式化，如高亮或添加链接样式。
总结来说，<span> 是一个通用的行内容器元素，用于编组短语内容或内联元素，以便应用样式或标识共同属性。它在没有其他合适的语义元素时使用，并与CSS一起使用，以实现文本样式化或操作。
<h1> ~ <h6> 标签
HTML <h1>~<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<p> 标签
<p> 元素是HTML中常用的块级元素之一，用于表示段落或文本块。它用于将一段文本内容组织为一个独立的块级元素，并在默认情况下在上下文中创建一些间距。
<p> 元素在HTML中具有语义含义，表示一个自包含的段落。它通常用于包裹一段连续的文本，例如文章、段落、故事、描述等。浏览器会对 <p> 元素应用默认的样式，如段落之间的空行。
<pre> 标签
<pre> 元素是HTML中的一个块级元素，用于表示预格式化文本（Preformatted Text）。它用于展示需要保留源文件中的空白符（如空格、制表符）和换行符的文本内容。
<pre> 元素在默认情况下会保留文本中的空白符，并以等宽字体的形式显示文本。这使得它适合用于显示源代码、计算机输出、ASCII艺术等需要保持精确格式的文本内容。
示例：
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
<pre>
+---+---+
| | |
+---+---+
</pre>
在上述示例中，第一个 <pre> 元素展示了一段JavaScript代码，其中的缩进和空格都会被保留。第二个 <pre> 元素展示了一个简单的ASCII艺术图形，保留了图形的精确格式。
请注意，<pre> 元素通常不会自动进行换行，而是根据预定义的宽度水平滚动。如果要自动换行文本内容，可以结合使用CSS属性 white-space: pre-wrap。
总结来说，<pre> 元素用于表示预格式化文本，保留源文件中的空白符和换行符。它适用于展示源代码、计算机输出、ASCII艺术等需要保持精确格式的文本内容。
<br> 标签
<br> 元素是HTML中的一个行内元素，用于插入换行符（Line Break）。它用于在文本中创建一个显式的换行，即使在HTML中使用普通的空格或回车，浏览器也会将它们合并为一个空格或忽略掉。
<br> 元素是一个空元素，没有闭合标签。它只需在需要插入换行的位置使用即可。在HTML中，可以在段落、标题、文本块或文本行的任何位置使用 <br> 元素。
请注意， <br> 元素主要用于在文本中插入简单的换行，例如在地址或诗歌中的换行。对于更复杂的布局需求，应该使用CSS和块级元素来实现更灵活的控制。
总结来说，<br> 元素用于在HTML文本中插入换行符，创建显式的换行。它是一个空元素，可以在段落、标题、文本块或文本行的任何位置使用。
<hr> 标签
<hr> 元素是HTML中的一个空元素，用于在文档中插入水平分隔线（Horizontal Rule）。
<hr> 元素用于在内容中创建一个水平线，用于分隔不同的段落、主题或区块。它通常以水平线的形式显示，可以在页面中创建视觉上的分隔效果。
<hr> 元素是一个空元素，没有闭合标签，因此它不需要在结束标签处进行闭合。
可以通过CSS来自定义 <hr> 元素的样式，例如设置颜色、宽度、样式等。
总结来说，<hr> 元素用于在HTML文档中插入水平分隔线，用于在内容中创建视觉上的分隔效果。它是一个空元素，不需要闭合标签。
<i> 标签
<i> 元素用于将文本呈现为斜体样式，但并没有特定的语义含义。在HTML5中，推荐使用更具语义的元素 <em> 来表示强调文本，而不是仅仅使用 <i> 来表示斜体。
请注意，使用 <i> 进行斜体样式化的文本，没有明确的语义含义。如果要表示强调或重点文本，推荐使用 <em> 元素，它不仅会将文本呈现为斜体，还具有语义上的强调作用。
总结来说，<i> 元素用于将文本呈现为斜体样式，但在HTML5中推荐使用 <em> 元素来表示强调文本。
<b> 标签
<b> 元素是HTML中的一个行内元素，用于表示粗体文本（Bold Text）。
<b> 元素用于将文本呈现为粗体样式，但并没有特定的语义含义。在HTML5中，推荐使用更具语义的元素 <strong> 来表示重要或强调文本，而不是仅仅使用 <b> 来表示粗体。
请注意，使用 <b> 进行粗体样式化的文本，没有明确的语义含义。如果要表示重要或强调文本，推荐使用 <strong> 元素，它不仅会将文本呈现为粗体，还具有语义上的强调作用。
总结来说，<b> 元素用于将文本呈现为粗体样式，但在HTML5中推荐使用 <strong> 元素来表示重要或强调文本。
<del> 标签
<del> 元素是HTML中的一个行内元素，用于表示被删除的文本（Deleted Text）。
<del> 元素用于在文本中标记被删除的部分，通常以删除线的形式显示。它在语义上表示某些内容已被删除或不再有效，可以用于展示修订文档、版本控制历史等情况下的变动。
请注意，<del> 元素仅表示文本被删除，而不提供具体删除的原因或替代内容。如果需要提供替代内容，可以使用 <ins> 元素表示插入的文本。
总结来说，<del> 元素用于表示被删除的文本，通常以删除线的形式显示。它在语义上表示某些内容已被删除或不再有效。
<ins> 标签
<ins> 元素是HTML中的一个行内元素，用于表示插入的文本（Inserted Text）。
<ins> 元素用于在文本中标记插入的部分，通常以下划线的形式显示。它在语义上表示某些内容的插入或添加，可以用于展示修订文档、版本控制历史等情况下的变动。
请注意，<ins> 元素仅表示文本的插入，而不提供具体插入的原因或替代内容。如果需要提供替代内容，可以结合使用 <del> 元素表示被删除的文本。
总结来说，<ins> 元素用于表示插入的文本，通常以下划线的形式显示。它在语义上表示某些内容的插入或添加。
谢谢大佬~~
感谢大佬分享，刚好拿来复习