前端基础面试题(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
5. 新的表单控件，比如 calendar、date、time、email、url、search。它最大的一个特点就是不会break已有的网页。虽然HTML5添加了很多新特性，但是并没有得到浏览器的普遍支持，所以其他HTML还是很重要的，还在使用。
   本段引用:原文链接：https://blog.csdn.net/mayfla/article/details/42931453
   H5中a可以嵌套块级元素,H5之前不行

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.csdn.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,