HTML常见面试题

是小圆子呀

于 2025-02-07 13:54:11 发布

阅读量791

点赞数 16

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_47094365/article/details/145493418

基础知识

HTML 是什么？
- HTML（HyperText Markup Language，超文本标记语言）是用来创建网页内容的标准标记语言，它使用标签来描述网页中的文本、图像、视频、链接等内容。
HTML 的基本结构是什么？
- 一个基本的 HTML 文档结构包括：
```
<!DOCTYPE html> 
<html> 
    <head> 
        <title>页面标题</title> 
    </head> 
    <body> 
        <h1>这是一个标题</h1> 
        <p>这是一个段落。</p> 
    </body> 
</html>
```
  - <!DOCTYPE html>：声明文档类型，指定 HTML5。
  - <html>：整个 HTML 文档的根元素。
  - <head>：包含文档元数据（如标题、字符集等）。
  - <body>：包含页面的内容。
什么是 HTML 标签？
- HTML 标签是 HTML 文档的基本构建块，用于定义网页的结构和内容。标签通常成对出现，像 <h1></h1>、<p></p> 等。
常见的 HTML 标签有哪些？
- 常见标签包括：
  - 标题标签：<h1> 到 <h6>。
  - 段落标签：<p>。
  - 超链接：<a>。
  - 列表标签：<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）。
  - 图像标签：<img>。
  - 表格标签：<table>、<tr>、<td>、<th>。
  - 表单标签：<form>、<input>、<textarea>、<button>、<select>。
  - 分隔符标签：<div>、<span>。
HTML 中如何插入图片？
- 使用 <img> 标签：
```
<img src="image.jpg" alt="图片描述" width="300" height="200">
```
  - src：图片的路径。
  - alt：图片的替代文本，供图片无法加载时显示。
  - width 和 height：指定图片的宽高。

中级知识

什么是 HTML 表单？如何创建一个表单？
- HTML 表单用于收集用户的输入。使用 <form> 标签来创建表单，包含不同的输入字段如文本框、单选按钮、复选框等。
```
<form action="submit.php" method="POST"> 
    <label for="name">姓名：</label> 
    <input type="text" id="name" name="name"><br> 
    <label for="email">邮箱：</label> 
    <input type="email" id="email" name="email"><br> 
    <input type="submit" value="提交"> 
</form>
```
  - action：表单数据提交的目标 URL。
  - method：表单提交方式（如 GET 或 POST）。
HTML 中的语义化标签是什么？为什么要使用它们？
- 语义化标签指的是那些可以明确表示内容含义的标签，比如 <header>、<article>、<section>、<footer> 等。使用语义化标签可以提高网页的可访问性、可维护性和 SEO 优化。
什么是 meta 标签，它的作用是什么？
- <meta> 标签用于提供关于 HTML 文档的元数据，如字符集、作者、描述等。它通常放在 <head> 部分。
```
<meta charset="UTF-8"> 
<meta name="description" content="这是一个网站的描述"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
HTML 中如何创建链接？
- 使用 <a> 标签：
```
<a href="https://www.example.com" target="_blank">访问网站</a>
```
  - href：链接的目标 URL。
  - target：指定链接的打开方式（_blank 表示新窗口）。

HTML 中如何嵌入音频和视频？

音频：使用 <audio> 标签：

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  您的浏览器不支持音频元素。
</audio>

视频：使用 <video> 标签：

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频元素。
</video>

高级知识

什么是 HTML5 中的新特性？
- HTML5 引入了许多新特性：
  - 新的语义化标签：<header>、<footer>、<nav>、<section>、<article> 等。
  - 新的表单控件：<input type="email">、<input type="date">、<input type="range"> 等。
  - 本地存储：localStorage 和 sessionStorage 用于存储数据。
  - 音视频支持：<audio> 和 <video> 标签。
  - 地理定位 API：可以获取用户的位置信息。
HTML5 中的 localStorage 和 sessionStorage 有什么区别？
- localStorage：用于存储永久性数据，直到被明确删除。
- sessionStorage：用于存储当前会话的数据，页面关闭后数据会被清除。
什么是 HTML5 的 Web Workers？
- Web Workers 允许在后台线程中执行 JavaScript 代码，从而避免阻塞主线程。适用于处理复杂计算、文件处理等任务。

如何使用 HTML5 实现表单验证？

HTML5 提供了原生的表单验证功能，通过在表单元素中添加适当的属性进行验证：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required minlength="6"><br>
  <input type="submit" value="提交">
</form>

required：表示该字段是必填的。
minlength：设置输入的最小长度。

什么是 HTML 中的 iframe，它的作用是什么？
- <iframe> 标签用于在当前页面中嵌套另一个 HTML 页面，通常用于嵌入视频、广告或其他网站的内容。
```
<iframe src="https://www.example.com" width="600" height="400"></iframe>
```