2024年您必须知道的 18个 HTML 提示

本文链接：https://blog.csdn.net/m0_45522371/article/details/143093902

前言

HTML 是任何网站的支柱，掌握它意味着了解可以增强功能和用户体验的各种技术。在这篇文章中，我们将探讨每个 Web 开发人员都应该了解的 18 种基本 HTML 技术。

正文

1.创建联系人链接

如何创建文本链接

文本链接是最常见的链接类型。它们是通过使用锚点（a标签）元素环绕文本来创建的。当用户点击链接的文本时，他们会被定向到链接的 href 属性中指定的 URL：

<a href="https://www.example.com">Visit Example.com</a>
<a href=“https://www.example.com”>访问 Example.com</a>

如何创建图片链接：

您可以通过将图像包装在锚元素中来将图像转换为可点击的链接。这对于创建基于图像的导航或链接到较大版本的图像非常有用：

<a href="https://www.example.com">
  <img src="image.jpg" alt="Example Image">
</a>

如何创建电子邮件链接

要创建使用预填充的收件人地址打开电子邮件客户端的链接，请使用 mailto 方案：

<a href="mailto:contact@example.com">Send an Email</a>

如何创建外部链接
内部链接用于在同一网站内导航。它们通常使用相对 URL 引用网站中的其他页面：

<a href="https://www.external-site.com" target="_blank">Visit External Site</a>

如何创建内部链接

<a href="/about">Learn More About Us</a>

2.创建可折叠内容

当您想在网页上包含可折叠内容时，可以使用和标签。

标签为隐藏内容创建容器，而标签提供可点击的标签以切换该内容的可见性。

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

3.利用语义元素

当您想在网页上包含可折叠内容时，可以使用和标签。

在这里插入图片描述
语义 HTML 元素是传达它们封装的内容的含义或目的的 HTML 标记。与非语义元素（如 div和 span）不同，语义元素明确定义了它们的预期用途。这不仅增强了 HTML 代码的可读性，还提高了网页的可访问性和 SEO。

语义 HTML 元素包括 header、footer、article、section、nav 和 aside 等标记。这些元素中的每一个都提供了有关它们所包含内容的有意义信息。

示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>Semantic HTML Example</title>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Website</h1>  
    </header>  
   <nav>  
        <ul>  
            <li><a href="#home">Home</a></li>  
            <li><a href="#about">About</a></li>    
           <li><a href="#contact">Contact</a></li>    
      </ul>  
    </nav>  
    <main>    
       <article>    
           <h2>Introduction to Semantic HTML</h2>    
           <p>Semantic HTML is the foundation of accessible and SEO-friendly web design...</p>    
       </article>    
    </main>    
    <aside>    
        <h3>Related Articles</h3>    
        <ul>    
            <li><a href="#html5">HTML5 Basics</a></li>    
            <li><a href="#css3">CSS3 Essentials</a></li>    
        </ul>    
    </aside>    
    <footer>    
        <p>&copy; 2024 My Website</p>    
   </footer>    
</body>    
</html>

在此示例中，语义元素 header、nav、main、article、aside> 和 footer 明确定义了内容的结构和用途。

4.对表单元素进行分组

使用 fieldset 标签对表单中的相关元素进行分组，使用 legend 标签和 fieldset> 定义 fieldset 标签的标题。

这对于创建更高效且更易于访问的表单非常有用。

示例：

文本输入:

  <fieldset> <字段集>
<legend>Delivery Address</legend>
<图例>送货地址</legend>
<label for="deliveryHouseNumber">House number:</label>
<标签=“deliveryHouseNumber”>门牌号：</label>
<input type="text" id="deliveryHouseNumber">
<input type=“text” id=“deliveryHouseNumber”>
<br/>
<label for="deliveryStreetAddress">Street address:</label>
<标签=“deliveryStreetAddress”>街道地址：</label>
<input type="text" id="deliveryStreetAddress">
<input type=“text” id=“deliveryStreetAddress”>
<br/>
<label for="deliveryTown">Town:</label>
<标签=“deliveryTown”>城镇：</label>
<input type="text" id="deliveryTown">
<input type=“text” id=“deliveryTown”>
<br/>
</fieldset> </字段集>

单选按钮

<fieldset>
<legend>Do you like football?</legend>
<input type="radio" id="yesFootball" value="yes" name="football">
<label for="yesFootball">Yes</label>
<br/>
<input type="radio" id="noFootball" value="no" name="football">
<label for="noFootball">No</label>
</fieldset>

复选框

<fieldset>
<legend>Select your favourite sports:</legend>
<input type="checkbox" id="football" name="sports" value="football">
<label for="football">Football</label>
<br/>
<input type="checkbox" id="rugby" name="sports" value="rugby">
<label for="rugby">Rugby</label>
<br/>
<input type="checkbox" id="golf" name="sports" value="golf">
<label for="golf">Golf</label>
<br/>
<input type="checkbox" id="cricket" name="sports" value="cricket">
<label for="golf">Cricket</label>
</fieldset>

5.增强下拉菜单

可以使用 optgroup 标签将相关选项分组到 select HTML 标签中。

当您使用大型下拉菜单或一长串选项时，可以使用此选项。

<label for="cars">Choose a car:</label>
<标签=“cars”>选择汽车：</label>
<select  name="cars" id="cars">
<select name=“cars” id=“cars”>
  <optgroup label="Swedish Cars">
<optgroup label=“瑞典汽车”>
    <option value="volvo">Volvo</option>
<选项值=“volvo”%3E沃尔沃</选装件>
    <option value="saab">Saab</option>
<选项值=“saab”>萨博</选项>
  </optgroup>
  <optgroup label="German Cars">
<optgroup label=“德国汽车”>
    <option value="mercedes">Mercedes</option>
<选项值=“mercedes”>梅赛德斯</选装件>
    <option value="audi">Audi</option>
<选项值=“audi”>奥迪</选购件>
  </optgroup>
</select> </选择>

标签用于对元素（下拉列表）中的相关选项进行分组。

如果您的选项列表很长，则用户更容易处理相关选项组。

6.改进视频演示

poster 属性可以与 video 元素一起使用，以在用户播放视频之前显示图像。

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

poster 属性指定要在视频下载时或用户点击播放按钮之前显示的图像。如果未包含此项，则将改用视频的第一帧。

7.支持多选

您可以将 multiple 属性与 input 和 select 元素一起使用，以允许用户一次选择/输入多个值。

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>

8.将文本显示为下标和上标

在 HTML 中，sub 标签用于下标，使文本略低于正常行，而 sup 标签用于上标，将文本定位在略高于正常行的位置。这些标签用于以低于或高于常规文本行的方式设置文本格式，这对于化学公式或数学表达式等应用程序非常有用。
在这里插入图片描述

示例：

子脚本标签的实现与示例。

<!DOCTYPE html>
<html>
<head>
    <style>
        sub {
            vertical-align: sub;
            font-size: small;
        }
    </style>
</head>
<body>
    <p>
        A sub element is displayed like this
    </p>
    <p>This text contains 
        <sub>subscript text</sub>
    </p>
    <p>
        Change the default CSS settings to see the effect.
    </p>
</body> 
</html>

输出：
在这里插入图片描述

超级脚本标签的实现与示例。

<!DOCTYPE html>
<html>
<head>
    <style>
        sup {
            vertical-align: super;
            font-size: small;
        }
    </style>
</head>
<body>
    <p>A sup element is displayed like this:</p>
    <p>This text contains <sup>superscript text</sup></p>
    <p>Change the default CSS settings to see the effect.</p>
</body> 
</html>

输出：
在这里插入图片描述

9.创建下载链接

可以将 download 属性与 a 元素一起使用，以指定当用户单击链接时，应下载链接的资源，而不是导航到链接的资源。

<a href="document.pdf" download="document.pdf"> Download PDF </a

仅当设置了 href 属性时，才使用 download 属性。

该属性的值将是下载文件的名称。对允许的值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。

您还可以为 download 属性指定一个值，该值将是已下载文件的新文件名。如果省略该值，则使用原始文件名。

示例：
指定 download 属性的值，该值将是下载文件的新文件名（“w3logo.jpg”而不是“myw3schoolsimage.jpg”）：

<a href="/images/myw3schoolsimage.jpg" download="w3logo">
 <img src="/images/myw3schoolsimage.jpg" alt="W3Schools">
</a>

10.定义相对链接的基 URL

您可以使用标签来定义网页中所有相对 URL 的基 URL。

当您想为网页上的所有相关 URL 创建共享起点时，这非常方便，从而更轻松地导航和加载资源。

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/get-in-touch">Contact</a>
</body>

11.控制图像加载

带有 img 元素的 loading 属性可用于控制浏览器加载图像的方式。它有三个值：“eager”、“lazy”和“auto”。

延迟加载属性：此策略用于将资源标识为非关键资源，并且仅在需要时加载资源。换句话说，延迟加载会延迟加载网页内容，只要它们不是必需的。这种技术有助于优化页面并允许他们稍后加载。通常，网页上的图像尺寸很大。为此，延迟加载对于延迟屏幕外图像非常有用。

<img src="url" loading="auto|eager|lazy">

12.管理翻译功能

您可以使用 translate 属性来指定是否应由浏览器的翻译功能翻译元素的内容。

<p translate="no">
  This text should not be translated.
</p>

13.启用内容编辑

使用 contenteditable 属性指定元素的内容是否可编辑。

它允许用户修改元素中的内容。

<div contenteditable="true">
   You can edit this content.
</div>

14.控制拼写检查

可以将 spellcheck 属性与 input 元素、content-editable 元素和 textarea 元素一起使用，以启用或禁用浏览器的拼写检查。

<input type="text" spellcheck="true"/>

15.确保可访问性

alt 属性指定图像的替代文本（如果图像无法显示）。

始终为图像包含描述性 alt 属性，以提高辅助功能和 SEO。

<img src="picture.jpg" alt="Description for the image">

16.定义链接的目标行为

您可以使用 target 属性来指定单击链接资源时链接资源的显示位置。

<!-- Opens in the same frame -->
<-- 在同一帧中打开 -->
<a href="https://shefali.dev" target="_self">Open</a>
<a href=“https://shefali.dev” target=“_self”>开盘</a>
<!-- Opens in a new window or tab -->
<-- 在新窗口或选项卡中打开 -->
<a href="https://shefali.dev" target="_blank">Open</a>
<a href=“https://shefali.dev” target=“_blank”>开盘</a>
<!-- Opens in the parent frame -->
<-- 在父框架中打开 -->
<a href="https://shefali.dev" target="_parent">Open</a>
<a href=“https://shefali.dev” target=“_parent”>开盘</a>
<!-- Opens in the full body of the window -->
<-- 在窗口的整个正文中打开 -->
<a href="https://shefali.dev" target="_top">Open</a>
<a href=“https://shefali.dev” target=“_top”>开盘</a>
<!-- Opens in the named frame -->
<-- 在命名框架中打开 -->
<a href="https://shefali.dev" target="framename">Open</a>
<a href=“https://shefali.dev” target=“framename”>开盘</a>

17.接受特定文件类型

您可以使用 accept 属性指定服务器接受的文件类型（仅适用于文件类型）。这与 input 元素一起使用。

<input type="file" accept="image/png, image/jpeg" />

18.优化视频加载

您可以通过将 preload 属性与 video 元素结合使用，使视频文件加载得更快，从而更流畅地播放。

<video src="video.mp4" preload="auto">
   Your browser does not support the video tag.
</video>

总结

这些示例演示如何在 HTML 项目中应用每个提示，从而帮助您编写更高效、更易于访问且用户友好的代码。

在这里插入图片描述

2024年您必须知道的 18个 HTML 提示

文章目录

前言

正文

1.创建联系人链接

2.创建可折叠内容

3.利用语义元素

4.对表单元素进行分组

5.增强下拉菜单

6.改进视频演示

7.支持多选

8.将文本显示为下标和上标

9.创建下载链接

10.定义相对链接的基 URL

11.控制图像加载

12.管理翻译功能

13.启用内容编辑

14.控制拼写检查

15.确保可访问性

16.定义链接的目标行为

17.接受特定文件类型

18.优化视频加载

总结