基础认知
目标:认识网页组成和五大浏览器,明确Web标准的构成,使用HTML骨架搭建出一张网页
一、前端基础知识概念铺垫
1. 认识网页
- 网页的组成部分:文字、图片、超链接、视频、音频
2. 五大浏览器和渲染引擎
-
浏览器:是网页显示、运行的平台,是前端开发必备利器
-
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
-
浏览器出品的公司不同,内在的渲染引擎也是不同的:
浏览器 厂商 内核(渲染引擎) Chrome 谷歌浏览器 Google 公司 以前是Webkit内核,现在是Blink内核 Firefox 火狐浏览器 Mozilla 基金会 Gecko IE 浏览器 Microsoft 公司 Trident Safari 浏览器 Apple (苹果) 公司 Webkit Opera 浏览器 Opera Software 公司 最初是Presto内核,后来是Webikt内核,现在是Blink内核 -
注意点:渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同的
-
谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)
-
常见的五大浏览器及其市场份额
3. Web标准
- 不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异
- Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!
4. Web标准的构成
- 结构 —— HTML (HyperText Markup Language,超文本标记语言)用于设定网页结构
- 样式 —— CSS(Cascading Style Sheets,层叠样式表)用于设定网页样式
- 行为 —— JavaScript 动态效果(客户端脚本语言)用于设定网页行为
二、HTML初体验
1. HTML的概念
- HTML(Hyper Text Markup Language)中文译为:超文本标记语言
- 网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
2. 网页体验-构建基本网页的步骤
① 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
② 双击这个文件,输入代码等内容 → 记得保存!
③ 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
④ 双击文字变粗案例.html,浏览器会自动打开文件并显示之前输入的内容
3. HTML基本骨架
-
HTML骨架结构由哪些标签组成?
-
html标签:网页的整体
-
head标签:网页的头部
-
body标签:网页的身体
-
title标签:网页的标题
<html> <head> <title>网页的标题</title> </head> <body> 网页的主体内容 </body> </html>
-