HTML学习小记 | Junyu’s Blog

type

status

date

slug

summary

📝 HTML

HTML是什么？

HTML是一种用于创建网页的标记语言，它可以用于描述网页的结构和内容。

这就是一段HTML将它放在一个HTML文件里，保存后再双击打开就可以在浏览器的网页上看到Hello world！

HTML元素

HTML4中，元素被分成两大类: inline(内联元素)与block(块级元素)。但在实际的开发过程中，因为页面表现的需要，前端工程师经常把inline元素的display值设定为block(比如a标签)，也经常把block元素的display值设定为inline；之后更是出现了inline-block这一对外呈现inline、对内呈现block的属性。因此，简单地把HTML元素划分为inline与block已经不再符合实际需求。基于这种考虑，在HTML5中，标准制定者重新定义了HTML元素的分类，并根据这一新的分类定义了元素的内容模型(Content Model) — 对于一个元素而言，哪些子元素是合法的，而哪些子元素是非法的。来源：http://chenhaizhou.github.io/2016/01/19/html-element-class.html

块级元素（文本内容元素）

HTML文本内容元素是在<body></body>标签内组织内容的重要工具。这些元素不仅标识内容的目的和结构，而且对于提高网站的易用性和搜索引擎优化具有重要作用。

<div>元素是一种通用的流内容容器，语义上并不代表任何特定类型的内容。它的主要用途是对其他元素进行分组，通常用于满足样式化需求（使用class或id属性），或者对具有相同属性的元素进行分组（如lang）。

<hr>元素标识段落级元素之间的主题转换，如故事中的场景变化或章节主题的变化。在HTML的早期版本中，它被表示为一条水平线。现在，虽然在视觉浏览器中仍可能显示为水平线，但它主要被定义为语义级别的元素，而非表现层面的元素。

<li>元素（HTML列表条目元素）用于表示列表中的条目。它必须包含在一个父元素中：有序列表<ol>，无序列表<ul>，或菜单<menu>。

<ol>元素代表一系列有序的列表项，通常渲染为带编号的列表。它可以包含一个或多个<li>元素，这些<li>元素可以进一步包含嵌套的<ol>或<ul>元素。

<p>元素（HTML段落元素）表示文本的一个段落。建议使用CSS的margin属性来调整段落之间的间距，而不是在段落之间插入空的段落元素或<br>元素。

内连元素

内联元素，也称为行内元素（inline element），与之相对的是块元素（block element），这两者都是HTML规范中的重要概念。内联元素的显示方式可以形象地被称为“文本模式”，即元素一个接一个地在同一行从左到右显示，而不会单独占据一行。然而，当引入CSS控制后，块元素和内联元素的这种属性差异就可以被消除。例如，我们可以给内联元素添加display:block属性，使其具有从新行开始的特性，或者给块元素添加display:inline属性，使其在一行上排列。

<a>元素可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址、或任何其他URL的超链接。

<a>标签可接受短语内容和任何元素或接受流内容的任何元素，但不接受<a>元素。
使用target属性时，添加rel="noopener norefferrer"以防止针对window.opener API的恶意行为。

<br>元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

不要使用来增加文本之间的行间隔；应使用CSS margin属性或者<p>元素。

<span>元素是短语内容的通用行内容器，没有特殊语义。

类似div应该在没有其他合适的语义元素时才能使用，不过<div>是块级元素，<span>是行内元素。

<strong>表示文本十分重要，一般用粗体显示。

表格元素Table

用于创建和处理表格数据。

<caption>元素展示一个表格的标题。

它应作为<table>的子元素出现。
通常出位于<table>的第一个子元素的位置。

<col>元素定义表格中的列，并用于定义所有公共单元格上的公共语义。

<col>通常位于<colgroup>元素内。

<colgroup>表格列组标签用来定义表中的一组列表。

必须是<table>的子元素。<colgroup>必须出现在任何可选的<caption>元素之后，且必须出现在任何<thead>、<th>、<tbody>、<tfoot>和<tr>元素之前。

<table>表示表格数据，不许使用其进行页面布局。

<tbody>定义表格中的主体内容。

<td>定义表格中的单元格内容。

<tfoot>定义表格中的脚注内容。

<th>定义表格的表头单元格内容。

<thead>定义表格的表头内容。

<tr>定义表格中的行。

表单元素Form

创建和处理表单数据。

<button>表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。

<form>表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

如果没有需求，请将表单的autocomplete属性设置成off。

<input>用于为基于Web的表单创建交互式控件。

尽量使用button元素替代type-button的input元素。

<label>表示用户界面中项目的标题。

尽量使用for属性匹配与之关联的input元素。

<fieldset>用来对表单中的控制元素进行分组

<legend>域说明元素用于定义它的父元素<fieldset>的内容标题。

必须是<fieldset>的子元素，且必须是第一个子元素。

<optgroup>会创建包含在一个<select>元素中的一组选项。

父元素必须是<select>元素。

<option>用于定义在<select>、<optgroup>或<datalist>元素中包含的项。

<output>表示计算或者用户操作的结果。

<progress>用了显示一项任务的完成进度。

<select>表示一个控件，提供一个选项菜单。

<textarea>表示一个多行纯文本编辑控件。

HTML5新特性

语义化标签，webStorage，svg，视频音频。

语义化标签

<header>元素用于定义一个章节或根元素的页眉，展示介绍性内容。通常包含一组介绍性或导航性的实用元素。它可能包含标题元素，以及其他元素，如标志、搜索框、作者名称等。

<header>元素不是章节内容元素，因此不能包含新的章节。
不能作为<address>、<footer>或另一个<header>元素的后代元素。

<aside>元素表示页面内容中与其余内容几乎无关的部分，可视为与内容分离且可以单独拆分的部分，不会影响整体。通常表现为侧边栏或嵌入内容。例如相关广告、作者传记、Web应用程序、个人资料信息或博客中的相关链接等。

<aside>元素不能作为<address>元素的后代元素。

<main>元素用于直接定义文档或应用的主体部分。

主体部分包含与文档直接相关或扩展于文档的中心主题、应用的主要功能部分的内容。这部分内容在文档中应是唯一的，不包含在一系列文档中重复的内容，如侧边栏、导航链接、版权信息、网站标志、搜索框等。
<main>标签不被IE支持，在兼容IE的场景中请谨慎使用。

<footer>元素用于定义一个章节或根元素的页脚。页脚通常包含章节的作者、版权信息或与文档相关的链接等信息。

<footer>元素内的作者信息应包含在<address>元素中。
<footer>元素不是章节内容元素，因此不能包含新的章节。
不能作为<address>、<header>或另一个<footer>元素的后代元素。

<nav>（导航栏）元素描述一个包含多个超链接的区域，该区域包含指向其他页面或页面内其他部分的链接列表。

并非所有链接都必须使用<nav>元素，它仅用于将一些常用链接放入导航栏，例如<footer>元素通常用于在页面底部包含不常用且不需要放入<nav>的链接列表。
一个网页也可能包含多个<nav>元素，例如一个用于网站导航列表，另一个用于页面内导航列表。

<h1><h6>标题（heading）元素呈现了六个不同级别的标题，<h1>级别最高，<h6>级别最低。

不要为了减小标题字体而使用低级别标题，应使用CSS定义字体属性。
避免跳过某级标题：始终从<h1>开始，接下来依次使用<h2>等。
使用<section>元素时，为方便起见，应避免在同一页面上重复使用<h1>，<h1>应用于表示页面标题，其他标题从<h2>开始。在使用<section>时，每个section都应使用一个<h2>。
不要将其作为<hgroup>元素的子元素，这种做法已被废弃。

<section>表示文档中的一个区域（或节），通常包含一个标题（<h1><h6>）作为子节点来标识每个<section>。

如果元素内容可以分为几个相对独立的部分，应使用<article>而不是<section>。
避免将<section>元素作为普通容器使用，这应该是<div>的用法（特别是当片段仅用于样式美化时）。一般来说，<section>应在文档大纲中出现。
<section>元素不能作为<address>元素的后代。

<article>元素用于定义文档、页面、应用或网站中的独立结构，是一种可独立分配或可复用的结构，例如论坛帖子、杂志或新闻文章、博客、用户提交的评论、信息之外的任何信息，如出版日期（应包含在<time>元素中）。

通常，<address>元素应放在<footer>元素中。
<address>元素中不能嵌套<address>元素、标题内容元素（<hgroup>、<h1><h6>）、章节内容元素（<article>、<aside>、<section>、<nav>）或<header>或<footer>元素。

存储（webStorage）

HTML5 Web存储是一种在客户端（浏览器）中存储和管理数据的机制。它提供了两个主要的对象：localStorage和sessionStorage。

localStorage：用于长期保存整个网站的数据。存储在localStorage中的数据没有过期时间，除非手动删除，否则会一直保留在用户的浏览器中。

sessionStorage：用于临时保存同一窗口（或标签页）的数据。存储在sessionStorage中的数据在关闭窗口或标签页后会被自动删除。

与传统的cookie相比，HTML5 Web存储提供了更安全和更高效的存储方式。这些数据仅用于用户请求网站数据，并且不会被发送到服务器上。此外，Web存储还可以存储大量数据而不影响网站的性能。

使用Web存储时，可以使用以下常用的API（以localStorage为例）：

保存数据：localStorage.setItem(key, value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

获取某个索引的key：localStorage.key(index);

需要注意的是，localStorage和sessionStorage的作用域是基于协议、主机名和端口的。只有在相同的协议、主机名和端口下，才能读取和修改相同的localStorage数据。sessionStorage还要求在同一窗口（浏览器标签页）下才能访问。这样可以隔离不同页面之间的存储数据。

SVG

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。它是一种开放标准，可用于创建高质量的图形和动画，适用于各种应用领域，包括Web开发、数据可视化、图标设计等。

SVG图形是基于数学公式和几何描述来定义的，而不是像位图那样基于像素。这意味着SVG图形可以无损地缩放和调整大小，而不会失去清晰度和质量。它们可以在不同的设备和分辨率下保持一致，并且支持交互性和动画效果。

视频音频

HTML5提供了内置的标签和API，使得在网页中嵌入和控制视频和音频内容变得更加简单和灵活。以下是HTML5中用于处理视频和音频的主要元素和相关API：

元素：用于在网页中嵌入视频内容。可以通过设置src属性指定视频文件的URL，使用controls属性显示视频控制条，以及使用其他属性和事件来控制视频的播放、暂停、音量等。

<video>

元素：用于在网页中嵌入音频内容。与<video>元素类似，可以通过设置src属性指定音频文件的URL，使用controls属性显示音频控制条，以及使用其他属性和事件来控制音频的播放、暂停、音量等。

<audio>

元素：用于指定<video>或<audio>元素的多个媒体源。可以在<source>元素中使用src属性指定不同格式的媒体文件，以便在不同浏览器和设备上提供兼容性。

<source>

媒体事件和方法：HTML5提供了一系列的媒体事件和方法，用于控制和操作视频和音频。例如，可以使用方法开始播放视频或音频，使用pause()方法暂停播放，使用volume属性控制音量等。

play()

媒体事件监听：可以通过JavaScript代码监听媒体事件，例如、pause、ended等，以便在特定事件发生时执行自定义操作，如显示提示信息、更新播放进度等。

play

通过使用这些HTML5的视频和音频元素以及相关的API，开发者可以轻松地在网页中嵌入和控制视频和音频内容，为用户提供更丰富的多媒体体验。

HTML5规范

团队协同开发必须遵循开发的规范。

DOCTYPE

使用HTML5的doctype来启用标准模式，建议使用大写的DOCTYPE

Compatible

启用IE Edge模式（Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染）

Lang

在html标签上设置正确的lang属性（有助于提高网页的可访问性，如让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等）

编码格式charset

页面必须使用精简形式，明确指定字符编码。指定字符编码的meta的第一个直接子元素

CSS和Javascript的引入

引入CSS时必须指明rel=“stylesheet”。

引入CSS和JavaScript时无须指明type属性（text/css 和text/javascript是type的默认值）

在head中引入页面时需要的所有CSS资源（在页面的渲染过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁）

Javascript应当放在页面末尾，或采用异步加载（将script放在页面中间将阻断页面的渲染。处于性能方面的考虑，如非必要请遵守此条）

title

页面必须包含title标签声明标题。

title必须作为head的直接子元素，并紧随charset 声明之后（title中如果包含ASCll之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码）

🤗 总结归纳

总之，虽然前端发展到现在已经很少需要使用最基础的HTML元素来完成业务开发，但是在个性化需求时，仍需要具备充足的知识和技能来自定义或改写组件来完成需求。无论是在前端开发还是在其他领域，掌握HTML、CSS和JavaScript等基础知识都是非常重要的，可以帮助开发者更好地理解和应用各种前端技术和框架。同时，也需要不断学习和更新前端技术和工具，以跟上最新的发展趋势和解决方案。

💡

有关文章写作，技术的问题，欢迎您在底部评论区留言，一起交流~