一,HTML5引入了哪些新特性?
HTML5在HTML4的基础上新增了很多新元素,根据标记内容的类型不同,可以把新的元素分为以下几种类型
1,结构元素
也就是通常说的语义化标签。主要以下内容。
元素名称 | 说明 |
---|---|
header | 表示页面中一个内容的区块或整个页面的标题 |
footer | 表示页面或一个页面内容的脚注。 |
section | 表示页面中的一个内容区块 |
article | 表示页面中一块与上下文不相关的独立内容 |
aside | 表示article元素内容之外的,与aricle元素内容相关的辅助信息 |
nav | 表示页面中导航链接的部分 |
mian | 表示页面中的主要内容 |
figure | 表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元 |
2,功能元素
根据页面内容的需要,HTML5新增了很多专用的功能元素,内容主要如下
元素名称 | 说明 |
---|---|
video | 定义视频,比如电影片段或其他视频流。 |
audio | 定义音频,比如音乐或其他音频流 |
embed | 用来插入各种多媒体,格式可以是Midi,Wav,MP3等等 |
canvas | 表示图形,如图标或其他图像。这个元素本身没有行为,仅提供一块画布,它把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。 |
使用方式:
//video
<video src="movie.ogg" controls="controls">video元素</video>
//audio
<audio src="someaudio.wav">audio元素</audio>
//embed
<embed src="horse.wav"/>
//canvas
<canvas id="myCanvas" width="200" height="200"></canvas>
3,表单元素
通过type属性,HTML5为input元素新增了很多类型。其主要内容如下
名称 | 格式 | 说明 |
---|---|---|
tel | <input type="tel"/> | 表示必须输入电话号码的文本框 |
search | <input type="search"/> | 搜索文本框 |
url | <input type="url"/> | 表示必须输入URL地址的文本框 |
<input type="email"/> | 必须输入电子邮件的文本框 | |
color | <input type="color"/> | 颜色文本框 |
date/month/week… | <input type="date"/> | 各种日期框 |
4,全局属性
HTML5新增了8个全局属性,可以用于任何HTML元素。
名称 | 介绍 |
---|---|
contentEditable | 允许用户可以在线编辑元素中的内容。 |
contextmenu | 用于定义
元素的上下文菜单。上下文菜单在用户右键单击元素是出现
|
data-* | 其可以自定义用户数据 |
draggable | 定义元素是否可以被拖动。true-可拖动 false-不可拖动 auto-浏览器默认 |
dropzone | 定义在元素上拖动数据时是否赋值,移动或链接被拖动数据。属性值copy/move/link |
hidden | 设置元素的可见状态,为true时不可见 |
spellcheck | 是否对元素进行拼写和语法检查 |
translate | 是否应该翻译元素内容 |
5,新增存储方式
HTML5新增了localStorage,sessionStorage,indexedDB三种数据存储方式。
localStorage用于永久保存客户端的少量数据。
sessionStorage用于临时保存客户端的少量数据,关闭浏览器窗口时,数据会被删除。
indexedDB用于永久保存客户端的大量数据。
二,浏览器乱码的原因是什么,如何解决?
浏览器乱码主要有以下一些原因
网页源代码的编码格式与乱码文件的编码格式不统一,如网页源代码的格式为UTF-8,而乱码文件的编码格式为GBK,两者冲突了。
解决方案:统一编码格式,
在控制台通过 document.charset查看网页源代码的编码格式
然后查看与文件格式是否保持一致,不一致则修改。
三,请描述 script、script async 和 script defer 的区别?
script
浏览器在解析HTML的时候,如果遇到一个没有任何属性的script标签,就会暂停解析,先发送网络请求获取该JS脚本的代码内容,然后js引擎会执行这段脚本,执行完毕之后在继续解析。其示意如图所示:
script async
async是异步的意思,当浏览器遇到带有async的script脚本时,会异步发送网络请求获取JS脚本,不会停止解析HTML。当获取JS脚本后,如果HTML解析完成,则直接执行脚本,若HTML解析未完成,则暂停HTML解析,执行JS脚本,脚本执行完毕之后再进行HTML解析。其示意图如下:
HTML解析以完成:
HTML解析未完成:
script defer
defer表示延迟,当浏览器遇到带有defer的script脚本时,其发送网络请求也是异步的,但JS脚本的解析会延迟到HTML解析完毕之后再进行。其示意图如下:
四,src和href有哪些区别?
href
href表示超文本引用,是在当前元素和引用资源之前做一个链接的桥梁。主要用于link,a等标签。若在文档中添加href,浏览器会识别该文档为CSS文件,就会并行下载资源并不会停止对当前文件的处理。
src
src表示引用外部资源,并将外部资源下载并替换到文档中当前标签所在位置。主要用于script,img,iframe标签。当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此。
五,iframe的作用以及优缺点
iframe标签是一个内联框架,即用来在当前HTML标签中嵌入另一个文档的,且所有主流浏览器都支持iframe标签。它有所在的优势,也有一些缺陷。
优点
- 简单易用:只需一个iframe标签就可以嵌入另一个网页,能够将不同的内容嵌入到同一个页面中,很灵活,自由。
- 分割界面:使用iframe可以将页面分割成多个区域,每个区域内容不同。
- 跨域访问:通过iframe可以嵌入来自其他域的网页,实现跨域数据共享。
缺点
- 维护性高:iframe中的内容是独立的网页,会增加页面结构的复杂度,难以维护。
- 影响加载性能:每个iframe都需要加载额外的资源,包括HTML,CSS和JavaScript文件,这会增加页面的加载时间和带宽消耗。
- SEO问题:搜索引擎通常不会对iframe的内容进行检索,这会影响到网站的搜索引擎优化(SEO)。
六,行内元素和块级元素分别有哪些,可以如何转换?
说道行内元素和块级元素,首先得大致了解一下它们的含义。
块级元素
块级元素占据了其父元素的整个空间,因此成为了一个“块”。简单来说,就是块级元素独占一行。每个块级元素都会独占一行,默认垂直向下排列。
块级元素的宽度,高度都是可以设置的。宽度没有设置时默认100%,高度由内容决定。
常见的块级元素及其含义
名称 | 含义 |
---|---|
div |
元素没有特定的含义。除此之外,由于它属于块级元素
|
table | 表格标签 |
form | 表单标签 |
p | 段落标签 |
ul | 无序列列表标签 |
h1~h6 | 标题元素标签,h1最大,h6最小 |
hr | 表示段落级元素之间的主题转换 |
pre | 该标签表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来 |
address | 表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息 |
行内元素
顾名思义,行内元素根据名称理解就是在单独行内部的元素,也就是说这个行内元素和其他的行内元素是在一条水平线上排列的,不会换行。
行内元素的宽度,高度设置都是无效的,由它的内容决定。内容的宽度,高度决定了行内元素的宽度,高度。
常见的行内元素及其含义
名称 | 含义 |
---|---|
span | 该标签表示短语内容的通用行内容器,并没有任何特殊语义 |
a | 可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接 |
img | 图像嵌入元素标签 |
input | 输入元素标签 |
br | 文本标签中的换行标签,还有一些其他的文本标签,等等,不举例了。 |
转换
通过display属性可以将行内元素和块级元素相互转换。display:inline
:转化为行内元素display:block
:转化为块级元素display:inline-block
:转化为行内块级元素
七,对W3C标准的理解?
W3C标准
W3C标准是由万维网联盟发布的一系列标准和指南,用于确保网络技术的互操作性和可访问性。W3C规范定义了HTML 、CSS、XML、DOM、SVG等一系列网页技术的标准。主要有如下作用:
- 统一开发流程,使用统一标准化工具
- 学习降低成本
- 跨平台,方便迁移不同设备
- 降低代码维护成本
标准举例
- 标签字母要小写:
<div></div>
- 标签要闭合:
<img src="" alt="" />
- 标签不允许随意嵌套
<!--正确-->
<div>
<i></i>
</div>
<!--错误-->
<div>
<i>
</div>
</i>
参考文章
图解 script 标签中的 async 和 defer 属性 - 掘金
【前端面试题】2023年前端面试真题之HTML篇 - 掘金
2022高频前端面试题——HTML(上篇) - 掘金
前端面试系列初章——HTML & CSS 篇 - 掘金