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

html文字代码

“`python，from bs4 import BeautifulSoup，html = “Hello World”，soup = BeautifulSoup(html, ‘html.parser’)，print(soup.get_text()) # 输出纯文本

基础文本标签

段落与换行

作用 示例代码 显示效果
<p> 定义段落 <p>这是一个段落</p> 这是一个段落
<br> 强制换行 <br>新行 新行
&nbsp; 保留空格（非换行） 空格&nbsp;测试 空格 测试

文字样式

标签/属性 作用 示例代码 显示效果
<b> 粗体 <b>加粗文字</b> 加粗文字
<i> 斜体 <i>斜体文字</i> 斜体文字
<u> 下划线 <u>下划线</u> 下划线
<small> 小号字体 正常<small>缩小</small> 正常缩小
<mark> 高亮标记 <mark>标记内容</mark> （黄色背景）

语义化文本

作用 示例代码 适用场景
<strong> 强调重要性（语义化） <strong>重要内容</strong> 关键信息（搜索引擎更重视）
<em> 强调语气（语义化） <em>强调语气</em> 需要重读的文本

文本样式进阶

CSS控制文字

属性 作用 示例代码 效果
color 文字颜色 color: red; 红色文字
text-align 水平对齐 text-align: center; 文字居中
line-height 行高 line-height: 2; 行距加倍
font-family 字体系列 font-family: Arial, sans-serif; 优先使用Arial字体

文本缩进与排版

<blockquote>引用内容</blockquote> <!-缩进效果 -->
<div style="text-indent: 2em;">首行缩进</div>

特殊字符处理

符号 实体名称 实体编号 用途
< &lt; &#60; HTML标签符号
> &gt; &#62; HTML标签符号
& &amp; &#38; 和逻辑运算符
&copy; &#169; 版权符号
&reg; &#174; 注册商标

富文本与链接

超链接中的文字

<a href="https://example.com" style="color: blue; text-decoration: underline;">
  点击访问示例网站
</a>

图片内嵌文字

<figure>
  <img src="image.jpg" alt="示例图" style="width:300px;">
  <figcaption>图1：示例图片说明</figcaption>
</figure>

常见问题解答

Q1: 如何让文字在容器内垂直居中？

A1: 使用CSS flex布局：

html文字代码 第1张

.container {
  display: flex;
  align-items: center; / 垂直居中 /
  justify-content: center; / 水平居中 /
  height: 200px;
}

Q2: 如何禁止用户选中文字？

A2: 添加CSS属性：

.no-select {
  user-select: none; / 禁止选中 /
  -webkit-user-select: none; / 兼容Safari /
}
HTML
0

相关文章