首页 > 其他分享 >01-前言&WEB标准

01-前言&WEB标准

时间:2023-11-26 18:58:26浏览次数:30  
标签:WEB 01 网页 前言 标准 引擎 内核 浏览器

.
typora-copy-images-to: media

第01阶段.前端基础.认识WEB

基础班学习目标

目标: 能根据psd文件,用HTML+CSS 布局出符合W3C规范的网页。

网站首页

列表页、详情页、登录页、 注册页等等。。。。

课程安排

就业班详情 参看: http://www.itcast.cn/course/web.shtml

HTML 第一天目标

能够写出基本的html页面(里面包含图片、链接、文字等网页元素标签)

认识WEB

1. 认识网页

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

<img src="/i/l/?n=23&i=blog/2629818/202311/2629818-20231126183327833-182016911.png"alt="">

思考:

网页是如何形成的呢?

总结

网页有图片、链接、文字等元素组成,我们后面的任务就是要把这部分网页元素用代码写出来。。。

2. 浏览器(显示代码)

平时我们浏览网页,是在浏览器地址栏中输入网页地址,就可以访问我们的页面了。你的浏览器呢?

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

可能你最熟悉的是 IE浏览器,但是。。。

2.1 查看浏览器占有的市场份额

查看网站: http://tongji.baidu.com/data/browser

2008年,大名鼎鼎的互联网巨头Google公司发布了它的首款浏览器Chrome浏览器。

跟王思聪一样,没办法,生下来人家就是富二代官二代啊,后台太强,而且确实先天能力得天独厚。

pink老师 一句话说出他们:

出自谷歌,唯我不败;一统江湖,千秋万代。

2.2 常见浏览器内核(了解)

首先解释一下浏览器内核是什么东西。英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核.

负责读取网页内容,整理讯息,计算网页的显示方式并显示页面.

因为浏览器太多啦, 但是现在主要流行的就是下面几个:

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera Presto Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。

拓展阅读:

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的

3. Web标准(重点)

目标

  • 记忆
    • 能说出网页 中 web 标准三层组成
  • 理解
    • 能结合人来表述web标准三层

Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。

w3c就类似于现实世界中的联合国。

3.1 为什么要遵循WEB标准呢?

通过以上浏览器的内核不同,我们知道他们渲染或者排版的模式就有些许差异,显示就会有差别。

问:  哪个方言再全国基本都可以听得懂? 

3.2 Web 标准的好处

1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

专业的人做专业的事。 来呀快活呀反正有大把时间~

3.3 Web 标准构成

构成: 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

  • 结构标准:结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 对于网页来说最重要的一部分

  • 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

  • 行为标准:行为是指网页模型的定义及交互的编写,咱们主要学的是 Javascript

理想状态我们的源码: .HTML .css .js

直观感受:

总结WEB标准:

结构标准: 决定你是否有个好天然身体

结构层:通过对语义的分析,可以对其划分结构。具有了结构的内容,将更容易阅读

表现标准: 决定你是否打扮的美丽外观

表现层:是为了让网页就能展现出灵活多样的显示效果

行为标准: 决定你是否有吸引人的行为

行为层:用户对网页进行操作,网页可以做出响应性的变化。

小结

  • web标准有三层结构,分别是结构(html)、表现(css)和行为(javascript)
  • 结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作
  • 理想状态下,他们三层都是独立的, 放到不同的文件里面

4. 拓展@

  • 介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些?

    浏览器内核包括两部分,渲染引擎和js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
    IE:Trident
    firefox:Gecko
    chrom、safari:webkit
    Opera:Presto
    Microsoft Edge:EdgeHTML

    深度阅读:五大主流浏览器内核的源起以及国内各大浏览器内核总结

标签:WEB,01,网页,前言,标准,引擎,内核,浏览器
From: https://www.cnblogs.com/kxtomato/p/17857681.html

相关文章

  • Linux_sqlcmd或者是Cloudquery连接SQLSERVER2012的问题解决
    Linux_sqlcmd或者是Cloudquery连接SQLSERVER2012的问题解决背景最近想使用shell脚本给SQLServer数据库插入数据,但是发现了报错同时进行CLoudquery连接SQLServer数据库时也出现了异常.作为笔记记录一下问题和解决方法sqlcmd的问题现象sqlcmd的提示信息第一:安装sudo......
  • XCTF-Web_php_unserialize
    访问查看是一道经典的反序列化题目,尝试解题,大概一下脚本,需要传入var进行反序列化php代码会先将var传入的值进行base64解码,然后进行perg_match()正则匹配判断,如果匹配成立就执行die()方法终止脚本运行使用unserialize()方法反序列化我们传入的值__wakeup()在反序列化时候执......
  • UE,Unity和WebGL技术对比
    title:UE,Unity和WebGL技术对比banner_img:https://drive.studyinglover.com/api/raw/?path=/photos/blog/background/1679397016745.pngdate:2023-3-2119:00:00tags:-元宇宙-ThreeJSUE,Unity和WebGL技术对比随着科技的不断进步和数字化时代的到来,元宇宙(Metaverse)已......
  • 牛客周赛Round20. C 小红的01串构造 (纯构造
    packagenewCode.周赛Round20;importjava.util.Scanner;publicclassC{publicstaticvoidmain(String[]args){Scannersc=newScanner(System.in);intn=sc.nextInt(),k=sc.nextInt(),t=sc.nextInt();if(t>=k||2......
  • JavaWeb实现文件的上传和下载
    文件的上传和下载,是非常常见的功能,很多系统,或者软件中经常使用文件的上传和下载.比如QQ头像/邮箱中的上传和下载功能/OA系统中审批中附件的上传.1.文件的上传步骤:有一个form标签,method=post请求form标签的encType属性的值必须为multipart/form-data值在form标签中,使......
  • lunatic Erlang 启发的webassembly runtime
    lunatic属于一个webassembly的runtime,提供了隔离,轻量的进程架构模式,可以方便的创建分布式集群(类似erlang提供的集群能力)包含的特性开源 apache以及MIT许可协议高性能 提供了jit编译的wasm安全 核心是wasm的能力容错 提供了类似erlang的supervisiontree能力......
  • Spin 基于rust 开发的开源运行基于webassembly serverless 工具
    spin是基于rust开发的,可以用来开发以及运行基于webassemblyserverless服务的工具包含的特性提供了周边扩展 默认wasm只提供了基本类型的支持,wasm提供了不少扩展可以方便的支持不同语言的调用(比如网络,数据库访问)提供了快速应该开发的cli提供了服务部署的能力 包含了本......
  • web前端基础复习整理
    考试题型:单项选择题:30分(15题)多项选择题:10分(5题)简答题:30分(5题,每题6分)编程题:30分(3题,每题10分)第1章课程简介1.1课程主要内容1.2课程的重要性1.3课程中用到的工具了解第2章Web导论2.1WEB的定义、表现形式和特点网络,互联网等领域超文本,超媒体,超文本传输协议HTTP动态的,图......
  • JavaWeb(上)
    1.TomcatTomcat(全称为ApacheTomcat)是一个开源的JavaServlet容器,也是一个能够托管JavaWeb应用的Web服务器。Tomcat的主要功能是解析和执行JavaServlet、JavaServerPages(JSP)和相关的JavaEE技术。它可以作为一个独立的Web服务器运行,也可以与其他HTTP服务器(如ApacheHTTP服务......
  • javaweb项目中的文件上传下载功能的实现
    框架是基于spring+myBatis的。 前台页面的部分代码:<formaction="${ctx}/file/upLoadFile.do"method="post"enctype="multipart/form-data"id="form"><table><tbody><tr><td>上传文件:</td><tdstyle=&......