3.前端--HTML标签-文本图像链接【2023.11.25】

news/2025/2/12 15:05:55/

1.HTML常用标签(文本图像链接)

文本标签

标题 <h1> - <h6>
段落<p> 我是一个段落标签 </p>
换行 <br />

<!DOCTYPE html>
<html lang="zh-CN">
<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><h2>文字加粗一行显。</h2><h3>由大到小依次减,</h3><h4>从重到轻随之变。</h4><h5>语法规范书写后,</h5><h6>具体效果刷新见。</h6><p>标题一共六级选,文字加粗一行显。由大到小依次减,从重到轻随之变。语法规范书写后,具体效果刷新见。</p><p>标题一共六级选,文字加粗一行显。由大到小依次减,从重到轻随之变。语法规范书写后,具体效果刷新见。</p><p>标题一共六级选,文字加粗一行显。由大到小依次减,<br>从重到轻随之变。语法规范书写后,具体效果刷新见。</p>
</body>
</html>

在这里插入图片描述

文本格式化标签
在这里插入图片描述

图像标签

语法格式:
<img src="图像URL" />

src 是标签的必须属性,它用于指定图像文件的路径和文件名。
在这里插入图片描述

相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于 HTML 页面的位置
在这里插入图片描述
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

链接

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

在这里插入图片描述

链接分类

  1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
  2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 。
  3. 空链接: 如果当时没有确定链接目标时,< a href=“#”> 首页 。
  4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
  5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.

重要的锚点链接
锚点链接: 当我们点击链接,可以快速定位到页面中的某个位置.
href和id配合使用
<a href="#two"> 第2集 </a>
<h3 id="two">第2集介绍</h3>


http://www.ppmy.cn/news/1242933.html

相关文章

C++ 实现位图

引出 面试题&#xff1a;给出 40 亿个不重复的无符号整数&#xff0c;没有排过序。给定一个无符号整数&#xff0c;如何快速判断这个数是否在这 40 亿个无符号整数中。[ 腾讯面试题 ] 想法一&#xff1a;将 40 亿个数据存放到 set 里面&#xff0c;然后再查找指定的无符号整数。…

es6字符串模板之标签化模板

es6字符串模板 我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式&#xff0c;还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。 styled-components 在项目中熟悉使用react的童鞋可能会用过styled-…

一、Lua基础

文章目录 一、Lua是什么二、Lua特性&#xff08;一&#xff09;轻量级&#xff08;二&#xff09;可扩展&#xff08;三&#xff09;其它特性 三、Lua安装四、Lua应用 看到评论说&#xff0c;C让我见识了语言的严谨与缜密&#xff0c;lua让我见识到了语言的精巧与创新&#xff…

数据结构与算法【哈希表】的Java实现

目录 介绍 实现哈希表 大体框架 实现数组扩容 实现查询key 实现新增元素 实现删除元素 哈希算法 String中重写的hashCode()方法 介绍 哈希表也叫散列表&#xff0c;哈希表是一种数据结构&#xff0c;它提供了快速的插入操作和查找操作&#xff0c;无论哈希表总中有多…

CANdelaStudio 使用教程5 编辑DID

文章目录 在哪编辑DID的分类编辑快照数据添加 DID 在哪编辑 DID的分类 编辑快照数据 添加 DID

go模版引擎的使用~~

go模板语句 以下是一些go语言模板引擎的一些简单知识和使用 基础语法 重要&#xff01;&#xff01;&#xff01;&#xff1a; 模板在写动态页面的网站的时候&#xff0c;我们常常将不变的部分提出成为模板&#xff0c;可变部分通过后端程序的渲染来生成动态网页&#xff0…

第一百八十一回 如何绘制阴影效果

文章目录 1. 概念介绍2. 使用方法2.1 SegmentedButton2.2 ButtonSegment 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 1. 概念介绍 我们在本章回中介绍的SegmentedButton组件是一种分段式按钮&#xff0c;它把多个按钮连接成一组显示&#xff0c;组内再对不同的按钮进…

RC-MVSNet:无监督的多视角立体视觉与神经渲染--论文笔记(2022年)

RC-MVSNet&#xff1a;无监督的多视角立体视觉与神经渲染--论文笔记&#xff08;2022年&#xff09; 摘要1 引言2 相关工作2.1 基于监督的MVS2.2 无监督和自监督MVS2.3 多视图神经渲染 3 实现方法3.1 无监督的MVS网络 Chang, D. et al. (2022). RC-MVSNet: Unsupervised Multi-…