HTML学习笔记——03：文本处理基础

 HTML 的主要工作之一是赋予文本结构，使浏览器能够按照开发者的意图显示 HTML 文档。

1、标题和段落

大部分结构化文本由标题和段落组成。不管是小说、报刊、教科书还是杂志等。

标题元素（heading）

用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 包括六个级别的标题，<h1>~<h6>

    <h1>主标题</h1>
    <h2>顶层标题</h2>
    <h3>子标题</h3>
    <h4>次子标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

• <h1> 与 </h1> 之间的文本被显示为标题，显示的字体会加粗 （从h1~h6：由大变小）
• <h1 align="center">会居中的标题</h1>

【备注】：

不要使用标题元素来加大、加粗字体！！！

水平分割线

<hr/>

段落（paragraph）

若是不用p标签，浏览器并不会自动帮我们换行：

<p> 与 </p> 之间的文本被显示为段落 

    <p>这是段落1</p>
    <p>这是堕落2</p>

换行并空行，浏览器会自动地在段落的前、后添加空行。段落与段落之间会显示空行（<br>:仅仅是换行，不空行）。

换行标签

若是不用p标签，想要实现换行，可以使用换行标签</br>。

【备注】：

换行标签是一个自闭和标签。

    <p>这是段落1</p>
    <p>这是堕落2</p>

    这是段落1<br/>
    这是堕落2<br/>

2、列表（list）

标记列表通常包括至少两个元素。最常用的列表类型为：

1、无序列表（Unordered List）

无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。

默认使用粗圆点标记：

    <ul>
        <li>是他</li>
        <li>是他</li>
        <li>就是她</li>
        <li>我们的朋友，小哪吒</li>
    </ul>

属性type：指定标记的类型

type=”disc”-----实心粗原点（默认）

type=”circle”------空心圆点

type=”square”------实心方块

    <ul>
        <li>是他</li>
        <li type="disc">是他</li>
        <li type="circle">就是她</li>
        <li type="square">我们的朋友，小哪吒</li>
    </ul>

    <ul type="circle">
        <li>春花秋月何时了</li>
        <li>往事知多少</li>
        <li>小楼昨夜又东风</li>
        <li type="square">古今多少事，都付笑谈中</li>
    </ul>

2、有序列表（Ordered List）

有序列表(order)（使用数字或是字母标记，不加说明用数字，从1开始）

    <ol>
        <li>1983年小巷，十二月晴朗</li>
        <li>夜的第七章</li>
        <li>打字机继续推向接近事实的那下一行</li>
    </ol>

用字母标记，从C开始：

    <ol type="A" start="3">
        <li>1983年小巷，十二月晴朗</li>
        <li>夜的第七章</li>
        <li>打字机继续推向接近事实的那下一行</li>
    </ol>

 

【注意】：

 <ol type="A" start="C">这样写没有效果，还是从A开始。哎~~~

序列之间可以嵌套

    <ul>
        <li>观自在菩萨</li>
        <li>行深般若波罗蜜多时</li>
        <ol>
            <li>注释：般若，智慧也。</li>
            <li>波罗蜜，到彼岸也。</li>
        </ol>
        <li>照见五蕴皆空，渡一切苦厄。</li>
        <li>舍利子！色不异空，空不异色；色即是空，空即是色；受想行识，亦复如是。</li>
    </ul>

3、自定义列表——描述列表（description list）

目的：标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

    <dl>
        <dt>自定义列表项</dt>
        <dd>每个自定义列表项的定义</dd>
        <dt>自定义列表项</dt>
        <dd>每个自定义列表项的定义</dd>
    </dl>

【备注】：

1、浏览器的默认样式会在<dd>之前产生缩进。

2、<dt>和<dd>按照自己想要的样式，随意组合

    <dl>
        <dt>自定义列表项1</dt>
        <dt>自定义列表项2</dt>
            <dd>每个自定义列表项的定义1</dd>
            <dd>每个自定义列表项的定义2</dd>
    </dl>

3、重点强调

目的：突出某句话的重点。

1、斜体<em>

<p>这是<em>先斩后奏</em>与<em>覆水难收</em>的问题</p>

2、粗体<strong>

<p>我的理想，是化作一滩<strong>泥</strong>，静静地堆在墙角！</p>

3、颜色标识<mark>

    <p>林花谢了春红，<mark>太匆匆</mark>太匆匆</p>

默认是黄色背景

4、表象元素：<b>、<i>、<u>

以上，我们所讨论的元素都有明确的相关语义。

<b>、<i> 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样仅仅影响表象而且没有语义的元素，被称为表象元素。

最好的经验法则是：只有在没有更合适的元素时，才适合使用<b>、<i>、<u>来表达传统上用粗体、斜体或下划线表达的意思；

• <i> 被用来传达传统上用斜体表达的意义；
• <b> 被用来传达传统上用粗体表达的意义；
• <u> 被用来传达传统上用下划线表达的意义；

4、链接<a>标签

链接非常重要 — 它们赋予 Web 网络属性。使互联网成为互联的网络。

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。

要植入一个链接，我们需要使用一个简单的元素 — <a> — a 是 "anchor" （锚）的缩写。

<a href = ”点击标签跳转的网络地址/相对路径”>页面展示内容</a>

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

备注：

1、链接默认会有一个下划线

2、默认点击后，当前窗口会跳转到对应的网址

3、点击过链接后，链接会变色

1、href属性：

href 这个名字，代表超文本引用（ hypertext reference）。

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。

这个属性声明超链接的 web 地址。例如 href="https://www.mozilla.org/"

2、title属性

title 属性为超链接声明额外的信息，比如你将链接至的那个页面。例如 title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。

<a href="https://www.mozilla.org/zh-CN/about/manifesto/" title="快点来戳我一下~~">Mozilla Manifesto</a>

3、target属性

target 属性用于指定链接如何呈现出来。

例如，target="_blank" 将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

【注意】：

URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。

如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

4、块级链接

任何内容，都可以作为链接出现。把它包裹在锚点元素（<a>）内。

    <a href="https://hanyu.baidu.com/shici/detail?from=aladdin&pid=7675bdd0188d402d8e6029b7435277b5"
    target="_blank">
        <h2>折桂令·春情</h2>
    </a>
    <p>平身不会相思，才会相思，便害相思。</p>
    <p>身似浮云，心如飞絮，气若游丝，空一缕馀香在此，盼千金游子何之。</p>

5、路径访问

当前目录结构：

代码写在TEST.html页面中

    <!-- 指向当前目录 -->
    <p>现在我要访问<a href="HtmlTest01.html">啦啦啦，种太阳</a>页面</p>
    <br>
    <!-- 指向子目录目录 -->
    <p>我现在要访问<a href="project/subIndex.html">子文件夹下的index页面</a>啦啦啦啦啦</p>
    <br>
    <!-- 指向上一层目录 -->
    <img src="../imgSrc/img.png">

【注意】：

指向上一级目录使用两个英文点号(..)

6、链接到特定文档片段

<a>标签，可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id 属性。

目标文档片段：

<p id="a_address">我的理想，是化作一滩<b>泥</b>，静静地堆在墙角！</p>

同一个文件链接过去：

    <p>我的<a href="#a_address">理想</a>是什么？</p>

不同文件链接过去：

    <p>我的<a href="../TEST.html#a_address">理想</a>是什么？</p>

7、download属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。

    <img src="../imgSrc/img.png">
    <p><a href="../imgSrc/img.png" download="xxx.png">点击下载该图片</a></p>

 

8、电子邮件链接：mailto

当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和mailto:URL协议实现。

<p>向我发送一份<a href="mailto:xxxxxxx@qq.com">邮件</a></p>

 电子邮件地址是可选的，即href="mailto:"，发送新的电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息。

任何标准的邮件头字段可以被添加到你提供的mailto URL 中，最常用的是主题（subject）、抄送（cc）和主体（body）

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  发送含有 cc、bcc、主题和主体的邮件
</a>

【注意】：

每个字段的值必须使用 URL 编码。

5、上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。

上标：<sup>

<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

 

下标：<sub>

    <p>
        咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
    </p>

6、注释

<!--这是一段注释-->

<!--这是一段很长
很长注释-->

 7、特殊符号

空格：&nbsp;

    <!-- 看得出来这中间有7个空格吗？ -->
    空       格<br/>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

【备注】：

若是不用&nbsp;作为空格，则浏览器会把多个空格合并成一个空格。

小于 <	&lt;
大于 >	&gt;
&符号	&amp;
双引号"	&quot;
版权符号©	&copy;
。。。。。。	。。。。。。

【注意】：

特殊符号，以&开头，以;结尾。

1、转义字符各字符之间不能出现空格。

2、转义字符必须以";"结束。

3、单独的"&"不被认为是转义字符的开始。

4、转义字符区分大小写。

8、块级元素和内联元素

HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）

块级元素：

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

块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

即：块级元素会导致文本前、后，换行。

块级元素可以容纳：内联元素和另其他块级元素。

块级元素的特点：

①总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

③如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；

④块级元素中可以包含其它的内联元素和块级元素。

内联元素：

内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

内联元素的特点：

①和相邻的内联元素在同一行;

②宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变;

③宽度就是它的文字或图片的宽度，不可改变；

④内联元素只能容纳文本或者其他内联元素。

【注意】：

可以通过 display 属性将元素在行内元素和块级元素之间进行切换。

块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。