HTML基础知识

HTML（HyperText Markup Language）是创建网页的标准标记语言，它定义了网页的结构与内容，并告诉浏览器如何显示网页中的不同元素。

HTML基本结构

每个 HTML 文档都遵循一个基本的结构，该结构确定了如何构建和展示网页内容。以下是一个典型 HTML 文档的结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
  </body>
</html>

<!DOCTYPE html>：文档类型声明，用于告知浏览器本文档使用的HTML版本，这里是HTML5。
<html>：根元素，表示整个HTML文档。
<head>：文档头部，包含了文档的元数据，如文档的标题、字符编码等。
<title>：页面标题，它会显示在浏览器的标题栏或页面的标签上。
<body>：文档主体，页面上所有可见内容都放在这里面。

常用HTML标签与语义化

语义化标签明确说明了网页内容的结构和目的，这对于搜索引擎优化（SEO）和提升网页的可访问性至关重要。

<header>表示页面的头部区域，经常包含标题或导航栏：

<header>
  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于</a></li>
    </ul>
  </nav>
</header>

<footer>用于定义页脚部分，往往包含版权信息或一些链接：

<footer>
  <p>版权所有 &copy; 2024 我的网站</p>
</footer>

<article>定义独立的内容区块，如一篇博文：

<article>
  <h2>我的博客标题</h2>
  <p>这是我的博客内容...</p>
</article>

<section>定义文档的一个区段，比如一个章节：

<section>
  <h2>章节标题</h2>
  <p>这是一个章节的内容...</p>
</section>

表单和输入元素

表单是网页与用户交互的重要工具。下面的例子演示了一个简单的留言表单：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input id="name" type="text" name="name">
  <label for="email">电子邮件：</label>
  <input id="email" type="email" name="email">
  <label for="msg">留言：</label>
  <textarea id="msg" name="message"></textarea>
  <button type="submit">提交</button>
</form>

在这个例子中，<form>定义了表单的开始和结束，<input>创建了文本输入和电子邮件输入，而<textarea>允许多行文本输入。<button>标签定义了提交表单的按钮。

链接和资源引入

HTML 通过资源引入则使页面更丰富多彩，且互动性更强。

<a>标签用于创建超链接，可以链接到其他页面或页面内的特定部分：

<a href="https://example.com">访问例子网站</a>

<link>用于关联外部资源，如样式表：

<link rel="stylesheet" href="styles.css">

<script>用于嵌入或引用JavaScript代码，让网页变得可交互：

<script src="script.js"></script>

<img>用于在页面中嵌入图片：

<img src="image.jpg" alt="描述图片内容">

在HTML中链接和引入资源时，有一些最佳实践和注意事项可以确保您的页面加载正确且高效。

资源路径正确: 确保提供给<a>, <link>, <script>, <img>等标签的href, src属性指向的路径是准确的。路径可以是相对路径或绝对路径。
使用适当的URL协议: 当使用外部资源时，如果可能，请使用https://协议，它比http://更安全。
指定资源类型: 对于像<link>和<script>这样的元素，指定资源的类型可以帮助浏览器更有效地加载资源。例如，<script type="text/javascript">和<link rel="stylesheet" type="text/css">。
合理使用异步加载: 使用<script>标签的async或defer属性，可以控制JavaScript文件的加载方式，async表示脚本将异步加载，defer表示脚本会在文档解析完成后，但在DOMContentLoaded事件之前执行。
最小化和合并: 减少HTTP请求的数量是提高页面加载速度的有效方法。尽可能合并CSS文件和JavaScript文件，使用工具压缩它们以减小文件体积。
避免使用外链CSS和JS造成的阻塞: CSS应尽早加载，通常放在<head>中；而JS，如果可以的话，应放在页面<body>标签的底部，以避免阻塞页面渲染。
考虑资源加载的优先级: 对于一些不那么重要的资源，比如一些赋予页面额外功能的JavaScript插件，可以通过动态加载的方式来降低其加载的优先级。
设置好缓存策略: 使用Cache-Control HTTP响应头来控制资源的缓存，可以减少重复加载相同资源时所需的时间。
跨域问题: 如果您的资源存放在不同的域上，需要了解并正确设置CORS（跨源资源共享）策略。
资源完整性验证: 尤其是在引入第三方脚本时，使用SRI（子资源完整性）可以确保资源未被篡改。通过在<script>或<link>标签中添加integrity属性实现，这个属性包含了资源内容的哈希值。

HTML5的新特性

HTML5作为HTML标准的重大更新，引入了多项先进的特性和API，这些新特性极大地扩展了Web的可能性，提升了用户体验，并简化了开发者的工作。

Canvas元素

Canvas API为动态渲染像素图像提供了一块画布，它开启了Web上绘图的新纪元。Canvas非常适合创建图表、游戏或其他图形密集的应用程序。使用Canvas元素，可以执行绘画操作，如下面的例子所示：

<canvas id="drawingCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById('drawingCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 150);
</script>

在这个示例中，我们创建了一个画布，并使用Canvas的2D上下文来绘制了一个绿色的矩形。

Video和Audio元素

HTML5引入了<video>和<audio>元素，支持在Web页面上直接嵌入多媒体内容。在HTML5之前，开发者依赖第三方插件来嵌入视频和音频。HTML5做到了原生支持，简化了流程，并扩展了Web的多媒体功能。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持Audio标签。
</audio>

在上述代码中，controls属性为视频和音频播放器提供了内置的用户界面，包括播放、暂停和音量控制。

本地存储

HTML5引入了Web Storage API，包括localStorage和sessionStorage。Web Storage 提供了比过去的cookie更加安全和高效的数据存储方法。

// 使用localStorage存储一个数据项
localStorage.setItem('username', 'JohnDoe');

// 读取数据项
var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

// 删除单个数据项
localStorage.removeItem('username');

// 清除所有的存储
localStorage.clear();

localStorage用于长期存储数据，数据在页面会话间持续存在，即使浏览器关闭也不会丢失。sessionStorage的使用方式与localStorage类似，但其生命周期仅限于页面会话。

地理位置API

HTML5具备让Web应用知晓用户当前地理位置的能力。地理位置API可以用来提供个性化的地图服务、位置搜索和更多地理位置相关的功能。

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :", position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

当用户同意共享位置信息时，上述脚本将输出用户的纬度和经度。

Web应用APIs

HTML5定义了一套新的Web应用API，比如拖放（Drag and Drop）API、全屏API、通知API、Web Workers等，使得构建富Web应用成为可能。

<div id="drag1" draggable="true" ondragstart="drag(event)">拖动这个元素</div>

HTML5可拖放API使得设置可拖动的DOM元素变得简单。只需要设置draggable属性，并编写处理拖放事件的JavaScript代码即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5新特性展示</title>
</head>

<body>
    <!-- 头部区域，使用<header>标签 -->
    <header>
        <h1>HTML5新特性展示页面</h1>
    </header>

    <!-- 使用<section>区分页面上的不同内容块 -->
    <section>
        <h2>Canvas绘图</h2>
        <canvas id="myCanvas" width="400" height="200">您的浏览器不支持Canvas。</canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FF0000';
            ctx.fillRect(0, 0, 200, 100);
        </script>
    </section>

    <section>
        <h2>Video和Audio元素</h2>
        <video controls width="250">
            <source src="path/to/video.mp4" type="video/mp4">
            抱歉，您的浏览器不支持内嵌视频。
        </video>
        <audio controls>
            <source src="path/to/audio.mp3" type="audio/mp3">
            您的浏览器不支持audio元素。
        </audio>
    </section>

    <section>
        <h2>新的表单输入类型</h2>
        <form>
            <label for="colorInput">Color input:</label>
            <input type="color" id="colorInput" name="colorInput"><br><br>

            <label for="dateInput">Date input:</label>
            <input type="date" id="dateInput" name="dateInput"><br><br>

            <label for="rangeInput">Range input:</label>
            <input type="range" id="rangeInput" name="rangeInput" min="0" max="100"><br><br>

            <input type="submit" value="Submit">
        </form>
    </section>

    <section>
        <h2>本地存储示例</h2>
        <button onclick="saveData()">点击保存数据</button>
        <button onclick="showData()">显示保持的数据</button>
        <p id="data"></p>
        <script>
            function saveData() {
                localStorage.setItem('myData', 'HTML5本地存储数据');
                document.getElementById('data').innerHTML = '数据已保存。';
            }

            function showData() {
                var storedData = localStorage.getItem('myData');
                document.getElementById('data').innerHTML = storedData;
            }
        </script>
    </section>

    <footer>
        <p>页脚内容，版权声明等</p>
    </footer>
</body>

</html>

点击查看【codepen】

面试实战

什么是 HTML?

答：HTML 是一种用于创建网页的标准标记语言。它的全称是 HyperText Markup Language，即“超文本标记语言”。HTML 用于描述网页的结构，并通过标签来告知浏览器如何渲染内容。

请解释 HTML 文档的基本结构

答：一个基本的 HTML 文档结构包括：<!DOCTYPE html> 声明，用于定义文档类型；<html> 标签，定义了 HTML 文档的根元素；<head> 标签，包含了文档的元数据，如 <title>、<meta>、<link>、<script> 和 <style>；<body> 标签，包含了可见的页面内容。

HTML5 与 HTML4 的区别是什么？

答：HTML5 是 HTML 的最新版本，它在 HTML4 的基础上进行了改进和增强。主要的区别包括：引入了更多的语义化标签（如 <article>、<section>、<nav>、<header> 和 <footer>），增强的表单控件（如 <date>、<time>、<email>），新增了音视频元素（如 <audio> 和 <video>），以及更丰富的 API 支持（如地理定位、拖放、本地存储）。

什么是语义化的 HTML，它的优点是什么？

答：语义化的 HTML 是指使用恰当的HTML标签（如 <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> 等）来准确描述内容的方式。它的优点包括提高内容的可读性，帮助搜索引擎更好地理解页面结构，提升网站SEO效果，并提高代码可维护性。

HTML 中的块级元素和内联元素有什么区别？

答：块级元素会新起一行并尽可能占据容器的全部宽度（例如 <div>, <p>, <h1> 等），而内联元素则不会新起一行，它只占据其内容所需的空间（例如 <span>, <a>, <img> 等）。二者之间的主要区别在布局表现上。

`<div>` 和 `<span>` 的用途分别是什么？

答：<div> 是块级元素，常用于布局或分组内容。<span> 是内联元素，常用于对文本中的一小部分内容应用样式或包裹以便使用 JavaScript 进行操作。

如何实现 HTML 页面的多语言支持？

答：可以通过在 <html> 标签中使用 lang 属性来声明页面的语言。例如 <html lang="en">。对于页面中的其他语言部分，使用 <lang> 标签在对应的文本周围指定语言。还可以使用 HTTP 头信息或者 URL 参数来提供语言选项，并利用服务器端或客户端脚本来动态更改页面内容。

什么是响应式网页设计？

答：响应式网页设计（Responsive Web Design，RWD）是一种网页设计方法论，其目的是让网页能够对不同的终端设备进行响应并做相应适配。通过使用弹性布局、媒体查询等技术，能够使网页在不同尺寸的屏幕（如手机、平板和桌面）上都具有良好的显示和操作体验。

HTML 中的 `data-` 属性有什么用途？

答：在 HTML5 中，data- 属性用于嵌入自定义数据属性，以便在不影响语义标记的情况下，为元素提供附加的信息。这些属性在JavaScript中可以通过 element.dataset 属性进行访问。

什么是 Doctype？为什么它对 HTML 文档很重要？

答：Doctype 是一个声明，位于文档的最前面，用于告知浏览器所用的 HTML 版本。这对于 HTML 文档十分重要，因为不同的浏览器和 HTML 版本的渲染方式可能不同，Doctype 声明能够确保浏览器正确渲染页面内容。