HTML 学习记录（中）

jigsaw_zyx

已于 2022-05-05 08:19:47 修改

阅读量259

点赞数 2

分类专栏： web前端文章标签： html

于 2022-04-21 08:39:45 首次发布

本文链接：https://blog.csdn.net/jigsaw_zyx/article/details/124312426

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

持续学习中…
最近短诗大赛如火如荼的进行，很多人的浪漫情怀都在迸发，这里举例包含短诗大赛里的诗，喜欢也可以去看看。。

文章目录

列表标签
表格
视频和音频

列表标签

在这里插入图片描述

段落与换行

如大家在之前的例子中看到的，我们使用p元素定义段落。p元素是HTML中最常用的元素之一。

举例如下：

例 1.

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
例 2.

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。
在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>

例1和例2唯一的不同在于，例2中我们在段落内容中换行了。那么，在实际显示时，会显示换行吗？

显示效果如下图：

在这里插入图片描述
大家可以看到，虽然我们在段落内容中换行了，但是显示时是不会换行的。那么如果我们想要在一个段落中换行要怎么做呢？

我们可以使用<br>标签。

举例如下：

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br>
在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>

显示效果如图：

在这里插入图片描述

列表

生活中我们经常使用列表，例如购物清单、待办事项。在HTML中，我们可以创建无序列表、有序列表和描述列表，而且一个列表中可以嵌套另一个列表。

通常，列表都是由父元素和子元素构成的，父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。

三种列表类型组成元素如下：

| 类型 | 父元素 | 子元素|
| ------------ | ------------ |
| 有序列表 | ol | li|
| 无序列表 | ul | li|
| 描述列表 | dl| dt， dd|

提示：

ol: order list；

ul: unorder list。

有序列表实例

如果列表顺序是不能随意交换时，我们使用有序列表。例如：

<body>
    <p>健身房基本锻炼步骤</p>
    <ol>
        <li>热身</li>
        <li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li>
        <li>有氧运动(包括慢跑、单车、游泳、登山机等)</li>
        <li>拉伸、放松</li>
    </ol>
</body>

显示效果如图：
在这里插入图片描述

无序列表实例

如果列表顺序不重要时，我们使用无序列表。例如：

<body>
    <p>购物清单</p>
    <ul>
        <li>酸奶</li>
        <li>苹果</li>
        <li>鸡胸肉</li>
        <li>白炽灯泡</li>
    </ul>
</body>

显示效果如图：
在这里插入图片描述

描述列表实例

当我们需要描述成组出现的名称(术语)及其值之间的关联时，我们使用描述列表。例如：

<body>
    <p>HTML里程碑</p>
        <dl>
            <dt>1995年11月24日</dt>
            <dd>HTML2.0发布，对应的IETF文档为RFC 1866</dd>
            <dt>1997年1月14日</dt>
            <dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。
            <dt>1997年12月18日</dt>
            <dd>HTML 4.0发布。</dd>
            <dt>2014年10月28日</dt>
            <dd>HTML5 发布。</dd>
            <dt>2016年11月1日</dt>
            <dd>HTML 5.1发布。</dd>
        </dl>
</body>

显示效果如图：
在这里插入图片描述

文本格式化

一个网页中通常包含了文本信息，对于不同的文本类型，我们可以选择合适的 HTML 语义化元素进行标记。例如，em 元素用于标记强调部分内容，small 元素用于注解、署名等类型的文本。

常用的元素如下：

元素	含义	举例
strong	表示内容的重要性	-
em	表示内容的着重点	-
mark	表示内容高亮显示	对搜索结果页面或文章中的搜索词进行突出显示
small	表示细则一类的旁注	通常包括免责声明、 注意事项、法律限制、版权信息等
b	希望读者注意的文字	如文档摘要里的关键词、评论中的产品名、文章导语等
i	表示不同于其他文字的文字，具有不同的语态或语气	如分类名称、技术术语、翻译的散文等
sub	定义下标	常见的下标包括化学符号等
sup	定义上标	常见的上标包括商标符号、指数和脚注编号等

在HTML5中，更强调语义。所以，我们在选择使用何种元素进行文本标记时，应该注重于语义，而不是样式。
什么意思呢？不要为了让一段文字倾斜而使用i元素，而是这段文字有i元素的语义。如果单纯想要文字倾斜，应该编写CSS进行改变。

举例如下：

<body>
    <h1>论语学而篇第一</h1>
    <p><small>
    <b>作者：</b><abbr title="名丘，字仲尼">孔子<sup><a href="#">1</a></sup></abbr>（<time>前551年9月28日－前479年4月11日</time>）
    </small></p>
    <h2>本篇引语</h2>
    <p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是
     <strong>「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等</strong>道德范畴。</p>
    <h2>原文</h2>
    <p>子曰：「<mark>学而时习之，不亦说乎？</mark>有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>
  </body>

显示如下：
在这里插入图片描述

引用

HTML中也有用于标记引用内容的元素——q和blockquote元素:

q 元素用于短的引用，如句子里面的引用；

blockquote 元素表示单独存在的引用，它默认显示在新的一行。

举例如下：

<body>
    <h1>W3C</h1>
    <p>
        <dfn>W3C</dfn> (World Wide Web) 万维网联盟创建于1994年。它是
        <q>Web技术领域最具权威和影响力的国际中立性技术标准机构</q>。
    </p>
    <p>其官方定义</q>为：</p>
    <blockquote cite="https://www.w3.org/">
     The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
    </blockquote>
</body>

显示效果如图：
在这里插入图片描述
其中，blockquote元素的cite属性指定了引用来源链接

展示

在这里插入图片描述

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
        <dt>1997年1月14日</dt>
        <dd>HTML 3.2以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
        <dt>2014年10月28日</dt>
        <dd>HTML5 发布。</dd>
        <dt>2016年11月1日</dt>
        <dd>HTML 5.1发布。</dd>

    </dl>
    <h2>参考文献</h2>
        <ol>
        <small>
            <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p.&#160;1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
        </small>
        <ol/>
</body>
  <!--------- End-------->

</html>

表格

在这里插入图片描述

最基本的表格

在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和数据单元格(td)。
一个最基本的表格如下：

<body>  
    <table>  
        <!-- 第一行 -->  
        <tr>  
            <td>第一行第一个单元格数据</td>  
            <td>第一行第二个单元格数据</td>  
        </tr>  
        <!-- 第二行 -->  
        <tr>  
            <td>第二行第一个单元格数据</td>  
            <td>第二行第二个单元格数据</td>  
        </tr>  
    </table>  
</body>

在这里插入图片描述
这是一个2行2列的表格，可以看到<table>元素中包含了两行，即两个<tr>元素；每行有两列，即每个<tr>中包含两个<td>元素。

提示：

tr: table row；
th: table head；
td: table data。

带边框的表格
在第一个例子中，表格没有边框，看起来不太明显。那么，如何设置带边框的表格呢？

我们可以指定<table>元素的border属性值。

<table border="1">  
</table>

在这里插入图片描述
我们可以通过编写CSS修改边框样式。此例作为了解，在之后的课程中将会学习。

举例如下：

<!DOCTYPE html>
<head>  
    <meta charset="UTF-8" />  
    <title>HTML – 简单表格</title>  
    <style type="text/css">  
    table {  
        border-collapse: collapse;  
    }
    th,  
    td {  
        border: 1px solid #000;  
    }  
    </style>  
</head>
<body>  
    <table border="1">  
        <!-- 第一行 -->  
        <tr>  
            <td>第一行第一个单元格数据</td>  
            <td>第一行第二个单元格数据</td>  
        </tr>  
        <!-- 第二行 -->  
        <tr>  
            <td>第二行第一个单元格数据</td>  
            <td>第二行第二个单元格数据</td>  
        </tr>  
    </table>  
</body>
</html>

在这里插入图片描述

带表头的表格
一般情况下，我们都会指定表格的表头信息，可以使用标题单元格进行定义。

举例如下：

 <body>  
    <table width="400">  
        <!-- 表标题 -->  
        <caption>通讯录</caption>  
        <!-- 表头 -->  
        <tr>  
            <th scope="col">姓名</th>  
            <th scope="col">电话</th>  
            <th scope="col">备注</th>  
        </tr>  
        <tr>  
            <td>李雯</td>  
            <td>18012311234</td>  
            <td>家人</td>  
        </tr>  
        <tr>  
            <td>王谦</td>  
            <td>17812311234</td>  
            <td>同事</td>  
        </tr>  
        <tr>  
            <td>周佳</td>  
            <td>17413511234</td>  
            <td>高中同学</td>  
        </tr>  
    </table>  
</body>

显示效果如下：
在这里插入图片描述
我们设定了<table>元素的width属性，改变了表格的宽度；

我们使用<caption>元素设置了表格的标题；

数据第一行<tr>元素中，使用<th>元素指定了表头。本例中有三列信息，所以包含了三个<th>元素；

并且，我们设置了<th>元素的属性scope的值为col。

scope 属性
<th>元素的scope属性用于定义表头数据与单元数据关联的方法。本例中值为col，表示规定的是列的表头。

其他的一些值含义如下：
在这里插入图片描述
列组和行组的概念将在单元格跨越多行或多列的表格小节中讲述和使用。

结构更清晰的表格

为了使表格的整体结构更加的清晰，我们还能够使用<thead>、<tbody>和<tfoot>元素来定义表格。

<body>  
    <table width="400">  
        <caption>运动会跑步成绩</caption>  
        <thead>  
             <!-- 表格头部 -->  
            <tr>  
                <th scope="col">长度</th>  
                <th scope="col">李雯</th>  
                <th scope="col">王谦</th>  
                <th scope="col">周佳</th>  
            </tr>  
        </thead>  
        <tbody>  
            <!-- 表格主体 -->  
            <tr>  
                <th scope="row">100米</th>  
                <td>14s</td>  
                <td>16s</td>  
                <td>13s</td>  
            </tr>  
            <tr>  
                <th scope="row">200米</th>  
                <td>26s</td>  
                <td>23s</td>  
                <td>25s</td>  
            </tr>  
            <tr>  
                <th scope="row">400米</th>  
                <td>70s</td>  
                <td>73s</td>  
                <td>69s</td>  
            </tr>  
        </tbody>  
        <tfoot>  
            <!-- 表格尾部 -->  
            <tr>  
                <th scope="row">总用时</th>  
                <td>110s</td>  
                <td>112s</td>  
                <td>107s</td>  
            </tr>  
        </tfoot>  
    </table>

显示效果如图：

在这里插入图片描述

顾名思义，<thead>元素标记表格第6行到第10行为头部；<tbody> 元素包围了第15行到第32行的所有数据行；最后，<tfoot>元素标记表格的尾部。

此例中，我们将列值的总和行作为表格的尾部。通常，我们都会建议大家使用这三种元素来定义表格，因为这样做表格的总体结构更为清晰。

单元格跨越多行或多列的表格
我们经常会看到这样的表格：
在这里插入图片描述
其中的单元格，跨越了多行或者多列。在HTML中要如何实现呢？

我们可以设定colspan 和 rowspan 属性让或单元格跨越多行或多列。

上述表格代码如下：

<body>  
    <table>  
        <caption>彩排安排</caption>  
        <thead>  
            <!-- 表格头部 -->  
            <tr>  
                <th scope="rowgroup">时间</th>  
                <th scope="col">周一</th>  
                <th scope="col">周二</th>  
                <th scope="col">周三</th>  
            </tr>  
        </thead>  
        <tbody>  
            <!-- 表格主体 -->  
            <tr>  
                <th scope="row">上午8点</th>  
                <td>开场舞</td>  
                <td colspan="2">歌曲串烧</td>  
            </tr>  
            <tr>  
                <th scope="row">上午9点</th>  
                <td>小品</td>  
                <td>相声</td>  
                <td rowspan="2">大型魔术</td>  
            </tr>  
            <tr>  
                <th scope="row">上午10点</th>  
                <td>杂艺表演</td>  
                <td>乐队歌曲</td>  
            </tr>  
        </tbody>  
    </table>  
</body>

在此例中，表格头部第7行，scope="rowgroup"指定了该单元格是行组的表头。表格中，第3行的第3列和第4列为合并单元格，我们设置第18行colspan=“2”，表示该单元格跨越两列；同理，第24行设置rowspan="2"表示该单元格跨越两行。

所以，

要设置单元格跨越多行，只需设置属性rowspan=“n”；
设置单元格跨越多列，只需设置属性colspan=“n”。
n是单元格要跨越的行数或列数。

展示

视频和音频

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频-->
<!--
src:资源路径
controls:表示控制视频的播放
autoplay:自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>


<audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>