专业编程基础技术教程

网站首页 > 基础教程 正文

HTML/CSS 备忘录 - 02. HTML 排版与文本标签

ccvgpt 2024-11-14 14:19:07 基础教程 4 ℃

一、块级元素与内联（行级）元素

在 HTML 中有两种重要元素类别：

1. 块级元素

HTML/CSS 备忘录 - 02. HTML 排版与文本标签

在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。

块级元素通常是页面上的结构元素。例如：

  • 标题（<h1>~<h6>）
  • 段落（<p>）
  • 列表（<ul>/<ol>）
  • 导航（<nav>）
  • 页脚（<footer>）等。

一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

2. 内联（行级）元素

通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。

它通常与文本一起使用，例如：

  • 超链接（<a>）
  • 强调（<em>/<strong>）等。

二、语义化标签

用特定的标签，去表达特定的含义。标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！其主要作用如下：

  • 使得代码结构清晰可读性强。
  • 有利于 SEO（搜索引擎优化）。
  • 方便设备解析（如屏幕阅读器、盲人阅读器等）。

三、标题与段落

<!-- 定义标题 h1~h6 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!-- 定义段落 -->
<p>这是一段文字</p>
  • <h1>~<h6> 不能互相嵌套。
  • <p> 中不要写块级元素。

四、文本标签

<em>强调重点的文本</em>
<strong>具有某种重要性的文本</strong>
<mark>具有某种关联性的文本，如搜索结果中的关键字（H5新增）</mark>

更多的文本标签：

<!-- 删除与添加的内容 -->
<del>删除</del>
<ins>添加</ins>
<!-- 下标与上标元素 -->
<sub>下标</sub>
<sup>上标</sup>
<!-- 缩写，要配合 title 属性 -->
<abbr title="超文本标记语言">HTML</abbr>
<!-- 覆盖默认的文本方向，要配合 dir 属性 -->
<bdo dir="rtl">从右到左显示文本</bdo>
<!-- 短引用与长引用 -->
<q>短引用</q>
<blockquote>长引用，块级元素</blockquote>

<!-- <i>、<b>、<u> 之前表示斜体、粗体、下划线 -->
<!-- HTML5 对其进行了重新的定义 -->
<!-- 但 <i> 元素现在更多用于呈现字体图标 -->
<i>表示西方文本中的技术术语、音译、思想或船名等。</i>
<b>用于吸引读者注意元素内容，如摘要中的关键字、评论中的产品名称等。</b>
<u>应用了某种形式的非文本注释，如专有名词，拼写错误等。</u>

<dfn>被定义的术语</dfn>
<cite>著作名，如书籍、歌曲、电影等。</cite>
<address>地址信息，块级元素</address>
<small>旁注和小字印刷，如版权和法律文本。</small>

<!-- 计算机代码相关的标签 -->
<code>代码片段<var>变量</var></code>
<pre>
  用于保留空白字符，块级元素，常用于代码块:
  void main() {
    printf();
  }
</pre>
<kbd>键盘输入的文本</kbd>
<samp>从正常的上下文中，将某些内容提取出来，例如:标识设备输出</samp>
  • <pre>、<blockquote>、<address> 是块级元素，其他都是内联元素。
  • <small>、<b>、<u>、<q>、<blockquote> 这些语义感不强的标签，我们很少使用。
  • 大多数的标签并不常用，不用过于纠结，酌情使用即可（不用也没啥大问题）。

注音或注释（HTML5新增）：

<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp> 
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
  • <rt> 元素包含字符的发音。
  • <rp> 元素用于不支持 <ruby> 元素的情况，<rp> 的内容提供了应该展示的东西，通常是圆括号，以便表示 ruby 注解的存在。

五、<div> 与 <span>

<div> 是块级元素，而 <span> 是一个内联元素。他们都是一个通用的容器，没有任何语义，但经常使用。

<div>
  <p>Hello <span>LIWY</span>!</p>
</div>

六、<hr/> 与 <br/>

<hr> 元素表示段落级元素之间的主题转换（分隔），块级元素。<br> 元素在文本中生成一个换行（回车）符号，内联元素。

<p>
  Hello:<br />
  LIWY
</p>
<hr />
<p>今天天气不错</p>

七、HTML5 新增的排版标签

<header>文档或文档部分区域的页眉</header>
<nav>导航链接的区域</nav>
<article>独立的内容：博客文章、论坛帖子、新闻故事</article>
<section>页面或文章中的某段文字</section>
<aside>侧边栏，文档的其他区域，与其他内容相关性不高</aside>
<footer>文档或文档部分区域的页脚</footer>
  • 这些标签都是有语义的块级元素（可以理解为带语义的 <div>）。
  • <artical> 比 <section> 更强调独立性，一块内容如果比较独立、比较完整，应该使用 <artical>。
  • <artical> 里面可以有多个 <section>，<section> 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 <section>。

八、综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
  <title>LIWY 的站点</title>
  <!-- 引用外部样式表 -->
  <link rel="stylesheet" 
    href="style.css" />
</head>
<body>
  <header>
    <h1>本站所有网页的统一主标题</h1>
  </header>
  <nav>
    <!-- 本站统一的导航栏 -->
    <ul>
      <li><a href="#">主页</a></li>
      <!-- 多个导航栏 ... ... -->
    </ul>
    <form>
      <!-- 搜索栏 -->
      <input type="search" name="q" 
        placeholder="要搜索的内容" />
      <input type="submit" 
        value="搜索" />
    </form>
  </nav>
  <div class="main">
    <!-- 网页主体内容 -->
    <article>
      <!-- 文章主题 ... ... -->
    </article>
    <aside>
      <!-- 侧边栏在主内容右侧 -->
      <h2>相关链接</h2>
      <ul>
        <li>
          <a href="#">一个超链接</a>
        </li>
        <!-- ... ... -->
      </ul>
    </aside>
  </div>
  <footer>
    <!-- 本站所有网页的统一页脚 -->
    <p>Copyright ? 2024-2050 liwy.com</p>
  </footer>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表