html,css,js重要点

最新推荐文章于 2021-08-31 10:29:08 发布

loey_ln

最新推荐文章于 2021-08-31 10:29:08 发布

阅读量361

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/loeyln/article/details/115733500

版权

h5语义化
h5十大新特性
浏览器页面有哪三层构成以及作用
行内元素、块级元素、空元素
盒子模型
垂直居中的实现
去除浮动
BFC理解以及塌陷问题
选择器类型
选择器优先级
伪类
伪元素
CSS实现动画效果
CSS动画和 JS动画比较
css兼容性处理
link和@import的区别
css提高性能的方法
call()和apply()的区别
线程和进程的区别
this的理解
JS继承方式
常见的DOM节点操作

h5语义化

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

常用语义化标签有：

title:页面头部信息 header:定义文档的页眉 footer:定义文档的尾部 nav:页面导航 canvas:绘制图像

main:规定文档的主要内容 address:定义文档或作者的联系信息 dialog:对话框或确认窗

aside:定义所处内容之外的内容，如文章的侧栏 section:定义文章中的节 figure:规定独立的流内容

mark:带有记号的文本 article:独立的自包含内容 details:描述文档的细节 h1~h6 ul ol

h5十大新特性

1、canvas元素

<canvas></canvas>

canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，开发人员可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、更加丰富强大的表单

增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容如下。

<form>
    <label>数量 ：
        <input type="?" >
    </label>
</form>

①type=”email”
• 限制用户输入为邮箱类型。email提供邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交

②type=”url”
• 限制用户输入为网址，即输入内容必须含有 http:// 或者 https://,并且后面内容不能为空.提供了网址的合法格式验证。

③type=”number”
• 限制用户输入为数字类型,只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮

④type=”range”
• 显示为滑动条，会以一个滑块形式表现，包含一定范围内数值输入域

⑤type=Date Pickers

• 日期选择器–Date pickers (date, month, week, time, datetime, datetime-local)

⑥type=”search”
• 作用：用于搜索域，比如站点搜索或 Google 搜索
• 渲染结果：显示为常规的文本域，在输入框输入文本后右边显示“x”，可以将输入的文本清除、

⑦type=”color”
• 颜色选择器，选择颜色的面板

⑧type=”tel”
• tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。

3、用于媒介的video和audio元素

<video>

• 视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

• 标签属性

controls 属性供添加播放、暂停和音量控件。

video标签之间插入的内容是供不支持 video 元素的浏览器显示的

<audio>

• 音频格式 : Ogg Vorbis \ MP3 \ Wav

• 标签属性

control 属性供添加播放、暂停和音量控件。

audio标签之间插入的内容是供不支持 audio 元素的浏览器显示的

4、地理定位

用于获得用户的地理位置（鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息不可用）

使用 getCurrentPosition()方法来获得用户的位置

5、拖放

（Drag 和 drop）: 抓取对象以后拖到另一个位置。拖放是标准的一部分，任何元素都能够拖放。

• 设置元素为可拖放, draggable 属性设置为 true

• 拖动什么 - ondragstart 和 setData()

(ondragstart 属性调用函数规定被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值)

• 放到何处 - ondragover

(ondragover 事件规定在何处放置被拖动的数据)

• 进行放置 - ondrop

(ondrop 属性调用了一个函数,放置被拖数据时发生 )

6、Web存储

提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除

7、应用程序缓存

优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的 html 标签中包含manifest属性：

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

建议文件扩展名是.appcache

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

8、Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等，而此时 web worker 在后台运行。

9、服务器发送事件

Server-Sent 事件 : 单向消息传递。指的是网页自动获取来自服务器的更新。
以前也能做到这一点，前提是网页必须询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

EventSource 对象用于接收服务器发送事件通知

10、WebSocket

在单个 TCP 连接上进行全双工通讯的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

浏览器页面有哪三层构成以及作用

构成	结构层	表示层	行为层
对应	HTML	CSS	JavaScript
作用	实现页面结构	完成页面的表现与风格	实现客户端的一些功能和业务

行内元素、块级元素、空元素

1、行内元素

a - 锚点 abbr - 缩写 acronym - 首字

big - 大字体 br - 换行 cite - 引用 em - 强调 u - 下划线

i - 斜体 img - 图片 label - 表格标签 q - 短引用

select - 项目选择 span - 常用内联容器，定义文本内区块

strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 small - 小字体文本

input - 输入框 textarea - 多行文本输入框 var - 定义变量

b - 粗体 ( 不推荐 ) font - 字体设定 ( 不推荐 ) s - 中划线 ( 不推荐 )

2、块级元素

address - 地址 blockquote - 块引用 center - 居中对齐块

dir - 目录列表 div - 常用块级容器 dl - 定义列表

form - 交互表单 h1~h6 标题 hr - 水平分隔线

menu - 菜单列表 ol - 有序列表 ul - 无序列表

p - 段落 pre - 格式化文本 table - 表格

3、可变元素（根据上下文语境决定该元素为块元素或者内联元素）

applet - java applet button - 按钮 del - 删除文本 iframe - 行内框架

ins - 插入的文本 map - 图片区块 (map) object - object对象 script - 客户端脚本

4、空元素

<input /> <img /> <link /> <br/> <hr/> <meta>

盒子模型

标准的W3C盒子模型：

盒模型分为四部分：content部分（div里的内容部分），padding部分（这个是内边距），border部分（边框），margin部分（外边距）
padding border margin都有top、bottom、left、right四个属性

垂直居中的实现

1、table-cell方法

Html结构：

<div class="box">
    <span>垂直居中</span>
</div>

css:

.box{
    display: table-cell;
    vertical-align: middle; 
    text-align: center;       
}

优点：
1、内容可以动态地改变高度（不用在CSS里定义）。 2、空间不够的话内容不会被截断。
缺点：
1、不支持IE（即使是IE8 beta）。 2、多余的标签（没那么糟，看你自己怎么认为）。

2、display:flex 方法

.box{
    display: flex;
    justify-content:center;
    align-items:Center;
}

3、绝对定位和负边距

(待验证)

.box3{position:relative;}
span{
   position: absolute;
   width:100px;
   height: 50px;
   top:50%;
   left:50%;
   margin-left:-50px;
   margin-top:-25px;
   text-align: center;
}

4、绝对定位和0

span{
  width: 50px; 
  height: 50px; 
  margin: auto; 
  position: absolute; 
  top: 0;bottom: 0; 
  /* right: 0;left: 0;*/ 
}

5、translate

span{
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    text-align: center;
}

去除浮动

1、父盒子设置固定高度

缺点：使用不灵活，后期不易维护

2、内墙法

在浮动元素的后面加一个空的块级元素(通常是div),设置该元素clear:both;属性。

缺点：结构冗余

3、伪元素清除浮动

<div class="father clearfix">
    <div class="child">child</div>
</div>

.father{
    border: 1px solid red;
}
.child{
    width: 100px;
    height: 100px;
    float: left;
    background-color: green;
}
.cleafix:after{
    content:'.';
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
}

4、overflow: hidden

父元素设置overflow: hidden;会形成一个BFC区域，浮动和清除浮动智慧应用到当前BFC区域，

浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动

BFC理解以及塌陷问题

1、什么是BFC?

BFC 即 块级格式化上下文 ，可以理解为一个容器，是一个独立的渲染区域，制定了其容器内块级子元素的一套渲染规则，并与区域外部不相干。

2、如何开启一个BFC？

页面上最大的一个BFC容器就是根元素，HTML。
盒子设置有float属性，并且不为none；
盒子设置有position属性，且值为absolute或者fixed；
其实从第2，第3条，我们不难看出一个盒子如果脱离文档流，就会开启一个BFC。
overflow不为默认值visiable;
盒子设置的有inline-bloack ;table-cell，flex，inline-flex;

3、BFC 内部如何渲染/如何布局？

BFC就是页面上一个隔离的独立容器，容器内部的子元素不会影响到外面的元素，溢出BFC容器也不会；
BFC会让内部的块级盒子独占一行；
用overflow开启BFC的盒子，width自适应的话，不会与另一个float的盒子相重叠；
同一个BFC中 2个相邻的块级子元素，margin相连时会发生重叠；
发生marging的bug时所需要的条件：
1）同属于一个BFC；
2) 2个元素必须为快级元素：
3) 2个元素margin要相连；
解决margin产生的相关bug时，只要打破这3个条件之一就可以了；
BFC盒子计算其高度时，其中的浮动元素高度也会计算在内；
所以清除浮动时，我们只要给父元素开启一个BFC就可以了；

选择器类型

1、通配选择器 *

2、元素选择器

3、类(class)选择器 .

4、id选择器 #

5、属性选择器 [ ]

6、伪类选择器 a:link

7、表单伪类选择器 input : enabled/disabled/checked/focus

8、并集选择器 p,#a1,.p3

9、交集选择器 p.p3

选择器优先级

内联样式 > id选择器 > 类和伪类 > 元素选择器 > 通配选择器

继承样式无优先级 ; !important最高优先级

伪类

:first-child 应用第一个子元素
:link 应用未访问过的链接
:visited 应用已访问过的链接
:hover 应用鼠标指针悬浮的元素
:active 应用活动的链接
:focus 应用聚焦的输入元素

伪元素

:first-letter 伪元素的样式将应用于元素文本的第一个字（母）
:first-line 伪元素的样式将应用于元素文本的第一行
:before 在元素内容的最前面添加新内容
:after 在元素内容的最后面添加新内容

CSS实现动画效果

变形属性 transform

允许将旋转，缩放，倾斜或平移给定元素

transform: none|transform-functions;

transform-functions => translate(x,y) 平移，scale(x[,y]) 缩放，rotate(angle) 旋转，skew(x-angle,y-angle) 倾斜

过渡属性transition

过渡是元素从一种样式逐渐改变为另一种的效果。

必须指定要添加效果的CSS属性和持续时间。

div{
    transition: width 2s;
}

animation动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

1、@keyframes规则

@keyframes 规则是创建动画，指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

用关键词 “from” 和 "to"规定变化发生的时间

@keyframes myfirst
{
    from { background: red; }
    to { background: yellow; }
}

用百分比来规定变化发生的时间

0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst
{
    0%   { background: red; }
    25%  { background: yellow; }
    50%  { background: blue; }
    100% { background: green; }
}

2、animation属性

把**@keyframes** 绑定到一个选择器，否则动画不会有任何效果。

至少指定动画的名称和时长

div{    
    animation: myfirst 5s; 
}

CSS动画和 JS动画比较

1 CSS3动画：

优点：浏览器可以对动画进行优化。

缺点：1. 运行过程较弱，无法附加绑定回调函数，CSS3动画只能暂停，不能在动画中寻找一个特定的事件点，不能在半路反转动画，不能变换事件尺度，不能在特定的位置添加回调函数或是绑定回放事件，无进度报告。

2. 代码冗长。想用CSS3实现稍微复杂一点的动画，最后CSS代码都会变得特别笨重。

2 JS动画：

优点：1. JS动画控制能力很强，可以在动画播放过程中对动画进行控制，使其开始或停止。

动画效果比CSS3动画丰富，有些动画只有JS动画才能实现，比如曲线运动，冲击闪烁等。

3有兼容性问题，而JS大多时候没有兼容性问题。

缺点：1. JS在浏览器的主线程中运行，而主线程还有其他的js脚本，样式布局，绘制任务等，对其干扰可能导致线程出现阻塞，从而造成丢帧的情况。

2. JS动画代码复杂度高于CSS3动画。

css兼容性处理

1、样式初始化

每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化

* { 
  margin: 0; 
  padding: 0; 
}

2、添加浏览器私有属性

-moz- 代表firefox浏览器私有属性
-ms-代表IE浏览器私有属性
-webkit-代表chrome、safari私有属性
-o-代表opera私有属性

对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3、使用自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。自动化插件将自动补全每个浏览器的前缀写法。

4、CSS hack

需要针对不同的浏览器或不同版本写特定的CSS样式时，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。

条件hack

条件hack主要针对IE浏览器进行一些特殊的设置

<!--[if <keywords>? IE <version>?]>
    代码块，可以是html，css，js
<![endif]-->

举例：

<!--[if lt IE 9]>
   .test{color:red;}
<![endif]-->

属性级hack

属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
```
selector{<hack>?property:value<hack>?;}
```
- 取值：
  
  _ ：选择IE6及以下。 * ：选择IE7及以下。 9：选择IE6+。 0：选择IE8+和Opera15以下的浏览器
  
  如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后
```
.test {
  color: #090\9; /* For IE8+ */
  *color: #f00;  /* For IE7 and earlier */
  _color: #ff0;  /* For IE6 and earlier */
}
```
选择符级hack

针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
```
<hack> selector{ sRules }
```
*html * 前缀只对IE6生效 *+html *+ 前缀只对IE7生效

举例：
```
* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
```

link和@import的区别

link是标签，引入外部样式表

@import 在css环境中导入外部css (在

用法：

<head>
    <link rel="stylesheet" href="./index.css">
    <style>
        @import url('./index2.css');
    </style>
</head>

两者都是外部引用CSS的方式，但是存在一定的区别：

link 是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；

@import 属于CSS范畴，只能加载CSS。
link 引用CSS时，在页面载入时同时加载；

@import 需要页面网页完全载入以后加载。
link 是XHTML标签，无兼容问题；

@import 是在CSS2.1提出的，低版本的浏览器不支持。
link 支持使用Javascript控制DOM去改变样式；

@import 不支持。

css提高性能的方法

1、尽量将样式写在单独的css文件里面，在head元素中引用

优点：(1)内容和样式分离，易于管理和维护

(2)减少页面体积

(3)css文件可以被缓存、重用，维护成本降低

2、不使用@import

@import影响css文件的加载速度

3、避免使用复杂的选择器，层级越少越好

简洁的选择器可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。

4、精简页面的样式文件，去掉不用的样式

缺点：(1)样式文件偏大，影响加载速度 (2)浏览器会进行多余的样式匹配，影响渲染时间。

正确的处理方法 ：根据当前页面需要的css去合并那些当前页面用到的CSS文件。

5、利用CSS继承减少代码量

部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式

可继承属性：color，font-size，font-family 等等

不可继承属性：position，display，float 等

call()和apply()的区别

用来改变函数体内部this的指向

相同点 : 作用一样。都是在aAa特定的作用域中调用函数，等于设置函数体内this对象的值，扩充函数赖以运行的作用域。

不同点 ：接收参数的方式不同。

apply()方法接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
call()方法不一定接受两个参数，第一个参数也是函数运行的作用域（this），但是传递给函数的参数必须列举出来。

线程和进程的区别

进程是系统进行资源分配和调度的一个独立单位；线程是进程的一个实体,是CPU调度和分派的基本单位
一个程序至少一个进程，一个进程至少一个线程
每个进程都有独立的内存地址空间；系统不会为线程分配内存，线程组之间只能共享所属进程的资源
程序之间的切换会有较大的开销；线程之间切换的开销小

this的理解

this的指向

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：

this.alert() <=> window.alert()<=> alert();

全局环境 就是在<script></script>里面，这里的this始终指向的是window对象，

局部环境

1）在全局作用域下直接调用函数，this指向window

2）对象函数调用，哪个对象调用就指向哪个对象

3）使用 new 实例化对象，在构造函数中的this指向实例化对象。

4）使用call或apply改变this的指向

JS继承方式

1、原型继承

优点：可以继承构造函数属性，也可继承原型属性。

缺点：

1.属性值为引用类型值的原型属性被修改后可能会影响到所有的实例，而该种继承方式中，构造函数中的属性会继承到子类型，成为子类的原型对象的属性。（这也是为什么要在构造函数中定义属性，在原型中定义公共方法）

2.在创建子类的实例时，不能向父类的构造函数中传递参数。

2、借用构造函数继承

优点：避免了原型继承中的两个缺点，可以向父类传参，且不会造成原型属性共享的问题（因为父类构造函数中的属性继承到子类构造函数中，而非原型对象中）。

缺点：不能继承原型属性，无法实现函数复用，所有方法都只能放在构造函数中。

3、组合继承

4、原型式继承

5、寄生式继承

6、寄生组合式继承

常见的DOM节点操作

获取DOM

getElementById()方法匹配元素的id属性来访问元素节点，对元素节点进行操作
getElementsByClass() 方法匹配元素的class元素来访问元素节点，对元素节点进行操作
getElementsByTagName() 方法匹配元素的tagName来访问元素节点，对元素节点进行操作
getElementsByClassName() 方法匹配元素的className来访问元素节点，对元素节点进行操作
getAttribute(查询节点的属性值)方法 ,对返回的节点对象进行操作
setAttribute(节点的属性值，修改的值),get和set都得通过获取元素节点对象才能使用。

父元素和子元素

访问子节点：childNodes

必须通过父节点进行访问，也可以说节点下还有子节点才可以使用

比如：var x = document.getElementByTagName(“ul”)[0].childNodes;

ul标签下设置多个li，记住使用Tagname访问子节点后面加[0]

注意：返回值里面包括了所有的子节点，包括元素节点，文本节点

parentNodes.children是一个只读属性，它只返回子元素节点,其余节点不返回
访问子节点的第一项和最后一项

第一项 : node.firstChild = childNodes[0]

最后一项 : node.lastChild = childNodes[childNodes.length-1]
访问父节点：parentNode

父节点只有一个时：

var parent = document.getElementById(“li”).parentNode; 获取到ul的节点

获取祖节点 parentNode.parentNode,可以多重累加

兄弟节点

所有节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包括所有节点

node.previousSibling

previousSibling返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包括所有节点

创建节点

createElement()

document.createElement()方法创建由tag2Name指定的HTML元素 (动态创建元素节点)

三种创建元素的区别

document.write() 直接将内容写在页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
element.innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘；

不拼接字符串，采取数组形式拼接，结构稍微复杂
document.createElement() 创建多个元素效率稍低一点点，但是结构更清晰

**总结：**不同浏览器，innerHTML效率要比creatElement高。

添加节点

appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

node.insertBefore(child,指定元素)

删除节点

removeChild(child)

node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点

复制节点

cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。(克隆节点/拷贝节点)

node.cloneNode();  //浅拷贝 ，不复制内容，只复制标签
node.cloneNode(true);  //深拷贝 ，复制内容、复制标签

loey_ln

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html,css,js重要点

目录垂直居中的实现css去除浮动行内元素、块级元素、空元素h5十大新特性CSS选择器类型选择器优先级伪类伪元素call()和apply()的区别垂直居中的实现1、table-cell方法 Html结构：<div class="box"> <span>垂直居中</span></div>css:.box{ display: table-cell; vertical-align: middle; text-a
复制链接

扫一扫