前端入门学习日记：常用标签

最新推荐文章于 2024-02-23 15:16:33 发布

爆肝中

最新推荐文章于 2024-02-23 15:16:33 发布

阅读量176

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_63564104/article/details/121177545

版权

4.1 标签的语义：

大多数标签存在其含义，表明它的功能。

4.2 标题标签：

一共六个标签等级，大小从1开始依次递减，语义：定义一个标题。

1. 格式

<h(等级)>标题内容</h（等级）>

h为“head”的缩写，意为：头部，标题。

2. 特点

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

2.一个标题独占一行。

4.3 段落标签：

语义：把HTML文档分割成若干段落。

1. 格式

<p>段落内容</p>

p为paragraph的缩写，意为：段落。

2. 特点

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

2.段落和段落之间保留有空隙。

4.4 换行标签：

语义：强制换行。

1. 格式

<br />

单词break的缩写：意为打断，换行。

2. 特点

1.<br />是一个单标签。

2.<br />只是开始新的一行，和段落不一样，段落之间会有空隙，而换行不会。

4.5 文本格式化标签

语义：增添加粗，倾斜，下斜线等效果，突出重要性。

下面以表格的形式来帮助了解

语义	标签
加粗	<strong></strong>或<b></b>
倾斜	<em></em>或<i></i>
下划线	<ins></ins>或<u></u>
删除线	<del></del>或<s></s>

4.6 <div>和<span>标签

<div>和<span>是没有语义的，它们就像一个盒子，用于填装内容。

1. 格式

<div>内容</div>
<span>内容</span>

div是division的缩写，意为：分割，分区；span，意为：跨度，跨距。

2. 特点

1.<div>标签用于布局，独占一行，相当于一个大盒子。

2.<span>标签用于布局，一行可以多个<span>，相当于一个小盒子。

4.7 图像标签与路径

1. 图像标签（单标签）

1.1 格式

<img src="图像URL"/>

img是image的缩写，意为：图像。

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

图像标签的其他属性如下：

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

图像标签的注意点：

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

1.1.2 属性之间不分前后顺序，属性之间均用空格隔开。

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

2. 路径

路径分为：相对路径和绝对路径。

相对路径：以引用文件所在位置为参考基础，简单来说就是图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		直接引用名字，例如<img src="baidu.gif" />
下一级路径	/	图像文件位于html文件的下一级，假设位于与html文件同一级image文件内，则<img src="image/baidu.gif" />
上一级路径	../	图像位于html文件的上一级，例如<img src="../baidu.gif">

绝对路径：从盘符开始的目录下的绝对位置

1.本地位置：“D:\web\img\logo.gif”.

2.网络位置：“http://www.itcast.cn/images/logo.gif”.(可以通过复制图片链接实现)

4.8 超链接标签（重点）

1. 链接的语法格式

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

a为单词anchor的缩写，意为：“锚”。

两个属性的作用具体如下

属性	作用
href	用于指定链接目标的ur地址，（必须属性）当标签应用href属性时，它就具备了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，表示当前页面替换为链接页面。_blank为设定值，表示以新窗口方式打开链接页面