web前端面试之html（5）

最新推荐文章于 2024-03-25 15:23:11 发布
最新推荐文章于 2024-03-25 15:23:11 发布
阅读量104 收藏
点赞数
分类专栏： 前端 web前端面试题 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36987708/article/details/108052854
版权

目录

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

行内元素有哪些？块级元素有哪些？

Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

doctype(文档类型) 的作用是什么？

data-属性的作用是什么？

说说你对语义化的理解？

HTML和XHTML的区别是什么？

div和span的区别

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

iframe的优缺点？

img中的alt与title属性

如何实现图片懒加载

html预加载link中的rel属性是什么值？

HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？

如果网页内容需要支持多语言，你会怎么做？

如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？

html5的离线存储技术

link和import区别

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  新特性：

  HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
  拖拽释放(Drag and drop) API
  语义化更好的内容标签（header,nav,footer,aside,article,section）
  音频、视频API(audio,video)
  画布(Canvas) API
  地理(Geolocation) API
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除
  表单控件，calendar、date、time、email、url、search
  新的技术webworker, websocket, Geolocation

  移除元素：
  纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  对可用性产生负面影响的元素：frame，frameset，noframes；
  h5新标签兼容：
  IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
 
  如何区分：
  DOCTYPE声明\新增的结构元素\功能元素

行内元素有哪些？块级元素有哪些？

行内元素：span，a，label，input，img，strong，em，b、i、u、br；

块级元素：div，p，h1-h6，form,ul，li，table，<address>、<blockquote>

Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

doctype(文档类型) 的作用是什么？

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。有以下两个值：

  • 怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  • 标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明,浏览器按照自己的方式解析渲染页面（怪异模式），在不同的浏览器就会显示不同的样式。

注意以下几点：

  • <!DOCTYPE> 声明不是 HTML 标签；
  • <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前。
  • <!DOCTYPE> 不区分大小写
  • HTML 5的doctype声明是<!DOCTYPE html>

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。

data-属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取

说说你对语义化的理解？

语义化的HTML就是：

简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。

通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据<p>判断内容是段落、<input>标签是输入框等。

好处：

  •  1、HTML结构清晰
  •  2、代码可读性较好
  •  3、无障碍阅读
  •  4、搜索引擎可以根据标签的语言确定上下文和权重问题
  •  5、移动设备能够更完美的展现网页（对css支持较弱的设备）
  •  6、便于团队维护和开发
  • 1、去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；< strong > 是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
  • 2、你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
  • 3、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
  • 4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
  • 5、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

HTML和XHTML的区别是什么？

主要的不同：

  • XHTML可以理解为html+xml，就是用xml的语法来规范html。
  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

div和span的区别

（一)span和div功能区别

span和div区别在于，div是一个块级元素，它包含的元素会自动换行。

而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。

span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。

（二）span和div使用区别

span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。

span可以通过css声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span可以很好解决这些问题

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

iframe的优缺点？

img中的alt与title属性

如何实现图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
通常可以借助IntersectionObserver API。

html预加载link中的rel属性是什么值？

link元素规定了外部资源与当前文档的关系。常用于链接样式表，创建网站图标，预加载资源等。
用于前端界面性能优化，rel 的属性值可以为preload、prefetch、dns-prefetch。

preload

控制当前界面的资源下载优先级，浏览器必须下载资源。
举个例子： 网站的一个界面 A的 css 样式文件中使用了外部字体文件，正常情况下该字体的下载是在 css 解析的时候完成的。想想字体文件好像在 css 样式文件解析之前下载到本地比较好。那么我们就可以在head标签设置字体的 preload。

<link rel="preload" href="https://example.com/fonts/font.woff" as="font">

prefetch 预获取

用户在使用当前界面时，浏览器空闲时先把下个界面要使用的资源下载到本地缓存。浏览器下不下载不可知。
举个例子： 网站有A，B 两个界面。当用户访问界面 A 时有很大的概率会访问 B 界面（比如登录跳转）那么我们可以在用户访问界面 A 的时候，提前将 B 界面需要的某些资源下载到本地，性能会得到很大的提升。那么我们只需要在界面 A.html 文件中设置如下代码：

<link rel="prefetch" href="/uploads/images/pic.png">

dns-prefetch

先把要跳转的域名解析，减少时间。

HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？

如果网页内容需要支持多语言，你会怎么做？

考虑:

  • 应用字符集的选择 utf-8
  • 语言书写习惯&导航结构
  • 数据库驱动型网站

具体做法：

  • 静态：就是为每种语言分别准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。
  • 动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的地方统一采用语言变量来表示，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字

如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

  • 开放网络平台（Open Web Platform）是一些开放的（免版权）技术的集合，这些技术激活了互联网。使用开放网络平台时，每个人都有权实现 Web 上的一个组件，而不用向任何人索取许可和证书。
  • 构建模块，指的应该是开放网络平台这个技术集合中的技术：
  • HTML
  • DOM
  • CSS
  • SVG
  • MathML
  • Web APIs…
  • EcmaScript / JavaScript
  • HTTP
  • URI
  • Media Accessibility Checklist

如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？

首先这是个MIME类型，意思就是告诉浏览器，要用xhtml的格式来解析我发给你的页面；
xhtml 语法要求严格，必须有head、body 每个dom 必须要闭合。空标签也必须闭合。例如<img />, <br/>, <input />等。另外要在属性值上使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。
如果页面使用’application/xhtml+xml’,一些老的浏览器会不兼容。
IE6，7，8不支持，IE6，7，8支持text/html。

html5的离线存储技术

html5的离线存储技术，是基于一个新建的.appcache文件的缓存机制（并不是存储技术）。通过这个文件上的解析清单离线存储资源，这些资源就会想cookie一样被存下来。之后网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

link和import区别

linkimport
页面被加载，link会同时被加载@import引用的css会等到页面被加载完成之后再加载。
只适用与2.1之后的版本link是没有任何兼容问题的。
支持使用js去控制dom改变样式不支持
 只能加载css

h5中的<video>支持的媒体格式

  1. MPEG-4 
  2. ogg   
  3. webm

 

qq_36987708
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024高频前端面试题（含答案）
weixin_44672169的博客
04-22 21万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
web前端面试题（必背面试题）
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值
BOKEhhh的博客
04-05 2万+
本文记录了对HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值的效果的测试。 使用<frame>标签，做一个有框架的网页，为了能看出HTML中<a>标签的target属性的“_self”和“_parent”这2个属性值的不同效果，需要这个网页还有框架的嵌套，框架思路如下图所示： 该...
JavaScript中关于HTML属性及其值的操作
dreamerzhang66的博客
05-19 1375
其一；可直接用.获取的属性为：ID classname type name value  onclick等事件         这种属性可以直接用=号赋值来改变值其二；.attributes[123]来获用nodename/nodetype/nodevalue取改变值或者用。getAtribute（“属性”）来获取值注意注意注意注意此方法不能改变属性值。改变属性值用setAttribute（“属性...
最新Web前端面试题精选大全及答案
HanXiaoXi_yeal的博客
01-07 18万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
热门推荐
xm1037782843的博客
06-15 56万+
2023前端最新最全面试题 javascript面试题 vue面试题 最新的全套面试题 附带答案
2024Web前端面试大全
知识点沉淀包括不限于前端
03-25 4914
html、css、js、react、vue、typescript、webpack、node、小程序、面试流程、项目优化、打印题、手写题、业务题、源码
web前端面试题（全）
奋斗到天明~
04-17 6万+
近来看到网上格式各样的web前端求职的面试题，接下来我用我的经验总结了一套在面试过程中高频率问到的面试题，希望能帮助各位求职者在求职的过程中顺利通过，废话不多说，直接说题。。。 一、HTML5部分 1.说一下对css盒模型的理解 答：css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素...
web前端常见面试题总结
凭时间赢来的东西，时间肯定会为之作证
06-22 8万+
人生的路上少不了尝试，人人都是打工人，但愿这份面试题可以帮助到你 H5有哪些新特性？ 绘画canvas（随时随地绘制2D图形）、svg（描述XML中的2D图形）元素 语义化标签header、ment、content、footer… 新增的input类型和属性 音频,视频 H5地理定位 H5拖放 H5 Web Storage存储 H5应用程序缓存 H5中的Web workers H5服务器发送事件（server-sent event）允许网页获得来自服务器的更新 WebSocket在单个TCP连接上进
2024年前端面试题汇总
sun_qqq的博客
02-08 7万+
最近面试被打击的体无完肤，于是把面试题记录下来分享一下。vue真是必问框架，八股文该背的还是得背！
web前端面试重点难点问题
01-08
Vue.js 服务端渲染（SSR）允许在服务器端生成 HTML 字符串，然后发送到客户端，最后在客户端将静态标记转化为交互式应用。这优化了首屏加载速度，有利于SEO，并提供了更好的用户体验。 【Vue.js 性能优化】 Vue ...
前端面试必备之html5的新特性
01-19
今天来谈谈前端面试中基本上每次一面的时候都会被问到的一个问题，那就是html5的新特性。这个是学习前端必须掌握的基础知识。 新增的元素 html5新增了一些语义化更好的标签元素。 结构元素 article元素，表示页面中...
web前端面试题5.doc
10-21
【网页前端工程师面试知识点】 1. **填空题** ...以上内容涵盖了HTML、CSS以及一些前端开发中常见的问题和解决方案，是前端面试中的重要知识点。掌握这些基础，有助于在面试中表现出扎实的技术功底。
前端面试题之Html相关题集.zip
最新发布
06-21
...文档声明如`<!... ...块级元素如`<div>`、`<p>`、`<h1>`-`<h6>`等占据整行，可以设置宽高；内联元素如`<span>`、`<a>`、`<img>`等只占据自身内容大小，不能...通过系统学习和实践，可以提升HTML技能，更好地应对前端面试。
2020年最新web前端面试题
04-26
在2020年的Web前端面试中，面试官们通常会关注候选人的HTML、CSS、JavaScript基础知识以及在实际web开发中的应用技术。这些是构建现代Web应用的核心技能，也是前端开发者必须掌握的关键知识点。 首先，HTML（超文本...
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can‘t find stylesheet
qq_36987708的博客
03-23 8464
把angular项目从git拉去下拉后，通过npm install @angular/cli@9.1.12安装项目的node_module后，再通过ng serve启动项目时一直报错 报错信息如下： ERROR in ./src/assets/custom-bootstrap-utilities.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node
ant-design-vue checkbox checked不生效
qq_36987708的博客
05-17 8259
ant-design-vue checkbox checked不生效 https://segmentfault.com/q/1010000018981910 基本用法
浙江大华前端面试题
qq_36987708的博客
07-30 2302
1、行内标签和块组标签有哪些 块组标签：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 行内标签：a、span、em、strong、b、i、u、label、br、img； 块级元素和内联元素的区别 1. 块级元素会独占一行，其宽度自动填满其父元素宽度 行内元素不会独
“export ‘SearchList‘ was not found in ‘../components/SearchList‘，vue导入组件报错错误
qq_36987708的博客
03-31 1818
做vue项目时几个页面公用一个查询列表，就想写个公用组件，写完后通过import {SearchList}from'../components/SearchList';导入时，一直报错：importSearchListfrom'../components/SearchList'; 查下资料才发现引入组件时不需要加{}，方法引用才需要加上它“{}”。 ...
Web前端面试宝典：从HTML到CSS的知识全解
Web 前端面试宝典 本资源摘要信息涵盖了 Web 前端面试的关键知识点，涵盖 HTML、CSS、JavaScript 等多个方面。 一、HTML 和 CSS 基础知识 1. 浏览器内核：IE 浏览器使用 Trident 内核，Firefox 使用 Gecko 内核，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值