2024前端html5,css3面试题总汇

1.XML,HTML,XHTML区别⭐

XMLXML是一个可扩展标记语言,主要是用来存储,传输数据的,并非显示数据,可以用来标记数据,定义数据类型,允许用户对自己的标记语言进行定义,一般用于java

HTML是一个超文本标记语言,主要用来描述网页的一种标记语言,通过标记标签来描述网页

XHTMLXHTML是一个可扩展超文本标记语言,XHTML是基于XML和HTML来的,也是用来描述网页的标记语言,是更严格的HTML版本,例如:XHTML 元素必须被正确地嵌套,标签名必须用小写字母, 文档必须拥有根元素,对于图片需添加 alt 属性等。XHTML 和 HTML 4.01 几乎是相同的,XHTML 是 W3C 标准。

XML和HTML区别:XML相比HTML的语法更加严格,HTML是预定义的,XML标签是自定义的,可扩展的,HTML的设计目的是显示数据并集中于数据外观,XML的设计目的是描述数据,存放数据并集中于数据内容,XML是一种跨平台的,数据处理和传输的工具,总的来说XML是传输数据,HTML是用来描述网页的,XHTML比HTML更加严格

2.XML和JSON的区别⭐⭐

JSON:JSON是一种轻量级的数据交换格式,他基于JavaScript的一个子集,但是独立于编程语言,JSON格式可以用来在网络中传输数据,也可以存储数据,JSON采用的是键值对,键可以为字符串,数字,布尔,数组,对象,null

XML:XML是一种可扩展标记语言,是通用标记语言SGML的子集,XML主要是用来存储数据,传输数据,不是显示数据的,可以用来标记数据类型,允许用户对自己的标记语言进行定义

JSON和XML区别:JSON数据体积小,传递速度快,与JavaScript交互,更加方便,速度更快,更容易解析处理,XML对数据的描述性比较好,JSON支持数组,XML不支持数组,JSON不支持命名空间,XML支持命名空间,JSON更容易阅读,XML难以阅读和解释,JSON不用结束标记,XML有开始和结束标签,JSON安全性较低,不支持注释,仅支持UF-8编码,XML比JSON更安全,支持注释,支持各种编码

3.W3C的规范⭐⭐

W3C标准:指的是万维网联盟的标准,万维网联盟的标准不是指的一个标准,而是一系类的标准,web可以简单分为结构,表现,行为三部分,三部分独立开,使其模块化,w3c是对web做出的规范,使代码更加的严谨,做出来的网页更加容易使用和维护

结构标准:主要包括XML,HTML,比如像标签闭合,标签属性名字小写,标签不乱嵌套,属性必须有属性值,属性值必须用引号括起来,特殊符号用编码显示,标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助,越规范的网站搜索排名越靠前

表现标准:主要包括CSS,行为标准主要包括对象模型(像 W3C DOM,ECMAScript),比如说尽量使用外链css和js脚本,提高页面渲染效率,尽量少使用行内样式,类名要做到见名知意。遵循w3c标准可以让我们的页面,我们的程序支持所有浏览器,能够尽量满足更多的用户。

W3C标准体现:这也是说开发者在开发过程中如何去遵守W3C标准,这里面很多规范都是为了XHTML,jQuery不符合W3C标准

4.什么是语义化标签⭐

1.语义化标签就是把标签语义化,让标签有自己含义,让浏览器和搜索引擎能够直观的认识标签的用途和内容

2.虽然采用DIV+CSS的方式布局,但是DIV标签本身没有特殊的含义,文档结构不清晰,不利于浏览器对页面的读取,在分离CSS样式后,体验不友好

3.使用语义化标签可以使代码结构更加清晰,可读性高,便于团队开发和后续维护,在页面没有加载css的情况下也能显示良好的结构,易于阅读,有利于SEO

4.语义化标签是H5的新特性,语义化标签有

定义页面的头部,
定义页面的底部,

5.常用的块级元素和行内元素有哪一些⭐

块级元素:div,p,h1-h6,ol,li,table,form

行内标签:span,img,a,input,button,label

行内块元素:img,input,button

6.行内元素和块元素的区别⭐

块级元素:默认换行,独占一行,可设置宽高,块级元素可以嵌套任意元素,块级文字不能放入其他块级元素,

行内元素:默认不换行,设置宽高无效,不能包含块级元素,只能包含文字或者其他行内元素,设置margin,padding无效

转换:display:block,display:inline,display:inline-block

7.CSS盒模型有哪几种,有什么区别⭐⭐
  1. 根据盒子大小的计算方式不同,css盒模型分为了两种类型,分别是标准盒模型和IE盒模型
  2. 标准盒模型:盒子的大小 = width ( content ) + border + padding + marginimage-20241023134913996
  3. IE盒模型:盒子的大小 = width ( content + border + padding ) + marginimage-20241023134949880
  4. 默认情况下都是标准盒模型,设置IE盒模型:box-sizing:border-box,设置标准盒模型:box-sizing:content-box
8.标签上的title与alt的区别⭐
  • alt是给搜索引擎识别,在图像无法显示时的代替文本
  • title是元素的注释信息,主要是用于用户解读
  • 当鼠标放在文字或者图片的时候title文字会显示,在IE浏览器中ali起到了title的作用,变成了提
9.H5新特性有哪些⭐

1.语义化标签

image-20241023143703028

2.新增表单功能(类型和属性)

3.音频视频:,

4.画布:

5.SVG绘图

6.地理位置

7.拖拽API

8.WebStorage (本地存储:LocalStorage / SessionStorage )

10.css3的新特性有哪些⭐

1.选择器:层级选择器,属性选择器,状态伪类选择器,结构伪类选择器,伪元素选择器
2.文本效果:文本阴影 ,文本自动换行,文本溢出,(单词拆分,文本拆分)
3.边框:圆角边框 border-radius,边框阴影 box-shadow,边框图片 border-image
4.背景:渐变背景,多重背景 (设定背景图像的尺寸,指定背景图像的位置区域,背景的绘制)
5.透明度:opacity ( 取值0-1,通常用于做元素的遮罩效果)
6.高斯模糊:filter
7.渐变:background: linear-gradient (线性渐变,径向渐变 ,文字渐变)
8.过渡:transition
9.2D转换 / 3D转换: transform
10.动画:Animation (@keyframes 动画帧)
11.媒体查询:@media
12.多列布局 (兼容性不好,还不够成熟)
13.弹性布局 (flex)
14.网格布局

11.css的引用有那些,link和@import的区别⭐⭐

css的引用有哪些:

1.内联方式(直接在html标签中写style样式)

2.嵌入方式(在

3.链接方式(使用link引入外部css文件)

link和import的区别:

1.link和import写法不同,link通过标签href引入,import是导入

2.link是XHTML标签,还可以定义其他事务,@import属于css范围,只能加载css

3.link无兼容问题,@import兼容IE5以上

4.link 支持使用 Javascript 控制 DOM 去改变样式,@import 不支持改变样式。

5.link 是连接整个 css 文件,@import 可以模块化引入 css 文件。

6.link 引用 CSS 时,在页面加载时同时加载 css,而 @import 会把 css 文件放在页面的最底部,导致 css 最后才加载完毕,等到页面完全加载才加载 css,导致页面留白时间长,影响用户体验。

12.href和src的区别⭐⭐

请求资源不同:href 超文本引用,用来建立当前元素和文档之间的连接,常用的是link、a 标签。src 会将指向的资源下载并引用到当前文档中,常用的标签有 script,img,iframe 标签。

作用结果不同:href 用于在当前文档和引用资源之间确立联系,src 用于替换当前内容。

浏览器解析方式不同:herf 引用的资源时,浏览器会将其识别为 CSS 文档,并行下载资源并且不会停止对当前文档的处理。当浏览器解析到 src 时,会暂停其他资源的下载和处理,直接将该资源下载,编译,执行完毕。

13.css单位尺寸有哪些?应用场景⭐

1.px:像素,相对长度单位,它的大小取决于屏幕的分辨率,是一个固定值,不能够自适应。
2.em:相对长度的单位,相对于当前对象内文本的字体尺寸,未设置则默认是浏览器默认字体尺寸。
3.rem:CSS3 中新增的一个相对长度单位,相对于根元素 的 font-size 字体大小,根元素字体大小未设置,使用浏览器默认字体大小。

4.vw:相对于视口的宽度。视口被均分为100单位的 vw。

5.vh:相对视口高度,视口被均分为100单位的 vh。

6.vmin:相对于视口宽度或高度中较小的那个。其中最小的那个被均分为100单位的 vmin。

7.vmax:相对于视口宽度或高度中较大的那个。其中最大的那个被均分为100单位的 vmax。

8.cm:厘米,绝对长度单位。

9.mm:毫米,绝对长度单位。

10.in:英寸,绝对长度单位。

11.%:百法比

应用场景:

**1.**在移动端网页开发中,页面要做成响应式的,可使用 rem 配合媒体查询实现。原理:通过媒体查询,能够在屏幕尺寸发生改变时,重置 html 根元素的字体大小,页面中的元素都是使用rem 为单位设置的尺寸,因此只要改变根元素字体大小,页面中的其他元素的尺寸就自动跟着修改。

**2.**利用 vw 和 rem 实现响应式。原理:由于 vw 被更多浏览器兼容之后,在做移动端响应式页面时,通常使用 vw 配合 rem。原理是使用 vw 设置根元素 html 字体的大小,当窗口大小发生改变,vw 代表的尺寸随着修改,无需加入媒体查询,页面中的其他元素仍使用 rem 为单位,就可实现响应式。

14.移动端适配方案有哪些?⭐

vw、rem、em、rpx、%

15、什么是浮动?⭐

设置浮动的图片,可以实现文字环绕图片。设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高。浮动造成的影响:使盒子脱离文档流,如果父级盒子没有设置高度,需要被子盒子撑开,那么这时候父级盒子的高度就塌陷了,同时也会造成后面的盒子布局受到影响。

16、清除浮动有哪些方法? ⭐
  1. 父级div定义height (只适合高度固定的布局)
  2. 结尾处加空div标签然后添加一个clear:both样式 (浮动多的话要加很多个div)
  3. 父级 div 定义 overflow:hidden 超出盒子部分会被隐藏 (不推荐)
  4. 父级div定义伪类:(推荐)
 clearfix:after
     {
          content:"";
          display:block;
          visibility:hidden;
          height:0;
          line-height:0;
          clear:both;
      }
17、css选择器有哪些?⭐

基本选择器:

  1. 标签选择器   ( div { } )
  2. id 选择器  ( id=”a”, #a { } )
  3. 类选择器 class (class=”b”, .b { } )
  4. 通配符选择器 ( * { } )

CSS3新增选择器:

1.层级选择器:
image-20241023152955159
2.状态伪类选择器
3.结构伪类选择器
4.表单伪类选择器
5.伪元素选择器
6.属性选择器

18、CSS 样式覆盖规则?⭐
  • 规则一:由于继承而发生样式冲突时,最近祖先获胜。
  • 规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。
  • 规则三:直接指定的样式发生冲突时,样式权值高者获胜。
  • 规则四:样式权值相同时,后者获胜。
  • 规则五:!important 的样式属性不被覆盖。
19、CSS 样式的优先级?⭐⭐
  1. **引入方式:**内联样式的优先级高于嵌入和外链,嵌入和外链的选择器相同就看他们在页面的插入顺序,后面插入的会覆盖前面的。
  2. **选择器优先级:**id 选择器高于 ( 类选择器/伪类选择器/属性选择器 ) 高于 ( 标签选择器/后代选择器/伪元素选择器 ) 高于 ( 子选择器/相邻选择器 ) 高于通配符 *。
  3. **继承样式:**继承样式是所有样式中优先级比较低的,浏览器默认样式优先级最低。
  4. !important:!important 最高权重,无论引入方式是什么,选择器是什么,它的优先级都是最高的。所以 !important 使用要谨慎,一定要优先考虑使用样式优先级的规则来解决问题而不是 !important 。只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。永远不要在插件中使用 !important ,永远不要在全站范围的 CSS 代码中使用 !important.

!important >> 内联样式 >> id 选择器 >> 类选择器/伪类选择器/属性选择器 >> 标签选择器/后代选择器/伪元素选择器 >> 子选择器/相邻选择器 >> 通配符 * >> 继承样式 >> 浏览器默认样式

20、display: none 和 visibily: hidden 区别? ⭐⭐
  1. **display:none:**隐藏对应的元素,整个元素消失不占空间。
  2. **visibily:hidden:**隐藏对应的元素,元素还会占用空间。
  3. disapaly 还可以转换元素类型,可以转换成块级元素、行内元素,行内块元素、弹性布局、网格布局等。visibility 只能做隐藏。
21、相对定位,绝对定位,固定定位的区别?⭐⭐⭐
  1. **position:relative:**相对定位,相对于自己进行定位。
  2. **position:absolute:**绝对定位,相对于有相对定位的父级元素进行定位,没有就找 body。
  3. **position:fixed:**固定定位,相对于浏览器定位。
22、说几个未知宽高元素水平垂直居中方法? ⭐⭐⭐
  • **绝对定位:**通过 left,top 和 transform 属性实现水平垂直居中,其中 translate 属性取值为负数时表示向左和向下移动。这种方式兼容性好,被广泛使用的一种方式。
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
  • **弹性布局:**设置父级为弹性盒子:display:flex ,设置水平和垂直居中:**justify-content:center、align-items:center。**这种方式代码简洁,但是兼容性 ie11 以上支持。
<style>
    .box {
        width: 400px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
    }
    .child {
        width: 200px;
        height: 150px;
        background-color: red;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
  • **网格布局:**设置父级为网格元素:**display: table-cell,**设置水平和垂直居中:**justify-content:center、align-items:center。**这种方式代码简洁,但是兼容性 ie10 以上支持
  • **表格布局 :**设置父级为表格元素:display: table-cell,内部元素水平和垂直居中:text-align: center、vertical-align: middle,设置子元素为行内块:**display: inline-block。**兼容性好。
<style>
    .box {
        width: 400px;
        height: 300px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        border: 1px solid black;
    }
    .child {
        width: 200px;
        height: 150px;
        background-color: red;
        display: inline-block;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
n: center;
        vertical-align: middle;
        border: 1px solid black;
    }
    .child {
        width: 200px;
        height: 150px;
        background-color: red;
        display: inline-block;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值