HTML-CSS基础上的小特别总结（1）
1、浏览器内核的了解
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
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） Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。二次开发
（5） Presto(Opera)
Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
2、Web 标准构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
3、- HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。
4、字符集（charset）
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
5、标题标签
head 头部. 标题 title 文档标题
、、、、和
、、和
和
注意： h1 标签因为重要，尽量少用。 一般h1 都是给logo使用，或者页面中最重要标题信息。
6、段落标签
水平线标签
换行标签
div span标签
文本格式化标签 b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈
图像标签img
链接标签 文本或图像
_self为默认值，_blank为在新窗口中打开方式
base 标签 base 写到
之间把所有的连接 都默认添加 target="_blank"
7、列表标签
无序列表 ul
1）.
2）.
有序列表 ol（少用）
表格 table caption 元素定义表格标题 （caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这 个标题会被居中于表格之上）
合并单元格 跨行合并：rowspan 跨列合并：colspan colspan=3合并三列
8、表单标签
input 控件
label标签 作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点（出现光标）
textarea控件(文本域)
select控件 下拉菜单
表单域
1）. Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程 序的url地址。
2）. method
用于设置表单数据的提交方式，其取值为get或post。
3）. name
用于指定表单的名称，以区分同一个页面中的多个表单。
二、CSS的规范小点
css基础自行查看W3C 文档
1、css选择器
1）.长名称或词组可以使用中横线来为选择器命名。
2）.不建议使用“_”下划线来命名CSS选择器。
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
JavaScript变量命名区分JS变量命名是用“_”
3).不要纯数字、中文等命名， 尽量使用英文字母来表示
2、通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
在开始的时候，我们可以进行设置，取消原有的一系列默认的padding等值
3、font_family
1). 现在网页中普遍使用14px+。
2). 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3). 各种字体之间必须使用英文状态下的逗号隔开。
4). 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体 名之前。
5). 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6). 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
4、CSS Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
xp 系统不支持 类似微软雅黑的中文。
方案一： 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。
可以通过escape() 来测试属于什么字体。
CSS.escape(".foo#bar") // "\.foo\#bar"
CSS.escape("()[]{}") // "\(\)\[\]\{\}"
CSS.escape('--a') // "--a"
CSS.escape(0) // "\30 ", Unicode代码点“0”是30
CSS.escape('\0') // "\ufffd", Unicode替换字符在上下文使用Section
要转义一个字符串作为选择器使用， escape()方法可以用于:
var element = document.querySelector('#' + CSS.escape(id) + ' > img');| 字体名称 | 英文名称 | Unicode 编码 |
| --------- | --------------- | -------------------- |
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
5、字体粗细
已知的b 和strong 是标签
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
数字 400 等价于 normal，而 700 等价于 bold
6、字体风格
用 i 和 em 标签 （多用）
font-style属性 normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
7、text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
8、选择符合选择器
（1）交集选择器 标签＋class(或id) 中间没有空 不常用
（2）并集选择器 逗号 隔开
（3）后代选择器（包含选择器） 空格隔开
（4）子元素选择器只选择亲儿子 >隔开
（5）伪类选择器
链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
9、块级元素和行内元素、行内块元素的区别
块级元素的特点：
~、
、
- 、
-
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：、、、、、
、、、、（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素的特点：
、、
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
我们可以通过标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
10、规范化CSS
(1)空格
a、选择器 与 { 之间必须包含空格。
示例： .selector { }
b、属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：font-size: 12px;
（2）选择器规范
a、多个 selector 时，每个选择器声明必须独占一行。 （3级以内，更精准）
示例：
.post,
.page,
.comment {
line-height: 1.5;
}
b、属性定义必须另起一行，以分号结尾
11、css三个 特性
层叠性：采取就近原则
继承性：text-，font-，line-这些元素开头的都可以继承，以及color属性）
优先级：用CSS Specificity 作为衡量CSS值优先级的一个标准
| 继承或者* 的贡献值 | 0,0,0,0 |
| --------------- | ------- |
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
权重是可以叠加 （数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能 赶上一个类选择器的情况。）
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
12、盒子模型（重点知识）
margin：上右下左 外边距实现盒子居中 margin:0 auto;
border：border : border-width || border-style || border-color 圆角 border-radius: 左上角 右上角 右下角 左下角;
padding：上右下左
element：
（1）外边距塌陷 相邻的两个盒模型的距离是两者margin中的较大值。
如果父元素没有上内边距及边框， 嵌套的父子元素也是如此：（解决：加上边框和内边距或者overflow：hidden）
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
**如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小
13、浮动
（1）浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。体现了行内块特性，所以我们经常需要在一个父级div中放置的都是浮动的子div，这样才能让他们处于同一行。
（2）清除浮动本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
a、选择器{clear:属性值;}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
b、额外标签法 在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。
c、给父级添加： overflow为 hidden|auto|scroll 都可以实现
hidden：当内容溢出内容会被修剪，并且其余内容是不可见的。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
d、使用after伪元素清除浮动
. clearfix:after { content: "."; display: block;height: 0 ; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比 其他浏览器都不支持zoom
**content:"." 里面尽量跟一个小点表示加入的内容，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
e.使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
/* 使用表格布局的情况 平等分距离和垂直居中 https://www.cnblogs.com/stephen666/p/6995388.html*/
}
. clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
14、定位
（1）、边偏移:top、bottom、left、right
（2）、定位模式
position:属性值
| 值 | 描述 |
| -------- | ------------------------ |
| static | 自动定位（默认定位方式） |无法通过边偏移属性top等 来改变元素的位置。
| relative | 相对定位，相对于其原文档流的位置进行定位 |通过边偏移移动，原来位置，继续占有
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
父级没有定位的话，以文档为准；父级有任何定位的话，子级相对于父级定位 **子绝父相
例子： 绝对定位的盒子水平/垂直居中
position:absolute;
left:50%; // left设置为50%，这时盒子是以元素的左侧进行的水平居中，所以需要设置margin-left为负元素宽度的一半。
top:50%; // top设置为50%，这时盒子是以元素的上侧进行垂直居中显示，所以需要设置margin-top为负元素高度的一半。 width:200px;
height:200px;
margin-top:-100px;
margin-left:-100px;
| fixed | 固定定位，相对于浏览器窗口进行定位 |
（3）z-index的特点
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
15、元素的显示与隐藏（应用：网站广告）
涉及的元素属性有 display visibility 和 overflow
* display 设置或检索对象是否可见及如何显示
display 设置或检索对象是否及如何显示 block，table,inline-block,inline ,none
特点： 隐藏之后，不再保留位置。
* visibility 设置或检索是否显示对象
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。
*overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
16、CSS高级技巧
（1）鼠标样式：cursor : default 小白 | pointer 小手 | move 移动 | text 文本
(2)轮廓 outline:位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
(3)防止拖拽文本域resize 文本域是可以拖动和改变大小的
（4）CSS精灵技术（sprite） 小妖精 雪碧
将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
精灵图的宽度取决于最宽的那个背景。
可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
（5）字体图标的使用
a、设计字体图标 svg格式
b、上传生成字体包 用 http://icomoon.io 把SVG转换成可用字体
icomoon字库 阿里icon font字库
fontello 自定义图标库 可以从GitHub下载整个图标集，该项目也是开源的 可爱的小图标
Font-Awesome 更新快 可以自己调整大小和样式 生成一定的代码 导入使用 收费￥60
Glyphicon Halflings 收费
Icons8 提供PNG免费下载，像素大能到500PX
c、字体引入到HTML
1）、新建4个文件到fonts文件 iconfont.eot iconfont.svg iconfont.ttf iconfont.woff
2）、在样式里面声明字体： 告诉别人我们自己定义的字体
~~~css
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
3）、第二步：给盒子使用字体
```css
span {
font-family: "icomoon";
}
4）、第三步：盒子里面添加结构
```css
span::before {
content: "\e900";
}
你可能感兴趣的:(HTML-CSS,HTML-CSS基础)
- 、