HTML学习笔记（二 HTML常用标签 上）

一、标题标签

HTML拥有6个等级的网页标签，<h1>-<h6>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

标题语义:作为标题使用，并且依据重要性递减。

标题特点：

1. 加了标题的文字会变得加粗，字号也会依次变大。

2. 一个标题独占一行。

二、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

举例：

<p>田畴保墒，河南冬小麦出苗齐壮。2022年，我国粮食生产实现“十九连丰”。</p>
<p>巨轮穿梭，上海港集装箱吞吐量蝉联世界第一。2022年，我国进出口规模首次突破40万亿元。</p>
<p>江淮“牵手”，引江济淮主体工程试通水通航。2022年，我国完成水利建设投资创历史新高。</p>

标签语义:可以把HTML文档分割为若干段落。

特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。

2. 段落与段落之间保有空隙。

三、换行标签

在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

标签语义:强制换行。

特点：

<br />是个单标签。

<br />标签知识简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

四、文本格式化标签：

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

语义标签

加粗<strong></strong>或者<b></b>

倾斜<em></em>或者<i></i>

删除线<del></del>或者<s></s>

下划线<ins></ins>或者<u></u>

五、div和span标签

div和span是没有语义的，他们就是一个盒子，用来装内容的。

<div></div>

<span></span>

<div>
    <span>咸鱼</span>
    <span>草鱼</span>
    <span>扁鱼</span>
</div>

用span标签会有一个圆点

特点:

div标签用来布局，但是现在一行只能放一个div。大盒子

span标签用来布局，一行上可以多个span。小盒子

六、图像标签

在HTML标签中，标签用于定义HTML页面中的图像。

<img src="pacture.webp" title="水月镜花">

src是标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示文字
title	文本	提示文本。鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：

1. 图像标签可以拥有多个属性，必须写在标签名后面。

2. 属性之间不分先后，标签名与属性，属性与属性之间均以空格分开。

3. 属性采取键值对的格式，即key=”value“格式，属性=”属性值“。

七、超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a href="http://paper.people.com.cn/rmrb/html/2023-01/31/nbs.D110000renmrb_01.htm" target="_blank">

跳转到人民日报的网址

两个属性的作用如下:

属性	作用
href	用于指定链接目标的url地址,(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

八、HTML中注释和特殊字符

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“<!--“开头,以”-->"结束。

<!-- 注释语句 --> 快捷键:ctrl+/

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。