前端通常被称为Web前端，它涉及的是网站或应用程序的用户界面部分，这些界面运行在用户的浏览器上，可以直接被用户看到并与之互动。前端开发者主要负责创建和维护网站的视觉表现，包括结构的搭建、交互的设计以及与后端数据的集成等工作。随着技术的发展，前端领域已经不仅限于传统的网页开发，还包括了移动应用（如微信小程序、移动端APP）、桌面应用以及开发服务器的开发工作。因此，前端在现代软件开发中扮演着至关重要的角色。

准备工作

编辑工具

这里推荐vscode开发工具，多余的不介绍了，有一个就行，点击链接下载，傻瓜式安装即可，安装完如图

然后下载一个谷歌浏览器（电脑自动浏览器也行，前端代码运行必须依赖浏览器，否则无法预览）

创建文件

创建一个以.html结尾的文件即可
然后拖到你下载的vscode工具中
用快捷方式生成模版，快捷方式方法-在页面输入! + tab，注意这里的!必须是英文，是否不会起到快速创建默认代码
按照上面步骤，得到如下结构

认识代码

标签闭合

双标签闭合：<p></p>这样就是一个闭合标签
单标签闭合：<br/>这样叫单标签闭合，不同就是双标签是以</p>结尾，单标签是以<br/>结尾，/的位置不同区分点
一般标签里面要写内容需要用双标签，如果不需要写内容只需要单标签，有些标签只能是双标签或单标签，以后再说

标签的作用

标签可以用来控制页面的各种布局，例如：上面的标题就是一种简单布局代码，写法<h2>标签的作用</h2>这样写就会独占一行
标签可以配合css增加样式，例如：给文字加上颜色<h2 style='color:red;'>标签的作用</h2>（以后详细讲）
标签还可以配合点击事件使用，例如：你平时点击页面按钮跳转页面或者弹窗（以后详细讲）

了解默认模板结构

html是代码的根元素，全局只有一个标签，并且是双标签，会把所有内容包含在里面
head标签，主要包含标题、css样式、seo优化
title标签，标题浏览器顶部显示的标题就是这里控制
body标签，我们要写的标签基本都是写到这里，按需增加，页面长什么样的布局就在这里写了
script标签，我们需要写的页面逻辑、业务逻辑都写这里
上面这几个标签都是固定的位置，也是构成一个页面最基本的元素，具体如下

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     //css样式写到这里面
  </style>
</head>
<body>
  // 我们需要增加的标签内容写这里
</body>
<script>
// 一些页面逻辑写到这里，例如算法等
</script>
</html>

记住常用的几个标签（在body标签里面写的）

header：头部布局
main：中间布局
footer：底部局部
div：布局
h1：主标题
h2：副标题
p：标签内写段落文字，默认占一行
span：标签内写文字，不会占一行
上面的标签其实只要一个div标签就能走遍天下，为什么要分那么多类型？因为这样分类方便所有开发人员查看和维护，快速知道整体布局，也叫标签语义化，就像读文字一样容易理解
input：输入框标签
img：引入图片的标签
video：引入视频的标签
audio：引入音频的标签
标签的使用如下：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 100px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <header>
    <h1>我是主标题</h1>
    <h2>我是副标题</h2>
  </header>
  <main>
    <p>我是内容，中间部分</p>
    <div>
      <span>输入框</span>
      <input type="text">
    </div>
    <div>
      <span>引入图片</span>
      <--->
      <img src="./动漫.png" alt="">
    </div>
  </main>
  <footer>
    <p>我是结尾部分</p>
  </footer>
</body>
<script></script>
</html>

总结

1、了解什么叫前端
2、前端开发需要的开发工具
3、了解页面的基本构成和标签
4、了解什么叫标签和标签用途
5、认识标签和标签语义化
6、需要记住常用的几个标签
7、标签的使用和布局

今天先了解这么多吧，重在了解和记住常用标签

入门前端基础（保姆式教学1）

准备工作

编辑工具

创建文件

认识代码

标签闭合

标签的作用

了解默认模板结构

记住常用的几个标签（在body标签里面写的）

总结