html前端面试题_前端html面试题-CSDN博客

本文链接：https://blog.csdn.net/qq_61195495/article/details/123360490

一、你做的页面在那些浏览器测试过？这些浏览器的内核分别是什么？

二、行内元素、块元素和行内块元素都有什么？区别是什么？

2.1行内元素的特征

2.2块元素的特征

2.3行内块元素的特征

三、标签上的title属性与alt属性的区别是什么？

四、html5新增的标签，并说明其语义和应用场景

五、html5有那些新特性、移除了那些元素？

5.1新特性

5.2移除的元素

六、iframe的优缺点？

七、设置文字水平居中的属性是？设置盒子水平居中的属性是？

一、你做的页面在那些浏览器测试过？这些浏览器的内核分别是什么？

浏览器	内核	优点
IE浏览器	trident内核	IE是WINDOWS自带绑定的，一般人都在用
Firefox（火狐浏览器）	gecko内核	Firefox使用的人也比较多，插件和应用非常多，不过启动慢，但是负载能力是最强的，同时打开20到30个网页占用电脑资源最少。
Safari（苹果浏览器）	Webkit内核	Safari有专门支持Windows的版本,一般来说下这样的版本在WINDOWS的系统上是没有任何问题的. 但是,Safari虽然外观完美但是所站内存也很大
Opera（欧朋浏览器）	以前是Opera现在改用Google Chrome的Bink内核	Opera 界面非常漂亮，速度也是最快的浏览器。
Chrome（谷歌浏览器）	BInk（基于webkit，Google与Opear Software 共同开发）	对于HTML5和CSS3(网页结构代码)它的支持的最好的。

二、行内元素、块元素和行内块元素都有什么？区别是什么？

	元素	转换
行内元素	span,a,i,strong,em,label,aelect,textarea	display:inline
块元素	div,p,nav,aside,header,footer,section,article,ul-li,address	display:block
行内块元素	img,input	display:inline-block

2.1行内元素的特征

设置宽高无效
对margin仅设置左右方向有效、上下无效；padding设置上下左右都有效，即会撑大空间
不会自动进行换行

<style>
  span{
      span{
            /* 设置宽高无效 */
            width: 500px;
            height: 300px;
            background-color: red;
            /* margin设置左右有效，上下无效 */
            margin: 20px 20px;
            /* padding上下左右都有效，会撑大空间 */
            padding: 20px 20px;
            color: white;
        }
  }
</style>

<!-- 不会自动换行 -->
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素</span>

2.2块元素的特征

能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块元素标签写在一起，默认排列方式为从上到下

<style>
    div{
        /* 能够识别宽高 */
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
        /* margin和padding都有效 */
        margin: 50px;
        padding: 30px;
    }
</style>

<!-- 可以自动换行，从上往下排 -->
<div>我是块元素</div>
<div>我是块元素</div>

2.3行内块元素的特征

能够识别宽高
margin和padding的上下左右均对其有效
不自动换行
默认排列方式从左到右

<style>
    input{
        /* 能够识别宽高 */
        width: 30px;
        height: 10px;
        /* margin和padding都有效 */
        margin: 50px;
        padding: 30px;
    }
</style>

<!-- 不会自动换行，从左往右排 -->
<input type="text">
<input type="text">

三、<image>标签上的title属性与alt属性的区别是什么？

title属性，鼠标移动到图片上会显示这个图片指定的属性文字，以此来对图片进行补充说明

alt属性，图像加载失败，会用alt中设置的文字来代替图像显示

四、html5新增的标签，并说明其语义和应用场景

header：头部。它经常包含 logo、页面标题和导航性的目录。
nav：导航栏
section：定义文档中的一个章节
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
footer：尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

五、html5有那些新特性、移除了那些元素？

5.1新特性

语义化标签（header,nav,footer,aside,article,section）
音频、视频API（audio,video）
画布（Canvas）API
地理(Geolocation) API
拖拽释放（Drag and drop）API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在页面会话结束时会被清除
新的表单元素，date、time、email、url、search