当前位置：首页 > news >正文

web前端-HTML常用标签（二）

news 来源：原创 2024/9/20 23:41:57

一、文本格式化标签

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

标签语义:突出重要性, 比普通文字更重要

二、<div>和<span>标签

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

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点:

1.<div>标签用来布局，但是现在一行只能放一个<div>，相当于一个大盒子

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

例如：

对于<div>标签

此时，123会换行

对于<span>标签

此时，三个词在同一行，间距开来

三、图像标签和路径

1.图像标签

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

单词 image的缩写，意为图像。

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

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

例如：

此时图片会显示：

图像标签的其他属性：

（1）alt的使用：当图像不能显示时会替换成文字

例如：

此时：

（2）title的使用：

此时：

（3）width和height的使用

此时图片的大小改变了：

（4）border的使用

如图：

图像标签属性注意点:
① 图像标签可以拥有多个属性，必须写在标签名的后面.

② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

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

目录文件夹:就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html文件、图片等

(2)VSCode打开目录文件夹

文件----打开文件夹.选择目录文件夹,后期非常方便管理文件

3.路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件(images)，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为:
（1）相对路径

相对路径:以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

（2）绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，“D:\web\img\logo.gi”或完整的网络地址 “http://www.itcast.cn/images/logo.gif"

注意：绝对路径和相对路径两个的斜杠符号是不一样的

四、超链接标签

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

1.链接的语法格式

单词 anchor的缩写，意为:锚。

两个属性的作用如下：

例如：

如图：

点击链接后：

2.链接的分类

（1）外部链接: 如上腾讯网的打开即为外部链接

（2）内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可

例如：

在同一文件夹下，网站内部可相互链接

点击“内部链接之后”可直接跳转

（3）空链接：没有确定链接目标

例如：

此时点击“空链接”就不会跳转

（4）下载链接：如果href里面地址是一个文件或者压缩包，会下载这个软件

（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

（6）锚点链接：点击链接，可以快速定位到页面中的某个位置

①在链接文本的href属性中，设置属性值为 #名字的形式

②找到目标位置标签，里面添加一个id属性=刚才的名字

例如：我们要实现以下链接点击后直接定位到指定的位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>十个勤天是《种地吧》综艺中十名嘉宾的组合名，由蒋敦豪、鹭卓、李耕耘、李昊、赵一博、卓沅、赵小童、何浩楠、陈少熙、王一珩十个人组成</p><img src="C:\Users\86131\Desktop\一些\图片\eb\微信图片_20240721213513.jpg" width="500" height="300"><br><a href="#one">1.社会活动</a><br><a href="#two">2.音乐单曲</a><br><a href="#three">3.音乐节</a><br><a href="#four">4.演唱会</a><p id="one">2023年3月30日，十个勤天官方微博正式成立，并发布第一条微博。此后十人公开活动中，均以“十个勤天”为组合名出现。<br>9月29日，十个勤天参与综艺《朝阳打歌中心》播出。<br>10月，十个勤天参与录制央视综艺《你好生活》，合唱《最好的青春纪念》。<br> 11月25日，十个勤天参与2023爱奇艺尖叫之夜活动<br>2024年2月9日，十个勤天参演2024年中央广播电视台春节联欢晚会<br>2024年2月20日，种地吧2宣传片发布，十个勤天谈种地吧2做大做强。 <br>2024年植树节，十个勤天在甘肃省民勤县腾格里沙漠与房东的猫、高嘉朗、高进、王赫野、甘肃农业大学师生以及当地村民种植梭梭树18万株 <br>2024年4月6日，十个勤天参与综艺《你好星期六》播出 [11]8月29日，推出组合歌曲《果敢》</p><img src="C:\Users\86131\Desktop\一些\图片\eb\微信图片_20240721213501.jpg" width="500" height="300"><br><p id="two">果敢<br>光<br>后陡门的夏<br>麦芒</p><p id="three">2023年9月29日-10月1日，参演「INNERSECT·NUTS潮流嘉年华」音乐节。<br>10月21日，十个勤天参演淮安龙宫音乐节。<br>2024年8月4日，十个勤天参演Z纪元银河左岸音乐节</p><p id="four">2024年6月28--30日，十个勤天种下一个未来2024巡回演唱会杭州场<br>2024年7月19--20日，十个勤天种下一个未来2024巡回演唱会北京场<br>2024年8月31日，十个勤天种下一个未来2024巡回演唱会佛山场<br>2024年9月22日，十个勤天种下一个未来2024巡回演唱会厦门场</p></body>
</html>

保存后运行：