- 标签作用
标签作为编写html文档中最为重要的部分,它的作用是多方面的,根据标签语义,在合适的地方放置标签可以使页面结构清晰,让文档内容看起来更加合理,没有标签就只会是内容的堆叠,完全无法阅读。 - 常用标签
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还需要更加深入的学习。