网页的认知

网页是有什么组成的?

  • 网页是由:文字,图片,超链接,音频,视频组成的。

我们看到的网页背后是什么?

  • 前端程序员写的代码

前端的代码是通过什么软件转换成用户眼中的页面的?

  • 通过浏览器转化 (解析和渲染) 成用户看到的网页

五大浏览器认知

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

常见的五大浏览器:

  • IE浏览器
  • 火狐浏览器(Firefox)
  • 谷歌浏览器(Chrome)
  • Safari浏览器
  • 欧朋浏览器(Opera)

渲染引擎(了解)

渲染引擎(浏览器内核):浏览器中专门 对代码进行解析渲染的部分
浏览器出品的公司不同,内在的渲染引擎也是不同的:

浏览器内核备注
IEtridentIE,猎豹,360,百度
Firefoxgecko火狐
Safariwebkit苹果
Chrome/Operablinkblink 其实是 webkit 的分支

为什么需要web标准?

不同的浏览器的渲染引擎不同,对于相同代码解析的效果不同会存在差异

  • 如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!

web标准:让不同的浏览器按相同的标准显示结果,让展示的效果统一

web标准的构成

web标准中分成三个构成:

构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和位置等页面样式(如:颜色,大小等)
行为JavaScript网页模型的定义与页面交互的效果

HTML的概念

HTML(Hyper Text Markup Language)中文翻译为:超文本标记语言

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

HTML骨架

网页类似于一篇文章:

  • 每一页文章内容是有固定的结构的,如:开头,正文,落款等……
  • 网页中也是存在固定的结构的,如:整体,头部,标题,主体

网页中的固定结构是要通过特点的HTML标签进行描述的

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

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

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

HTML开发工具

  1. VS code(编辑器)
  • 插件 Dark
  • 插件 Chines
  • 插件 open in browser
  1. PxCook(测量工具)
  2. 谷歌浏览器
  3. Snipaste(截图工具)
  4. ps(测量工具)插件:Cutterman 官网:Cutterman - 最好用的切图工具

VS code的基本快捷键

  1. 快速生成标签:英文+tab
  2. 保存文件:Ctrl+s
  3. 快速查看网页效果:右击-open in dafault browser。快捷键:Alt+B。注意:必须安装了open in dafault browser
  4. 快速复制一整行:Ctrl+c
  5. 快速粘粘一整行:Ctrl+v
  6. 快速删除(剪切)一整行:Ctrl+x

语法规范

注释:

注释快捷键Ctrl+/
不在代码中执行

HTML标签结构

标签的结构图:
结构标签图

结构说明:

  1. 标签由<,>,/,英文单词组成。并且把标签中的<>包括起来的英文单词或字母称为标签名
  2. 常见标签由两部分组成,我们称为:双标签。前部分叫开始标签,后部分叫结束标签,两部分包裹内容
  3. 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容(如:<br>,<hr>

标签属性

标签属性分析图:
属性分析
属性注意点:

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分

标签的关系

父子关系(嵌套关系)

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

父子关系


兄弟关系(并列关系)

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

兄弟关系

最后修改:2022 年 11 月 08 日
谢谢老板打赏