前端通常被称为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、标签的使用和布局
今天先了解这么多吧,重在了解和记住常用标签