前端自学历程【一、基础认知】

0遇见你0

已于 2022-07-19 23:47:40 修改

阅读量1.5k

点赞数 2

文章标签：前端

于 2022-07-19 00:38:21 首次发布

本文链接：https://blog.csdn.net/m0_56359233/article/details/125862321

版权

一、基础认知

前言
1.基础概念铺垫
2.HTML初体验
3.语法规范

前言

目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建一个页面。

1.基础概念铺垫

1.1 认识网页

问题1：网页由哪些部分组成？

答：文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么？

答：前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的？

答：通过浏览器转化（解析和渲染）成用户看到的网页

1.2 五大浏览器和渲染引擎

1.2.1 五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
1.2.2 渲染引擎
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：

浏览器	内核
IE	Trident（IE内核）
Opera	Presto，2013年换成Blink（Chromium）
Safari	Webkit
Firefox	Gecko
Google Chrome	之前是Webkit，2013年换成Blink
Microsoft Edge	EdgeHTML，2018年12月宣布换成Blink

注意点：渲染引擎不同，导致解析相同代码的速度、性能、效果也是不同的。

1.3 Web标准

1.3.1 为什么需要Web标准？
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个页面、结果不同浏览器打开效果不同，用户体验极差！

1.3.2 Web标准的构成
Web标准中分为三个结构：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观的位置等页面样式（如“颜色、大小等”）
行为	JavaScript	网页模型的定义与页面交互

1.3.3 Web标准的记忆方法
Web标准要求页面实现：结构、表现、行为三层分离

结构：HTML（决定了身体）
表现：CSS（决定了样式美观）
行为：JavaScript（决定了交互的动态效果）

2.HTML初体验

2.1 HTML的感知

2.1.1HTML的概念
HTML：中文译为超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页的文本、图片、音频、视频等内容描述

案例：文字变粗案列

体验构建一个网页，需要在网页中显示一个加粗的文字

2.1.2 网页体验-构建基本网页的步骤
用TXT文档写一个基础网页
1.先创建一个 test.txt 文档，再将其后缀的 .txt 更换为 .html
2.创建好后用记事本打开，在里面编写代码，编写完成后保存
3.后缀为.html 的文档可以在浏览器内打开，就可以看到编写的内容

这行字加粗了吗？</br>
<strong>这行字加粗了吗？</strong>

效果图：
在这里插入图片描述

2.2 HTML骨架结构

2.2.1 HTML页面固定结构
网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头，正文，落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特定的HTML标签进行描述的

2.2.2 HTML骨架结构偶哪些标签组成？

html 标签：网页的整体
head 标签：网页的头部
body 标签：网页的身体
title 标签：网页的标题

如图：
HTML骨架

2.3 开发工具的使用

2.3.1 为什么要使用VS Code
实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具
开发工具有很多：Visual Studio Code、Dreamweaver、Webstorm、Sublime、Hbuilder
VS Code：是使用最流行的，速度快、体积小、插件多

3.语法规范

3.1 HTML的注释

3.1.1 什么是注释
程序员在写代码时也会添加注释，方便下次看到此时方便想起功能和含义

问题：程序员在代码中添加的注释，是为了给谁看？
答：下次阅读代码者（自己或者其他程序员）

3.1.2 注释的作用和写法
注释的作用：为代码添加具有解释性，描述性的信息主要来帮助开发人员理解代码。
注：浏览器执行代码时忽略所有的注释。
注释的快捷键：在VS Code 中：Ctrl + /

3.2 HTML标签的构成

3.2.1 HTML标签的结构
HTML标签结构
结构说明：

1 . 标签由<、>、/、英文单词或字母组成，并且把标签中用< >包括起来的英文单词获字母称为标签名。
2 . 常见标签有两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
3 . 少数标签偶一部分组成，我们称之为：单标签。自成一体，无法包裹内容。如：< br>强制换行标签。

3.3 HTML标签的关系

HTML标签与标签之间的关系

父子关系（嵌套关系）

<html>
<head>
    <title></title>
</head>
</html>

兄弟关系（并列关系）

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

注：标签中只有父子关系和兄弟标签。