一、前端

1、什么是前端

前端是指网页或应用程序中用户直接与之交互的部分。前端开发主要关注于将设计和用户体验转化为实际的用户界面。前端开发通常包括使用 HTML、CSS 和 JavaScript 等技术来实现网页的结构、样式和交互功能。

2、前端技术栈

HTML（超文本标记语言）是一种用于描述网页结构的标记语言，通过使用不同的标签和元素来组织和呈现网页内容。

CSS（层叠样式表）是一种用于定义网页样式和布局的语言，通过为 HTML 元素应用样式规则来控制其外观。

JavaScript 是一种基于对象和事件驱动的脚本语言，常用于增强网页的交互性和动态性。通过 JavaScript，可以处理用户输入、执行页面操作、与后端进行数据交互等。

3、前端应该关注的方面

前端开发的关注点通常包括功能、美观、无障碍、安全、性能和兼容性。

功能：前端开发要确保网页或应用的功能正常运行，能够满足用户的需求和预期。这包括实现交互功能、表单验证、动态内容更新等，确保用户能顺利完成各种操作和任务。
美观：一个好看、精心设计的界面能够吸引用户并提供更好的用户体验。前端开发要关注页面布局、色彩搭配、字体选择等方面，以创建吸引人的界面设计
无障碍：无障碍是指让残障人士以及使用辅助技术的用户能够方便地访问和使用网页或应用。关注无障碍意味着使用语义化的HTML、提供文本替代、合适的键盘导航、明确的反馈等，以确保所有用户都能够平等地参与。
安全：前端开发需要注意安全性，防止潜在的安全漏洞和攻击。这包括跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、输入验证等方面的防护措施。
性能：网页或应用的性能直接影响用户体验和用户留存。前端开发应优化代码、减少资源加载时间、合理使用缓存等，以提供更流畅和高效的用户体验。
兼容性：不同浏览器和设备之间存在差异，前端开发要确保网页或应用在不同平台上的兼容性。这包括响应式设计、浏览器兼容性测试、移动端适配等，以确保用户在各种环境下都能正常访问和使用。

二、HTML

HTML (Hypertext Markup Language) 是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签描述了网页上的各个元素的属性和内容。通过使用HTML标签，可以定义文本、图像、链接、表格、表单等。

1、DOM 树

DOM（Document Object Model）树是指将一个HTML或XML文档表示为一个树形结构的对象集合。在前端开发中，DOM树是浏览器根据HTML文档解析生成的一种数据结构，用于表示文档的层次结构和元素之间的关系。

DOM树由以下几个要素组成：

文档节点（Document Node）：表示整个文档的根节点，是DOM树的入口点。
元素节点（Element Node）：表示HTML中的标签如 <div>、<p>、<a>等。元素节点可以包含其他元素节点、文本节点、属性节点等。
属性节点（Attribute Node）：表示元素节点的属性，如id="title"。属性节点附加在对应的元素节点上。
文本节点（Text Node）：表示HTML文档中的文本内容，如<p>Hello World!</p>中的"Hello World!"。
注释节点（Comment Node）：表示HTML文档中的注释内容，如。

DOM树具有层次结构，每个元素节点都可以包含子元素节点、文本节点和属性节点。通过DOM树，可以方便地搜索和操作文档的各个部分。可以使用JavaScript等编程语言通过DOM API来操纵DOM树，例如通过查找元素节点、修改元素样式、添加事件监听器等。

2、HTML语法

常见的HTML语法：

标签（Tag）: HTML使用标签来标记和定义不同的元素。标签由一对尖括号<>包围，通常有一个起始标签和一个结束标签。例如，<p>表示段落的起始标签，</p>表示段落的结束标签。
元素（Element）: 元素由起始标签、结束标签和其中的内容组成。例如，<p>Hello, World!</p>表示一个包含文本"Hello, World!"的段落元素。
属性（Attribute）: 属性提供有关元素的附加信息。属性出现在起始标签中，并以属性名="属性值"的形式呈现。例如，<img src="image.jpg" alt="描述信息">中的src和alt就是<img>标签的属性。
Doctype 声明: Doctype 声明指定了文档类型。它位于 HTML 文档的最开始，用来告诉浏览器使用哪个 HTML 版本来解析网页。例如，<!DOCTYPE html>表示当前页面使用的是 HTML5 标准。
标题（Headings）: 标题通过<h1>到<h6>标签来定义，分别表示不同级别的标题。例如，<h1>这是一级标题</h1>表示一级标题。
链接（Link）: 链接用于在网页中创建链接到其他页面或资源的超链接。使用<a>标签创建链接，其中href属性指定链接的目标地址。例如，<a href="https://juejin.cn/">点击这里</a>创建了一个指向"juejin.cn/" 的链接。
图像（Image）: 图像通过<img>标签来插入到网页中。src属性指定图像文件的路径，alt属性提供图像的替代文本，用于当图像无法加载时显示。例如，<img src="image.jpg" alt="描述信息">插入了一张名为"image.jpg"的图像。
列表（List）: 有序列表和无序列表可以使用<ol>和<ul>标签创建。列表项使用<li>标签包围。例如，有序列表可以这样创建：
```
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```

以上是HTML的一些常见语法，通过使用不同的标签和属性，可以创建出丰富多样的网页结构和内容。

3、内容划分

在HTML中，内容可以按照不同的层次和语义进行划分，以便更好地组织和表示文档的结构。

<header>：表示文档或节的页眉部分，通常包含标题、导航栏等。
<nav>：用于定义导航链接的部分，如菜单、导航栏等。
<main>：表示文档的主要内容区域，只能出现一次。
<article>：表示独立的文章或独立内容块，如博客文章、新闻报道等。
<aside>：表示与周围内容关联但又可独立存在的部分，例如侧边栏、引用、广告等。
<footer>：表示文档或节的页脚部分，通常包含版权信息、作者信息等。

4、HTML语义化

HTML语义化是指在编写HTML代码时使用具有恰当语义的HTML标签来描述文档结构和内容的做法。它强调使用正确的标签来表示文档的结构和语义，使得代码更具可读性、可维护性和可访问性。

要实现语义化的HTML代码，可以遵循以下几个原则：

选择合适的标签：使用具有明确含义的HTML标签来描述文档的结构和内容。例如，使用<header>表示页面的页眉部分，使用<nav>表示导航栏，使用<article>表示独立的文章内容等。
使用适当的标签来标记内容：根据内容的含义和结构，选择恰当的标签来包裹和标记内容。例如，使用<h1>-<h6>标签表示标题的层次结构，使用<p>标签表示段落，使用<ul>/<ol>和<li>标签表示列表等。
避免过度使用无语义的容器：尽量避免使用过多的<div>等没有明确语义的容器标签，而是选择更具有语义的标签来表示内容的结构。
使用语义化的属性：除了标签，还可以使用语义化的属性来增加内容的含义。例如，使用<img>标签的alt属性来提供图像的替代文本，使用<a>标签的href属性来定义链接的目标。
注意嵌套和层次结构：正确嵌套和组织标签，建立清晰的层次结构。确保每个标签都在适当的位置，并避免出现不正确或过度嵌套的情况。
避免基于样式的表达：尽量避免仅依赖样式来定义和呈现内容的结构和含义。使用适当的标签和属性来传达内容的语义，使得即使在没有样式的情况下，内容仍然具有适当的结构和含义。
提供适当的文本替代：对于图像、视频等媒体元素，可以使用适当的文本替代（如alt属性）来提供对内容的描述和解释，以提高可访问性和可搜索性。

语义化的一些好处：

可读性和可维护性：使用语义化的HTML代码可以提高代码的可读性和可维护性。通过使用具有明确含义的标签，开发者能够更容易地理解和阅读代码，减少歧义和困惑，提高代码的可维护性。
代码结构和逻辑清晰：使用语义化标签可以更好地描述文档的结构和内容。标签如<header>、<nav>、<article>等能够准确表达文档各个部分的含义，使代码结构更清晰。
可访问性提升：语义化的HTML可以提高网页的可访问性。屏幕阅读器等辅助工具能更准确地解读网页内容，提供更好的无障碍（accessible）体验，使得视力受损或有其他障碍的用户能够更好地理解和使用网页。
搜索引擎优化（SEO）：搜索引擎可以通过语义化的标签更好地理解和解析网页内容，从而提高网页在搜索结果中的排序和曝光度。合理使用标题标签<h1>-<h6>、段落标签<p>、列表标签<ul>、<ol>、<li>等能够帮助搜索引擎更好地理解关键内容。
跨平台和设备兼容性：语义化的HTML可以提高网页在不同设备和平台上的兼容性。不同设备和平台能够根据标签的语义来适配和显示页面，提供更好的用户体验。

总之，语义化的HTML代码能够提高代码的可读性、可维护性，提升网页的可访问性和搜索引擎优化，实现跨平台和设备的兼容性。

本篇笔记为个人总结，学习交流使用，欢迎各位大佬评价指正，非常感谢！

前端与 HTML | 青训营