Web 开发入门

浏览器

  • IE
  • Chrome
  • Firefox
  • Safari

浏览器的界面

  • 地址栏
  • 前进后退
  • 返回
  • 刷新停止
  • 下载管理器

浏览器的功能

浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档,也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。

规范

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C(万维网联盟)进行维护。

架构

主流程

HTML文档

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

DOM

CSS

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

CSSOM

盒模型

IE模型

标准模型

定位

  • 普通
  • 浮动
  • 绝对

BOM

  • window
  • navigator
  • screen
  • cookie
  • XMLHttpRequest
  • CORS
  • Storage
  • History
  • Location
  • IndexedDB

嵌入代码

  • 内联
  • 外部引入
  • 事件属性
  • URL协议
<script>
    console.log('Hello world!')
</script>

<script src="https://example.com/react.js"></script>


<button id="myBtn" onclick="console.log(this.id)">点击</button>


<a href="javascript:console.log('Hello')">点击</a>

Javascript 引擎

JavaScript 引擎的主要作用是,读取网页中的 JavaScript 代码,对其处理后运行。

End

deck

By simon xu

deck

  • 73