2021-10-11 HTML学习笔记(6)标签入门

  1. 标签作用
    标签作为编写html文档中最为重要的部分,它的作用是多方面的,根据标签语义,在合适的地方放置标签可以使页面结构清晰,让文档内容看起来更加合理,没有标签就只会是内容的堆叠,完全无法阅读。
  2. 常用标签
    2.1 标题标签
    HTML提供了6个等级的网页标题,即<h1>至<h6>.
    标题标签需要和<title></title>区分,<title></title>中显示的是网页的标题,而标题标签则指的是网页内容的标题。
    具体实现如下:在这里插入图片描述
    在这里插入图片描述
    2.2 段落标签
    由于在HTML文件中直接写入文字是无法分段分层的,并且同时打出多个空格也只会显示一个。具体原因在于white-space样式属性默认为normal,会合并空格且忽略换行。
    (white-space属性是CSS中用于设置如何处理元素中的空白的属性。)
    故为了让文档中的文字更有条理且易阅读,故使用<p></p>来将文本划分为若干段落。
    未使用段落标签:
    在这里插入图片描述在这里插入图片描述
    使用段落标签:
    在这里插入图片描述
    在这里插入图片描述
    段落标签的特点:
    (1)文本段落会根据浏览器窗口大小自动换行。
    (2)段落间会自动保留空隙。

2.3 换行标签
在HTML中,一个段落中的文字会从左到右地排列,并在浏览器右端自动换行,如何要使得所写文本强制换行,需要使用换行标签<br />
在这里插入图片描述
在这里插入图片描述
换行标签的特点 :
(1)换行标签<br />是单标签。
(2)换行标签<br />只是开始新的一行,与段落标签<p></p>不同,段落标签会插入垂直间距。

2.4 文本格式化标签
在网页中为了突出某些文字的重要性,需要对文字设置 粗体、斜体或下划线等效果。HTML中的文本格式化标签就用于实现这些。
在这里插入图片描述
在这里插入图片描述
实现效果:
在这里插入图片描述
2.5 <div></div><span></span>标签
<div></div><span></span>都是无语义标签,它们的主要作用是作为容器用来填充内容,其中内容可以是文字也可以是图片,有了这样的容器就可对网页进行多样化的布局。
例如:下图中红线部分就是这样的一个容器。在这里插入图片描述
div是division的缩写,表示分区,span表示跨度,都是用来对网页布局进行分割的标签。

<div></div><span></span>的区别:
<div></div>标签会独占一行,任何在其标签后的内容都会自动换行。<span></span>标签不同,多个span标签中的内容可以允许存在于同一行中。
在这里插入图片描述在这里插入图片描述
可以将<div></div>理解为大盒子,<span></span>理解为小盒子。

2.6 图像标签
在HTML中,采用<img>标签来定义网页中的图像。
具体使用格式:<img src="图像URL" />
(src 是<img>标签的必须属性,它用于指定所要显示图像的具体文件路径和文件名。)
在这里插入图片描述
在这里插入图片描述
除了src属性外,还存在着其他属性,如下图:
在这里插入图片描述
各属性实现示例:
在这里插入图片描述
在这里插入图片描述
值得一提的是,当只设置width和height其中之一时,图片会根据原有比例自动匹配所设置的宽度或高度,而当两者都设置了时,就会强行使用设置参数,致使图片变成上图所示的压缩画面。

故在实际开发中,大多只设置其中一种参数来达到想要的效果。

在这里插入图片描述
虽然border属性可以直接给图片设置边框,但一般不在HTML文件中使用,而是在CSS中设置。
代码:
在这里插入图片描述
图像标签使用注意:
(1)图像标签可以有多个属性,但每个属性都必须放在标签名img后面。
(2)属性间不分先后顺序,但属性间、标签名和属性间必须留有空格。
(3)属性采用键值对的格式,即key = "value"的格式,属性 = “属性值”。

标签的学习只是HTML学习的第一步,相当于英语学习中学了一点基本语法,对于HTML还需要更加深入的学习。

猜你喜欢

转载自blog.csdn.net/Dukenone/article/details/120702651
今日推荐