HTML常用标签_网页changyongbiaoqian-CSDN博客

本文链接：https://blog.csdn.net/weixin_65070153/article/details/129912747

HTML常用标签

标题标签

<h1>我是一级标签</h1

语义：

作为标题使用，并且都很据重要性递减

特点：

1.文字变粗，字号依次变大

2.一个标题独占一行.

    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

段落和换行标签

段落标签

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙。

<p>我是一个段落</p>

换行标签

<br/>

特点：

1.这是个单标签
2.标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h4>数据统计 : 水花兄弟合砍61分</h4>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
    <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
    <h4>兄弟对决升级: 小库里给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7<投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
   
</body>
</html>

文本格式化标签

在网页中，有时需要为文字设置 *** 粗体、科体或下划线*** 等效果，这时就需要用到HTML 中的文本格式化标签，使文字以特殊的方式显示。
语义:突出重要性,比普通文字更重要

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqKRCy0P-1680423955809)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20230401151013082.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>的文字
我是<s>删除线</s>的文字
我是<ins>下划线</ins>的文字
我是<u>下划线</u>的文字
</body>
</html>

div 和 span标签

没有语义的，它们就是一个盒子，用来装内容的

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

div

超大盒子独占一行

span

比较小

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

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

图像标签和路径

图像标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doheSSRK-1680423955810)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20230401153247772.png)]

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

<img src="图像URL" />

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

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

*** 照片必须和HTML文件放在同一目录下***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
图像标签的使用<br/>
src   图片路径
<img src="24寸水晶.jpg"/>
alt   替换文本 图像显示不出来的时候用文字替换：
<img src="24寸水晶1.jpg"  alt = "wshi qs"/>
title 提示文本  鼠标放在图像上，提示的文字：
<img src="24寸水晶.jpg" alt="wshi qs" tltle = "我是公主"/>
width  给图像设置宽度：
<img src="24寸水晶.jpg" alt="wshi qs" tltle = "我是公主" width="500"/>
height  给图像设置高度：
<img src="24寸水晶.jpg" alt="wshi qs" tltle = "我是公主" width="500" height = "300"/>
border 给图像设置边框：
<img src="24寸水晶.jpg" alt="wshi qs" tltle="我是公主" width="500" height="300"  border = "20"/>
</body>
</html>

注意点

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

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

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

4.src 必须要写

路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹:

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

打开目录文件夹的 第一层 就是根目录

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径
这里简单来说，图片相对于 HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如
下一级路径	/	图像文件位于HTML文件下一级如。
上一级路径	…/	图像文件位于HTML文件上一级如。

绝对路径(了解)

*符号\\\\*

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

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

超链接标签

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

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

单词anchor['aenka®]的缩写，意为:锚

链接分类

1.外部链接

两个属性的作用如下:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h1>外部链接</h1>
    <a href="http://www.qq.com">腾讯</a>
</body>
</html>

2.内部链接

网站内部页面之间的相互链接直接链接内部页面名称即可

3.空链接

<ahref="#">首页</a>

4.下载链接

如果href 里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h1>外部链接</h1>
    <a href="http://www.qq.com"target="_blank">腾讯</a>
    <a href="http://www.itcast.com"target="_blank">腾讯</a>
    <h1>内部链接</h1>
    <a href="gongsijianjie.html">qshuai</a>
    <h1>空链接</h1>
    <a href="#" target="_blank"target="_blank">空链接</a>
    <h1>下载链接：地址链接是 文件 .exe 或者是 zip 等压缩包</h1>
    <a href="img.zip">下载文件</a>
    <h1>网页元素的链接</h1>
    <a href="http://www.baidu.com"><img src="img.jpg"></a>

</body>
</html>

6.锚点链接

当我们点击链接，可以快速定位到页面中的某个位置

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

   <a href="#two">第2集</a>

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

<h3 id="two">第2集介绍</h3>

目录<br />
    1 <a href="#ago">早年经历</a><br/>
    2 <a href="#age">演艺经历</a><br />
    3 个人生活<br /><br />
    4 主要作品<br />
    ▪ 参演电影<br />
    ▪ 音乐专辑<br />
    ▪ 音乐单曲<br />
    ▪ 综艺节目<br />
    ▪ 参演短片<br />
    ▪ 杂志写真<br />
    5 社会活动<br />
    6 获奖记录<br />
    7 人物评价<br />
    <h1 id = "ago">早年经历 播报</h1>
    2001年，单依纯出生于浙江省金华市东阳市，并在那里读书、成长。从初一开始，她便在软件上翻唱大量的音乐作品。而为了提高自己的演唱水平，她在高三参加了艺考培训班。2020年，毕业于东阳第三中学的她参加全国艺考，最终以专业第一名的成绩考入浙江音乐学院
    [8-9] 。
    单依纯<br />
    单依纯<br />
    <h1 id="age">演艺经历</h1>> 播报
    2018年，单依纯参与录制互动音乐综艺节目《我想和你唱第三季》，与李健合作演唱了歌曲《绒花》 [1] 。
    2020年，单依纯参加浙江卫视音乐励志评论类节目《