HTML常见面试题

简介: HTML常见面试题

1. svg标签的目的是什么?


用可伸缩矢量图来画图或文本


2.分析下面代码


<html>
 <head>
 <script>
 function myFunc() {
 document.write(a);
 document.write(func());
 var a = 1;
 function func() {
 return 2;
 }
 }
 </script>
 </head>
 <body>
 <p>1</p>
 <button onclick = "myFunc()">点击</button>
 </body>
 </html>
点击按钮后页面上的最终输出结果为
undefined2



3. 在HTML中嵌入PHP代码,有几种方法?


1.以“<?”开头,以“?>”结束,中间为PHP操作代码

2.以<script language=“php”>开头,</script> 结束,中间为PHP操作代码

3.以”<?php开头,以“?>”结束,中间为PHP代码。


4. Label 的作用是什么?


label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。


5. HTML5 的 form 如何关闭自动完成功能?


将不想要自动完成的 form 或 input 设置为 autocomplete=off


6. 什么是BFC?


BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box 参与, 它规定了内部的Block-level Box 如何布局,并且与这个区域外部毫不相干。


7. 标签上title 与 alt 属性的区别是什么?


Alt 当图片不显示时,用文字代表。Title为该属性提供信息


8. 改变元素的外边距用什么属性?改变元素的内填充用什么属性?


改变元素的外边距用 margin,改变元素的内填充用 padding。


9.在新窗口打开链接的方法是?


target:_blank。


10. 合理的页面布局中常听过结构与表现分离,那么结构是什么?表现是什么?


结构是 html,表现是 css。


11. display:none;与 visibility: hidden 的区别是什么?


display:none; 使用该属性后,HTML 元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden; 使用该属性后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。


12. 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?


标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin

低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin


13. CSS3新增伪类有那些?


p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。


14. 为什么要初始化CSS样式


因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。


15. 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?


浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题:

父元素的高度无法被撑开,影响与父元素同级的元素

与浮动元素同级的非浮动元素(内联元素)会跟随其后

若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

清除浮动的方式:

父级div定义height

最后一个浮动元素后加空div标签 并添加样式clear:both。

包含浮动元素的父标签添加样式overflow为hidden。

父级div定义zoom


16. 简述一下 src 与 href 的区别。


src 用于引用资源,替换当前元素;href 用于在当前文档和引用资源之间确立联系。


相关文章
|
存储 移动开发 前端开发
2023 最新前端面试题 (HTML 篇)
2023 最新前端面试题 (HTML 篇)
98 0
|
7月前
|
XML 移动开发 前端开发
常见的HTML面试题
【4月更文挑战第1天】常见的HTML面试题
39 0
|
7月前
|
存储 移动开发 前端开发
前端面试题之Html和CSS
前端面试题之Html和CSS
|
7月前
|
前端开发 网络协议 JavaScript
【前端面试题】 HTML+CSS篇
【前端面试题】 HTML+CSS篇
|
7月前
|
存储 前端开发 JavaScript
前端基础面试题(HTML,CSS,JS)
前端基础面试题(HTML,CSS,JS)
111 0
|
7月前
|
数据采集 前端开发 JavaScript
【面试题】常见前端基础面试题(HTML,CSS,JS)
【面试题】常见前端基础面试题(HTML,CSS,JS)
390 0
|
7月前
|
移动开发 前端开发 JavaScript
你可能不知道的HTML小技巧 面试题小技巧
你可能不知道的HTML小技巧 面试题小技巧
|
7月前
|
存储 移动开发 缓存
2022高频前端面试题汇总之HTML篇
2022高频前端面试题汇总之HTML篇
|
7月前
|
存储 缓存 前端开发
【前端面试题——html/css篇】
【前端面试题——html/css篇】
70 0
|
7月前
|
存储 移动开发 缓存
【前端实习生备战秋招】—HTML面试题汇总,建议收藏
【前端实习生备战秋招】—HTML面试题汇总,建议收藏