【内蒙古科技大学】前端web学习笔记-第一章

上进小菜猪 发表于 2022/02/26 19:57:41 2022/02/26
【摘要】 • 前端学习路线http://web.itcast.cn/?webzly$jingjiapp-01-chuanzhi-pinpaici-pc-chuanzhijiaoyu&bd_vid=8326793405389125352• 前端适合人群• 浏览器内核        内核(Rendering Engine渲染引擎):可大概译为“渲染引擎”,负责对网页语法的解释(html、css)并渲染(显...

前端学习路线

http://web.itcast.cn/?webzly$jingjiapp-01-chuanzhi-pinpaici-pc-chuanzhijiaoyu&bd_vid=8326793405389125352

• 前端适合人群


• 浏览器内核
        内核(Rendering Engine渲染引擎):可大概译为“渲染引擎”,负责对网页语法的解释(html、css)并渲染(显示)网页。
        网页对普通用户来说就是一个可操作的界面,但对于我们开发者或浏览器而言,网页就是代码。
        而浏览器内核就相当于一个翻译官,把代码翻译成可视化的界面。

→ 常见的内核
        常见的浏览器内核可以分这5种:Trident、Gecko、Blink、Webkit、Presto。
(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) Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。如 360、UC、QQ、搜狗等。

(5) Presto(Opera)

Presto 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

课程学习路线


浏览器占有的市场份额

http://tongji.baidu.com/data/browse r

HTML文档的基本结构

HTML的编辑工具

dreamwaver:偏向设计

sublime:(轻量级)自带功能不太全,但是插件十分丰富。

webstrom:(重量级)自带功能比较全面。


WebStorm

WebStorm 是jetbrains 公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等



规范的网站目录结构



• 常用字符集


• TDK三大标签SEO优化


• 三种列表应用

• W3C标准


• HTML5的优势

1世界知名浏览器厂商对HTML5的支持

2.市场的需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准,避免了修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。

3.跨平台

可以做到跨平台开发,用户只用打开浏览器即可访问应用pc网站、各种移动设备、插件等核心代码就可以不需要重复编写极大地减少了开发人员的工作量。

• 文本字体格式标签

b、i、s、u与strong、em、del、ins有什么区别?
b、i、s、u仅仅显示格式,没有语义。
strong、em、del、ins不仅显示格式,还有语义。 【强调】





工具生成骨架标签新增代码

<!DOCTYPE html>

<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html> 这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.

注意:

1. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。

2. <!DOCTYPE>不是一个 HTML 标签,它就是文档类型声明标签。

<html lang=“en”>

用来定义当前文档显示的语言。

1. en定义语言为英语

2. zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎(百度.谷歌等)是有作用的。

<meta charset=“ UTF-8” />

必须写. 采取 UTF-8来保存文字. 如果不写就会乱码。


标签的语义化

常用图像格式

• 体育新闻页面


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。