浏览器内核
1. 内核简介
- 浏览器最重要或者说核心的部分是 “Rendering Engine”，大概翻译为 “渲染引擎”，不过我们一般将其称之为 “浏览器内核”。
- 负责对网页语法的解释（如标准通用标记语言HTML、JavaScript）并渲染（显示）网页。
- 通常所谓的浏览器内核就是浏览器所采用的渲染引擎，渲染引擎觉得了浏览器如何显示网页的内容和格式信息.
2. 五大浏览器
- IE浏览器
- Opera浏览器
- Safari浏览器
- Firefox流量拿起
- Chrome浏览器
3.内核分类
- Trident（也称IE内核）
- Webkit
- Blink
- Gecko
4. 浏览器所使用的内核
- IE浏览器：Trident内核，俗称IE内核
- Chrome浏览器：统称Chromium内核或Chrome内核，以前Webkit内核，现在是Blink内核
- Firefox浏览器：Gecko内核，俗称Firefox内核
- Safari浏览器：Webkit内核
- Opera浏览器：最初是自己的Presto内核，后来是Webkit内核，现在是Blink内核
- 360浏览器、猎豹浏览器：IE+Chrome双内核
- 搜狗、遨游、QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
- 百度浏览器、世界之窗浏览器：IE内核
- 2345浏览器：以前是IE内核，现在是IE+Chrome双内核
Web标准
1. 什么是web标准：
web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
网页主要有三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
2. web标准：
(1) 结构：html
(2) 表现：css
(3) 行为：js
3. 优点
(1) 易于维护：只需要更改css文件，就可以改变整个网站的样式
(2) 页面响应快：HTML文档体积小，响应时间短
(3) 可访问性：语义化HTML（结构和表现分离的HTML）编写网页文件，更容易被屏幕阅读器识别
(4) 设备兼容性：不同的样式表可以让网页在不同设备上呈现不同的样式
(5) 搜索引擎：语义化HTML能更容易被搜索引擎解析，提升排名
html简介
1. 什么是HTML：
- HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言（Hyper Text Markup Language）
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页
2. HTML文档
- HTML文档描述网页
- HTML文档包含HTML标签和纯文本
- HTML文档也被称为网页
- Web浏览器的作用就是读取HTML文档，并以网页的形式显示出来
- 浏览器不会显示HTML标签，而是使用标签来解释页面内容
3. HTML文档结构
<!DOCTYPE html>
<!-- 整个文档 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置文档标题 -->
<title>标题</title>
</head>
<!-- 文档的身体 -->
<body>
</body>
</html>
4. meta标签
- 概述:
- meta标签是HTML标记head区的一个关键标签
- 它提供的信息虽然用户不可见，但却是文档的最基本的元信息
- meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键字和网页等级的设定
- 字符：各种文字和符号的总称，包括各国文字、标点符号、图像符号、数字等
- 字符集：多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同
5. 常用的字符集：
- ascll字符集：
- GB2312字符集：GB2312编码适用于汉字处理、汉字通信等系统之间的信息交换，通行于中国大陆；新加坡等地也采用此编码。中国大陆几乎所有的中文系统和国际化的软件都支持GB 2312。
- GB18030字符集：GB 18030，全称《信息技术 中文编码字符集》，是中华人民共和国国家标准所规定的变长多字节字符集。其对GB 2312-1980完全向后兼容，与GBK基本向后兼容，并支持Unicode（GB 13000）的所有码位。GB 18030-2005共收录汉字70,244个。
- Unicode：Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发，1994年正式公布。随着计算机工作能力的增强，Unicode也在面世以来的十多年里得到普及。
- UTF-8编码：UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部分修改后，便可继续使用。因此，它逐渐成为电子邮件、网页及其他存储或传送文字的应用中，优先采用的编码。
6. 标签
详见：菜鸟教程
CSS
1. 什么是CSS
- CSS全称是CascadingStyleSheets，层叠样式表
- 用来控制HTML标签的样式，美化网页中起到了非常重要的作用
- CSS编写格式是键值对的形式
2. CSS书写形式
- 行内样式（内联样式）
- 页内样式
- 外部样式
3. 两大重点
- 属性：通过属性的复杂叠加才能做出漂亮的页面
- 选择器：通过选择器找到对应的标签设置样式
4. css选择器
- 序号选择器
- 不区分类型
:first-child选择同级别中第一个标签:last-child选择同级别中最后一个标签:nth-last-child(n)选择同级别中的倒数第 n 个标签:nth-child(n)选择同级别中的第 n 个标签:only-child选中同级别中唯一子元素标签
- 区分类型
:first-of-type选择同级别中同类型的第一个标签:last-of-type选择同级别中同类型的最后一个标签:nth-of-type(n)选择同级别中同类型的第 n 个标签:nth-last-of-type(n)选择同级别中同类型倒数第 n 个标签:only-of-type选择同级别中唯一同类型子元素标签
- 奇偶选择
:nth-child(odd)选择同级别中所有奇数:nth-child(even)选择同级别中所有偶数:nth-child(xn+y)x,y是用户自定义的 n为计数器, 从零开始递增选择, 到元素的总个数停止
- 补充
[class^=’’]、[class*=’’]
详见：菜鸟教程
5. 标签的类型
- 行内元素
- 无法设置宽高
- margin上下无效，只有左右有效果；
padding都有效果,会撑大空间；
box-sizing:border-box；无效,因为该属性针对盒模型 - 不会自动换行
- 行内块元素
- 不会自动换行
- 能够设置宽高
- 默认排列方式为从左到右
- 可以使用text-align:center使内容相对于父盒子水平居中对齐,margin:0 auto无效
- 水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格.
- 块级元素
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块状元素标签写在一起，默认排列方式为从上至下
- 可以使用margin:0 auto居中对齐
6. css选择器优先级
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 | 伪元素 > 通配符 > 继承
- 权值
详见：菜鸟教程
7. 盒子模型
- 网页上的每一个标签都是一个盒子
- 每一个盒子都有四个属性
- 内容（content）
- 填充（padding 内边距）
- 边框（border）
- 边界（margin 外边距）
- 标准盒子模型
- IE盒子模型
8. 浮动
详见：w3school
9. 水平居中和垂直居中
- 水平居中
- text-align：实现行内元素水平居中
- margin：在本身元素设置margin: 0 auto实现块级元素水平居中
- 垂直居中
- 单行文本垂直居中：
line-height - 垂直居中一张图片：
vertical-align - 通用：
display: table-cell; vertical-align: middle; - flex 居中：
display: flex; align-items: center;
10. 定位
- 通过定位可以将页面中的元素，摆放到页面的任意位置
- 使用position来设置元素的定位
- 可选值
- static：默认值，元素没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位
- 偏移量
- left：元素距离定位位置的左侧距离
- top：元素距离定位位置的上边距离
- right：元素距离定位位置的右侧距离
- bottom：元素距离定位位置的底部距离
一般情况下，只使用两个值即可定义一个元素的位置
- 层级：z-index
11. 背景
- background-img：设置背景图片
- 需要一个url地址作为参数
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
- 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色会作为背景图片的底色，一般情况下设置背景图片时都会设置背景颜色。
<style type="text/css">
div{
width: 800px;
height: 800px;
border: 1px solid darkred;
background-image: url("../images/aa.jpg");
}
</style>
- background-repeat：设置背景图片重复方式
- 可选值：
1）repeat：默认值，背景图片会平铺显示（沿 X轴 和 Y轴 两个方向平铺）
2）no-repeat：背景图片不重复
3）repeat-x：背景图片沿水平方向平铺
4）repeat-y：背景图片沿垂直方向平铺
<style type="text/css">
div{
width: 800px;
height: 800px;
border: 1px solid darkred;
background-image: url("../images/aa.jpg");
background-repeat: no-repeat;
}
</style>
- background-position：背景图片定位
- 设置方式一：可以通过几个位置的关键字来设置图片的位置
1）top
2）left
3）right
4）bottom
5）center
6）可以通过以上关键字两两组合的形式，设置背景图片的位置
7）如果仅仅指定一个值，则第二个值默认是 center - 设置方式二：可以指定两个值，来设置背景图片的偏移量
1）例如：background-position: 10px 20px;第一个值：X轴偏移量，第二个值：Y轴偏移量
2）X轴偏移量：如果指定正值，则图片向右移动，否则向左移动
3）Y轴偏移量：如果指定正值，则图片向下移动，否者向上移动
<style type="text/css">
div{
width: 800px;
height: 800px;
border: 1px solid darkred;
background-image: url("../images/aa.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
- background-size：设置背景图片的尺寸
<style type="text/css">
div{
width: 800px;
height: 800px;
border: 1px solid darkred;
background-image: url("../images/aa.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
- background-attachment：设置背景是否随页面滚动
- 可选值：
1）scroll：默认值，背景图片会随者页面一起滚动
2）fixed：背景图片不会随者页面滚动，会固定在页面的指定位置
设置该属性的背景，则背景会永远相对于浏览器窗口进行定位
一般这种背景会设置给body
12. 雪碧图（精灵图片）
- 基本概念
雪碧图被运用到众多使用了很多小图标的网站上。
相对于把每一张小图标以图片文件的形式引用到页面上，使用雪碧图只需要引用一张图片文件，对内存和宽带更好。 - CSS Sprites的有点
1）将多张图片合并到一张图片上，可以减少图片的总大小
2）将多张图片合并到一张图片上后，下载所需要资源，只需请求一次；可以减少建立连接的消耗。
13. 表格
详：table标签
14. rem
- 概念
- rem 可以在用户浏览页面时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮
- rem （font size of the root element）是指相对于更元素的字体大小的单位
- 一旦根节点 html 定义的 font-size 变化，那么整个网页中运用到 rem 的也会随着变化
- 使用
- 浏览器的默认字体高度是 16px。所以未经调整的浏览器都符合：1rm=16px。
- 重新计算那些被放大的字体 rem 数值，避免字体大小的重复声明。
15. 字体图标
- 概念：可以想使用字体一样使用图标
- 优点：
- 轻量性：一个图标字体比一系列的图像要小，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像，可以减少 HTTP 请求，还可以配合 HTML5 离线存储做性能优化。
- 灵活性：图标字体可以使用 font-size 属性设置大小，还可以加各种文字效果，包括颜色、hover状态、透明度、阴影和翻转等效果；可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同的文件。
- 兼容性：网络字体支持所有现代浏览器，包括IE低版本。
- 缺点：
- 图标字体只能被渲染成单色或CSS3的渐变色，由于此限制使得不能被广泛使用。
- 使用版本权限有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
- 创作自己的字体图标很费时间，重构人员后期维护的成本偏高。
16. 伸缩布局（flex布局）
- flex布局：
display: inline-flex;：将对象作为弹性伸缩盒展示，用于行内元素
display: flex;：将对象作为弹性伸缩盒展示，用于块级元素 - 常用属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
- align-self
详见：Flex布局
17. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
min-width: 400px;
background-color: red;
height: 200px;
/*预留出位置*/
padding: 0 200px;
}
.left,.right{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.main{
width: 100%;
height: 200px;
background-color: blue;
float: left;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">中间栏</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>
18. 双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.container{
min-width: 400px;
background-color: green;
height: 200px;
}
.left,.right{
width: 200px;
height: 200px;
background-color: darkred;
float: left;
}
.main{
width: 100%;
height: 200px;
background-color: skyblue;
float: left;
}
.main-content{
/*预留空间*/
margin: 0 200px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="main-content">中间栏</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
