Learn HTML & CSS文本元素
访客在页面上读到的大部分内容,都是普通的书面文字:标题、段落、加粗的警示、一句引言、一段代码。HTML 为这些内容分别准备了专门的元素,选对元素带来的不只是外观上的变化——它还会告诉浏览器、搜索引擎和无障碍工具每一段文字究竟是什么。
标题与层级结构
HTML 提供了六级**标题**,从 <h1> 一直到 <h6>。标题就是页面或页面某个部分的标题文字。<h1> 是主标题,页面最上方那个大标题;<h2> 标记一个主要章节,<h3> 标记这个章节里的子章节,依此类推直到 <h6>。
想象一本纸质书:封面上的书名是 <h1>,每一章的标题是 <h2>,章节内部的小标题是 <h3>。用这些级别来表示内容之间的从属关系。
从一开始就要记住一点:不要因为想让文字变成某个大小才选某级标题。<h1> 看起来确实很大,但它的作用是表示"这是主标题",不是"把这段文字放大"。如果你想让某处文字变大,那是以后 CSS 该做的事。
<h1>新手做酸面包</h1>
<h2>制作酵头</h2>
<p>酵头是由面粉和水培养出的活性菌种。</p>
<h3>第一到第三天</h3>
<p>将等量的面粉和水混合,然后耐心等待。</p>
<h2>烤出你的第一个面包</h2>
<p>酵头一旦有活性,你就可以开始烘焙了。</p>一个 <h1> 给出整页的标题。两个 <h2> 标记出主要章节,<h3> 恰好嵌套在第一个 <h2> 里面。只看标题的编号,不读一句正文,你就能看出这篇文章的结构。
<h1> 到 <h6>,<h1> 就是最上面那一个主标题,剩下的用来标记章节和子章节。我早期踩过的坑:别因为想要文字变大就随便抓一个标题元素来用,那是 CSS 该干的事。数字表示的是这段文字是什么,不是它有多大。 段落与换行
一段普通文字放在**段落**元素 <p> 里。把每段文字分别包在自己的 <p>...</p> 中,浏览器会在上下留一点空隙,让段落像书里那样彼此分开。
<p>做面包需要四样东西:面粉、水、盐和时间。</p>
<p>把这些做对了,剩下的就是耐心。</p>注意,在 HTML 文件里按回车键对页面没有任何影响。浏览器会忽略你输入的换行和多余空格,它只关心标签。这就是为什么要用 <p> 来分隔段落,而不是把它们分行打出来。
如果你确实需要在一个段落内部换行,比如地址的每一行或者一首短诗,有个专门的 <br> 元素能做到。它只负责强制换一行,别的什么都不做。
<p>...</p> 里,这就是段落之间会有间距的原因。浏览器会忽略你打的回车和空格,所以真正起作用的是标签。只有当一行真的需要在段落中间换行时才用 <br>,比如地址。 强调:<strong> 与 <b>、<em> 与 <i>
有两个元素能让文字加粗,另外两个能让文字变斜体。<strong> 和 <b> 都渲染为粗体;<em> 和 <i> 都渲染为斜体。所以是四个标签,两种外观。
<p><strong>警告:</strong>烤箱现在非常热。</p>
<p>你需要<em>彻底</em>揉面。</p>现阶段,当某段文字很重要时,比如一条警告,就用**<strong>**;想强调某个词——就像大声朗读时你会加重语气的那个词——就用 <em>。这两个是你大部分时候最需要的,浏览器会自动帮你渲染成粗体和斜体。
<strong> 和 <b> 都是加粗,<em> 和 <i> 都是斜体。刚开始学的话,某样东西重要时(比如一条警告)用 <strong>,想强调某个词时用 <em>,就像你会加重语气说话那样。这两个基本能覆盖你写的绝大多数内容。 其他行内文字(引用、<code>、<abbr> 等)
除了粗体和斜体,HTML 还为一些常见的文字片段准备了小元素。一句简短的引言放进 <q>,浏览器会自动帮你加上引号。一段代码,比如某个命令的名字,放进**<code>**,浏览器会用等宽字体显示,让它和普通文字区分开来。
<p>我奶奶总说<q>心急吃不了热豆腐</q>。</p>
<p>用 <code>Ctrl S</code> 快捷键保存文件。</p>这类元素还有一些,但 <q> 表示短引言、<code> 表示代码,是你最常遇到的两个。每一个都会包住一小段文字,并说明它是什么。
<q> 包住一句简短引言并自动加上引号,<code> 用等宽字体显示代码,让它显得突出。这类小标签还有几个,但这两个最常遇到。每一个都包住一小段文字,并说明它是什么。