前端基础知识1_alt. b前端开发-优快云博客

本文链接：https://blog.youkuaiyun.com/Kaarina/article/details/128943701

文章介绍了前端的基础知识，包括网页组成、五大浏览器及其渲染引擎、Web标准的结构。深入讲解了HTML的概念、基本结构和标签关系，并提到了开发工具VSCode的使用，如创建网页、安装插件和快捷键操作。还概述了HTML的注释和标签的构成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、前端基础概念
二、HTML初识
三、HTML语法规范
总结

前言

学习前端第一天,有问题的地方请大家指正.

一、前端基础概念

1.认识网页

(1)网页由文字、图片、音频、视频、超链接组成
(2)网页背后本质是：前端程序员写的代码
(3)前端的代码是通过浏览器解析和渲染成用户看到的网页

2.五大浏览器和渲染引擎

（1）五大浏览器
IE浏览器（IE为微软官方浏览器，2015年后微软官方称IE浏览器于2022年6月16日正式退役，此后其功能将由Edge浏览器接棒）
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
Safari浏览器（苹果系统）
欧朋浏览器（Opera）

前端工程师一般建议使用谷歌浏览器

在这里插入图片描述
2.渲染引擎
由于不同浏览器的渲染引擎不同，解析的效果会存在差异

3.web标准

让不同的浏览器按照相同的标准显示结果，让展示的效果统一

结构：HTML
样式：CSS
行为：JS

二、HTML初识

1.HTML的概念

（1）HTML（Hyper Text Markup Language）中文译为：超文本标记语言
（2）HTML中是通过HTML标签来对网页中的文本、图片、音频、视频等内容进行描述

2.HTML骨架结构

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
如下为html的固定结构：

<html> <!-- 网页的整体 -->
<head> <!-- 网页的头部 -->
    <title>这是标题</title> <!-- 网页的标题 -->
</head>
<body>  <!-- 网页的身体 -->
    这是身体
</body>
</html>

3.开发工具的使用

(1)前端常用开发工具
前端开发神器：VS Code → 速度快、体积小、插件多
在这里插入图片描述
（2）安装插件
在VSCode 中安装Chinese (Simplified) Language Pack for Visual Studio Code(简体中文插件)
安装open in browser (直接打开浏览器插件)

(3)创建网页
首先在桌面新建一个文件夹,将新建文件夹拖至VScode上,显示"用VScode打开"
在这里插入图片描述
打开后点击文件夹右侧的新建文件按钮创建页面

注意：文件后缀名需要是.html
在这里插入图片描述
(4)VScode快捷键
快速生成标签：英文 + tab

保存文件：ctrl + s
注意1：写完文件之后务必需要保存文件，否则网页无变化
注意2：可以设置自动保存省去每次保存的麻烦

快速查看网页效果：右击 → Open in Default Browser
快捷键：alt + b
注意：必须安装了open in browser 插件
在这里插入图片描述

快速生成结构标签：! + tab
注意1：! 必须是英文的，中文 ! 无效
注意2：必须保证当前文件后缀名是.html，否则无效
在这里插入图片描述

三、HTML语法规范

1.HTML的注释

注释的写法及快捷键
写法 :
在这里插入图片描述
快捷键 : ctrl + /

注:浏览器执行代码时会忽略所有的注释

2.HTML标签的构成

(1)标签的结构
在这里插入图片描述
结构说明：
1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
标签名

2.常见标签:

<strong>     </strong>

常见标签有开始标签和结束标签称为 : 双标签 .
3.少数标签:

<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

只由开始标签部分组成，我们称之为：单标签。自成一体，无法包裹内容。

3.HTML标签的关系

(1)父子关系(嵌套关系)

<head>
	<title>这是标题</title>
</head>

(2)兄弟关系(并列关系)

<head> </head>
<body> </body>

总结

以上就是今天的内容，本文仅仅简单介绍了前端基础概念和html相关知识点，而其中比较重要的是HTML的骨架结构和语法规范。