bg是自动化专业的学生，CS方面确实是基础知识比较薄弱，代码水平也比较一般，还在疯狂补基础orz
学习前端整理的相关需要了解的点：
1.什么是前端？
A：前端指在互联网技术领域中，负责网站或应用程序用户界面（User Interface，UI）和用户体验（User Experience，UX）设计和开发的专业人员。 简而言之就是使用web技术栈解决多端图形用户界面交互问题。
2.前端涉及到的技术
A：HTML（页面结构 内容）、CSS样式（位置颜色大小啥的一些样式）、JavaScript（完成一些行为等） 主要是这些技术用于构建网页和移动应用的前端部分。后来还有一些框架什么的。
3.前端关注的方面有：功能、美观、普适性、安全性（数据隐私啥的）、性能、兼容性、体验感等
HTML（HyperText Markup Language）
一个基本结构是：
-
<!DOCTYPE html>声明文档类型 -
<html>根标签，包含整个HTML文档 -
<head>页面的元数据，需要的信息但是不需要呈现给用户的 -
<body>给用户呈现的内容,比如文本、图片、链接等
DOM树：是浏览器和开发者之间交互的基础，它使得开发者可以通过编程方式动态地修改网页内容和结构。通过DOM，JavaScript可以访问和操作网页的任何部分，实现动态的网页效果和交互功能。
这个其实看起来还挺专业术语的，然后我差不多用实际思考一下，差不多就是用一个书架来类比。书架就像是一个网页，是整个结构的开始。每本书就像网页上的一个元素，比如一个标题或者一个图片。书的摆放顺序就像元素在网页上的排列。然而当我们想找某本书时，会按照书架上的顺序一本一本地找。类比一下，电脑也是这样，通过DOM树来找到网页上的元素。简而言之，DOM树就是网页上元素的家谱，告诉我们它们是如何排列的。
HTML语法需要注意的是：
1.标签和属性不区分大小写；
2.空标签（指那些没有包含任何内容的标签）可以不闭合，空标签通常用于插入一些不需要包裹内容的元素（比如换行、插入图片、创建超链接等），如图
3.属性值推荐用双引号包裹住；
4.某些属性可以省略，通常是指在某些情况下，如果属性的值是预设的或者最常见的值，那么这个属性可以不写，因为浏览器会默认使用这个值。
语义化使用具有明确语义含义的HTML标签来构建网页内容，这样不仅能够让网页的结构更加清晰，也有助于搜索引擎更好地理解网页内容，同时提高网页的可访问性。
1.HTML中的元素、属性及属性值都拥有某些含义；
2.开发者应该遵循语义来编写HTML（比如有序列表用- <ol>,无序用- <ul>;- <lang>属性表示内容所使用的内容
其好处是：代码可读性、可维护性、搜索引擎优化（SEO）、提升无障碍性
做到语义化的基础就是要了解每个标签和属性的含义，思考什么标签最适合描述这个内容，不使用可视化工具生成代码
常见的语义化HTML标签
<header>：定义文档或部分内容的页眉。<footer>：定义文档或部分内容的页脚。<nav>：定义导航链接的部分。<article>：定义独立的内容区域，如博客文章、新闻故事等。<section>：定义文档中的一个区段，通常包含一个标题。<aside>：定义与页面主要内容稍微相关的部分，如侧边栏。<main>：定义文档的主要内容，每个页面中只能有一个<main>元素。<table>：定义表格，用于展示数据。<figure>和<figcaption>：定义自包含的内容，如图片、图表等，<figcaption>用来为<figure>元素提供标题。<address>：定义作者或拥有者的联系信息。
如何理解HTML传达的是内容不是样式？
这意味着HTML的主要目的是定义网页的结构和内容，而不是定义网页的外观和格式。这是网页设计中内容与表现分离的原则之一。通过这种方式，网页的结构（HTML）和表现（CSS）被清晰地分离，使得网页更容易维护、更易于访问，并且可以更好地适应不同的设备和屏幕尺寸。这也是响应式设计和无障碍设计的基础。 简单想象一个例子，你有一个篮子里面装满了各种蔬菜和水果。这些蔬菜和水果就是你要传达的“内容”。它们是实实在在的东西，就像网页上的文字、图片和视频一样。现在你把这些蔬菜和水果摆放得整整齐齐，有的放在篮子的上层，有的放在下层，还有的甚至用漂亮的彩带装饰起来。这些摆放和装饰的方式，就像是网页的“样式”，它们让内容看起来更吸引人，但并不改变内容本身。所以，HTML就像是那个篮子，它负责装下所有的内容，告诉你有哪些蔬菜和水果（也就是网页上的文字、图片等）。而样式（比如CSS）则负责决定这些内容如何摆放和装饰，让它们看起来更漂亮。
简单来说，HTML关注的是“有什么”，而样式关注的是“看起来怎么样”。
