HTML5/CSS3面试题

最新推荐文章于 2026-07-01 16:27:56 发布

原创最新推荐文章于 2026-07-01 16:27:56 发布 · 797 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

初级程序员前端面试总结

面试题：什么是语义化标签

1．易读性和维护性更好。
2．seo成分会更好，蜘蛛抓取更好。
3.IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理.

HTML5 新增加了如下语义化标签 :

头部标签 : <header>
导航标签 : <nav>
内容标签 : <article>
块级标签 : <section>
侧边栏标签 : <aside>
尾部标签 : <footer>

上述语义化标签对应的结构位置如下 :

面试题：“ ::before ” 和 “ :after ”中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。

:伪类、::伪元素   ===> 是为了做区分

:before 选择器向选定的元素前插入内容。
:after 选择器向选定元素的最后子元素后面插入内容。

*** 作用：清除浮动、样式布局上也有作用

常见的伪类：
    :hover - 鼠标悬停时的状态
    :active - 元素被激活（如按下）时的状态
    :focus - 元素获得焦点时的状态
    :first-child - 第一个子元素
    :last-child - 最后一个子元素
    :nth-child(n) - 第 n 个子元素
    
常见的伪元素：
    ::before - 在元素内容之前插入内容
    ::after - 在元素内容之后插入内容
    ::first-line - 选择元素的第一行
    ::first-letter - 选择元素的第一个字母
    ::selection - 选择用户选中的部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-align: center;
            border: 10px solid #ccc;
        }

        .box sapn {
            position: relative;
        }

        .box span:before {
            content: "";
            position: absolute;
            left: -30px;
            top: 50%;
            margin-top: -5px;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 100%;
        }

        .box span:after {
            content: "";
            position: absolute;
            right: -30px;
            top: 50%;
            margin-top: -5px;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 100%;
        }
    </style>
    </style>
</head>

<body>
    <div class='box'>
        <span>推荐</span>
    </div>
</body>

</html>

面试题：如何关闭iOS键盘首字母自动大写

<input type="text" autocapitalize='off'>

面试题：怎么让Chrome支持小于12px的文字?

Chrome默认字体大小是：16px
**每个浏览器默认字体大小可能都不一样

<style type="text/css">
    div{
        font-size:10px;
    }
    div span{
        display: inline-block;
        -webkit-transform:scale(1.6);
    }
</style>

面试题：rem和em区别

相对于font-size

em针对于父元素的font-size
rem针对于根(html)元素的font-size

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

<style>
    a,button,input,textarea{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
</style>

面试题：webkit表单输入框placeholder的颜色值能改变吗?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        input::-webkit-input-placeholderf
            color:red;
        }
</style>
</head>
<body>
    <input type="" name="" placeholder="默认值">
</body>
</html>

面试题：禁止ios长按时不触发系统的菜单，禁止ios&android长按时下载图片

// 1．禁止ios长按时触发系统的菜单
html,body{
	touch-callout: none;
	Fwebkit-touch-callout: none;
    
    user-select:none;
	-webkit-user-select:none;
}

面试题：禁止ios和android用户选中文字

html,body{
	user-select:none;
	-webkit-user-select:none;
}

面试题：自适应

淘宝无限适配【移动端】：淘宝无限适配＋布局单位使用rem

面试题：响应式

1.是什么?
	一个URL可以响应多端
2.语法结构
	@media only screen and (max-width: 1000px){
		ul li:last-child{
		display: none;
		}
	}

only：可以排除不支持媒体查询的浏览器
screen：设备类型
max-width | max-height
min-width I min-height

3.响应式图片【性能优化】

<picture>
	<source srcset="1.jpg" media='(min-width:1000px)'>
	<source srcset="2.jpg" media='(min-width:700px)'>
	<img srcset="3.jpg">
</picture>

面试题：布局方案

一、什么情况下采用响应式布局
	数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
	
	例如：公司的官网、专题页面
	特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc+移动端应该做什么样的布局方案
	注意：访问量还可以或者比较大，类似于淘宝网。
	
	pc是一套，会加入一点点响应式。
	移动端是一套，会使用自适应的布局方式。
	
三、pc的设计图
	ui:1980
	笔记本电脑：1280
	
	ui图的宽度和电脑的宽度不对应该怎么办？
		1．把ui图进行等比缩放，缩放成和电脑一样的尺寸
		2．换1980的电脑

四、移动端的设计图
	宽度：750
	因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点

标签

#html5 #css3 #前端