HTML5内容设置的核心是先通过原生标签搭建内容结构，再通过CSS控制样式和布局，p、div等标签是最基础也最常用的内容承载元素，合理搭配使用可以高效完成页面开发。
HTML5常用内容标签的基础用法
HTML5提供了多种内容标签，不同标签有不同的语义和使用场景，其中p和div是最基础的两类。
p标签的使用
p标签是段落标签，默认会在上下产生一定的外边距，适合用来放置大段的文本内容，浏览器会自动识别为独立的段落块。
<!-- p标签示例 --> <p>这是第一段文本内容，p标签会自动添加段落间距，适合放置正文描述信息。</p> <p>这是第二段文本内容，两段内容之间会有明显的分隔效果。</p>
div标签的使用
div是无语义的块级容器标签，本身没有默认的样式，常用来组合其他标签，划分页面的不同功能区域，比如头部、内容区、底部等。
<!-- div标签示例 -->
<div class="header">
<h1>页面标题</h1>
</div>
<div class="content">
<p>内容区域的文本</p>
</div>
用CSS设置内容样式
HTML标签只负责内容结构，样式需要通过CSS来设置，常见的样式调整包括文字属性、颜色、背景等。
基础样式设置
可以通过标签选择器或者类选择器给p、div等标签设置样式，比如调整文字大小、颜色、行高。
/* 给所有p标签设置基础文字样式 */
p {
font-size: 16px;
color: #333333;
line-height: 1.8;
}
/* 给类名为content的div设置背景和内边距 */
.content {
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 15px;
}
用CSS设置布局效果
除了基础样式，CSS还可以控制标签的布局方式，实现多列排版、元素对齐等效果，常用的布局方式有普通文档流、浮动布局、弹性布局。
弹性布局示例
弹性布局是现在主流的布局方式，通过给父容器设置display: flex，可以轻松控制子元素的排列方向和对齐方式。
<!-- 弹性布局HTML结构 -->
<div class="flex-container">
<div class="flex-item">第一个区块</div>
<div class="flex-item">第二个区块</div>
<div class="flex-item">第三个区块</div>
</div>
/* 弹性布局CSS样式 */
.flex-container {
display: flex;
justify-content: space-between; /* 子元素两端对齐 */
gap: 15px; /* 子元素之间的间距 */
}
.flex-item {
flex: 1; /* 子元素平分父容器宽度 */
padding: 15px;
background-color: #e9ecef;
text-align: center;
}
完整示例演示
下面是一个完整的HTML5页面示例，结合了p、div标签和CSS样式、布局设置，实现了一个简单的内容展示页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5内容设置示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
.main-content {
max-width: 1200px;
margin: 20px auto;
padding: 0 15px;
}
.article-section {
margin-bottom: 30px;
}
.article-section p {
margin-bottom: 10px;
text-indent: 2em;
}
.card-container {
display: flex;
gap: 20px;
margin-top: 20px;
}
.card {
flex: 1;
padding: 20px;
border: 1px solid #dddddd;
border-radius: 5px;
}
.page-footer {
background-color: #2c3e50;
color: white;
padding: 15px;
text-align: center;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="page-header">
<h1>HTML5内容设置演示页面</h1>
</div>
<div class="main-content">
<div class="article-section">
<h2>内容区域标题</h2>
<p>这是通过p标签放置的段落内容，p标签会自动处理段落间距，适合放置正文描述信息，提升内容的可读性。</p>
<p>第二个段落内容，两段文字之间会有明显的分隔，符合用户的阅读习惯，不需要额外添加分隔元素。</p>
</div>
<div class="card-container">
<div class="card">
<h3>卡片一</h3>
<p>这是第一个卡片的内容，通过div容器组合标题和段落，实现模块化的内容展示。</p>
</div>
<div class="card">
<h3>卡片二</h3>
<p>这是第二个卡片的内容，弹性布局让两个卡片平分宽度，适配不同屏幕尺寸。</p>
</div>
</div>
</div>
<div class="page-footer">
<p>页面底部内容</p>
</div>
</body>
</html>
注意事项
- 不要滥用div标签，优先使用HTML5的语义化标签比如<header>、<main>、<footer>等，提升页面的可访问性和SEO效果。
- CSS样式尽量写在外部样式表或者style标签中，不要使用行内样式，方便后续维护和样式复用。
- 设置布局时要注意盒模型的计算，box-sizing: border-box可以让内边距和边框不影响元素的总宽度，减少布局计算误差。