美文网首页
HTML-02. 标题,段落和格式化

HTML-02. 标题,段落和格式化

作者: RaoZC | 来源:发表于2020-10-09 15:06 被阅读0次

1. 标题(head)

标题是通过<h1> ~ <h6> 标签进行定义的,确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题,因为搜索引擎可以使用标题为网页结构和内容进行索引编制。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

输出结果如下


标题

2. 段落(paragraph)

段落是通过 <p> 标签定义,浏览器会自动地在段落的前后添加空行。如果不想差生空行,可用<br>。想产生横线,用<hr>, 注释则用<! --...-->

<p>Notch signaling pathway 
<hr> Notch signaling. 
<!--这是注释啊-->
<br>It<br>plays a major role in the regulation of embryonic development. 
</p>

则输出结果为:


段落

3. 文本格式化

3.1 文本格式化标签

HTML 使用标签 <b>(粗体) 与 <i>(斜体) 对输出的文本进行格式,而常用标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。两者意义不太一样,前者仅表示粗体或者斜体文本,而<strong><em>则意味着呈现的文本是重要的。
看例子:

<p>
    <b>Build</b> a future 
    <i>where</i> people 
    <em>live</em> in 
    <small>harmony</small> 
    <strong>with</strong> 
    <sub>nature</sub>.
    <sup>We</sup> 
    <ins>hope</ins> 
    <del>they</del>
    succeed.
</p>

效果如下:


文字格式化

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub > 定义下标字(>前没有空格)
<sup > 定义上标字(>前没有空格)
<ins> 定义插入字
<del> 定义删除字

3. 2. 引文,引用和标签定义

3.2.1 文字顺序

使用<bdo> 定义方向,bdo指的是 bidi 覆盖(Bi-Directional Override),包含一个必须的属性dir,值为ltr(left to right)或者rtl。

<p>你好吗</p>  
<p><bdo dir="rtl">你好吗</bdo></p>  

输出结果:


文本顺序
3.2.2 缩写

<abbr> 标签用来表示一个缩写词或者首字母缩略词,通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时,<abbr> 标签的 title属性可被用来展示缩写词/首字母缩略词的完整版本

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

输出一个能显示完整信息的缩略词


缩写
3.2.3 长引用

HTML利用<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进

<blockquote cite="https://en.wikipedia.org/wiki/Notch_signaling_pathway">
The Notch signaling pathway is a highly conserved cell signaling system present in most animals.[1] Mammals possess four different notch receptors, referred to as NOTCH1, NOTCH2, NOTCH3, and NOTCH4.[2] The notch receptor is a single-pass transmembrane receptor protein. 
</blockquote>

输出为缩进的一段文字


长引用,整段缩进
3.2.4 短引用

<q>标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。

<q cite="https://en.wikipedia.org/wiki/Notch_signaling_pathway">
The Notch signaling pathway is a highly conserved cell signaling system present in most animals.[1] Mammals possess four different notch receptors, referred to as NOTCH1, NOTCH2, NOTCH3, and NOTCH4.[2] The notch receptor is a single-pass transmembrane receptor protein. 
</q>

输出带有引号的一段文字

短引用,带引号
两种引用均有属性值cite,定义引用的源 URL
3.2.5 定义引证,引用

<cite>标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。一般用斜体表示,例如

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

输出斜体引用文字


斜体引用
3.2.6 地址

<address> 标签定义文档作者/所有者的联系信息,输出斜体字。

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
输出为: 地址

参考:
HTML教程

相关文章

  • HTML-02. 标题,段落和格式化

    1. 标题(head) 标题是通过 ~ 标签进行定义的,确保将 HTML 标题标签只用于标题。不要仅仅是为了...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • 面试之块状元素、行内元素有哪些?各自的特点?

    块状元素 地址文字 .----- 标题标签 水平分割线 段落 预格式化 ...

  • 前端学习笔记一-html+css

    一.html 排版标签 标题: ~ 段落: 换行: 水平线: 文本格式化标签 加粗: (推荐使用str...

  • Markdown简洁语法

    1. 设置标题 效果: 一级标题二级标题五级标题 2. 格式化字体 效果: 斜体粗体删除线代码块引用段落 3. 列...

  • HTML基础4--标题和段落

    标题和段落 文本通常都是由标题和段落组成段落是通过 元素标签进行定义的 标题是通过“标题标签”进行定义的 表示主...

  • CSS 文字格式化

    文字格式化排版 段落格式化排版

  • HTML基础

    文字基础 标题和段落 列表 无序列表 有序列表 嵌套列表 重点强调 斜体粗体下划线 超链接 文本格式化 描述列表(...

  • html常用标签01

    标题标签 段落标签 换行标签 文本格式化标签加粗标签 倾斜标签 删除标签 下滑线标签

  • Test

    标题-1 段落 1 段落 2 标题-2 段落 3 段落 4 标题-3 段落 4 段落 5 标题-4 click m...

网友评论

      本文标题:HTML-02. 标题,段落和格式化

      本文链接:https://www.haomeiwen.com/subject/bhplpktx.html