当前位置：首页 > 行业动态 > 正文

html文字排版代码

HTML文字排版需用标题标签（h1-h6）、段落标签（p），配合CSS设置字体、颜色及对齐方式，合理使用加粗（strong）和斜体（em）

HTML文字排版核心代码与说明

基础标签标签

HTML提供6级标题标签（<h1>~<h6>），用于定义内容层级结构，数值越小,字体越大。

效果示例
<h1> 这是一级标题（最大）
<h2> 这是二级标题
<h3> 这是三级标题
<h4> 这是四级标题
<h5> 这是五级标题
<h6> 这是六级标题（最小）

代码示例：
“html/h1>/h2>使用

 段落与换行
`<p>`：定义段落，自动添加上下间距。
`<br>`：强制换行（单标签，无闭合标签）。
代码示例：
```html
<p>这是第一个段落。</p>
<p>这是第二个段落，中间用<br>换行。</p>

样式控制

字体与颜色

通过CSS或内联样式设置：

  • color：文本颜色（如red、#ff0000）。
  • font-family：字体类型（建议指定备选字体）。
  • font-size：字体大小（推荐使用px、em或rem单位）。

代码示例：

<p style="color: navy; font-size: 16px; font-family: 'Arial', sans-serif;">
  自定义样式文本
</p>

文本对齐

  • text-align: left;（默认左对齐）
  • text-align: center;（居中对齐）
  • text-align: right;（右对齐）
  • text-align: justify;（两端对齐,需足够宽度）

代码示例：

<div style="text-align: center;">居中对齐的文本</div>
<div style="text-align: justify; width: 300px;">
  两端对齐的文本，需容器宽度足够才能生效。
</div>

列表排版

无序列表（<ul>）

使用圆点符号，配合<li>项,可通过CSS修改圆点样式。

html文字排版代码 第1张

代码示例：

<ul type="circle">
  <li>项目一</li>
  <li>项目二</li>
</ul>

有序列表（<ol>）

使用数字或字母顺序，配合<li>项。type属性可设为1（默认）、A、a等。

代码示例：

<ol type="A">
  <li>第一步</li>
  <li>第二步</li>
</ol>

定义列表（<dl>）

用于术语与描述的对应，包含<dt>（术语）和<dd>（描述）。

代码示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页外观。</dd>
</dl>

文本格式化

加粗与斜体

  • <b> / <strong>：加粗文本（<strong>有语义强调作用）。
  • <i> / <em>：斜体文本（<em>表示强调）。

代码示例：

<p>这是<b>加粗</b>文本，这是<i>斜体</i>文本。</p>

删除线与下划线

  • “：显示删除线（如标注已删除内容）。
  • <u>：显示下划线（慎用，可能影响可读性）。

代码示例：

<p>这是<del>删除线</del>文本，这是<u>下划线</u>文本。</p>

表格排版

基本表格结构

使用<table>定义表格，包含<tr>（行）、<th>（表头）、<td>（单元格）。border属性可添加边框。

代码示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

合并单元格

  • colspan：合并列（如<th colspan="2">合并两列</th>）。
  • rowspan：合并行（如<th rowspan="2">合并两行</th>）。

代码示例：

<table border="1">
  <tr>
    <th rowspan="2">类别</th>
    <th colspan="2">数据</th>
  </tr>
  <tr>
    <th>数值</th>
    <th>单位</th>
  </tr>
  <tr>
    <td>温度</td>
    <td>25°C</td>
    <td>℃</td>
  </tr>
</table>

响应式排版技巧

视口单位与弹性布局

  • 视口单位：vw（视口宽度百分比）、vh（视口高度百分比），如font-size: 5vw;。
  • Flex布局：使用display: flex;实现自适应排版。

代码示例：

<style>
  .container {
    display: flex;
    flex-direction: column; / 垂直排列 /
  }
  .box {
    padding: 10px;
    background: #f0f0f0;
    margin: 5px; / 自适应间距 /
    border: 1px solid #ccc;
  }
</style>
<div class="container">
  <div class="box">自适应宽度盒子</div>
  <div class="box">内容自动换行
文字排版
0

相关文章