HTML知识点整理

炫迈905

已于 2022-07-27 11:18:02 修改

阅读量209

点赞数

分类专栏： html 文章标签： html 前端 css

于 2022-07-20 14:57:06 首次发布

本文链接：https://blog.csdn.net/weixin_56299841/article/details/125888067

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. HTML5新增特性

语义化标签、音频audio、视频video、canvas和svg绘图、地理定位、拖拽API、多线程技术、即时通讯

2. CSS3新增特性

新增了transition渐变和animation动画；选择器、阴影和弹性布局、媒体查询等。

3. W3C标准

标准分为三个层面，结构(HTML)、行为(JS)和表现(CSS)；

文档类型需要声明（DOCTYPE）；编码格式需要声明 <meta charset=”utf-8”>；javascript代码需要定义，<script language=”javascript” type = ”text/javascript”></script>；css代码需要定义， <style type=”text/css”></style>；标签名字和标签内部属性名字小写等

4. 浏览器兼容问题

FireFox不支持cursor:hand，但IE支持cursor:pointer，统一使用pointer；

innerText在IE中能正常运行，但在FireFox中不行；

盒子模型；

图片默认由间距；

万能清除浮动法；

溢出显示省略号；

超链接访问后hover样式就不出现等。

5. 伪类选择器

::before 在···之前

::after 在···之后

:active 点击

:hover 鼠标悬停

:first-letter 所有文字的第一个

:first-line 所选元素的第一行

:first-child 第一个子元素

:nth-child() 获取子元素

:nth-of-type() 获取指定类型的子元素

6. 常用的适配手段

媒体查询、弹性布局、各种UI框架、手淘适配方案(flexiable插件)

7. 对flex布局的理解

Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。

        flex-direction：改变主轴的方向
        flex-wrap：子元素是否换行
        justify-content：子元素在主轴上的对齐方式
        align-items：子元素在交叉轴上的对齐方式

8. rem、em、vh、vw和px的区别

rem是相对于HTML标签的字体大小来定义的；

em是相对于父级标签的字体大小来定义的；

vh和vw是相对于视口的大小来定义的；

9. canvas和svg的区别

都是用来绘制图形的。canvas基于js来绘制图形，而svg基于cml来绘制图形，且svg绘制出来的是矢量图。

10. BFC

全称Block Formatting Context，即块级格式化上下文。BFC是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

布局规则：

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列；

BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签；

垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠；

计算BFC的高度时，浮动元素也参与计算。

触发BFC：

overflow: hidden;

display: inline-block;

position: absolute;

position: fixed;

display: table-cell;

display: flex;

11. BFC的作用

分属于不同的BFC时，可以防止margin塌陷、清除浮动、自适应多栏布局。

12. 清楚浮动的方法

浮动元素后新增标签，设置属性“clear:both;”；

浮动元素的父标签设置属性“overflow:hidden”；

设置伪类选择器 ~::after{clear:both;}。

13. 网站页面常用优化手段

优化图片资源格式：webp > jpeg > png > bmp;

使用压缩文件min.js、min.css；

使用浏览器缓存（Cookie、LocalStorage）；

减少请求次数；

使用懒加载，避免一次性请求过多。

14. 常见浏览器内核

IE：Trident

Chrome：Webkit

Firefox：Gecko

15. CSS层级选择器优先级

内联样式 > id选择器 > class选择器 > 标签选择器

16. 左右两边固定宽度，中间自适应布局实现

17. 九宫格实现方式

flex、grid、float、table

18. 让一个盒子在父元素中左右垂直居中

19. 盒子模型

w3c标准盒模型（宽高同理）：width + padding + margin + border

怪异盒模型（宽高同理）：width(padding + border) + margin

20. 简述字体图标的原理

/* 定义font-family */
@font-face {
    font-family: "myiconfont";
    src: url('./iconfont.woff2') format('woff2'),
         url('./iconfont.woff') format('woff'),
         url('./iconfont.ttf') format('truetype');
}

/*  */
[class^="iconfont"],
[class*=" iconfont"] {
    font-family: "myiconfont";
    font-style: normal;
    font-size: 14px;
}

.icon-star::before {
    content: "\e616";
}