学过前端或者有了解过地应该都知道，前端入门学习就是学习前端三剑客：HTML、CSS和JavaScript。感觉刚开始学的时候，学的东西还是比较杂的吧，现在好好整理一下。
用人来类比的话，HTML相当于人的骨架，CSS相当于人的外表以及一些修饰物，而JavaScript则相当于人的行为。即：使用HTML来架起整个页面的架构，CSS修饰来使页面美观，同时加上JavaScript为页面增加一些动画及交互效果。
HTML
HTML是一种用于创建网页的标记语言，由一系列标签构成，这些标签用于定义文本、图像、链接、表格等页面元素，以及控制它们在页面上的显示方式。
HTML标签
<html></html> HTML标签，页面中最大的标签，称为根标签
<head></head> 文档头部，在head标签中必须要设置的标签是title
<title></title> 文档标题，即当我们打开网页时标签上显示的文字。
<body></body> 文档主体，元素包含文档所有内容，页面内容基本都是放到body里面
- 标题标签
<h1>~<h6>作为标题使用，从1~6重要性依次递减
<p></p>段落标签
<br>换行标签（强制换行）
- 文本格式化标签
加粗：<strong></strong>或<b></b>
倾斜：<em></em>或<i></i>
删除线：<del></del>或<s></s>
下划线：<ins></ins>或<u></u>
<div></div>和<span></span>标签，都是无语义的盒子，不过div是块级元素，占页面一整行，即每行只能放一个div盒子；而span是行内元素，一行可以存放多个span盒子。
<img src="img.jpg" alt="图片" title="img"> img标签是图像标签，其中src用于指定图像文件的路径和文件名，alt属性是当图片显示不出来时该位置显示的文字，title是鼠标1悬浮在图片上时显示的文字，同时img标签也具有width、height、border等属性，用于设置图片大小、边框。
- 表格标签
<table>
<tr>
<td>contents</td>
...
</tr>
...
</table>
tale用于定义表格的标签，tr定义表格中的行，td定义表格中的单元格，th表示表格的表头部分。
注意：
对于大型的项目，使用table标签可能会引起重排问题。因为浏览器在渲染表格时需要计算单元格的大小和位置，当表格包含大量行和列时，计算过程会占用大量时间和资源，导致页面变得缓慢和不稳定。
可以考虑使用CSS布局来代替table布局，如使用flex或grid布局，或者使用js来延迟table的渲染，减少重排次数。
- 列表标签
- 无序列表：
<ul> <li>list1 </li> <li>list2 </li> </ul>- 有序列表：
<ol> <li>list1 </li> <li>list2 </li> </ol>- 自定义列表：
<dl> <dt>title1 </dt> <dd>list1 </dd> <dd>list2 </dd> </dl> - 表单标签
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单控件：
<input> <lable> <select> <textarea>
具体标签的用法可以查看教程：菜鸟教程
CSS
css是层叠样式表，用于控制网页布局和样式的标记语言。可以为HTML元素应用各种样式，如字体、颜色、背景、边框、位置等。
css选择器
css选择器有标签选择器、类选择器、id选择器、通配符选择器、伪元素选择器、伪类选择器。
css in HTML：
//行内样式
<div style="color:pink;">box</div>
//文件内的样式
<head>
<style>
div {
width:300px;
height:200px;
backgroundcolor:blue;
}
</style>
</head>
//引用外部样式表
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
也可以在JavaScript中使用css
document.getElementById("root").style.color='blue';
盒子模型
CSS盒子模型描述了每个HTML元素实际上是一个由四个部分组成的盒子，这个盒子包括元素的内容（content），元素的内边距（padding）、边框（border）、外边距（margin）
通过使用盒子模型，我们可以更加精细地控制HTMl元素的尺寸、位置和空间，同时可以为元素添加更多的样式和设计效果。
关于css样式，有很多，具体就不一一列举啦，可以查看文档mdn
最后，学完html和css基础后，可以多去了解一下HTML5和CSS3，HTML5引入许多新的特性和功能，如引入了新的语义化标签、多媒体支持、本地存储、新表单元素等等，可以提高生产效率；CSS3引入许多新特性和模块，可以轻松实现更丰富更复杂的样式和布局，许多动画效果可以直接使用css3而不用JavaScript去实现。
（本来写这篇文章是想把基础内容都列出来，当作复习，也可以提供参考，但是又觉得这样很流水，也不能完全列完，就说了个概况，想要学习的伙伴可以多去看看文档，感觉很多东西可以看一遍知道它的存在，然后多去练练手才是关键）
