前端简明教程系列：第一节基本概念、配置、模板及常用标签

越空

已于 2023-05-05 01:34:21 修改

阅读量166

点赞数 2

分类专栏：前端简明教程系列文章标签：前端 javascript html css vscode

于 2023-04-20 11:03:36 首次发布

本文链接：https://blog.csdn.net/weixin_45204777/article/details/129524053

版权

前端简明教程系列专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前端简明教程系列：第一节基本概念、配置、模板及常用标签

本套教程使用的配套视频教程是b站up主晓舟报告的从零开始学前端系列课程的第一套-网页重构：视频链接

本节提要：

web开发和前端基本概念
工具配置
HTML模板中的标签介绍
几个常用标签的介绍
一些快捷键

web开发和前端基本概念

Web开发包含前端和后端两个部分，前端负责网站用户界面的设计和实现，后端负责服务器端编程工作。网站就像是一座房子，前端是外部结构和装饰，后端是内部设施，它们都是网站开发不可或缺的两个部分。

在本系列教程中，我们将主要介绍前端方面的知识。HTML、CSS和JavaScript是前端开发的三大基础技术。

HTML是一种标记语言，用于描述网页的结构和内容。通过定义各种标签和属性，开发人员可以创建出网页中的文本、图片、链接、表格等元素，并将它们排列组合成一个完整的页面。简单来说，HTML规定了页面的结构和布局。

CSS是一种样式表语言，用于控制网页中的各种样式和布局。通过为网页中的元素设置字体、颜色、大小、边框、背景等样式，并使用选择器指定要应用样式的元素，开发人员可以为网页增添皮肤和美感。

JavaScript是一种动态脚本语言，用于添加交互效果和动态功能。通过编写代码，开发人员可以为网页添加各种事件响应、动态效果、验证输入等交互特性，并与服务器进行数据交互和异步加载内容。简单来说，JavaScript使得网页更具灵气和活力，让网页看起来更加生动。

掌握了这些基本概念，我们就可以开始学习前端了。

工具配置

编程开发通常需要在特定的开发工具中进行，需要先下载并安装开发环境，但前端比较特殊，前端开发通常使用的是HTML、CSS和JavaScript等浏览器内置支持的语言，因为已经内置在浏览器当中，可以在任何现代浏览器中直接运行，因此这些语言不需要特殊的编译器或者运行环境。不过，为了使开发更便捷高效，很多开发工具提供了一些辅助编程的功能，如代码检查、调试等。所以，为了提升开发的效率，推荐大家使用开发工具进行编程，本教程使用VScode进行开发。

VScode下载地址：https://code.visualstudio.com

安装以后，安装open in browser插件，方便将开发的网页代码在浏览器中运行查看效果，安装完此插件在代码区域右击Open In Default Browser即可运行到浏览器中，浏览器推荐使用谷歌的Chorm。

安装以后默认是英文的，如果想要汉化版本可以安装Chinese插件，安装完成之后Visual Studio Code会提示重启软件，确认并重启编辑器后就是中文界面了。

HTML模板中的标签介绍

以下是html的标准模板

<!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>
</head>
<body>
    
</body>
</html>

分享两种在VScode中生成此标椎模板的方式

第一种是使用快捷键 !+tab键，不过需要注意的是只能使用英文的感叹号。

第二种是在空白的html中输入html:5，然后点击回车，就会自动生成同样的模板。

HTML就是由各种标签所组合而成的，在html文件中，由两个左右尖括号<>组成的内容就是标签。通常一个标签拥有开始标签和结束标签，如标椎模板中的<head>就是开始标签，而前面加上斜杠符号的</head>就是结束标签，除此之外只有开始标签而没有结束标签的元素被称为“自闭合标签”，如标准模板中的<meta>，常见的自闭合标签包括<br>、<hr>、<img>和<input>等。

每个标签都有各种属性,属性的目的是为了进一步描述标签.如标准模板中的<meta>标签里的属性charset.属性写在尖括号里,如果是拥有开始标签和结束标签的标签,属性写在开始标签的尖括号里.

接下来使用注释简单解释一下标准模板中每个标签以其属性的作用，中的内容就是注释,目的是增加代码可读性,对程序本身不会产生影响.

<!-- 声明作用,声明文档类型为HTML -->
<!DOCTYPE html>
<!-- html标签用来定义一个包含文档中的所有其他元素HTML文档的根元素。标识此文档为HTML，并且定义了语言为英语（English） -->
<html lang="en">
<!-- head标签表示文档的头部，包含了一些元数据信息，如标题、样式表和脚本等 -->
<head>
	<!-- <meta>元素用于在HTML文档中指定元数据（metadata），即描述文档内容的信息。这些信息可以包括文档的作者、关键字、描述、字符编码、视口设置等等 -->
	<!-- 指定文档使用UTF-8字符编码，以便正确地显示特殊字符和国际化内容 -->
	<meta charset="UTF-8">
	<!-- 告诉浏览器使用最新的Internet Explorer引擎渲染页面，确保在兼容模式下正确显示网页 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 定义视口的大小和缩放级别，使网站在不同的设备上都能适配并呈现出最佳的布局 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <!-- 定义了文档的标题，通常会显示在浏览器的标签栏或书签中 -->
	<title>Document</title>
</head>
<!-- 表示文档的主体部分，包含了页面的实际内容，如文本、图像、视频等 -->
<body>
	
</body>
</html>

<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用的HTML版本，不可省略。HTML5中使用<!DOCTYPE html>声明，该声明方式适用于所有版本的HTML。
<html>标签标志着HTML文档的开始，</html>标签标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。lang属性规定元素内容的语言。
<head>标签用于定义HTML文档的头部信息，主要用来封装其他位于文档头部的标签，如<title><meta><link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。一个HTML文档只能含有一对<head>标签，绝大多数文档头部包含的数据不会作为内容显示在页面中。
<body>标签用于定义HTML文档所要呈现的内容。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。一个HTML文档只能含有一对<body>标签，且<body>标签必须在<html>标签内，位于<head>头部标签之后，与<head>标签是并列关系。

几个常用标签的介绍

标题标签 h

<!-- h元素是标题标签,从h1到h6共6个尺寸,h1最大标题,h6最小标题 -->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

段落标签 p

<!-- p是段落标签,可以用h标签来描述一篇文章的标题,用p标签描述文章内容 -->
<p>我是一段内容</p>

无序列表 ul li

<!-- ul是无序列表标签,li是列表中每个元素的标签 -->
<h1>运动列表</h1>
<ul>
	<li>跑步</li>
	<li>网球</li>
	<li>乒乓球</li>
	<li>羽毛球</li>
</ul>

有序列表 ol li

<!-- ol是有序列表标签,li是列表中每个元素的标签 -->
<h1>水果列表</h1>
<ol>
	<li>苹果</li>
	<li>香蕉</li>
	<li>菠萝</li>
</ol>

超链接标签(锚点标签) a

<!-- a是超链接标签,可以将介于开始标签与结束标签中间文本或图像作为锚点指向关联的网页、文件、位置，其属性href用于指定超链接目标的URL地址 -->
<a href="http://baidu.com">百度</a>

图片标签 img

<!-- img是图片标签,用于展示图片，src：指定图像的URL，alt：在图像无法显示时显示的替代文本 -->
<img src="logo.png" alt="图片加载失败">

无语义标签 div

<!-- div标签可以将网页中的不同部分划分为不同的区域，并对这些区域进行样式和布局上的处理 -->
<!-- 第一篇文章 -->
<div>
	<h1>如何保持身体健康？</h1>
	<p>1.均衡饮食：摄入足够的蛋白质、碳水化合物、脂肪、维生素和矿物质。</p>
	<p>2.适度运动：每天进行30分钟至1小时的有氧运动，并进行力量训练以增强肌肉。</p>
	<p>3.充足睡眠：晚上应保持7-9小时的睡眠时间，有规律地作息。</p>
	<p>4.减少压力：通过冥想、瑜伽等方式放松身心。</p>
	<p>5.戒烟限酒：减少饮酒和吸烟的频率和量。</p>
</div>
<!-- 第二篇文章 -->
<div>
	<h1>互联网对教育的影响</h1>
	<p>互联网技术的发展为教育领域带来了巨大的变革。通过在线教育平台和各种应用，学生可以灵活选择自己感兴趣的课程和学习方式，并且可以通过互联网共享知识和资源。</p>
	<p>教育也逐渐走向数字化和智能化。例如，虚拟实验室和在线作业系统使得学生可以在真实环境下进行实验和练习，而智能辅助教学系统可以根据个人的学习习惯和水平量身定制课程内容和难度。</p>
	<p>然而，互联网也给教育带来了一些挑战，例如信息过载、学生依赖网络等问题。因此，教育工作者需要积极思考如何利用互联网技术改进教学质量，同时引导学生正确使用互联网资源。</p>
</div>

无语义标签 span

<!-- <span>标签用于表示文本的一小部分，并且常用于对文本样式进行细粒度控制。 -->
<!-- 将p标签中文字"红色"单独划分一块区域并设置为红色 -->
<p>这是一段含有<span style="color: red;">红色</span>的文字</p>

一些快捷键

保存 Ctrl+S
注释代码：Ctrl+/
全选：Ctrl+A
复制：Ctrl+C
粘贴：Ctrl+V
剪切：Ctrl+X
撤销：Ctrl+Z
查找：Ctrl+F
重新打开刚刚关闭的标签页：Ctrl+Shift+T
在多个标签页之间进行切换：Ctrl+Tab
在不同的程序之间进行切换：Alt+Tab

越空

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
前端简明教程系列：第一节基本概念、配置、模板及常用标签

Web开发包含前端和后端两个部分，前端负责网站用户界面的设计和实现，后端负责服务器端编程工作。网站就像是一座房子，前端是外部结构和装饰，后端是内部设施，它们都是网站开发不可或缺的两个部分。在本系列教程中，我们将主要介绍前端方面的知识。HTML、CSS和JavaScript是前端开发的三大基础技术。HTML是一种标记语言，用于描述网页的结构和内容。通过定义各种标签和属性，开发人员可以创建出网页中的文本、图片、链接、表格等元素，并将它们排列组合成一个完整的页面。简单来说，HTML规定了页面的结构和布局。
复制链接

扫一扫