前端基础面试题(HTML和CSS)及简单回答

首先是HTML部分 **1.html中能使用多个header(h5新增)元素吗 答:可以,因为这些标签和div是一样的可以多次使用,进行区分的话可以加类名或者ID.

*2.中的alt属性有什么作用？ 答: (1)当图片加载不出的时候显示文字,文字内容为alt后面的内容. (2)增强页面的语义,搜索时可以搜索到相关信息,网站爬虫根据其属性值来理解图片的内容，因此 alt 属性对 SEO（搜索引擎优化）有用.

3.写了无数个 ，那么它是什么意思？ 答:告知浏览器以哪种规范来解析页面,如果不写,可能出现不同的浏览器渲染出的效果不同的结果(不兼容的渲染模式-怪异模式). 这里的意思是,使用标准模式来进行渲染

4.html 和 xhtml html5的关系 xml 答: html(超文本标记语言)是 SGML(标准通用标记语言) 的一个简化版 . xhtml 属于HTML+xml 进行xml严格化的结果是产生了更严格的html HTML5 ≈ HTML + CSS 3 + JavaScript + API. 默认 移动web

5.html5有什么变化 答:HTML5新增一些特性：

1. 用于绘画的 canvas 元素
2. 用于媒介回放的 video 和 audio 元素
3. 对本地离线存储的更好的支持
4. 新的特殊内容元素，比如 article、footer、header、nav、section

6.em 和 i 有什么区别 答:em有语义表增强和倾斜,i只是单纯的倾斜,通常使用i标签来放字体图标.

7.语义化的意义是什么/为什么要使用语义化 答: 开发者容易理解 机器容易理解结构（搜索 读屏软件） 有利于seo

8.哪些元素可以自闭合 答: 单标签如input,img,br,hr.meta link

9.form的作用有哪些? 答: 直接提交表单 使用submit/reset按钮 便于浏览器保存表单 第三方库可以整体提取值 第三方库 可以进行表达验证

CSS部分 1.浏览器如何解析CSS 答:对标签由内向外解析, 例如div>a>span,则先解析最里面的标签span,原因:快!

2.伪类和伪元素的区别 双冒号和单冒号的区别 答: 双冒号为伪元素(不在文档书中显示),h5之后才用的双冒号;如 ::before ::after 单冒号伪类,(用于对文档树中已有的元素处于某种状态时添加状态)常见的有: :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素； :visited 应用于被访问过的链接，与:link互斥。 :focus 应用于拥有键盘输入焦点的元素

3.遇到过图片下方有3px像素的空隙吗，如何解决的 答: 原因是图片属于行内块元素,默认与文字基线对齐,可以给图片设置vertical-align属性:moddle或者给图片转块. 可以看我写的另一个博客: https://blog..net/weixin_44134588/article/details/106927317

4.两个并排的inline-block中有间隙，如何处理的？ 答: 在html结构中使两个元素不换行,或者设置font-size=0;

5.元素加上浮动后，都有哪些效果？ 答: 脱离标准流,靠左上对齐, 具有类似行内块元素的一些属性,可以直接设置宽高 不会压住其他盒子,不影响其他块级元素内容，但影响文本. 不会撑开父盒子的高度.(这时需要清除浮动)

6清除浮动的方法: 答; 设置overflow:hidden 伪元素清除:

div::before {
          
   
            display: inline-block;
            content: 1;
            height: 0;
            line-height: 0;
            visibility: hidden;
        }

        div {
          
   
            *zoom: 1;
        }

        div::after {
          
   
            display: inline-block;
            content: 1;
            height: 0;
            line-height: 0;
            visibility: hidden;
        }

6.CSS 的动画实现方式有几种 答; transtion:过渡动画 keyframes:关键帧动画animation,