新窗口打开文档(<a> 标签)
html
<a href="https://www.nowcoder.com" target="_blank" rel="noopener noreferrer">前往牛客网</a>
关键属性:
target="_blank":在新窗口打开链接rel="noopener noreferrer":安全建议,防止性能和安全问题
自定义列表(<dl>、<dt>、<dd>)
html
<dl>
<dt>nowcoder</dt>
<dd>nowcoder</dd>
</dl>
结构说明:
<dl>:定义列表容器<dt>:定义术语/标题<dd>:定义描述/内容
语义化标签(<header> + <nav>)
html
<header>
<nav></nav>
</header>
语义化标签优势:
- 提升SEO效果
- 增强无障碍访问
- 提高代码可读性
常见语义化标签:
<header>:页面头部<nav>:导航区域<main>:主要内容<article>:独立内容块<footer>:页脚信息
总结对比
| 标签类型 | 关键点 |
|---|---|
| 超链接 | 使用target="_blank"和rel属性 |
| 自定义列表 | 使用<dl>、<dt>、<dd>结构 |
| 语义化标签 | 优先使用<header>、<nav>等语义化标签 |