以下是十个常用的 HTML 技巧：
1. 使用语义化标签
合理使用语义化标签，如、、、等，以提升网页结构和可读性。
当使用语义化标签时，可以选择适当的标签来描述不同类型的内容。以下是几个常见的代码案例示例：
- 文章内容：
<article> <h1>标题</h1> <p>段落一</p> <p>段落二</p> <figure> <img src="image.jpg" alt="图片描述"> <figcaption>图片说明</figcaption> </figure> </article>
- 标题和导航栏：
<header> <h1>网站标题</h1> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header>
- 侧边栏和主要内容：
<main> <aside> <h2>侧边栏标题</h2> <ul> <li>链接一</li> <li>链接二</li> <li>链接三</li> </ul> </aside> <section> <h2>主要内容标题</h2> <p>主要内容段落</p> </section> </main>
- 脚注和版权信息：
<footer> <p>© 2023 公司名称. 版权所有.</p> <nav> <ul> <li><a href="#privacy">隐私政策</a></li> <li><a href="#terms">服务条款</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </footer>
以上代码案例展示了如何使用语义化标签来明确不同部分的内容结构，使得网页更易于理解和处理，并且对搜索引擎和辅助技术有良好的可访问性。
2. 嵌套标签正确闭合
确保所有 HTML 标签都有正确的嵌套关系和闭合，避免出现不匹配的标签，以确保页面的正确渲染。
以下是一个示例，展示正确嵌套标签并进行闭合的代码案例：
<div> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>内容标题</h2> <p>内容段落</p> </section> <aside> <h3>侧边栏标题</h3> <ul> <li><a href="#">链接一</a></li> <li><a href="#">链接二</a></li> <li><a href="#">链接三</a></li> </ul> </aside> </main> <footer> <p>版权信息</p> <nav> <ul> <li><a href="#">隐私政策</a></li> <li><a href="#">使用条款</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </footer> </div>
在这个示例中，每个标签都被正确地嵌套在其父元素中，并且每个标签都有相应的闭合标签。这样可以确保代码结构良好，并且遵循HTML的语法要求。
3. 使用无障碍（Accessibility）特性
增加无障碍特性，如使用适当的 alt 属性为图像提供替代文本、添加 ARIA 属性等，以提高网站的可访问性。
以下是一个示例，展示如何使用无障碍（Accessibility）特性来提升网页的可访问性：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>无障碍特性示例</title> </head> <body> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>内容标题</h2> <p>内容段落</p> </section> <aside> <h3>侧边栏标题</h3> <ul> <li><a href="#">链接一</a></li> <li><a href="#">链接二</a></li> <li><a href="#">链接三</a></li> </ul> </aside> </main> <footer> <p>版权信息</p> <nav> <ul> <li><a href="#">隐私政策</a></li> <li><a href="#">使用条款</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </footer> </body> </html>
在这个示例中，我们采取了几个无障碍特性：
- 使用 来指定页面语言为中文，使得辅助技术可以正确地解读和呈现内容。
- 为
alt属性，提供有意义的图片描述，以便使用屏幕阅读器的用户能够理解图像内容。 使用标题标签 等来组织页面结构，并根据内容层次使用适当的标题级别，以便使用屏幕阅读器的用户能够快速导航和理解页面结构。
- 为链接（
标签）提供有意义的文本，以便屏幕阅读器可以正确地读取并描述链接目标。避免使用模糊的文本如“点击这里”或者无意义的链接文本。 - 使用 标签来标识导航栏，以便屏幕阅读器可以快速识别并在需要时跳过导航内容。
- 使用 标签包裹页脚内容，以提供版权信息和其他相关链接。
通过以上无障碍特性的使用，可以使页面更易于访问和理解，帮助有视觉障碍或认知障碍的用户获得更好的浏览体验。
4. 利用表单验证
使用 HTML5 表单验证功能，如required、pattern和type属性，减少对用户输入的错误。
以下是一个示例，展示如何使用表单验证来确保用户输入的数据符合预期的格式和要求：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表单验证示例</title> <script> function validateForm() { var name = document.forms["myForm"]["name"].value; var email = document.forms["myForm"]["email"].value; if (name == "") { alert("请输入姓名"); return false; } if (email == "") { alert("请输入邮箱地址"); return false; } // 邮箱地址正则表达式验证 var emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; if (!emailPattern.test(email)) { alert("请输入有效的邮箱地址"); return false; } } </script> </head> <body> <h1>表单验证示例</h1> <form name="myForm" onsubmit="return validateForm()" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <br> <label for="email">邮箱地址：</label> <input type="email" id="email" name="email" required> <br> <input type="submit" value="提交"> </form> </body> </html>
在这个示例中，我们实现了一个简单的表单验证功能：
- 使用 JavaScript 中的
validateForm()函数来进行表单验证。在函数中，我们首先获取用户输入的姓名和邮箱地址。 - 使用条件语句来检查用户输入是否符合要求。如果姓名或邮箱地址为空，则弹出提示框并返回 false，阻止表单提交。
- 使用正则表达式来验证邮箱地址的格式。如果邮箱地址不符合正则表达式定义的格式，则弹出提示框并返回 false。
- 在 HTML 中，使用事件处理函数
onsubmit="return validateForm()"来在表单提交时执行表单验证。 - 对于必填字段，我们使用
required属性来标记输入框为必填项，这样浏览器会在提交时自动进行验证，并显示相应的错误提示。
通过以上代码实现的表单验证，可以确保用户提交的数据满足预期的格式和要求，提升用户体验并减少无效或错误的表单提交。
探索HTML的黑科技：让你的网页变得无与伦比！（二）https://developer.aliyun.com/article/1426577
