目录
〇、前言可以选择性跳过
1. 为什么要学前端基础知识
2. 话不多说上应用
一、HTML
1. HTML干啥用
2. HTML代码
2.1 双标记和单标记(或者标签)
2.2 块元素与行内元素
2.3 表单元素
二、CSS
三、JavaScript
〇、前言可以选择性跳过
1. 为什么要学前端基础知识
学习前端基础知识，特别是HTML、CSS和JavaScript，对于想要从事网页开发、网站设计、Web应用开发或者全栈开发的人来说，是至关重要的。——文心一言
总之，不论是要入门前端，为了更高级的技术打基础，还是搞期末大作业的网页，这些基础知识都是必备。
2. 话不多说上应用
在我们逛一些技术类博客网站的时候，经常会看到下面的一段话：
一般都要点击并关注，然后去阅读被挡住的文章。有没有别的办法来解决文章被挡住的问题呢？
我们只要右键检查
就会弹出检查窗口，这时左键选中一大片代码的部分，Ctrl+F搜索article_content，可以找到这段代码：
<div id="article_content"
class="article_content clearfix"
style="height:2000px;
overflow:hidden">
<!-- 一堆别的乱七八糟的的代码 -->
</div>代码看不懂，我们看代码下面的框框：
双击修改height的数值（比如变成原来的十倍），而后就可以惊奇地发现，文章全露出来了，那句关注博主的要求则沉底了。
可见这里的网页与它的页面源代码密切相关，而HTML，css，JavaScript正式这些代码的主要部分。
3. VScode开发环境安装配置和使用技巧（待更新）
一、HTML
1. HTML干啥用
百度的东西就不复制了，比如对于华为手机 - 华为官网 (huawei.com)，如果只剩下HTML，他会变成这样：
丑丑的，但是该有的都不缺。可以看出，这里的HTML就是充当一个骨架的作用，美观之类不是他的工作（是CSS的工作）。
2. HTML代码
HTML(HyperText Markup Language)代码大致是这种结构：
<html>
<head>
<title>文件名</title>
<!-- head中的内容 -->
</head>
<body>
<!-- body的内容 -->
</body>
</html>head里面放全局性的一些内容(如文件名，引用css等)，body则用于添加元素。
他的语法顾名思义，就是给内容作标记来实现网页的布局。下面介绍几个基本概念和代码。
2.1 双标记和单标记(或者标签)
双标记对这两个标记夹住的内容进行作用来形成元素，比如：
<!-- 标题标签 -->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<!-- 段落标签 -->
<p>这是一个段落标签</p>
<!-- 段落里面加点别的双标签 -->
<p>
这是字体<b>加粗</b>, <i>斜体</i>, <u>下划线</u>, <s>删除线</s>的段落标签
</p>效果：
单标记则自己就可以作为一个元素，比如：
<p>段落标签1</p>
<!-- 换行标签 -->
<br>
<p>段落标签2</p>
<!-- 分隔线标签 -->
<hr>
<p>段落标签3</p>效果为：
。
< >里面可以添加除了标签名以外的内容来修饰标签：
<!-- 超链接标签 -->
<a href = "https://www.4399.com">我是一个4399超链接</a>
<!-- 可以再加 -->
<a href = "https://www.4399.com" target = "_blank">新窗口打开的4399超链接</a>
<!-- 图片标签 -->
<img src="图片网页链接或本地存储位置等" alt="图片无法显示时显示的内容" width = "200">
<!-- 再比如 -->
<p class="本段所属的类" id="本段的id" >我是一个段落标签</p>除了上面的标题<h1>标签、段落<p>标签等，还有下面几种常用标签：
<!-- 无序列表标签 -->
<ul>
<li>列表标签1</li>
<li>列表标签2</li>
<li>列表标签3</li>
<li>列表标签4</li>
</ul> <!-- 有序列表标签 -->
<ol>
<li>列表标签1</li>
<li>列表标签2</li>
<li>列表标签3</li>
<li>列表标签4</li>
</ol> <!-- 表格 -->
<!-- 可以注意到这里的这里多了个border，它的作用是加边框 -->
<table border = "2">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
</table>2.2 块元素与行内元素
块元素的默认宽度是父级容器的100%，翻译过来就是能独占一行，且大都能装别的元素，前面的标题和段落元素都是块级元素，最为典型的块元素就是<div>标签。
<div>标签，依托它块级元素的特征，可以对内容作划分，也可以本身作为一个背景内容等来使用。比如前面提到的华为页面，其中的许多内容就是专门分在不同的块中实现的：
行内元素即不能独占一行的，只能装文本和行内元素的元素，典型的有<span>标签。
<div>的作用要搭配css才能更完美地显现。
下面是完整示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素与行内元素</title>
</head>
<body>
<div class="niv">
<h1>块元素与行内元素</h1>
</div>
<div class="content">
<h1>文章标题</h1>
<p>具体内容</p>
<hr>
<span>span标签1</span>
<span>span标签2</span>
<br>
<span>
点击后面的超链接
<a href="https://www.4399.com" target = "_blank">这里</a>
可见超链接也是行内元素
</span>
</div>
<span>这句话无法和上面的内容同行</span>
</body>
</html>运行结果：
2.3 表单元素
典型的表单元素有表单<form>, 表单的标签<label>, 输入<input>, 按钮<button>， 下拉列表<select>等，这里示例中间两类：
<form action="">
<!-- 输入框 -->
<label for="name">账号：</label>
<!-- 自带一段输入(value) -->
<input type="text" id = "name" value="123456789"><br><br>
<label for="password">密码：</label>
<!-- 不自带输入(placeholder)，且所输入内容会被隐藏(type="password") -->
<input type="password" id = "password" placeholder="请在这里输入密码">
<hr>
<!-- 单选框 -->
<label for="">选择性别：</label><br><br>
<!-- 这里的name是为了只能三选一 -->
<input type="radio" name="性别"> 男
<input type="radio" name="性别"> 女
<input type="radio" name="性别"> 其他
<br><br><br>
<!-- 多选框 -->
<label for="">爱好：</label><br><br>
<input type="checkbox"> 唱
<input type="checkbox"> 跳
<input type="checkbox"> rap
<input type="checkbox"> 篮球
<!-- 提交按钮 -->
<input type="submit">
</form>得到结果：
但是这里的输入框和按钮并不能起到什么效果，让他起到效果是javascript的工作。
二、CSS
待更新
三、JavaScript
待更新
