20 天学习 HTML（了解 HTML 的 20 个奇妙之处）第 1 部分

第一天-将网页划分为逻辑部分

第二天-什么是语义元素？为什么它们很重要？

第 3 天 - 让用户可编辑页面上的任何内容

第 4 天-使用 HTML5 实现下载按钮

第 5 天-使用 datalist 标签定义选项

第 6 天-使用 HTML5 实现可折叠部分⁣

第 7 天-使用 srcset 实现响应式图像

第 8 天-HTML 元素周期表

第 9 天-关于引文

第 10 天 — 突出显示！

第一天-将网页划分为逻辑部分

HTML5 提供了几个元素，可帮助您在适当的部分组织布局：

1. 标题<header>
2. 导航栏<nav>
3. 主要内容<main>与<article>和<section>⁣⁣
4. 侧边<aside>栏
5. 页脚<footer>

⁣⁣好的网页可能看起来或表现不同，但它们具有相似的标准结构。⁣⁣
⁣⁣
通过使用此标准结构和上面提到的语义元素，您的文档将变得更具可读性和可访问性。⁣⁣

第二天-什么是语义元素？为什么它们很重要？

与其在文档中写一些模糊的 div，
不如使用语义标签？

语义标签定义了元素的用途。使用能够赋予内容意义而非仅仅定义其外观的标签、类名和 ID 会非常有益。CSS 负责呈现。

例如<p>， 、<header>、<figure>分别表示包裹在它们周围的内容是段落、标题还是图像。它们帮助浏览器和开发人员理解其内容的含义。

为什么语义 HTML 很重要？

• 有助于编写干净且可维护的代码
• 增强可访问性
• 改善SEO

第 3 天 - 让用户可编辑页面上的任何内容

可以使用contenteditable属性使网页的文本可编辑。

只需将任何想要编辑的元素的contenteditable设置为 true 即可。
这有助于创建一个简单的文本编辑器。

<div contenteditable="true">
  Edit me!
</div>

第 4 天-使用 HTML5 实现下载按钮

通常，当用户点击媒体文件的链接时，它会在浏览器中打开。
如果您想让用户选择将文件保存到他们的电脑上，可以使用下载属性。

元素的 download 属性<a>使链接的 URL 成为下载链接，而非导航链接。这意味着用户可以保存链接，而不必导航到该链接。

download 属性可以带值或不带值使用。要重命名默认名称，可以赋值给文件，该值将成为文件的名称。

<a href="this-is-the-download-link.pdf" download="Download.pdf">
  Download me
</a>

第 5 天-使用 datalist 标签定义选项

⁣Html5<datalist>标签用于在表单的输入字段中提供自动完成功能。⁣
它
指定了一组供用户输入的预定义选项
。⁣
为了将其绑定到输入，通常将其与<input>元素的列表属性一起使用，该属性的值与数据列表 ID 匹配。⁣
它适用于所有类型的输入，如数据、范围、颜色等。⁣

<input list="languages" placeholder="Choose language" />
<datalist id="languages">
  <option>Python</option>
  <option>Javascript</option>
  <option>Java</option>
</datalist>

第 6 天-使用 HTML5 实现可折叠部分⁣

⁣Details标签用于创建可折叠部分，用于提供有关某个主题的额外信息，以便用户选择隐藏或查看。⁣ 与 summary 标签一起使用，summary 标签指定可点击以展开或折叠详细信息的标题
。⁣

默认情况下，详细信息是隐藏的，可以使用 open 属性来更改默认行为。⁣

<details>
<summary> Javascript </summary>
<p> I am an amazing language </p>
</details>

第 7 天-使用 srcset 实现响应式图像

⁣使图像响应意味着在图像的不同版本之间切换，以便根据各自的设备尺寸和分辨率显示它们。⁣
⁣
⁣srcset，元素的属性<img>用于提供不同版本图像的 URL 和描述符，以便浏览器可以在特定情况下显示最合适的图像。⁣
⁣
这里，描述符 x 代表设备像素比，即具有 2 倍分辨率的设备将仅显示与 srcset 属性中 2x 关联的图像。⁣
⁣
src 属性适用于不理解 srcset 的浏览器。

<img srcset="pizza-small.jpg,
             pizza-medium.jpg 1.5x,
             pizza-large.jpg 2x"
     src="pizza-large.jpg"
     alt="a slice of cheesy pizza">

第 8 天-HTML 元素周期表

⁣HTML元素有元素周期表和速查表。⁣ ⁣
这是一个很好的工具，可以在一个地方找到所有元素及其描述。⁣
对于那些记得所有标签的人来说，这些工具非常有用且方便。

https://htmlcheatsheet.com/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet
https://websitesetup.org/html5-periodical-table/

第 9 天-关于引文

⁣引文是内容的重要组成部分。⁣
有一些元素可以根据其语义含义在页面上显示引文：
⁣

元素<blockquote>：

• 提供一个部分来定义来自其他来源的引文。⁣
• 用于表示长引文。⁣
• Cite 属性用于提供引用来源的 URL。⁣

元素<q>：

• 在文本块中提供内联引用。⁣
• 用于表示简短的引语。⁣
• 在所附文本周围插入引号。⁣

元素<cite>：

• 提供作品来源的标题（例如书籍、专辑、歌曲、诗歌、散文等）⁣

<blockquote>
  The future was uncertain, absolutely, and there were many hurdles, twists, and turns to come, but as long as I kept moving forward, one foot in front of the other, the voices of fear and shame, the messages from those who wanted me to believe that I wasn't good enough, would be stilled.
  ― Chris Gardner,
  <cite>The Pursuit of Happyness</cite>
</blockquote>
<p>
  <q>The goal isn't to live forever, the goal is to create something that will.</q><br>
  ― Chuck Palahniuk, <cite>Diary</cite>
</p>

第 10 天 — 突出显示！

⁣您是否曾经想过在您的页面上突出显示文本？⁣
您只需使用 HTML 即可实现，使用<mark>标签突出显示需要额外注意的文本部分。⁣
⁣
主要用于来自其他来源的引文，以确定哪些文本与您更相关。⁣
⁣
不要仅将其用于装饰目的。⁣
⁣和
之间的区别-表示内容的相关性，而表示重要性。<mark><strong>
<mark><strong>

<p>
  <q>The goal isn't to live forever, the goal is to <mark>create something</mark> that will.
  </q><br />
  ― Chuck Palahniuk, <cite>Diary</cite>
</p>

感谢阅读❤

推特
Instagram