web前端-day-33

2021.11.10 晴

开发工具

我们主要用的开发工具有 编辑器、浏览器、photoshop。

编辑器

常用的前端编辑器有:dreamweaver、sublime、webstorm、Hbuilder、vscode

 

浏览器

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

查看浏览器占有的市场份额,查看网站:网站流量平台 - 百度统计流量研究院


浏览器内核

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引渲染引擎擎。

渲染引擎

它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。

js引擎

JS引擎则是解析Javascript语言,执行javascript语言来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

常见的浏览器内核

1)Trident(IE内核)

国内很多的双核浏览器的其中一核便是Trident,美其名曰"兼容模式"。代表:IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10开始,IE将其内置浏览器命名为Edge,Edge最显著的特点就是新内核 EdgeHTML。

(2)Gecko( firefox)

Gecko(Firefox 内核):Mozilla FireFox(火狐浏览器) 采用该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。可惜这几年已经没落了,比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

(3)Webkit(Safari)

Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,

(4)Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 大部分国产浏览器最新版都采用Blink内核二次开发。

Presto(opera)

Opera是挪威Opera Software ASA公司旗下的浏览器。1995年,opera公司发布第一版Opera浏览器,使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核,使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器,从此也丢弃了强大的Presto内核,改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。

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

对于Android手机而言,使用率最高的就是Webkit内核,我们看到很多手机浏览器厂商都宣称有着自主内核,比如手机UC就号称采用了U3内核、而华为也经常标榜自己的天天浏览器采用了T9内核,事实上,他们都是基于开源内核Webkit进行二次开发的,并不是完全的自主内核。

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

 

web标准构成

web标准不是某一个标准,而是由W3C(万维网)和其他标准化组织制定的一系列标准的集合。

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

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

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

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

web标准的好处

1、对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 web 更好地发展

2、使用web标准,将确保所有浏览器正确显示您的网站而无需费时重写

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

HTML初识

一般先学习HTML+CSS,这里我们先定一个小目标,先学HTML,后学习CSS。

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,是用来描述网页的一种语言。所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。

HTML指的是超文本标记语言 (Hyper Text Markup Language)

HTML不是一种编程语言,而是一种标记语言 (markup language)

<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现课程表,可以采用以下步骤: 1. 设计数据结构,用于存储课程信息,包括课程名称、时间、地点等。 2. 创建 HTML 页面,可以使用表格等元素来布局课程表。 3. 使用 CSS 样式美化页面,可以设置不同的颜色、边框、字体等样式。 4. 使用 JavaScript 代码动态渲染课程表,根据数据结构的课程信息,将课程信息填充到 HTML 页面。 以下是一个简单的示例代码: HTML: ```html <table> <tr> <th></th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> <tr> <td>第一节</td> <td id="monday-1"></td> <td id="tuesday-1"></td> <td id="wednesday-1"></td> <td id="thursday-1"></td> <td id="friday-1"></td> </tr> <tr> <td>第二节</td> <td id="monday-2"></td> <td id="tuesday-2"></td> <td id="wednesday-2"></td> <td id="thursday-2"></td> <td id="friday-2"></td> </tr> <!-- 其他节次的行 --> </table> ``` CSS: ```css table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 10px; text-align: center; } th { background-color: lightgray; } #monday-1, #monday-2 { background-color: yellow; } #tuesday-1, #tuesday-2 { background-color: pink; } /* 其他单元格的样式 */ ``` JavaScript: ```javascript // 假设有以下数据 const courses = [ { name: '语文', day: 'monday', start: 1, end: 2, location: '教室A' }, { name: '数学', day: 'tuesday', start: 3, end: 4, location: '教室B' }, // 其他课程的数据 ]; // 遍历数据,将课程信息填充到表格 courses.forEach(course => { for (let i = course.start; i <= course.end; i++) { const cellId = `${course.day}-${i}`; const cell = document.getElementById(cellId); cell.textContent = course.name + '\n' + course.location; } }); ``` 这样就可以实现一个简单的课程表了。当然,实际开发还需要考虑更多的细节,比如如何处理课程时间冲突、如何支持不同周的课程表等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值