HTML学习笔记（一）

KunTrue

已于 2023-01-14 17:12:54 修改

阅读量489

点赞数 4

分类专栏：笔记文章标签： html 学习前端

于 2023-01-14 16:56:35 首次发布

本文链接：https://blog.csdn.net/KunTure/article/details/128684747

版权

笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、HTML元素的结构

（一）HTML 的语言形式为标签

（如<p>）包围的 HTML 元素，如：

（二) HTML 标签

<p>就是一个典型的 HTML 标签。 HTML 标签有以下特点：

由尖括号包围关键词组成，比如：<p>、<h1>、<div>、<span> 等；
通常成对出现，比如<div> 和 </div>，第一个就是开始标签，第二个就是结束标签，要注意开始标签和结束标签的区别在于，结束标签比开始标签多一个“/”；
虽然标签通常是成对出现的，但并不是所有标签都有对应的结束标签，比如 <input>、<img> 等，它们往往是单独呈现的；

注意：在 HTML 中标签名是大小写不敏感，<p>和<P>是一样的，但是现在一般要求标签统一小写。

(三）剖析 HTML 元素

1.从下面这张图中我们可以看到，一个典型的 HTML 元素 通常是由 开始标签 、 结束标签 和内容构成的。

如果是单独呈现的标签，一个标签就表示一个元素。

2.一个 HTML元素包含了开始标签与结束标签，举个例子

<p>This is a paragraph</p>

提示Tips：HTML元素以开始标签为起始，以结束标签为终止，元素的内容是开始标签与结束标签之间的内容

3.HTML元素可以进行嵌套，可理解为HTML元素可以包含其他HTML元素，HTML文档由相互嵌套的HTML元素构成，例如以下实例包含了三个HTML元素

<!DOCTYPE html>
<html>
<body>
    <p>This is a paragraph.</p>
</body>
</html>

（四）HTML中的嵌套

在 HTML 中，元素可以发生嵌套。请看上面这段 HTML 代码，上面的代码中有两个元素

第一个元素：

<p>HTML是一门伟大的语言！</p>

开始标签：<p> 结束标签：</p> 内容：“HTML 是一门伟大的语言！”

第二个元素：

<div><p>HTML是一门伟大的语言！</p></div>

开始标签：<div> 结束标签：</div> 内容：“<p>HTML是一门伟大的语言！</p>”

第一个元素整体作为<div></div>的内容，嵌套在了<div></div>内部，从结构上发生了嵌套关系。

div元素是p元素的 父元素 ，而p元素是div元素的 子元素。

（五）HTML属性

HTML元素可以设置属性，属性是HTML元素提供的附加信息

属性一般描述于开始标签，总是以名称/值对的形式出现，例如: attr="value"

attr表示属性名，value表示属性值，属性值使用双引号" "括起来

例如: HTML链接由<a>标签定义，链接的地址在href属性中指定

<!DOCTYPE html>
<html>
<body>
    <a href="https://blog.csdn.net/KunTure?spm=1000.2115.3001.5343">This is my blog.</a>
</body>
</html>

HTML常用的通用属性

代码:

<!DOCTYPE html>
<html>
<style>
    #username{
        color: red;
    }
 
    .content1{
        color: cornflowerblue;
    }
    .content2{
        text-decoration: underline;
    }
</style>
<body>
    <!-- id属性 -->
    <p id="username">My name is KunTrue.</p>
    <!-- class属性 -->
    <p class="content1 content2">I graduated from Dalian Maritime University.</p>
    <p class="content1">I'm learning HTML.</p>
    <p class="content1">Welcome to my Blog!!!</p>
    <!-- title属性 -->
    <a href="https://blog.csdn.net/KunTure?spm=1000.2115.3001.5343" title="KunTrue的博客">This is my blog.</a>
    <!-- style属性 -->
    <p style="color:orange;">Let's learn HTML together!!!</p>
</body>
</html>

运行结果如下图所示:

（六）HTML换行

如果想要在段落中进行换行，需要使用专门的换行标签<br />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>
<body>

<p>这个<br>段落<br>演示了换行的效果</p>
</body>
</html>

运行结果如下图所示

（七）HTML水平线

<hr>标签在HTML页面中创建水平线，可用于分隔内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>
<p>这是段落1</p>
<hr>
<p>这是段落2</p>
<hr>
<p>这是段落3</p>
</body>

</html>

运行结果如下图所示

（八）完整的HTML文档结构

上方图片是一个简单、完整的 html 文档，我们一点点来看：

1. <!DOCTYPE html>

(1). 作用：告知浏览器该页面文件的文档类型，指示 web 浏览器使用哪个 HTML 版本编写页面。

(2). 位置：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

(3). <!DOCTYPE> 声明对大小写不敏感。

(4). <!DOCTYPE> 声明没有结束标签。

2. <html lang="en">...</html>

(1). 此元素可告知浏览器其自身是一个 HTML 文档。

(2). <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

(3). lang 属性（语言属性）：当搜索引擎或者浏览器拿到语言属性后，有可能做一些针对指定语言的辅助操作，‘en’表示英文。

3. 标签属性

(1). 标签可以拥有零个或多个标签属性，注意：标签属性与标签名称、标签属性与标签属性之间需用一个空格隔开。

(2). 标签属性可以赋予标签更多的信息，标签属性通常是以 key="value" 即名称="值" 的形式出现。

(3). 常见的标签属性有：class、id、style、lang、src 等。

4. 文档的头部<head>...</head>

(1). head 元素定义文档的头部，我们通常在这里引用样式表、提供元信息等。

(2). 文档的头部中的<title>...</title>定义文档的标题，在网页上体现为网页标签的标题。

(3). 一个 <head> 元素必须包含且只能包含一个 <title> 元素。

元信息：又叫元数据，就是描述数据的数据。这里主要指文档的概要信息。

5. 文档的主体<body>...</body>

(1). body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

（九） HTML中的注释

每一个编程语言都有注释，html也不例外，在HTML中我们用标签来表示注释：

网页中显示的内容如下：

注释标签用于在源代码中插入注释。注释不会显示在浏览器网页中的。

二、HTML文本标签

（一）块状和内联标签

面我们来写一个简单的段落

<p>
  Unrivalled luxury, stunning white-sand beaches and an amazing underwater world
  make Maldives an obvious choice for a true holiday of a lifetime.
  <img
    src="https://document.youkeda.com/P3-1-HTML-CSS/1.3/1-3-island-2.jpg"
    alt=""
  />
</p>

显示效果：

可以看到段落中有文字，有图片，内容丰富。但这样文字和图片显示在同一行，显得有些不美观。如果可以像下图这样，图片和文字分行显示就好了。有没有办法把图片和文字分行呢？

很简单，我们可以这么做，把图片单独用段落标签包起来。

<p>
  Unrivalled luxury, stunning white-sand beaches and an amazing underwater world
  make Maldives an obvious choice for a true holiday of a lifetime.
</p>
<p>
  <img
    src="https://document.youkeda.com/P3-1-HTML-CSS/1.3/1-3-island-2.jpg"
    alt=""
  />
</p>

现在网页内容的结构是这样的，有两个段落，第一个是文字，第二个是图片：

为什么这么做就可以让文字和图片分行显示呢？

这是因为<img>标签是内联标签，而<p>标签是块状标签。

修改前： 内联标签<img>标签不会为自己的内容（图片）占据新的一行，所以图片和文字显示在同一行。

修改后： 我们把图片用段落标签<p>单独包起来之后，由于段落标签<p>是块状标签，会为自己的内容（图片）占据新的一行，所以文字段落和图片段落就显示在两行里了。

块状标签和内联标签是 HTML 中两种主要的标签类型，它们 最大的区别 就是：块状标签会为自己的内容占据新的一行，而内联标签则不会。

常见的块状标签有段落<p>、标题<h1>、<div>等，常见的内联标签有<span>、图片<img>、<strong>等，在 HTML 中有很多标签，大家不用在一开始的时候就试图记住所有的标签，在之后的学习和重复中，我们自然会慢慢记住常用的一些标签。

我们来看这个非常简单的网页，这个网页展示了一篇文章，点击播放按钮查看代码及显示效果。

文章中有标题，段落，图片。其中标题标签<h1>和段落标签<p>是独占一行的，它们属于块状标签。而<span>、<img>、<strong>标签，它们只占一行中的一部分，它们属于内联标签。我们可以看到，内联标签常常被嵌套在块状标签中。

（二）标题标签

学习常见的文本标签，初步完成一个展示这篇文章的网页。

《Beautiful World》原文链接

标题标签 <h1> ～ <h6>

第一步，我们要完成文章的标题。

HTML 中提供了 6 个标签，用来表示文章的标题。按照标题的等级，一共分成六级。

<h1> 到 <h6>分别对应一级标签到六级标签，数字越大，级别越低，对应的标题看起来就越小。

代码演示

了解了标题标签之后，我们来写文章的标题。

<!-- h1-h6是块状标签 -->
<h1>Beautiful World</h1>

<!-- h2是h1的子标题 -->
<h2>Islands</h2>

<!-- h3是h2的子标题 -->
<h3>Maldives</h3>
<h3>Crete Island</h3>

<h2>Mountains</h2>
<h3>Matterhorn, Swiss-Italian Border</h3>
<h3>Kirkjufell</h3>

从上面这里例子中我们可以看到，下一级标题是上一级标题的子标题，一级标题后可以有多个二级标题。

要注意：标题之间不可越级，比如一级标题<h1>下直接写三级标题<h3>，因为这样会导致文章失去清晰的文章结构。

（三)常用文本标签

段落标签<p>

接下来我们来写文章中的段落。

这里要用到<p>标签，这是最常用的 HTML 标签，是一个块状标签，代表文章的一个段落（paragraph）。在 HTML 中，很多标签都可以嵌套其他标签，段落标签<p>也不例外，任何想以段落显示的内容，比如文本、图片和表单项，都可以放进<p>标签。

上面就是一个简单的段落。让我们把文章中的段落加上。

内联标签<strong>

下面我们要给文章中重点标注的词句加粗。

这里我们会用到<strong>标签。<strong>是一个行内标签，表示它包含的内容具有很强的 重要性 ，需要引起注意。浏览器会以粗体显示内容。

<p>一句话中的<strong>重点内容</strong></p>

显示效果：

一句话中的重点内容

小知识：<b>标签也能让内容变粗体，但它和<strong>不同，它没有语义，只是单纯表示样式加粗。

内联标签<span>

下面的段落中，我们将岛名“Maldives”用<span>包裹起来。 <span>这是一个内联标签（即不会产生换行），通常表示一个行内短语，使用<span>可以使网页更有条理。 <strong>标签可以使文本变粗体，<span>则不是这样的，如果没有加样式文件，<span>在样式上与普通文本不会有区别。

显示效果：

(四）图片标签

现在我们要给文章插入一些图片，让它看起来更丰满有趣。

插入图片我们要用到<img>标签，我们已经见过它很多次了，它的使用方法如下：

显示效果：

在标签属性src中写入图片的 相对路径 或 绝对路径 就可以啦。

图片标签还有个 alt 属性，这个属性定义了描述图像的替换文本。如果图像的 URL 是错误的，该图像不在支持的格式列表中，或者如果图像还没有被下载，用户将看到这里的替换文本。

小知识

除了静态的 jpg、jpeg、png 之类的图片，我们还可以用 img 标签向网页中插入 gif 动图哦：

    <img src="img/moon.png" alt=""/>

网页显示效果：

（五）链接标签

最后，我们要给文章加上原文链接。

HTML使用标签 <a>来设置超文本链接，常用的语法格式如下所示

<a href="url"  target="opentype">链接文本</a>

href 属性用来指明要跳转到的 url地址，

target 属性用来指明新页面的打开方式，

链接文本需要写在 <a> 和 </a> 之间

示范1



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>True</title>
</head>
<body>
<h1>This is my first title.</h1>
<p>This is my first paragraph.</p>
<a href="https://blog.csdn.net/KunTure?type=collect">访问我的博客</a>
</body>
</html>

运行结果如下图所示:

点击文本链接即可跳转到我的博客主页。

示范2



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>True</title>
</head>
<body>
<h1>This is my first title.</h1>
<p>This is my first paragraph.</p>
<a href="https://blog.csdn.net/KunTure?type=collect"  target="_blank">访问我的博客</a>
</body>
</html>

提示Tips:

使用 target 属性，可以定义被链接的文档在何处显示，绝大部分情况下，target 属性要么不写，保持默认值 _self，在现有窗口中打开新页面;要么将它的值设置为 _blank，在新窗口中打开页面

HTML 给我们提供了链接标签a，给文章添加链接。

<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。比如：

链接代码：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>True</title>
</head>
<body>
<h1>This is my first title.</h1>
<p>This is my first paragraph.</p>
<a href="https://blog.csdn.net/KunTure?type=collect"  target="_blank">
  <img src="img/moon.png" alt=""/>
</a>
</body>
</html>

点击图片链接即可跳转到我的博客主页

下面我们来了解一下链接标签中比较重要的属性：

链接标签的属性

href

href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

URL：统一资源定位符（英语：Uniform Resource Locator，缩写：URL；或称统一资源定位器、定位地址、URL 地址，俗称网页地址或简称网址）是因特网上标准的资源的地址（Address）。

title

title 属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。 title 属性：

target

target 属性指定如何展示打开的链接。

target 属性的值也可以是“_self”、“_blank”、“_parent”、“_top”四个关键字之一。

1.当它为_self 时表示在当前页面打开，target 默认为“_self”。

<a href="https://blog.csdn.net/KunTure?type=collect"  target="_self">访问我的博客</a>

2.当它为_blank 时表示在新页面打开

<a href="https://blog.csdn.net/KunTure?type=collect"  target="_blank">访问我的博客</a>

显示效果：访问我的博客

即：target 属性的值分别是“_self”、“_blank”时打开链接的表现。

（六）列表

除了我们之前在文章中用到的 标题标签<h1>~<h6> 、 段落标签<p> 、 内联标签<span> <strong> 、 图片标签<img>(也是内联标签)、 链接标签<a>(也是内联标签)外，列表标签也是很常用的文本标签。

HTML提供了无序列表标签<ul>和有序列表标签<ol>供我们选择，这里我们选择无序列表标签<ul>，列表的每一项都用标签<li>表示

显示效果：

列出今天要做的事情
每天结束填写回顾和反思
计划第二天的内容

我们可以看到，每个列表项<li>前面有个实心小圆点，这是无序列表的符号，当不需要考虑列表项的顺序时，我们常常采用无序列表标签<ul>。

如果想要显示有排序的列表项，我们会用<ol>标签，它的列表符号会是数字或者字母等。

显示效果：

列出今天要做的事情
每天结束填写回顾和反思
计划第二天的内容

HTML支持有序、无序和自定义列表

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

示例1：无序列表

无序列表，使用 <ul> + <li> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>

<ul>
    <li>Andy</li>
    <li>Jack</li>
    <li>Rita</li>
</ul>

</body>

</html>

运行结果如下所示

示例2：有序列表

有序列表，使用 <ol> + <li> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>
<ol>
    <li>Andy</li>
    <li>Jack</li>
    <li>Rita</li>
</ol>


</body>

</html>

运行结果如下所示

示例3：自定义序列

自定义列表，使用 <dl> + <dt> + <dd> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>
<h3>自定义列表：</h3>
<dl>
    <dt>Apple</dt>
    <dd>- Sweet and sour</dd>
    <dd>- Produced in Liaoning Province</dd>
    <dt>Banana</dt>
    <dd>- Soft and delicious</dd>
    <dd>- Produced in Guangdong Province</dd>
</dl>

</body>

</html>

运行结果如下所示

三、HTML文本格式化

HTML常用的文本格式化标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>

<b>加粗文本1</b><br />
<i>斜体文本2</i><br />
<span>上下标文本3: H<sub>2</sub>SO<sub>4</sub> = 2H<sup>+</sup>SO<sub>4</sub><sup>2-</sup></span>
<br />
<del>删除文本4</del><br />
<ins>插入文本5</ins><br />
<em>强调内容文本6</em><br />
<strong>加重语气文本7</strong><br />
<small>定义小号字文本8</small><br />
<big>定义大号字文本9</big><br />
<pre>预格式
         文本    10</pre>

</body>

</html>

运行结果如下图所示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>True</title>
</head>

<body>
<dl>
    <dl style="margin-bottom:0px;">
        <dt><b>HTML</b></dt>
        <dd style="margin:auto auto 10px 0px;">HTML是一种专门用来开发网页的标记语言</dd>
        <dt><b>CSS</b></dt>
        <dd style="margin:auto auto 10px 0px;">CSS层叠样式表可以控制HTML文档的显示样式,用来美化网页</dd>
        <dt><b>Javascript</b></dt>
        <dd style="margin:auto auto 10px 0px;">Javascript简称JS,是一种用来开发网站的脚本编程语言</dd>
    </dl>
</dl>


</body>

</html>

运行结果如下所示