HTML标签通过尖括号定义元素结构，语义化标签提升可读性与无障碍，自定义标签借助Web Components实现组件化，属性用于控制行为与展示，合理嵌套和语义化组织确保代码清晰、可维护。
HTML标签的添加，核心就是通过尖括号 <tag> 和 </tag> 来定义页面上的元素结构，或者对于自闭合标签使用 <tag /> 形式。至于自定义和语义化标签，它们是这种基础语法之上的进阶应用：语义化标签是W3C标准中预定义的、带有特定含义的标签，用于更好地描述内容结构；而自定义标签，更多是指通过Web Components等技术创建的、开发者自己命名的组件。无论哪种标签，其行为和展示效果往往都需要通过在开始标签内以 key="value" 形式添加属性来进一步细化和控制。
说到底，HTML标签的添加，就像搭积木一样，你得知道每块积木的名字和它大概长什么样。最基础的，你写一个 <h1> 标签，里面放上“我的标题”，浏览器就知道这是个一级标题。
<!-- 这是一个段落标签 --> <p>这是我文章的第一段内容。</p> <!-- 这是一个图片标签，注意它是自闭合的，不需要结束标签 --> <img src="path/to/image.jpg" alt="描述图片内容" width="300"> <!-- 这是一个链接标签，a 是 anchor 的缩写 --> <a href="https://example.com">访问示例网站</a>
关键在于理解标签的“作用域”和“功能”。有些标签是块级元素（比如 div, p, h1），它们会独占一行；有些是行内元素（比如 span, a, img），它们会和周围内容在同一行。当你需要给这些标签附加更多信息或者控制它们的外观行为时，就得用到属性。
属性总是写在开始标签里面，格式是 属性名="属性值"。比如 <img> 标签的 src 属性告诉浏览器图片在哪里，alt 属性则是图片加载失败时的替代文本，对无障碍阅读也很重要。再比如 <a> 标签的 href 属性，它定义了链接的目标地址。这些都是最常见的操作。
立即学习“前端免费学习笔记（深入）”；
我个人觉得，语义化HTML标签这东西，初学者往往不以为意，觉得用 <div> 和 <span> 加上CSS也能实现布局，何必那么麻烦？但实际上，这不仅仅是为了“好看”或者“规范”，它解决的是信息可理解性的根本问题。
想象一下，你写了一篇文章，如果只是用一堆没有意义的方块（<div>）堆砌起来，虽然视觉上可能很漂亮，但对于搜索引擎、屏幕阅读器（视障人士的工具），甚至是未来接手你代码的开发者来说，这堆“方块”是毫无意义的。它们不知道哪里是标题，哪里是导航，哪里是主要内容，哪里是侧边栏。
语义化标签，比如 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 等，它们自带了含义。当你用 <nav> 包裹导航链接时，搜索引擎和屏幕阅读器就知道“哦，这是一组导航链接”。这带来的好处是多方面的：
div id="header" 到底是不是真的头部。举个例子，一个没有语义化的页面可能长这样：
<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">
<div class="post">...</div>
<div class="sidebar">...</div>
</div>
<div id="footer">...</div>而一个语义化的页面会更清晰：
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>这不仅让代码更易读，也让机器更容易“读懂”。
当然可以，而且这正是现代前端开发中一个非常酷且强大的方向——Web Components。它允许你创建完全自定义的、可重用的HTML标签，这些标签有自己的行为和样式，并且不会与页面的其他部分冲突。
这玩意儿的核心是自定义元素 (Custom Elements)。你可以通过JavaScript来定义一个新的HTML标签，比如 <my-button> 或者 <user-profile-card>。这些自定义元素可以像原生HTML标签一样使用，甚至可以有自己的属性和方法。
要创建一个自定义元素，大致流程是这样的：
HTMLElement，并在其中定义你的自定义元素的行为。customElements.define() 方法将你的类与一个自定义标签名关联起来。看个简单的例子：
// 1. 定义一个JavaScript类，继承HTMLElement
class MyGreeting extends HTMLElement {
constructor() {
super(); // 必须调用super()
// 可以在这里设置元素的初始状态或创建Shadow DOM
// 比如，我们直接设置innerHTML
this.innerHTML = `
<style>
.greeting-card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
font-family: sans-serif;
}
.greeting-card p {
margin: 0;
color: #333;
}
</style>
<div class="greeting-card">
<p>你好，世界！这是一个自定义元素。</p>
</div>
`;
}
// 元素被添加到文档时调用
connectedCallback() {
console.log('MyGreeting 元素已添加到页面。');
}
// 元素从文档中移除时调用
disconnectedCallback() {
console.log('MyGreeting 元素已从页面移除。');
}
// 监听属性变化，例如当用户设置了<my-greeting message="..."></my-greeting>
static get observedAttributes() {
return ['message'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'message') {
// 可以在这里更新内部内容以反映新的message属性
// 为了简化，这里不做复杂更新，但实际应用中可以根据属性值改变UI
this.querySelector('p').textContent = newValue || "你好，世界！这是一个自定义元素。";
}
}
}
// 2. 注册自定义元素，标签名必须包含连字符 '-'
customElements.define('my-greeting', MyGreeting);然后你就可以在HTML中像使用普通标签一样使用它了：
<body> <my-greeting></my-greeting> <my-greeting message="欢迎来到我的自定义组件！"></my-greeting> </body>
这带来了巨大的便利性，你可以把复杂的UI组件封装成一个简单的HTML标签，提高代码的复用性和可维护性。不过，自定义元素通常还会结合Shadow DOM（用于封装元素的内部结构和样式，避免与外部冲突）和HTML Templates（用于定义可重用的HTML结构片段）一起使用，形成完整的Web Components体系。当然，这些高级特性在学习曲线和浏览器兼容性上需要一些投入。
HTML标签的属性简直是无穷无尽，但我们日常用的就那么几十个。正确选择和设置属性，是写出高质量、可维护、无障碍代码的关键。这里我总结一些常见的属性和一些我常看到的误区。
常见的、需要理解的属性：
id: 全局唯一标识符。一个页面上只能有一个同名的 id。主要用于JavaScript操作DOM元素，或者作为锚点。class: 用于给元素分组，一个元素可以有多个 class。主要用于CSS样式选择器，或者JavaScript批量操作。src: 用于 <img>, <script>, <iframe> 等标签，指定外部资源的URL。href: 用于 <a>, <link> 等标签，指定链接的目标URL或外部样式表的URL。alt: 用于 <img> 标签，提供图片的替代文本。对SEO和无障碍阅读至关重要。title: 提供元素的额外信息，鼠标悬停时通常会显示。data-*: 自定义数据属性。你可以用它来存储任何你需要的、与元素相关的数据，但这些数据对用户不可见，主要用于JavaScript。style: 行内样式。直接在标签上写CSS。常见的误区：
id 属性：很多人习惯性地给每个 div 都加个 id。但 id 应该是唯一的，并且主要用于JS操作特定元素。如果只是为了样式，class 才是更合适的选择。过度使用 id 会让CSS的特异性（specificity）变得难以管理，也增加了重构的难度。alt 属性：<img> 标签没有 alt 属性，或者 alt 内容空泛（比如 alt="图片"），这在无障碍性方面是严重的缺陷。屏幕阅读器无法告诉视障用户图片的内容。同时，搜索引擎也无法理解图片信息，影响SEO。正确的做法是，alt 属性应该简洁准确地描述图片内容。 如果图片纯粹是装饰性的，可以设置 alt=""。style 属性（行内样式）：虽然 style="color: red;" 确实能改变颜色，但大量的行内样式会使得CSS难以管理、难以复用，也增加了HTML的冗余度。最佳实践是，将样式尽可能地写在外部CSS文件中，通过 class 来应用。行内样式只在极少数特殊情况（如动态计算的样式）下使用。id 和 name 属性：id 用于文档中的唯一标识，而 name 主要用于表单元素（<input>, <select>, <textarea>），它定义了表单提交时，该字段的键名。属性的潜力**：当你想给HTML元素附加一些非标准数据，但又不想通过id或class来“污染”它们时，data-*是完美的选择。比如data-user-id="123"，在JavaScript中你可以通过element.dataset.userId` 轻松访问到这些数据，非常方便。<span> 上加 href 属性，这是无效的，因为 <span> 不是链接。每个标签都有其支持的属性集合，应该查阅MDN等文档确认。记住，属性是用来增强标签语义和功能的，不是随便乱用的。选择合适的属性，能让你的HTML代码更健壮、更易读、更符合Web标准。
当页面变得复杂，内容区域划分细致时，HTML标签的组织和嵌套就成了门艺术。我见过很多“div-hell”的页面，层层嵌套的 <div> 让人头晕眼花，根本不知道哪个 </div> 对应哪个 <div>。要避免这种混乱，有几个核心原则：
遵循语义化优先原则：
<header>，导航用 <nav>，主要内容用 <main>，文章主体用 <article>，侧边栏用 <aside>，底部用 <footer>。<section>, <div>, <p>, <ul>, <ol>, <li> 等。<section> 或 <main> 包裹，每篇文章用 <article>，文章标题用 <h2>，发布日期用 <time>，摘要用 <p>。逻辑分组，而非视觉分组：
div 里。思考它们在内容逻辑上是否属于一个整体。<div> 或者 <figure> 里面。但如果是一个产品列表，每个产品条目是独立的，就应该各自独立。保持嵌套层级合理：
div 里面又包了 div 又包了 div，可能你需要重新思考一下结构，是不是有些 div 是不必要的，或者可以用更语义化的标签来替代。使用注释和良好的缩进：
<!-- 这是一个侧边栏区域 -->) 可以帮助理解。<main>
<section class="products">
<h2>最新产品</h2>
<div class="product-grid">
<article class="product-item">
<img src="..." alt="产品A">
<h3>产品A名称</h3>
<p>产品A的简短描述。</p>
<a href="#">查看详情</a>
</article>
<!-- 更多产品项 -->
</div>
</section>
<aside class="promo">
<h3>推广活动</h3>
<p>点击这里获取优惠！</p>
</aside>
</main>借助 CSS 框架和预处理器：
总的来说，组织和嵌套HTML标签，就像是设计一个房子的骨架。你需要考虑房间的功能、房间之间的关系，以及如何让整个结构既稳固又清晰。语义化是地基，逻辑分组是墙壁，合理的嵌套是房间布局，而整洁的缩进和注释则是装修细节，它们共同构建了一个易于居住（开发）的“家”。
以上就是html标签如何添加_HTML标签（自定义/语义化）添加与属性设置方法的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
951
收藏
