HTML前端知识点

HTML、CSS、浏览器 相关

1.网络中使用最多的图片格式有哪些
2. 请简述 css 盒子模型
3.视频/音频标签的使用
4.HTML5 新增的内容有哪些
5.Html5 新增的语义化标签有哪些
6.Css3 新增的特性
7.清除浮动的方式有哪些?请说出各自的优点
8.定位的属性值有何区别
9.子元素如何在父元素中居中
10.Border-box 与 content-box 的区别
11.元素垂直居中
12. 如何让 chrome 浏览器显示小于 12px 的文字
13.Css 选择器有哪些,那些属性可以继承,优先级如何计算?Css3 新增的伪类有哪些
14.网页中有大量图片加载很慢 你有什么办法进行优化?
15.行内元素/块级元素有哪些?
16.浏览器的标准模式和怪异模式区别?
17.Margin 和 padding 在什么场合下使用
18.弹性盒子布局属性有那些请简述?
19.怎么实现标签的禁用
20.Flex 布局原理
21. Px,rem,em 的区别
22.网页的三层结构有哪些
25.常见的兼容性一阶段内容中记几个
26.垂直与水平居中的方式
27.三栏布局方式两边固定中间自适应
28.Doctype 作用
29.说一下 HTML5 drag api
30 对 HTML 语义化标签的理解
31.web 性能优化
32.浏览器缓存机制
33.浏览器输入网址到页面渲染全过程
34.画一条 0.5px 的线
35.关于 JS 动画和 css3 动画的差异性
36.双边距重叠问题(外边距折叠)
37.浮动清除
38.CSS 选择器有哪些,优先级呢
39.css 动画如何实现
40.如何实现元素的垂直居中
41.CSS3 中对溢出的处理
- 2 - 42.对 CSS 的新属性有了解过的吗?
43.overflow 的原理
44.css 定位

1.网络中使用最多的图片格式有哪些

JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小在ps以jpeg格式存储时,提供11级压缩级别

2.请简述css盒子模型

一个css盒子的模型有着content(内容),width(宽度),height(高度),padding(内边距),border(边框),margin(外边距)组成。

盒子真正的宽应该是:内容宽度+左右填充+左右边距+左右边框

盒子真正的高应该是:内容高度+上下填充+上下边距+上下边框

3.视频/音频标签的使用

视频:<video src=""></video>

视频标签属性:

src需要播放的视频地址

width/height 设置播放视频的宽度,和img标签的宽度属性一样

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的展位图片

loop 是否循环播放

perload 预加载视频(缓存)与autoplay相冲突,设置了autoplay属性,perload属性会失效。

muted 静音模式

<audio>

<source src="" type="">

<audio>

4.HTML5新增的内容有哪些

新增语义化标签

新增表单类型

表单属性

表单事件

多媒体标签

5.HTML5新增的语义化标签有哪些

语义化标签优点:1.提升可访问性 2.seo 3.结构清晰,利于维护Header页面头部 main页面主要内容 footer页面底部 Nav导航栏 aside侧边栏 article加载页面一块独立内容

Section 相当于div   figure 加载独立内容(上图下字) figcaption figure的标题

Hgroup 标题组合标签 mark高亮显示 dialog 加载对话框标签(必须配合open属性)

Embed 加载插件的标签 video 加载视频 audio 加载音频(支持格式ogg,mp3,wav)

6.CSS3新增的特性

边框:

border-radios 添加圆角边框

border-shadow:给框添加阴影(水平位移,锤子位移,模糊半径,阴影尺寸,阴影颜色,insetr(内/外部阴影))

border-image:设置边框图像

border-image-source:边框图片的路径

border-image-slice:图片边框向内偏移

border-image-width:图片边框的宽度

border-image-outset:边框图像区域超出边框的量

border-image-repeat:图像边框是否平铺

背景:

background-size:背景图片尺寸

background-origin:规定background-position属性相对于什么位置定位

background-clip:规定背景的绘制区域(padding-box,border-box,content-box)

渐变:

linear-gradient () 线性渐变

radial-gradient () 径向渐变

文本效果:

word-break:定义如何换行

word-wrap:允许长的内容可以自动换行

text-overflow:指定当文本溢出包含它的元素,应该干啥

text-shadow:文字阴影(水平位移,垂直位移,模糊半径,阴影颜色)

转换:

transform:应用于2D3D转换,可以将元素旋转,缩放,移动,倾斜

transform-origin:可以更改元素转换的位置,(改变xyz轴)

transfrom-style:指定嵌套元素怎么样在三位空间中呈现

2D转换方法:

rotate旋转

translate(x,y)指定元素在二维空间的位移

scale(n)定义缩放转换

3D转换方法:

perspective(n)为3D转换 translate rotate scale

过渡:

transition-proprety 过渡属性名

transition-duration 完成过度效果需要花费的时间

transition-timing-function 指定切换效果的速度

transition-delay 指定什么时候开始切换效果

动画:animation

animation-name 为@keyframes动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

7.清除浮动的方式有哪些?请说出各自的优点

高度塌陷:当所有子元素浮动的时候,且父元素没有设置高度,这时候父元素就会产生高度塌陷。

清除浮动方式1:给父元素单独定义高度

优点:快速简单,代码少 缺点:无法进行响应式布局

清除浮动方式2: 父级定义overflow:hidden;zoom:1 (针对ie6的兼容)

优点:简单快速,代码少,兼容性较高 缺点:超出部分被隐藏,布局时要注意

清除浮动方式3:在浮动元素后面加一个空标签,clear:both;height:0;overflow:hidden

优点:简单快速、代码少、兼容性较高。

缺点:增加空标签,不利于页面优化 

清除浮动方法4:父级定义overflow:auto

优点:简单,代码少,兼容性好

缺点:内容宽度超过父级div时,会出现滚动条

清除浮动方式5:万能清除法:

给塌陷的元素添加伪对象

.father:after{

               content:"";

                clear:both;

                display:block;

                height:0

                overflow:hidden;

                visibility:hidden:

}

优点:写法固定,兼容性高 缺点:代码多

8.定位的属性有何区别

position 有四个属性值:relative absolute fixed static

relative 相对定位不脱离文档流,相对于自身定位

absolute 绝对定位,脱离文档流,相对于父级定位

fixed 固定定位,脱离文档流,相对于浏览器口定位

static 默认值,元素出现在正常的流中

9.子元素如何在父元素中居中

水平居中:

1.子元素宽度固定,子元素设置margin:auto,并且子元素不能设置浮动,否则居中失效

2.子父元素宽度固定,父元素设置text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动否则居中失效

水平垂直居中:

子元素相对于父元素绝对定位,子元素top,left设置50%,子元素margin-top和margion-left减去各自宽高的一半

子元素相对于父元素绝对定位,子元素上下左右全为0,然后设置子元素margin:auto

父元素设置 display:table-cell vertical-align:middle,子元素设置margin:auto

子元素相对定位,子元素top,left值为50%,transform:translate(-50%,-50%)

父元素设置弹性盒子,

display:flex;justfy-content:center;align-item:center;justfy-content:center

10.border-box与content-box的区别

content-box 标准盒模型 width不包括padding 和border

border-box 怪异盒模型 width包括padding和border

11.元素垂直居中

1.设置子元素和父元素的行高一样

2.子元素设置为行内块,再加vertical-align:middle

3.已知父元素高度,子元素相对定位,通过transform:translateY(-50%)

4.不知道父元素高度,子绝父相,子元素top:50%,transform:translateY(-50%)

5.创建一个隐藏节点,让隐藏节点的height为剩余高度的一半

6.给父元素display:table,子元素display:table-cell,vertical-align:middle;

7.给父元素添加伪元素

8.弹性盒,父元素display:flex,子元素align-self:center

12.如何让chrome浏览器显示小于12px的文字

本来添加谷歌私有属性 -webkit-text-size-adjust:none,现在-webkit-transform:scale()

13.css选择器有哪些,哪些属性可以继承,优先级如何计算?

css3新增的伪类有哪些

css2选择器:

元素选择器,id选择器,群组选择器,类选择器,*通配符选择器,后代选择器

css2伪类选择器:a:link/visited/hover/active

css3选择器:

空格 > +相邻兄弟选择器  ~通用选择器(查找后面所有)

结构伪类选择器:

查找第几个nth-child(n)

查找唯一类型 only-of-type

属性选择器:根据标签属性查找[attr=value]

:root查找根元素html标签

:empty查找空标签

目标伪类选择器:(表单)

;enabled查找可以使用的标签

:disabled查找禁止使用的标签

:checked查找被选中的标签

伪元素选择器::selection设置选中文本内容的高亮显示(只能用于背景和文本颜色)

否定伪类选择器not()

语言伪类选择器lang(取值)

优先级(权重):

元素选择器1

伪元素选择器1

class选择器10

伪元素选择器10

属性选择器10

id选择器10

内联样式的权重1000

包含选择器权重为权重之和

继承样式权重为0

哪些属性可以继承:

Css继承特性主要是文本方面

所有元素可继承:visibility 和 cursor

块级元素可继承:text-indent 和 text-align

列表元素可继承: list-style,list-style-type,list-style-position,list-style

内联元素可继承:letter-spacing,word-spacing,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transorm,direction

字母间距 段落间距 行高 字体颜色 字体种类 字体大小 字体样式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文本方向

14.网页中有大量图片加载很慢 你有什么办法进行优化?

1.图片懒加载,在图片未可视区域加一个滚动条事件,判断图片位置与浏览器顶端和页面的距离,如果前者小鱼后者,优先加载

2.使用拖预加载技术,将当前展示图片的前一张和后一张优先下载

3.使用csssprite或者svgsprite

15.行内元素/块级元素有哪些?

行内元素:相邻的行内元素会排列在同一行,不会独占一行设置宽高无效. span

块级元素:会独占一行 可以设置宽高等属性  div

可变元素:根据上下预警决定该元素为块元素还是内联元素

块级元素:div h1-h6 hr p ul ol table address blockquote dir from menu

行内元素:a br i em img input select span sub sup 

可变元素:button del iframe ins

16.浏览器的标准模式和怪异模式区别?

标准模式:浏览器按照W3C标准解析执行代码

怪异模式:浏览器根据自己的方式解析执行代码,因为不同浏览器解析执行方式不一样,所以叫怪异模式

17.margin和padding在什么场合下使用

margin 外边距 自身边框到另一个边框之间的距离

padding 内边距自身边距到自身内容之间的距离

当需要在border外侧添加空白时用margin,当需要在border内侧添加空白时用padding

18.弹性盒子布局属性有哪些请简述?

flex-direction:弹性容器中子元素排列方式(主轴排列方式)

flex-wrap:设置弹性盒子的子元素超出父容器时是否换行

flex-flow:是flex-direction和flex-wrap简写形式

align-item:设置弹性盒子元素在测抽上的对齐方式

align-content:设置行对齐

justify-content:设置弹性盒子元素在主轴上的对齐方式

19.怎么实现标签的禁用

添加disabled属性

20.flex布局原理

就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

21.px,rem,em的区别

px 绝对长度单位,像素px是相对于显示器屏幕分辨率来说的

em 相对长度单位,相对于当前对象内文本的字体尺寸

        em的值并不是固定的

        em会继承父级元素的字体大小(参考物是父元素的font-size)

        em中所有的字体都是相对于父元素的大小决定的

rem 相对于html根元素的font-size

1em=1rem=16px 在body中加入font-size:62.5%这样直接就是原来的px数值除以10加上em就可以

22.网页的三层结构有哪些

结构(html或xhtm标记语言)表现(css样式表)行为(js)

请简述媒体查询

媒体查询扩展了media属性,就是根据不同的媒体类型设置不同的css样式,达到自适应的目的。

rem缺点

比如:小说网站,屏幕越小的移动设备如果用了rem肯定文字就越小,就会导致看文章的时候特别费眼

27.三栏布局方式两边固定中间自适应

1.margin负值法:左右两栏均左浮动,左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来

2.自身浮动法:左栏左浮动,右栏右浮动,中间栏放最后

3.绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体用左右margin值撑开距离。

4.flex左右固定宽 中间 flex:1

5.网格布局

6.table布局

28.Doctype作用

声明文档类型

30.对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容,结构良好,便于阅读,比如nav表示导航条,类似的还有article,header,footer等等标签。

31.web性能优化

降低请求量:合并资源,减少http请求数,minify/gzip压缩,webP,lazyLoad.加快请求速度:预解析CDN分发。

缓存:http协议缓存请求,离线缓存manifest,离线数据缓存localStorage.渲染:JS/css优化,加载顺序,服务端渲染,pipeline.

36.双边距重叠问题(外边距折叠)

多个相邻(兄弟或者分子关系)普通流的块元素垂直方向marigin 会重叠折叠的结果为:

两个相邻的外边距都是正数,折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。两个外边距一正一负时,折叠结果是两者的相加的和。

37.浮动清除

方法一:使用带clear属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>,并在css中赋予.clear{clear:both}属性即可清除浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理

方法二:使用css的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在IE6中还需要触发hasLayout,列如为父元素设置容器高度或设置zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

方法三:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

方法四:使用邻接元素处理

什么都不做,给浮动元素后面的元素添加clear属性。

方法五:使用css的:after伪元素

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在准备前端找工作时,以下是一些适合练习的知识点: 1. HTML和CSS:掌握HTML和CSS的基本语法和常用标签,了解盒模型、选择器、布局等概念,熟悉响应式设计和常见的CSS框架(如Bootstrap)。 2. JavaScript:掌握JavaScript的基本语法、数据类型、DOM操作、事件处理、异步编程(如Promise和async/await)、面向对象编程等概念,熟悉ES6+的新特性。 3. 前端框架:熟悉至少一种主流前端框架,如Vue.js、React或Angular,理解其核心概念、组件化开发和路由管理,能够使用框架进行项目开发。 4. 网络请求:了解HTTP协议、RESTful API设计原则,能够使用fetch或axios等工具发送网络请求,并处理响应数据。 5. 前端工具链:了解Node.js和npm的基本使用,掌握常用的构建工具(如Webpack或Vite)、打包工具(如Babel)、版本控制工具(如Git)等,能够配置和使用这些工具进行项目开发和部署。 6. 跨平台开发:熟悉移动端开发框架(如React Native或Flutter)或桌面应用开发框架(如Electron),能够开发跨平台的应用程序。 7. 浏览器兼容性:了解不同浏览器的特性和兼容性问题,能够解决常见的浏览器兼容性Bug。 8. 性能优化:了解前端性能优化的基本原则和常用技巧,包括减少HTTP请求数量、压缩和缓存静态资源、懒加载、代码分割等。 9. 调试和测试:熟悉浏览器开发者工具的使用,能够进行调试和排查代码问题,了解单元测试和集成测试的基本概念,能够编写简单的测试用例。 10. 前端安全:了解常见的前端安全漏洞(如XSS和CSRF),并了解相应的防御措施。 以上是一些前端找工作时适合练习的知识点,当然还可以根据具体职位要求和公司需求进行针对性的学习和练习。祝你找到理想的前端工作!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值