常见的浏览器内核 (了解)
首先解释一下浏览器内核是什么东西 , 英文叫做 Rendering Engine , 中文翻译很多 , 排版引擎 , 解释引擎 , 渲染引擎 , 现在流行称为浏览器内核 .
免费读取网页内容 , 整理讯息 , 计算网页的显示方式并显示页面 .
主要流行的浏览器
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE , 猎豹安全 , 360极速浏览器 , 百度浏览器 |
| Firefox | Gecko | 这几年已经没落了 , 打开速度慢 , 升级频繁 , 猪队友flash , 神对手 chrome |
| Safari | webkit | 现在很多人错误的把webkit叫做chrome内核 , (即使chrome内核已经是blink了) |
| chrome | chromeium/blink | 在chromeium项目中研发blink渲染引擎(即浏览器核心) , 内置于chrome浏览器中 . blink 其实是 webkit 的分支 , 大部分国产浏览器都采用blink内核 , 二次开发 |
拓展
移动端的浏览器内核主要说的是系统内置浏览器的内核
Android手机而言 , 使用率最高的是 webkit 内核 , 大部分国产浏览器宣称的自己的内核 , 基本上也是属于 webkit 二次开发 .
iOS 以及 WP7平台上 , 由于系统原因 , 系统大部分自带浏览器内核 , 一般是 Safari 或者 IE 内核 Trident 的 .
web标准(重点)
网页中 web 标准的三层组成 : 结构 表现 行为
为什么要遵循Web标准
遵循 web 标准可以让不同我们写的页面更标准统一化 , 还有许多优点
- 让 web 的发展前景更广阔的 .
- 内容能够被更广泛的设备使用 .
- 更容易让搜索引擎搜索 .
- 降低网站流量费用 .
- 使网站更容易维护 .
- 提高页面浏览速度
web 标准的构成
构成 : 主要包括结构(Structure) , 表现(Presentation) , 和行为(Behavior)三个方面 .
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类 , 只要值 HTML |
| 表现 | 表现用于设置网页的板式 , 颜色 , 大小等外观样式 , 主要指 CSS |
| 行为 | 行为指网页模型的定义及交互的编写 , 主要指 JavaScript |
web 标准 小结
- web 标准有三层结构 : 结构 , 表现 , 行为 .
- 理想状态下 , 他们三层都是独立的 , 放在不同的文件内 .
拓展
介绍下你对浏览器内核的理解 ? 常见的浏览器内核都有哪些 ?
浏览器内核包含两部分 , 渲染引擎和 js 引擎 . 渲染引擎负责读取网页内容 , 整理讯息 , 计算网页的显示方式并显示页面 , js 引擎的解析执行 js 获取网页的动态效果 . 后来 js 引擎越来越独立 , 内核就倾向于只渲染引擎 .
IE : Trident
Firefox : Gecko
Safari : webkit
chrome : chromeium / blink
HTML 初识
- HTML 指的是超文本标记语言(hyper text markup language) 是用来描述网页的一种语言
- HTML 不是变成语言 , 而是一种标记语言 (markup language)
标记语言是一套标记标签(markup tag)
HTML 骨架标签
<html>
<head>
<title></title>
</head>
<body></body>
</html>HTML 标签分类
分类 :
常规元素 (双标签)
<标签名></标签名>空元素(单标签)
<标签名 />
HTML 标签关系
关系 :
嵌套关系
<head> <title></title> </head>并列关系
<head></head> <body></body>
HTML 模板
<!-- 声明 文档类型 HTML5 -->
<!DOCTYPE html>
<!-- 声明书写语言 -->
<html lang="zh-CN">
<head>
<!-- 声明编码方式 -->
<meta charset="UTF-8" />
<title></title>
</head>
<body></body>
</html>常见的编码方式 :
- gb2312 : 简体中文
- GBK : 支持简体中文 , 以及港澳台繁体字
- UTF-8 : 全世界通用
HTML 常用标签
排版标签
标题标签（h）
<h1> 标题 </h1>
<h2> 标题 </h2>
<h3> 标题 </h3>
<h4> 标题 </h4>
<h5> 标题 </h5>
<h6> 标题 </h6>段落标签 (p)
作用语义：可以把HTML文档分割成若干段落
<p> 文本内容 </p>水平线标签（hr）
<hr />换行标签 （br）
<br />div span 标签（重点）
div span 是没有语义的 是我们网页布局两个主要的盒子
<div></div> <span><span>他们两个都是盒子， 用来装我们网页元素的， 只不过他们有区别
- div 标签 用来布局的 ，但是一行只能放一个div
- span标签 用来布局的，一行可以放好多个span
文本格式化标签
| 标签 | 效果 |
|---|---|
<b></b> <strong></strong> |
字体加粗效果，推荐使用 strong 标签，语义化更好 |
<i></i> <em></em> |
文字斜体效果，推荐使用 em 标签，语义化更好 |
<s></s> <del></del> |
文字删除线效果，推荐使用 del 标签，语义化更好 |
<u></u> <ins></ins> |
文件下划线效果，推荐使用 ins 标签，语义化更好 |
标签属性
<标签名 属性名="属性值1" 属性名="属性值2"><标签名/>
<标签名 属性名="属性值1" 属性名="属性值2" />图像标签 img
<img src="图片 URL" />| 属性 | 属性值 | 描述 |
|---|---|---|
| alt | 文本 | 图片不能显示时所替换的文本内容 |
| title | 文本 | 鼠标悬停时所显示的内容 |
链接标签
<!-- target：
_self：默认值，在当前窗口打开
_blank：为新窗口打开-->
<a href="跳转目标" target="目标窗口的弹出方式">文本对象</a>路径
绝对路径
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需要输入图像文件的名称即可 , <img src="baidu.jpg />" | |
| 下一级路径 | / | 图像文件位于HTML同级文件夹下 , <img src="images/baidu.jpg />" |
| 上一级路径 | ../ | 在文件名前面加入 ../ , 如果是上两级 , 则需要使用 ../../ , 以此类推 , <img src="../images/baidu.jpg />" |
绝对路径
绝对路径以 web 站点根目录为参考基础的目录路径 . 之所以称为绝对 , 意指当所有网页引用同一个文件时 , 所使用的路径是一样的 .
<img src="C:\\admin\Desktop\logo.jpg" , 或完整的网络地址 , 例如 "http://www.baidu.com/logo.jpg" .
注意 : 相对路径用的较少
拓展
锚点定位
通过创建锚点连接 , 用户可以快速定位到目标内容
1. 使用 id 名称标注跳转目标的位置 . (找目标)
<h3 id="two">内容1</h3>
2. 使用 <a href="#id名">连接文本</a>创建链接文本(被点击的)base 标签
base 可以设置整体链接的打开样式 .
base 写到 head 标签之间
<head> <base target="_blank" /> </head>
预格式化文本 pre 标签
pre标签可定义预格式化的文本。被包围在pre标签元素中文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
我是测试内容
</pre>特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |