HTML【基础细化学习】

-cc- Lynn

已于 2022-07-05 17:33:41 修改

阅读量536

点赞数 1

分类专栏： web 文章标签：大数据

于 2022-07-05 16:03:00 首次发布

本文链接：https://blog.csdn.net/Lynntureture/article/details/125619932

版权

web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

注释: 浏览器会自动地在标题的前后添加空行。

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
    <p>这是一段</p>
    <hr>
    <p>这是一段</p>
    <hr>
    <p>这是一段</p>
    <hr>
</body>
</html>

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
    <p>这是一段</p>
    <hr>         <!--这是水平线-->
    <p>这是一段</p>
    <hr>         <!--这是水平线-->
    <p>这是一段</p>
    <hr>         <!--这是水平线-->
</body>
</html>

小结1：

①学会使用<h1>-<h6>来显示标题以及标题等级

②学会如何在代码中加入注释

③学会如何插入水平线

对比标题和字体大小的关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
</body>
</html>

HTML 段落

段落是通过 <p> 标签定义的。

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<p>这个
<br>段落
<br>演示了分行的效果
</p>
</body>
</html>

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<h1>春晓</h1>

<p>
    春眠不觉晓，
        处处闻啼鸟。
           夜来风雨声，
              花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>
</html>

小结：

①如何在浏览器中显示HTML段落（<h1>-<h6>）

②在HTML文档中如何换行（<br>）

③浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等），即使有n个空格最后也只会显示一个

④段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>

pre标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<h1>
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>
</h1>>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<address>
    ADDRESS <a href="https://www.csdn.net/">CSDN</a>.<br>
</address>
</body>
</html>

<abbr>标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<abbr title="World Wide Web">WWW</abbr>
</body>
</html>

把鼠标放在缩略词上面，会显示完整的

<del>(删除)<ins>(插入)标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<a id="tips">有用的提示部分</a>
</body>
</html>

<img>的疑惑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
        <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
        <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

其中alt属性是元素的必选属性，它给出了图像的备选文本，供图像无法显示时采用。当用户因为某种原因(比如：打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时，alt属性提供了替代信息。

img图片标签alt和title属性的区别alt 用于图片没显示时在图片显示区域显示一个说明文字。 title 表示鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。

<a>标签的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<a href="https://www.csdn.net/" target="_top">跳转至CSDN</a>
</body>
</html>

_blank ：在新窗口中打开被链接文档。
_self ：在被点击时的同一框架中打开被链接文档（默认）。
_parent ：在父框架中打开被链接文档。
_top ：在窗口主体中打开被链接文档。

邮件链接的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title Test</title>
</head>
<body>
<p>
    这是另一个电子邮件链接：
    <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
    <b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

参数列表

cc（carbon copy副本） bcc（blind carbon copy盲抄送)

<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。

nofollow 是 HTML 页面中 a 标签的属性值。它的出现为网站管理员提供了一种方式，即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接"。这个标签的意义是告诉搜索引擎这个链接不是经过作者信任的，所以这个链接不是一个信任票。

<base>标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png">
<br><br>
<a href="https://www.csdn.net/">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

其实会跳转到csdn去，因为base设置了默认url去访问csdn

注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"。

注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

-cc- Lynn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML【基础细化学习】

HTML 标题标题（Heading）是通过 - 标签进行定义的。定义最大的标题。定义最小的标题。注释:浏览器会自动地在标题的前后添加空行。HTML 水平线标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。 Title Test.........
复制链接

扫一扫

专栏目录