软件选择
VScode,在浏览器搜索即可，官方网站下载适合自己电脑的版本安装
安装插件
- Chinese
可以换成中文的，点击扩展，输入chinese,安装。
安装完成后按照提示重启软件即可
-
HTML CSS Support
在插件处搜索HTML CSS Support，点击安装即可。CSS代码的快捷键神器
-
live server
在浏览器中实时预览页面的变化
-
Auto Rename Tag
修改html标签时可以同步修改
这样，基本的前端环境算是搭建完成了。
新建demo
下面，我们创建一个demo
首先，新建一个文件夹，用来放我们的文件，然后新建一个demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 练习</title>
</head>
<body>
<h1>这是一级标题</h1>
</body>
</html>
在代码空白处右击，选择open with live server,就可以在浏览器看到我们demo.html的信息。
其中title标签中的内容是网页的名字。
写代码时，新建空白的html文件后，我们输入英文的 感叹号！，会提示，点击提示的内容就可以新建一个demo,body标签中的是显示在网页上的内容。
HTML常用的标签
这里，推荐一个网址菜鸟教程，大家可以自行学习常用的标签，都很好理解。
这里给列举几个常用的基础标签，其余的可以在菜鸟教程上查看。
<!-- 标题标签 -->
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
<!-- 段落标签 -->
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<!--换行标签 -->
<br>
<a href="url">链接文本</a>
<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>
HTML 表格由 table 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由 tr>标签定义），每行被分割为若干单元格（由 td 标签定义），表格可以包含标题行（th）用于定义列的标题。
列表
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
其他的标签还有图片，超链接，区块，布局，表单，框架等，以及这些标签的属性，都可以在菜鸟教程查看。
最后，推荐给大家一个链接：前端学习路线，后面我也会按照这个路线学习，并把笔记更新到博客，如果对你有帮助，请点赞收藏加关注，后续有时间会持续更新，谢谢！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
