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

html5里文字

HTML5使用标签展示文字，支持CSS样式、语义化元素，默认UTF-8编码，提升可访问

HTML5 文字处理详解

基础文本标签

  1. 段落标签 <p>
    用于定义段落，浏览器自动添加上下间距。 

    <p>这是一个段落。</p>

  2. 加粗与斜体

    • <strong>：语义化加粗，表示重要性（推荐）。
    • <b>：仅视觉加粗，无语义。
    • <em>：语义化斜体，表示强调（推荐）。
    • <i>：仅视觉斜体，无语义。
    语义 示例效果
    <strong> 加粗文本
    <b> 纯视觉加粗 加粗文本
    <em> 斜体文本
    <i> 纯视觉斜体 斜体文本

  3. 换行与空格

    • <br>：强制换行（需注意 HTML5 中无需闭合）。
    • &nbsp;：表示非换行空格（连续多个空格需用多个 &nbsp;）。

标题标签 <h1>~<h6>

  • 定义文档层级结构,<h1> 为最高层级标题，建议每个页面仅用一次。
  • 示例： 
    <h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>

文本样式属性

属性 说明 示例（直接写在标签内）
style 行内样式（推荐用外部 CSS） <p style="color:red;">红色文字</p>
class 定义 CSS 类名 <span class="highlight">文本</span>
id 定义唯一标识符 <div id="section1">内容</div>

注意：HTML5 已废弃 <font>、<center> 等标签，建议通过 CSS 实现样式。

语义化文本元素

用途 示例
<header> 页眉或章节头部 <header>导航栏</header>
<article> 块 <article>博客正文</article>
<section> 章节区域 <section>章节标题</section>
<footer> 页脚或章节底部 <footer>版权信息</footer>

特殊文本处理

  1. 预格式化文本 <pre>
    保留空格和换行，常用于代码或诗歌。 

    <pre>
函数 test() {
  console.log("Hello");
}
</pre>

  2. 短语与行内标签

    • <span>：通用行内容器，配合 class/id 使用。
    • <code>：表示代码片段。
    • <q>：短引用，默认添加引号。 
      <q>引述内容</q> <!-显示为“引述内容”-->

  3. 实体字符
    用于显示特殊符号（如 &copy;、&lt;、&#128512;）。 

    © 2023 & copyright &

全局属性

属性 说明 示例
lang 声明文本语言 <p lang="zh-CN">中文</p>
dir 文本方向（ltr/rtl） <div dir="rtl">阿拉伯语</div>

问题与解答

问题1：<strong> 和 <b> 有什么区别？何时使用？

解答：

  • <strong> 表示语义上的“重要性”，浏览器可能为此提供额外权重（如 SEO 或屏幕阅读器）。
  • <b> 仅表示视觉加粗，无语义。
    建议：优先使用 <strong>，除非仅需纯视觉加粗。

问题2：如何正确显示多个连续空格？

解答：
HTML 中连续空格会被合并为一个，若需保留多个空格，需使用 &nbsp;（非换行空格）。 

<p>这是&nbsp;&nbsp;&nbsp;三个空格
html5Web字体
0

相关文章