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

html页面文字代码

HTML页面文字常用、-、、等标签，通过CSS设置字体、颜色、大小，需声明UTF-8编码确保中文显示正常。（48字）

HTML页面文字基础标签

HTML通过不同标签控制文字显示效果,常用基础标签如下：

作用 示例效果
<h1>~<h6> （<h1>最大）
<p> 段落 这是一个段落。
<br> 强制换行 第一行
第二行
&nbsp; 不间断空格 空格 测试 
<p>这是段落文字，<br>包含换行。</p>

文字样式控制（CSS）

通过CSS属性可精细调整文字样式：

html页面文字代码 第1张

属性 说明 示例
font-family 字体类型（多个用分隔） body {font-family: Arial, sans-serif;}
color 文字颜色（支持十六进制/RGB/名称） p {color: #333;}
text-align 对齐方式（left/right/center/justify） h1 {text-align: center;}
line-height 行高（数值/百分比） p {line-height: 1.8;}
text-indent 首行缩进（配合text-align: justify;） p {text-indent: 2em;} 
/ 示例：设置全局文字样式 /
body {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

特殊文本标签

用于强调或特殊显示的标签：

语义 效果示例
<strong> 强调重要性（语义优于<b>） 加粗文字
<em> 强调语气（语义优于<i>） 斜体文字
<mark> 高亮显示 ==标记文字==
<del> 删除线
<ins> （需配合<del>） 新插入
<small> 小号字体 缩小文字（小号提示）
<sub> 下标 化学式H₂O
<sup> 上标 数学公式E=mc²2 
<p>重要提示：请<strong>立即保存</strong>文件！</p>
<p>化学式：H<sub>2</sub>O + CO<sub>2</sub> → C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

列表与文本排版

无序列表（<ul>）

<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

有序列表（<ol>）

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

定义列表（<dl>）

<dl>
  <dt>术语</dt>
  <dd>解释内容</dd>
</dl>

段落与文本控制

标签/属性 作用 示例
<p> 段落（默认上下有空白间距） 这是段落。
<pre> 保留空格和换行 预格式化文本
<div> 块级容器（用于分组内容） 多段文本

组合
white-space 空格处理（CSS属性） pre {white-space: pre;}
text-wrap 换行控制（CSS属性） p {word-wrap: break-word;} 
<pre>
  保留缩进    空格    格式
</pre>

常见问题与解答

Q1: 如何让文字显示为红色？
A1: 使用CSS的color属性， 

<p style="color: red;">这是红色文字</p>

或通过类名控制： 

.red-text { color: red; }
<p class="red-text">红色文字</p>

Q2: 如何实现段落首行缩进2个字符？
A2: 使用text-indent属性（需配合text-align: justify;）： 

p {
  text-indent: 2em; / em单位相对当前字体大小 /
}
0

相关文章