前端三件套

学习网站

MDN Web Docs (Mozilla Developer Network): 非常权威和全面的免费资源，有专门为初学者设计的学习路径。从这里开始非常好：MDN - 学习 Web 开发
freeCodeCamp: 提供免费的交互式编程课程，涵盖 HTML, CSS, JavaScript。https://www.freecodecamp.org/ (可以选择中文)
Codecademy: 也是交互式学习平台，有免费的基础课程。https://www.codecademy.com/
W3Schools: 适合快速查阅和看简单示例。https://www.w3schools.com/
菜鸟教程：国内经典教学网站
Vue Mastery：提供高质量的 Vue 视频课程，有免费的基础课程，也有付费的深入课程。搜索 “Vue Mastery Vue 3”。https://www.vuemastery.com/
Scrimba：提供交互式的 Vue 课程，可以在视频旁边直接写代码。搜索 “Scrimba Vue 3”。https://scrimba.com/

HTML

目标

了解网页的骨架是如何搭建的。

学习内容：什么是标签？常见的标签有哪些

html>, <head>, <body>, <h1> 到 <h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>, <input>, <button>

标签的属性是什么（如 <a> 的 href，<img> 的 src 和 alt）？HTML 文档的基本结构。
练习：用 VS Code 创建一个简单的 .html 文件，手写一些基本的标签，然后在浏览器中打开它看看效果。

系统知识点

块级元素和内联元素

1、二者定义与区别

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。

例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em><strong>元素创建强调。

2、块级元素 Block-level Elements 的特点

独占一行： 在页面流中，块级元素默认会从新的一行开始，并且其后的元素也会另起一行。
占据全部宽度： 它会尽可能地撑满其父容器的整个宽度（width），即使内容本身很短。
可设置宽高： 可以通过CSS明确设置 width 和 height 属性。
可设置内外边距： 可以设置 margin (外边距) 和 padding (内边距) 的四个方向（上、右、下、左）。
容器性： 通常可以包含其他块级元素和内联元素。

3、内联元素 inline elements 的特点

不独占一行： 内联元素不会从新行开始，它们会和其他内联元素或文本内容在同一行内从左到右依次排列，直到行末才换行。
宽度由内容决定：元素的宽度由其包含的内容（文字、图片等）的大小决定，不会撑满父容器。
不可直接设置宽高： 直接通过CSS设置 width 和 height 属性通常是无效的（对<img>等替换元素可能有例外）。
水平内外边距有效，垂直无效： 可以设置 margin-left, margin-right, padding-left, padding-right。设置 margin-top, margin-bottom, padding-top, padding-bottom 可能有视觉效果，但通常不会影响周围元素的位置（不会把上下行的元素推开）。
内容性： 通常只包含文本或其他内联元素（一般不应包含块级元素，虽然HTML5规范放宽了部分限制，但这通常是不好的做法）。

4、常用的块级元素

<div>：最常用的块级容器，无特定语义。
<p>：段落。
<h1> 到 <h6>：各级标题。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项（<ul> 和 <ol> 的子元素）。
<table>：表格。
<form>：表单。
<header>：页面或区域的头部。
<footer>：页面或区域的底部。
<nav>：导航链接区域。
<section>：文档中的一个区域或节。
<article>：独立的、完整的内容块（如博客文章、新闻报道）。
<aside>：侧边栏内容。
<hr>：水平分割线。
<blockquote>：块级引用。
<pre>：预格式化文本（保留空格和换行）。

5、常用的内联元素

<span>：最常用的内联容器，无特定语义，用于给部分文本应用样式。当想要对它用 CSS（或者 JavaScript）时，可以用它包裹内容，且不附加任何额外的意义
<a>：锚点（链接）。
<img>：图像（虽然是内联，但可以设置宽高，行为有时类似inline-block）。
<strong>：加粗强调。
<em>：斜体强调。
<input>：输入控件（行为类似inline-block）。
<button>：按钮（行为类似inline-block）。
<label>：表单标签。
<select>：下拉列表（行为类似inline-block）。
<textarea>：多行文本输入框（行为类似inline-block）。
<br>：强制换行。
<code>：代码文本。
<small>：小号字体。
<sub>：下标。
<sup>：上标。

空元素

不是所有元素都拥有开始标签<element>、内容（<element></element>中间的内容）和结束标签</element>。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如：元素 <img> 是用来在页面插入一张指定的图片

1、常见的空元素

<hr> (Horizontal Rule - 水平分割线): 用于表示段落级别主题的转换。它本身就是一条线，不包含内容。
<img> (Image - 图像): 用于嵌入图像。图像的来源由 src 属性指定，替代文本由 alt 属性指定。它本身不包裹其他内容。
<input> (Input Field - 输入控件): 用于创建各种表单输入字段（文本框、密码框、复选框、单选按钮、按钮等）。它的类型和值等由属性定义，不包含子元素。
<br> (Line Break - 换行): 用于在文本中强制插入一个换行符。
<meta>: 用于提供页面的元数据，放在 <head> 内。
<link>: 用于链接外部资源（如CSS样式表），放在 <head> 内。
<area>: 定义图像映射中的一个区域。
<base>: 为页面上的所有相对链接规定默认 URL 或目标。
<col>: 为表格中的一个或多个列规定属性值。
<embed>: 定义嵌入的内容，比如插件。
<param>: 为 <object> 元素定义参数。
<source>: 为媒介元素（如 <video>, <audio>, <picture>）定义多个媒介资源。
<track>: 为媒介元素（如 <video> 和 <audio>）规定外部文本轨道。
<wbr>: 规定在文本中的何处适合添加换行符（Word Break Opportunity）。

属性 Attribute

无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了 div 和 span元素。应配合使用 [class] 属性提供一些标签，使这些元素能易于查询。

1、span

<span>是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

2、div

<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。
div 元素非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

3、换行与水平分割线

<br> 换行元素，在段落中使用会进行换行，是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。
例如：
<p>
  从前有个人叫小高<br />
  他说写 HTML 感觉最好<br />
  但他写的代码结构语义一团糟<br />
  他写的标签谁也懂不了。
</p>

<hr> 在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。
例如：
<p>
  原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”
</p>
<hr />
<p>
	行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
</p>

文档的基本组成部分

1、文档基本架构

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚

横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

2、基本元素

<header>：页眉。
	是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 不是指html框架里的<header>部分 标题）。    
    
<nav>：导航栏。
    包含页面主导航功能。其中不应包含二级链接等内容。
    
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。    
    
<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
    
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。   
    
<aside>：侧边栏，经常嵌套在 <main> 中。
   
<footer>：页脚。

MDN教程知识点学习

属性、元素的关联

后面知识点有点乱。先说明一下二者关系：元素 element 是 html 里面的主要表示，而一个元素又有许多属性，如 type、name、id、placeholder。凡是用尖括号<>括起来的首个单词都是元素，跟在元素单词后面的基本都是该元素的属性。

参考网站

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax html、css、js的系统知识点介绍
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-55 前端实践项目

1.段落(换行)

<p> 所有在这段里的内容都单独成段 </p>

2.内容块分段 section

使用Section进行网页内容的分段。也就是说你在网页上贴了几大块不同的内容，例如C++语法和JS语法，你想把这些内容分成两大块，可以使用Section进行分段。

<section>
	<h1> C++ Knowledge<h1>
</section>
<section>
	<h1> JS Knowledge<h1>
</section>

3.创建无序列表 ul

无序列表使用元素 ul ，即对 ul 块里的内容进行无序堆放。

<ul>

</ul>

1、li

The li element is used to create a list item in an ordered or unordered list.就是在有序或无序的块里创建一个表单，具体有无序依据你在哪使用 li 元素。

<ul>
  <li>catnip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>

可以看到，该列表里的元素只是按输入顺序列出来，并没有进行排序：即有标号的排序。可对比第7点的有序排序 ol.

4.图片的插入

图片插入使用 img 元素，并且要在元素内写你图片的url

<ul>
  <li>catnip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">

4.1 alt 属性：

alt 属性的主要作用是提供图像的“替代文本”

作用：

图像无法加载时显示： 如果因为网络问题、图片路径错误、服务器故障等原因导致 src 指定的图片无法正常显示，浏览器通常会显示一个破碎的图片图标，并在旁边显示 alt 属性中定义的文本。这让用户即使看不到图片，也能知道这里原本应该是什么内容。
屏幕阅读器为视障用户朗读： 这是 alt 属性最重要的作用之一，关乎网页的可访问性。视力障碍的用户会使用屏幕阅读器软件来“听”网页。屏幕阅读器无法“看到”图片，但它们会朗读 alt 属性的文本，从而向用户描述图片的内容或功能。如果没有 alt 文本，视障用户就无法获取图片所传达的信息。
搜索引擎优化（SEO）： 搜索引擎（如 Google、Bing）在抓取和索引网页时，主要理解文本内容。它们无法像人一样“看懂”图片。alt 文本为搜索引擎提供了关于图片内容的文字描述，帮助它们理解图片的主题，从而可能在图片搜索结果中获得更好的排名。
用户禁用了图片显示或使用纯文本浏览器：有些用户为了节省流量或在特定环境下会禁用浏览器加载图片，或者使用纯文本浏览器。这时，alt 文本就能替代图片显示，传递信息。

5.figure元素

The figure element represents self-contained content and will allow you to associate an image with a caption. figure 元素代表独立内容，并允许您将图像与标题关联起来

<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
</figure>

figcaption 属性

A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element. 即图标题元素是用来添加标题来描述图片的

<figure>
  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
  <figcaption> Cats love lasagna </figcaption>
</figure>

6.em元素

em元素用于强调一些特定的 word or phrase 。例如在以上例子中，Emphasize the word love in the figcaption element by wrapping it in an emphasis em element.

<figcaption>Cats <em>love</em> lasagna.</figcaption>
<!-- 输出如下 -->

7.ol 有序标签列表的创建

The code for an ordered list (ol) is similar to an unordered list, but list items in an ordered list are numbered when displayed.不同于 ul，它会在进行列表时给元素编号。

<ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
</ol>

8.strong元素：用于强调某些词

strong元素用于表示某些text 是很重要和紧急的，也就是加粗字体。

em元素是斜体

<figcaption>Cats <strong>hate</strong> other cats.</figcaption>

9.form元素：用于获取用户登录网页信息

Now you will add a web form to collect information from users. The form element is used to get information from a user like their name, email, and other details.

10.action元素：指示表单数据应该发往哪里

The action attribute indicates where form data should be sent.

例如：

<form action="/submit-url"></form>

In the example, action=“/submit-url” tells the browser that the form data should be sent to the path /submit-url.

11.input元素

The input element allows you several ways to collect data from a web form. Like img elements, input elements are a void element and do not need closing tags.

input 元素允许您通过多种方式从 Web 表单收集数据。与 img 元素类似，input 元素为空元素，无需结束标签。

Remember that an input element is a void element. 因此它只是代表一个输入选项，具体是文本框（text）还是按钮（button）取决于 type 属性。

<input type="radio"> cat
<input type="text"> Cat

第一个是一个多选一按钮，第二个是文本框。

11.1.type 属性

There are many kinds of inputs you can create using the type attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer.

您可以使用 type 属性创建多种类型的输入框。您可以轻松创建密码输入框、重置按钮，或允许用户从计算机中选择文件的控件。

<input type="text">

可以看到出现了一个文本框

<input type="radio"> cat

PS:input属性和其他属性一样，在标签<input> 后面可以添加文字，也就是你要在网页呈现的东西，只是它是 void 类型，不需要末尾封闭，即没有 </input>作为结尾标志。

11.2.name属性

In order for a form’s data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted.

为了使表单的数据能够通过 action 属性中指定的位置进行访问，您必须为文本字段赋予 name 属性并为其分配一个值来表示正在提交的数据。

<input type="text" name="name">

假如我们有了两个 input 元素构造的 radio button，我们想要把它们关联起来，做成一个单项选择，即不能同时选中两个 button，可以将两个按键的 name 属性赋成同一值。

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio"name="indoor-outdoor"> Outdoor</label>

当你选择Indoor，Outdoor 就不能被选择，因为你的类型是 radio，“多选一”按钮。

请注意：name 的用处取决于它标签的 type 属性是什么，如果属性是复选框 checkbox ，那么此时name一样也可以同时选中

            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>

11.3.Placeholder 属性

Placeholder text is used to give people a hint about what kind of information to enter into an input.

Placeholder意为占位符，用于在输入文本框加入文字，去说明这个文本框你要填什么。

   <input type="cat photo URL" name="catphotourl" placeholder="cat photo url">

11.4.required 属性

To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element.

为了防止用户没填文本框信息(必要信息)就提交表单，此时就可以使用 required 属性告诉网页，如果此信息未填，就无法提交表单。

PS：以上属性可以在任一元素里实现

12.button 元素

The button element is used to create a clickable button. 即 btutton 元素是添加一个互动按钮，用于后续使用 JS 编写互动逻辑

          <button> Submit </button>

请注意：

Even though you added your button below the text input, they appear next to each other on the page. That’s because both input and button elements are inline elements, which don’t appear on new lines.

即使您将按钮添加到文本输入框下方，它们在页面上仍然相邻。这是因为输入框和按钮元素都是内联元素，它们不会出现在新行中。

The button you added will submit the form by default. However, relying on default behavior may cause confusion. Add the type attribute with the value submit to the button to make it clear that it is a submit button.-----手动增加关联，不依赖隐式关联

          <button type="submit">Submit</button>

告诉网页 button 的类是 submit 类，类似 C++ 的类成员函数（限定当你与button交互时调用的是submit 而不是其他的玩意）

12.1 radio button

You can use radio buttons for questions where you want only one answer out of multiple options.

对于只想从多个选项中选择一个答案的问题，您可以使用单选按钮。

使用 input元素进行多选一按钮的编写：

        <input type="radio">Indoor

13.label 元素

label elements are used to help associate the text for an input element with the input element itself (especially for assistive technologies like screen readers).

<label> 元素本身的作用就是为表单控件（如输入框、复选框、单选按钮等）定义一个标签或说明。

标签元素用于帮助将输入元素的文本与输入元素本身关联起来（特别是对于屏幕阅读器等辅助技术）。也就是说，当你点击输入元素的文本时，你也选择了该输入元素。

例如：

        <label><input type="radio"> Indoor</label>

你不需要点击圆圈按钮，去表示你选择了这个元素，你只需要点击 “indoor” 文本就表示你点击了该按钮。

这种方式称为 隐式关联 (Nesting-嵌套)，将 <input> 元素直接放在 <label> 元素内部。在这种方式下，浏览器会自动知道这个标签是属于它内部的那个输入控件的。点击标签文本 “点我也可以选中：” 也会触发复选框的选中/取消选中。

13.1 for 属性

还有一种方法是使用 显式关联，使用 for 属性和 id 属性将 label 标签和 input 标签 关联起来

for 属性是 <label> 元素的一个属性，它的值用来指定这个标签是为哪个表单控件服务的。这个指定是通过将 for 属性的值设置为目标控件的 id 值来实现的。它实现了标签和控件之间的明确绑定，从而提高了用户交互体验和网页的可访问性。

给你的 <input> 元素设置一个唯一的 id 属性。
在对应的 <label> 元素上，添加一个 for 属性。

关键点：for 属性的值必须和对应 <input> 元素的 id 属性的值完全相同。

<!-- 这是输入元素，它有一个 id="breakfast" -->
<input id="breakfast" type="radio" name="meal" value="b">

<!-- 这是标签元素，它的 for="breakfast" 指向了上面 input 的 id -->
<label for="breakfast">Breakfast</label>

另一个例子：

            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>

14.id 属性

The id attribute is used to identify specific HTML elements. Each id attribute’s value must be unique from all other id values for the entire page.

id 属性用于标识特定的 HTML 元素。每个 id 属性的值必须与整个页面的所有其他 id 值唯一。

          <label><input type="radio" id="indoor"> Indoor</label>

此时这个input元素被唯一标识为 “indoor” 属性，其它 input 元素无法使用此id。

15.value属性

If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button’s value attribute to the same value as its id attribute.

如果您选择**“Indoor”单选按钮并提交表单，则该按钮的表单数据将基于其 name 和 value 属性。由于您的单选按钮没有 value 属性**，因此表单数据将包含indoor-outdoor=on，这在您有多个按钮时毫无用处。也就是说，添加一个 value 属性，避免提交表单时出现indoor-outdoor这个数据同时为on(同时选中)，毕竟这是个单选，同时选中就没意义了。

          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

16.fieldset 元素

The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.

fieldset 元素用于在 Web 表单中将相关输入和标签组合在一起。fieldset 元素是块级元素，这意味着它们出现在新行上

Nest the Indoor and Outdoor radio buttons within a fieldset element, and don’t forget to indent the radio buttons.

        <fieldset>
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
        </fieldset>

17.legend 元素

The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

legend 元素充当了 fieldset 元素的标题，它为用户提供了在表单该部分应该输入什么内容的上下文。

          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>

18.checkbox 元素

Forms commonly use checkboxes for questions that may have more than one answer. The input element with a type attribute set to checkbox creates a checkbox.

表单通常使用复选框来处理可能有多个答案的问题。将 type 属性设置为 checkbox 的 input 元素会创建一个复选框。

            <legend>What's your cat's personality?</legend>
            <input type="checkbox">Loving

19.checked 属性

In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it.

There’s no need to set a value to the checked attribute. Instead, just add the word checked to the input element, making sure there is space between it and other attributes.

要使复选框或单选按钮默认选中，您需要为其添加 checked 属性。无需为 checked 属性设置值。只需在 input 元素中添加 checked 一词，并确保它与其他属性之间留有空格。

例如：

            <input id="loving" checked type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
            <label><input id="indoor" checked type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>

可见，checked 属性放哪里都无所谓。

The footer element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.

footer 元素用于定义文档或章节的页脚。页脚通常包含文档作者、版权数据、使用条款链接、联系信息等信息。

21. 锚点 `<a>`

<a>标签是 HTML 中用来创建超链接 (Hyperlink) 的元素，通常称为锚点 (Anchor) 元素。

核心作用：

链接到其他资源: 它可以将用户从当前页面导航到：
- 另一个网页: 可以是同一个网站的其他页面，也可以是互联网上的任何其他网站。
- 文件: 如 PDF 文档、图片、压缩包等。
- 电子邮件地址: 点击后会启动用户的默认邮件客户端，并预填收件人地址 (mailto:)。
- 电话号码: 在移动设备上点击可以拨打电话 (tel:)。
链接到当前页面的特定部分: 通过使用 # 加上目标元素的 id，可以创建页面内的跳转链接（书签链接）。

关键属性 href href 属性的值定义了链接的目标地址 (URL)。

22.body 和 head 元素

<head> 元素 (头部/大脑):
- 作用: 包含关于这个HTML文档自身的元数据。这些信息主要是给浏览器、搜索引擎或其他机器看的，而不是直接展示给用户的网页内容（除了<title>）。
- 内容:
  
  meta 元素 : 提供关于HTML文档的元信息(都是meta的属性)，比如：
  - charset=“UTF-8”: 指定文档使用的字符编码，确保中文等特殊字符能正确显示。
  - name=“viewport” content=“width=device-width, initial-scale=1.0”: 配置视口，用于响应式设计，让网页在不同设备上（手机、平板、电脑）有合适的显示效果。
  - name=“description”: 页面内容的简短描述，搜索引擎可能会用到。
  - name=“keywords”: 页面的关键词（现在搜索引擎对这个不太看重了）。
  - link: 用于链接外部资源，最常见的是链接外部CSS样式表 (rel=“stylesheet”)。
  - style: 可以在HTML文档内部定义CSS样式。
  - script: 可以链接外部JavaScript文件或在内部编写JavaScript代码（虽然<script>也可以放在<body>的末尾）。
  - title：决定浏览器在页面的标题栏或选项卡中显示的内容。
    
    请注意：meta 是一个 void element，这意味它不需要 </meta> 结尾
- 特点: <head> 里的内容不会在浏览器的主窗口区域直接渲染出来。它是关于页面的“幕后”信息。
<body> 元素 (身体):
- 作用: 包含网页上所有可见的内容。这是用户在浏览器窗口中直接看到和交互的部分。
- 内容: 所有你希望用户看到的元素都放在这里，例如：
  - 文本：段落 (<p>)、标题 (<h1> 到 <h6>)
  - 图片 (<img>)
  - 链接 (<a>)
  - 列表 (<ul>, <ol>, <li>)
  - 表格 (<table>)
  - 表单 (<form>, <input>, <button>等)
  - 划分区域的容器 (<div>, <span>)
  - HTML5语义化标签 (<header>, <footer>, <nav>, <article>, <section>, <aside>)
  - 等等…
- 特点: <body> 里的内容构成了用户能直接浏览和交互的网页界面。

它们的关系和位置:

在一个标准的HTML文档中，<head> 和 <body> 元素都是 <html> 根元素的直接子元素。
<head> 元素必须位于 <body> 元素之前。
一个HTML文档通常只有一个 <head> 和一个 <body>。

简单来说：
- <head>: 关于页面的信息（给机器看为主）。
- <body>: 页面上看到的内容（给人看为主）。

23.html 元素

请注意，页面的所有内容都嵌套在 html 元素中。html 元素是 HTML 页面的根元素，包含页面上的所有内容。您还可以通过向 html 元素添加 lang 属性来指定页面的语言。

简单来说: 每个HTML文档都必须以 <html> 开始，并以 </html> 结束。所有其他元素（比如 <head>和 <body>）都必须放在这两个标签之间。它是整个文档的最外层容器。

lang 属性的作用：

可访问性 (Accessibility): 帮助屏幕阅读器等辅助技术确定使用哪种语言的发音规则来朗读页面内容。
搜索引擎优化 (SEO): 帮助搜索引擎理解页面的主要语言，从而更好地为特定语言的用户提供搜索结果。
浏览器功能: 浏览器可能会根据这个属性提供翻译选项，或者使用正确的字典进行拼写检查等。
```
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```
基本的html框架如上。

所有页面都应以 <!DOCTYPE html> 开头。这个特殊的字符串被称为声明，用于确保浏览器尽量满足行业规范。<!DOCTYPE html> 告诉浏览器该文档是 HTML5 文档，这是 HTML 的最新版本

一些新手时期犯的错误

使用锚点`<a>`的href 进行网站链接时未加文本/超文本链接

<h1><a href="www.baidu.com" title="派蒙的小金库" target="_blank"><em>派蒙 </em></a>登场！</h1>

当 href 属性的值不以协议（如 http://, https://, ftp://, mailto: 等）开头时，浏览器会认为这是一个相对路径或本地文件路径。它会尝试在你当前HTML文件所在的文件夹（或者根据相对路径规则的其他本地位置）查找一个叫做 www.baidu.com 的文件或目录。因为你的本地项目文件夹里确实没有这个文件，所以浏览器就报了 “File Not Found” 错误。

在段落标签`<p>`里使用块级标题元素标签`<h1>`

<h1> 嵌套在 <p> 中：这在HTML结构上是不推荐的，甚至可能是无效的。<h1> 是一个块级标题元素，而<p>是段落元素。通常标题应该独立存在，或者包含在更合适的结构标签如 <header>, <section>, <article>, <div> 中，而不是直接放在 <p> 里。

<p>
    <h1><em>喵 喵 喵</em></h1>
    <img src="images/xinhai.png" width="240" height="205">
</p>

这是错误的

前端三件套知识