如何书写html标签_HTML基础标签（div/p/img）书写规范与示例

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何书写html标签_HTML基础标签（div/p/img）书写规范与示例

2025-11-03

浏览次数：次

返回列表

div、p、img标签需规范书写：div用小写，合理使用class/id，避免过度嵌套；p标签成对出现，不嵌套块级元素；img为自闭合标签，必加src和alt属性。

如何书写html标签_html基础标签（div/p/img）书写规范与示例

在HTML开发中，正确书写标签是构建网页结构的基础。div、p 和 img 是最常用的标签之一，掌握它们的书写规范有助于写出语义清晰、结构合理的代码。

div 标签：块级容器的标准写法

div 是“division”（分区）的缩写，用于将页面划分为不同的区块，常用于布局和样式控制。

书写规范：

使用小写字母书写标签名：<div></div>
合理添加 class 或 id 属性以便 CSS 样式控制，例如：<div class="header"></div>
避免嵌套过深，保持结构清晰
不要滥用 div，优先考虑语义化标签如 header、main、section 等（在合适场景下）

示例：

<div class="container">
  <div id="sidebar">侧边栏内容</div>
  <div class="content">正文区域</div>
</div>

p 标签：段落文本的标准表达

p 标签用于定义一段文字内容，浏览器会自动在其前后添加换行间距。

书写规范：

必须成对出现（有开始和结束标签）：<p>内容</p>
只包含纯文本或内联元素（如 strong、em、a），不要嵌套块级元素（如 div、p）
每个段落使用一个 p 标签，不要用多个 br 实现段落换行

示例：

<p>这是第一段文字内容。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1125">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680079579055.png" alt="OneStory">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1125">OneStory</a>
                            <p>OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="OneStory">
                                <span>319</span>
                            </div>
                        </div>
                        <a href="/ai/1125" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="OneStory">
                        </a>
                    </div>
                
<p>这是第二段，用来描述更多细节。</p>