【Web前端开发基础】前端开发基础知识认知

基础认知

目标:认识网页组成五大浏览器,明确Web标准的构成,使用HTML骨架搭建出一张网页

一、前端基础知识概念铺垫

1. 认识网页

  • 网页的组成部分:文字、图片、超链接、视频、音频

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

  • 浏览器:是网页显示、运行的平台,是前端开发必备利器

  • 渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分

  • 浏览器出品的公司不同,内在的渲染引擎也是不同的:

    浏览器 厂商 内核(渲染引擎)
    Chrome 谷歌浏览器 Google 公司 以前是Webkit内核,现在是Blink内核
    Firefox 火狐浏览器 Mozilla 基金会 Gecko
    IE 浏览器 Microsoft 公司 Trident
    Safari 浏览器 Apple (苹果) 公司 Webkit
    Opera 浏览器 Opera Software 公司 最初是Presto内核,后来是Webikt内核,现在是Blink内核
  • 注意点:渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同的

  • 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)

  • 常见的五大浏览器及其市场份额
    【Web前端开发基础】前端开发基础知识认知_第1张图片 【Web前端开发基础】前端开发基础知识认知_第2张图片

3. Web标准

  • 不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异
  • Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一
    【Web前端开发基础】前端开发基础知识认知_第3张图片

4. Web标准的构成

  • 结构 —— HTML (HyperText Markup Language,超文本标记语言)用于设定网页结构
  • 样式 —— CSS(Cascading Style Sheets,层叠样式表)用于设定网页样式
  • 行为 —— JavaScript 动态效果(客户端脚本语言)用于设定网页行为
二、HTML初体验

1. HTML的概念

  • HTML(Hyper Text Markup Language)中文译为:超文本标记语言
  • 网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

2. 网页体验-构建基本网页的步骤

在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
双击这个文件,输入代码等内容 → 记得保存!
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
双击文字变粗案例.html,浏览器会自动打开文件并显示之前输入的内容

【Web前端开发基础】前端开发基础知识认知_第4张图片
3. HTML基本骨架

  • HTML骨架结构由哪些标签组成?

    • html标签:网页的整体

    • head标签:网页的头部

    • body标签:网页的身体

    • title标签:网页的标题

    <html>
        <head>
            <title>网页的标题title>
        head>
        <body>
            网页的主体内容
        body>
    html>
    

你可能感兴趣的:(Web前端开发基础,前端,javascript,chrome,web)