前端

# HTML 面试题

# 一、HTML5 新增的内容

  • 新增语义化标签
  • 新增表单类型
  • 表单元素
  • 表单属性
  • 表单事件
  • 多媒体标签

# 二、HTML5 新增的语义化标签

# 1.概念：

合理、正确的使用语义化标签来创建页面结构。

# 2.语义化标签：

序号 语义化标签 意思
1 Header 页面头部
2 main 页面主要内容
3 footer 页面底部
4 Nav 导航栏
5 aside 侧边栏
6 article 加载页面一块独立内容
7 Section 相当于 div
8 figure 加载独立内容（ 上图下字 ）
9 figcaption figure 的标题
10 Hgroup 标题组合标签
11 mark 高亮显示
12 dialog 加载对话框标签（必须配合 open 属性）
13 Embed 加载插件的标签
14 video 加载视频
15 audio 加载音频（支持格式 ogg，mp3，wav）

# 3.优点：

  • 在没有 css 样式的情况下，页面结构很好；
  • 代码结构清晰；
  • 有利于开发和维护；
  • 有利于搜索引擎优化（SEO）

# 三、HTML5 视频/音频标签的使用

# 1.视频标签：

<video src=””></video>

视频标签属性： src 需要播放的视频地址、设置播放视频的宽高，和 img 标签一样。

属性 意思
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属性，perload 属性会失效

# 2.音频标签：

<audio>
  <source src=”” type=””>
</audio>

音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用。muted 静音模式。

# 四、HTML5 的 drag api

事件的主体 怎么触发
dragstart 被拖放元素 在开始拖放被拖放元素时触发
darg 被拖放元素 在正在拖放被拖放元素时触发
dragenter 目标元素 在被拖放元素进入某元素时触发
dragover 目标元素 在被拖放在某元素内移动时触发
dragleave 目标元素 在被拖放元素移出目标元素是触发
drop 目标元素 在目标元素完全接受被拖放元素时触发
dragend 被拖放元素 在整个拖放操作结束时触发

# 五、块级/行内/行内块元素以及显示模式转换

# 1.块级元素:

独占一行，高、宽、内外边距可控制。（里面可放行内或者块级元素）
常见的块元素有：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<!-- 其中<div>是最典型的块元素 -->

# 2.行内元素:

一行可显示多个，高宽设置无效，水平方向的内外边距有效，垂直方向的内外边距无效。
（只容纳文本或其它行内元素）
常见的行内元素有：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<!-- 其中<span>是最典型的行内元素，又称为内联元素 -->

# 3.行内块/可变元素:

一行可显示多个（行内特点），宽、高、内外边距可控制（块特点）。

<img/>、<input/>、<td>、<button>
<!-- 他们同时具有块元素和行内元素的特点 -->

# 六、Doctype 的作用

Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

  • 严格模式：排版和 JS 运作模式是以该浏览器支持的最高标准运行。
  • 混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

← CSS 面试题 →