前端通常被称为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标签，我们需要写的页面逻辑、业务逻辑都写这里
- 上面这几个标签都是固定的位置，也是构成一个页面最基本的元素，具体如下
<!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：引入音频的标签
- 标签的使用如下：
<!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、标签的使用和布局
今天先了解这么多吧，重在了解和记住常用标签
原文链接：https://juejin.cn/post/7332735079162773539 作者：哈罗哈皮
