从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

本文探讨了HTML中块级元素的使用方式,特别是li和p标签的合理搭配,并介绍了《精通CSS与HTML设计模式》一书中关于块级元素的分类。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<ul>
    <li> Hi I am an item. </li>
    <li> And I am another one. </li>
</ul>

<ul>
    <li><p> Hi I am an item. </p></li>
    <li><p> And I am another one. </p></li>
</ul>

上面的li标签里面加p标签其实是没有必要的,但是如果用li进行布局的话,里面是可以用p标签的,比如下面这个布局是正常的
在实现了功能的前提下,能少写代码就少写,越精简越好。

<ul>
   <li>
       <img src="" />
       <p> And I am another one. </p>
    </li>
</ul>

《精通 CSS 与 HTML 设计模式》的作者提出了三个名词
把块级元素划分成三类:结构化块状元素、终端块状元素、多目标块状元素。
li 属于结构化块状元素和多目标块状元素,它让文档形成结构,也是多目的的,即能包含内容也能包含其他块级元素。
p 属于终端块状元素,它下面不能再出现其他块级元素,只能包含内容。

{% extends "base.html" %} {% block title %}系统管理{% endblock %} {% block content %} <div class="admin-panel"> <h1>管理控制台</h1> <!-- 权限验证 --> {% if not current_user.is_admin %} <div class="alert alert-danger"> 错误:您没有访问此页面的权限 </div> {% else %} <section class="admin-section"> <h2>用户管理</h2> <table class="data-table"> <thead> <tr> <th>ID</th> <th>用户名</th> <th>最后登录</th> </tr> </thead> <tbody> {% for user in user_list %} <tr> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.last_login | datetimeformat }}</td> </tr> {% endfor %} </tbody> </table> </section> {% endif %} </div> {% endblock %}{% extends "base.html" %} {% block title %}用户登录{% endblock %} {% block content %} <form class="auth-form" method="POST" action="{{ url_for('login') }}"> <h2>用户登录</h2> <!-- CSRF保护 --> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required pattern="[A-Za-z0-9]{3,20}" title="仅允许字母和数字 (3-20字符)"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required minlength="8" title="至少8位字符"> </div> <button type="submit" class="btn-primary">登录</button> <!-- 安全增强措施 --> <div class="security-tips"> <p>🔒 采用HTTPS加密传输</p > <p>⚠ 登录失败3次将锁定账户</p > </div> </form> {% endblock %}<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}安全增强网站{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <header class="navbar"> <nav> 首页 {% if current_user.is_authenticated %} 登出 {% if current_user.is_admin %} 管理后台 {% endif %} {% else %} 登录 {% endif %} </nav> </header> <main class="container"> <!-- 安全警告显示区域 --> {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}"> {{ message }} </div> {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %} </main> <script src="{{ url_for('static', filename='main.js') }}"></script> </body> </html>这三个代码和你写的相比真么样
03-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值