前端面试题总结——HTML(持续更新中)

afishhhhh 发布于2019-08-01 18:38 / 1567人阅读

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。

前端面试题总结——HTML(持续更新中) 1.什么是HTML？

HTML：HyperText Markup Language超文本标记语言

2.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言

3.简述一下你对HTML语义化的理解？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

4.浏览器页面有哪三层构成，分别是什么，作用是什么?

浏览器页面构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

5.Doctype作用？严格模式与混杂模式如何区分？

（1）作用：用于告知浏览器的解析器用什么文档标准解析这个文档。
（2）区分:如果HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。

6.Quirks模式是什么？它和Standards模式有什么区别

区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

7.页面导入样式时，使用link和@import有什么区别？

（1）作用不同：link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；
而@import是CSS提供的，只能用于加载CSS;
（2）加载不同：页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）兼容不同：import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

8.知道的网页制作会用到的图片格式有哪些？

Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望代替GIF成为下一代动态图标准。

9.文本标记

1.特殊字符
  1.  表示一个空格
  2.< 表示一个<
  3.> 表示一个>
  4.© 表示版权
  5.¥ ￥
2.文本样式
  1. :加粗
  2. :斜体
  3. :下划线
  4. :删除线
  5. :上标
  6. :下标

10.什么是锚点

 锚点就是网页中一个记号，可以通过超级链接跳转到该记号位置处。
 1.定义锚点
    1.使用a标记的name属性定义锚点
      
    2.使用任意标记的id属性定义锚点
      
 2.链接到锚点
      本页面
      其它页面

11.div+css的布局有什么优点？

（1）改版的时候更方便只要改css文件。
（2）页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
（3）易于优化（seo）搜索引擎更友好，排名更容易靠前。

12.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select
（2）块级元素有：div p ul ol li dl dt dd h1-h6
（3）常见的空元素：br-换行，hr-水平分割线；

13.iframe有那些缺点？

1.iframe会阻塞主页面的Onload事件，会影响页面的并行加载；
2.搜索引擎的检索程序无法解读这种页面，不利于SEO;
改进：通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

14.Label的作用是什么？是怎么用的？

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

15.隐藏元素的几种方法

（1）display:none;
（2）visibility:hidden;
（3）opacity:0;
（4）position:absolute; left:-10000px;

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

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

17.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

18.如何给背景图片加上超链接


    


.banner-a{
      width:100%;
      height: 8rem;
      display: inline-block;
}

19.清除浮动的方法有哪些？

第一种：clear:both

在父元素的里面添加一个空的clear的div（跟浮动的子级同级），然后再为这个类添加属性值clear:both;便可以清除浮动。

第二种：overflow：hidden

在父元素的样式中添加overflow: hidden;也可以清除浮动，如下css代码，但不提倡使用这个方法，overflow: hidden;还有一个意思就是隐藏超出的部分，处理不好还是会给页面带来麻烦。

第三种：clearfix(推荐使用)

1.在父集元素类名中添加 clear-fix
2.写伪类样式




            
                样式方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51884.html

前端面试题总结——H5（持续更新中）

摘要：前端面试题总结持续更新中为什么只需要写需要来规范浏览器的行为让浏览器按照它们应该的方式来运行基于所以需要对进行引用，才能告知浏览器文档所使用的文档类型。前端面试题总结——H5（持续更新中） 1.HTML5 为什么只需要写？ HTML5 需要doctype来规范浏览器的行为,让浏览器按照它们应该的方式来运行； HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档...

coolpail 2019-06-26 17:34 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

binta 2019-08-26 17:15 评论0 收藏0
前端面试题总结——JS（持续更新中）

摘要：在此基础上加入了回调函数，加载完之后会执行中定义的函数，所需要的数据会以参数的形式传递给该函数。通常的做法是，为它们指定回调函数。前端面试题总结——JS（持续更新中） 1.javascript的typeof返回哪些数据类型 Object number function boolean underfind string 2.例举3种强制类型转换和2种隐式类型转换？强制（parseIn...

shery 2019-08-22 16:20 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0