Skip to content

3.2 前端入门之html标签和属性之认识html5框架

11、段落标签

关于 p 标签详细解读：

  • <p></p>标签表示段落标签，p 是英语 Paragraph​ 的意思；

  • 任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在 <p></p>中；

  • <p></p>标签中不能嵌套 h 标签、其他 p 标签和其他块级元素。

（1）p 标签中可嵌套的标签

![[Pasted image 20260126194500.png]]

模仿百度百科，写一个 h 标签和 p 标签的综合案例，以 "前端开发" 为例。效果如下：

![[Pasted image 20260126194640.png]]

（2）最佳实践

TIP：

  • 不要用 <br>模拟段落间距；

  • 避免在 <p>中嵌套块级元素。

12、div 标签

关于 div 标签详细解读：

  • <div></div>标签是英语 division（分隔）的缩写；

  • div 标签对是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰；

  • 比如：一般网页布局的头部、内容区、底部都会通过 div 进行分隔；

  • <div></div>是最常见的 HTML 标签，因为它会结合 CSS 来使用，实现网页的布局，这种布局形式叫做 DIV+CSS；

  • <div></div>像一个容器，什么都可以容纳，因此工程师们习惯称呼 div 为 盒子。

编写练习案例效果（以百度百科文章详情页为例）：

<div class="article-header">
  <h1>文章标题</h1>
  <p>发布时间：2023-10-01</p>
</div>
<div class="article-content">
  <p>文章正文内容...</p>
</div>
<div class="article-footer">
  <p>参考资料</p>
</div>

(1)div 标签的应用场景

TIP：<div>标签是 HTML 中最基础且通用的容器元素，由于其没有特定的语义含义，因此可以灵活应用于多种场景。

以下是 <div>标签的常见应用场景：

布局容器

页面结构划分： 用于划分页面的不同区域，如页眉、主体、侧边栏、页脚等。

<div class="header">页眉内容</div>
<div class="main-content">主体内容</div>
<div class="sidebar">侧边栏内容</div>
<div class="footer">页脚内容</div>

响应式布局： 结合 CSS Flex 或 Grid 创建响应式布局。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

样式和视觉效果

CSS 样式应用： 为特定区域添加样式（如背景色、边框、内边距等）。

<div class="box" style="background: #f0f0f0; padding: 20px;">
  这是一个带样式的盒子
</div>

视觉分组： ​ 将相关元素分组，便于统一控制样式。

<div class="card">
  <h3>标题</h3>
  <p>内容</p>
</div>

JavaScript 操作

DOM 操作： ​ 作为 JavaScript 操作的目标元素。

<div id="target">点击我</div>
<script>
  document.getElementById("target").addEventListener("click", () => {
    alert("被点击了！");
  });
</script>

动态内容渲染： ​ 用于动态加载或替换内容（如 AJAX 请求的结果）。

<div id="dynamic-content"></div>
<script>
  fetch("/api/data")
    .then((response) => response.json())
    .then((data) => {
      document.getElementById("dynamic-content").innerHTML = data.content;
    });
</script>

表单分组

TIP： 表单元素的容器：用于组织表单控件。

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" />
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" name="password" />
  </div>
</form>

多媒体和嵌入内容

TIP： 视频、地图等内容的包装：为需要额外样式或脚本的多媒体内容提供容器。

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4" />
  </video>
</div>

组件化开发

TIP： 前端框架中的组件容器：在 React、Vue 等框架中，<div>常作为组件的根元素。

// React 示例
function MyComponent() {
  return (
    <div className="my-component">
      <h2>组件标题</h2>
      <p>组件内容</p>
    </div>
  );
}

条件渲染和隐藏内容

TIP： ​ 控制内容的显示和隐藏：通过 CSS 或 JavaScript 控制 <div>的显示状态。

<div id="toggle-content" style="display: none;">这是隐藏的内容</div>
<button onclick="document.getElementById('toggle-content').style.display = 'block'">
  显示内容
</button>

模板和占位符

TIP： 页面加载时的占位符：在内容加载前显示占位符。

<div class="loading-placeholder">
  <!-- 加载动画或提示文本 -->
</div>

注： div 容器的应用场景有很多，总的来说 div 是最基础且通用的容器元素，由于其没有特定的语义含义，因此可以灵活应用于多种场景。

（2） div 标签的最佳实践

TIP：

  • 避免过度使用： 优先使用语义化标签（如 <section>、<article>等），仅在必要时使用 <div>；

  • 合理命名： 通过 class 或 id 为 <div>添加有意义的名称，便于维护和样式控制；

  • 性能优化： ​ 避免嵌套过深的 <div>结构，减少 DOM 操作开销。

合理使用 <div>可以提升代码的可维护性和灵活性，但需注意避免滥用，优先选择语义化标签。

13、HTML5 特性

TIP： 深入浅出 HTML5 的特性

（1） 空白折叠现象

TIP： 文字和文字之间的多个空格、换行会被折叠成一个空格；标签内壁和文字之间的空格会被忽略。

<body>
  <h1>HTML5特性：空白折叠现象</h1>

  <h2>文字和文字之间的多个空格、换行会被折叠成一个空格</h2>
  <p>文本内容 文本内容</p>

  <h2>标签 内壁 和 文字之间的空格会被忽略</h2>
  <p>文本内容文本</p>
</body>

（2） 常用转义符

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
全角空格（1 个中文字宽） &emsp;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; &#39;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
© 版权（copyright） &copy; &#169;
® 注册商标符号 &reg; &#174;
™ 商标符号（无强制法律要求，任何企业或个人均可使用，表示该标识正在作为商标使用，但未完成法律注册流程） &trade; &#8482;

示例代码：

<body>
  <h1>HTML常用转义符</h1>

  <p>空格：文本&nbsp;&nbsp;&nbsp;文本，文本中间是三个空格</p>
  <p>全角空格：文本&emsp;文本，文本中间是一个全角空格</p>
  <p>小于号：&lt;</p>
  <p>大于号：&gt;</p>
  <p>和号：&amp;</p>
  <p>双引号：&quot;</p>
  <p>撇号：&apos;</p>
  <p>元：&yen;</p>
  <p>欧元：&euro;</p>
  <p>版权符号：&copy;</p>
  <p>已注册商标符号：&reg;</p>
  <p>商标符号: &trade;</p>

  <p>在网页中直接显示原标签（标签原文输出，在浏览器中不被解析）:</p>

  显示p标签 &lt;p>&lt;/p> <br /><br />

  显示div标签：&lt;div&gt;&lt;/div&gt;
</body>

![[Pasted image 20260126203421.png]]

（3） HTML 的注释

对于程序开发人员最讨厌的两件事：

  1. 讨厌自己加注释

  2. 讨厌别人的代码不加注释

添加注释的重要性：

  • 提高代码的可阅读性，方便自己阅读或他人阅读；

  • 增强代码的可维护性。

注： 注释在网页中是不显示的，只有自己能看到。

HTML 注释的语法：

<!--注释内容-->

在 Vscode 中，可以使用快捷键 Ctrl + /快速添加注释。