前端开发:HTML常见标签

news2025/1/14 22:22:20

1.注释标签

注释不会显示在界面上 . 目的是提高代码的可读性 .
ctrl + / 快捷键可以快速进行注释 / 取消注释 .    <!-- 我是注释 -->

 2.标题标签

有六个 , h1 - h6. 数字越大 , 则字体越小
<h1> hello </h1>        //我们所写的csdn的格式中的标题一到标题6,就是如此;
<h2> hello </h2>
<h3> hello </h3>
<h4> hello </h4>
<h5> hello </h5>
<h6> hello </h6>

3.段落标签 

如果一段文本直接调在html上的时候,他不会划分段落,必须使用段落标签;字符串string类型中的回车会被解析成空格

<p>这是一个段落</p>        //将文本内容划分为一段一段的;

 4.换行标签

<br/> 是规范写法 . 不建议写成 <br>
br 是 break 的缩写 . 表示换行
br 是一个单标签 ( 不需要结束标签 )
br 标签不像 p 标签那样带有一个很大的空隙 .也就是行间距很小

 5.格式标签

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

6.图片标签

img标签必须带有src(sorce—源的意思)属性,表示图片的路径;

<img src = "./rose.jpg" >
采用绝对路径或相对路径
alt: 替换文本 . 当文本不能正确显示的时候 , 会显示一个替换的文字 .
title: 提示文本 . 鼠标放到图片上 , 就会有提示 .
width/height: 控制宽度高度 . 高度和宽度一般改一个就行 , 另外一个会等比例缩放 . 否则就会图片失衡.
border: 边框 , 参数是宽度的像素 . 但是一般使用 CSS 来设定
<img src = "rose.jpg" alt = "图片加载失败 " title = " 这是一朵鲜花 " width = "500px" height = "800px"
border = "5px" >
使用绝对路径来搞网络上的资源
<img src = "https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt = "" >        //这个只是例子,我的此图片可能过期
1. 属性可以有多个 , 不能写到标签之前
2. 属性之间用空格分割 , 可以是多个空格 , 也可以是换行
3. 属性之间不分先后顺序
4. 属性使用 " 键值对 " 的格式来表示 .

7.超链接标签

<a href = "http://www.baidu.com" target="_self" > 百度 </a>
href: 必须具备 , 表示点击后会跳转到哪个页面 .
百度是将超链接放到这两个字里,我们在网页上点新闻会自动跳转也是这个原理;
target: 打开方式 . 默认是 _self. 如果是 _blank 则用新的标签页打开 .那个下滑线是必须的
外部链接:
<a href = "http://www.baidu.com" target="_self" > 百度 </a>
内部链接 : 网站内部页面之间的链接 . 写相对路径即可 .
<a href = "2.html" > 点我跳转到 2.html </a>
空链接 : 使用 # href 中占位
<a href = "#" > 空链接 </a>
下载链接 : href 对应的路径是一个文件 . ( 可以使用 zip 文件 )
<a href = "test.zip" > 下载文件 </a>//是.zip会直接下载,.txt会打开;
网页元素链接 : 可以给图片等任何元素添加链接 ( 把元素放到 a 标签中
<a href = "http://www.sogou.com" >
    <img src = "rose.jpg" alt = "" >
</a>
锚点链接 : 可以快速定位到页面中的某个位置
<a href = "#one" > 第一集 </a>
<p id = "one" > 第一集剧情 <br> </p>
<p id = "two" > 第二集剧情 <br> </p>
禁止 a 标签跳转 :
<a href="javascript:void(0) ; "> 或者 <a href="javascript: ; ">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2276675.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux网络编程】数据链路层 | MAC帧 | ARP协议

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 &#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系…

微软与腾讯技术交锋,TRELLIS引领3D生成领域多格式支持新方向

去年 11 月&#xff0c;腾讯推出 Hunyuan3D 生成模型&#xff0c;是业界首个同时支持文字和图像生成 3D 的开源大模型。紧接着不到一个月&#xff0c;微软便发布了全新框架 TRELLIS&#xff0c;加入 3D 资产生成领域的竞争中。TRELLIS 支持多格式输出&#xff0c;包括辐射场、3…

【爬虫】单个网站链接爬取文献数据:标题、摘要、作者等信息

源码链接&#xff1a; https://github.com/Niceeggplant/Single—Site-Crawler.git 一、项目概述 从指定网页中提取文章关键信息的工具。通过输入文章的 URL&#xff0c;程序将自动抓取网页内容 二、技术选型与原理 requests 库&#xff1a;这是 Python 中用于发送 HTTP 请求…

设计模式-结构型-组合模式

1. 什么是组合模式&#xff1f; 组合模式&#xff08;Composite Pattern&#xff09; 是一种结构型设计模式&#xff0c;它允许将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端对单个对象和组合对象的使用具有一致性。换句话说&#xff0c;组合模式允…

js:正则表达式

目录 正则表达式的语法 定义 检测 检索 元字符 边界符 量词 字符类 表单判断案例 修饰符 过滤敏感词 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本字符组合模式 正则表达式是一…

PHP数据过滤函数详解:filter_var、filter_input、filter_has_var等函数的数据过滤技巧

PHP数据过滤函数详解&#xff1a;filter_var、filter_input、filter_has_var等函数的数据过滤技巧&#xff0c;需要具体代码示例 在 Web 开发中&#xff0c;数据过滤是非常重要的一环。过滤用户输入的数据可以保护我们的应用程序免受潜在的安全威胁。PHP 提供了一系列强大的数…

QT跨平台应用程序开发框架(1)—— 环境搭建

目录 一&#xff0c;关于QT 二&#xff0c;关于应用程序框架 三&#xff0c;环境搭建 3.1 预备 3.2 下载Qt SDK 3.3 安装Qt SDK 3.4 配置环境变量 3.5 认识一些重要工具 四&#xff0c;Qt Creator 的基本使用 4.1 创建项目 4.2 代码解释 一&#xff0c;关于QT 互联网…

【MySQL】基础架构分析

考察频率难度40%⭐⭐⭐⭐ 这道题在面试时的出现频率其实并不高&#xff0c;最起码对于笔者来说是没有遇到过。那为什么还是选择把这个问题作为 MySQL 八股文系列的第一个呢&#xff1f;其实原因也挺简单的&#xff0c;还是老规矩&#xff0c;先通过一个问题把整个知识框架来一…

【华为云开发者学堂】基于华为云 CodeArts CCE 开发微服务电商平台

实验目的 通过完成本实验&#xff0c;在 CodeArts 平台完成基于微服务的应用开发&#xff0c;构建和部署。 ● 理解微服务应用架构和微服务模块组件 ● 掌握 CCE 平台创建基于公共镜像的应用的操作 ● 掌握 CodeArts 平台编译构建微服务应用的操作 ● 掌握 CodeArts 平台部署微…

Elasticsearch ES|QL 地理空间索引加入纽约犯罪地图

可以根据地理空间数据连接两个索引。在本教程中&#xff0c;我将向你展示如何通过混合邻里多边形和 GPS 犯罪事件坐标来创建纽约市的犯罪地图。 安装 如果你还没有安装好自己的 Elasticsearch 及 Kibana 的话&#xff0c;请参考如下的链接来进行安装。 如何在 Linux&#xff0…

P10打卡——pytorch实现车牌识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 1.检查GPU from torchvision.transforms import transforms from torch.utils.data import DataLoader from torchvision import datasets import torchvisio…

GitCode G-Star 光引计划终审前十名获奖项目公示

在技术的浩瀚星空中&#xff0c;GitCode 平台上的 G-Star 项目熠熠生辉。如今&#xff0c;“光引计划” 已圆满落幕&#xff0c;众多 G-Star 项目作者&#xff0c;一同分享项目在 GitCode 平台托管的宝贵体验&#xff0c;并深入挖掘平台的多样玩法。 众多投稿纷至沓来&#xf…

【pycharm】远程部署失败,查看日志

pycharm 远程部署失败,查看日志 远程一直失败,gateway超时会还知道拉取一份日志: 在./root 下 发现了崩溃日志,启动崩溃了,导致backend一直无法启动。win11就是一直在connect到ubuntu的后端pycharm。。gateway 拉取的日志 我上传的linux版本的pycharm暂时存在dist目录下,…

浅谈云计算02 | 云计算模式的演进

云计算计算模式的演进 一、云计算计算模式的起源追溯1.2 个人计算机与桌面计算 二、云计算计算模式的发展阶段2.1 效用计算的出现2.2 客户机/服务器模式2.3 集群计算2.4 服务计算2.5 分布式计算2.6 网格计算 三、云计算计算模式的成熟与多元化3.1 主流云计算服务模式的确立3.1.…

Vue 学习之旅:从基础到实践(vue快速上手+插值表达式+指令上)

Vue 学习之旅&#xff1a;从基础到实践 文章目录 Vue 学习之旅&#xff1a;从基础到实践一、Vue 简介二、创建 Vue 实例与插值表达式&#xff08;一&#xff09;创建 Vue 实例步骤&#xff08;二&#xff09;插值表达式 三、Vue 核心特性 - 响应式四、Vue 指令&#xff08;一&a…

PMP–一、二、三模、冲刺–分类–7.成本管理

文章目录 技巧一模7.成本管理--4.控制成本--数据分析--挣值分析--进度绩效指数&#xff08;SPI&#xff09;是测量进度效率的一种指标&#xff0c;表示为挣值与计划价值之比&#xff0c;反映了项目团队完成工作的效率。 当 SPI小于 1.0 时&#xff0c;说明已完成的工作量未达到…

字符串 (算法十一)

简介 没有固定题型&#xff0c;内容很杂&#xff0c;可以学习下string接口与相关操作 1.最长公共前缀 link&#xff1a; 解法一&#xff1a;两两比较 code class Solution { public:string longestCommonPrefix(vector<string>& strs) {// 两两比较string ans …

摄像头模块在狩猎相机中的应用

摄像头模块是狩猎相机的核心组件&#xff0c;在狩猎相机中发挥着关键作用&#xff0c;以下是其主要应用&#xff1a; 图像与视频拍摄 高清成像&#xff1a;高像素的摄像头模块可确保狩猎相机拍摄出清晰的图像和视频&#xff0c;能够捕捉到动物的毛发纹理、行为细节及周围环境的…

给DevOps加点料:融入安全性的DevSecOps

从前&#xff0c;安全防护只是特定团队的责任&#xff0c;在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时&#xff0c;这样做没什么问题&#xff1b;但是现在&#xff0c;这种做法现在已经行不通了。 采用 DevOps 可以有效推进快速频繁的开发周期&#xff08;有时…

沸点 | 聚焦嬴图Cloud V2.1:具备水平可扩展性+深度计算的云原生嬴图动力站!

近日&#xff0c;嬴图正式推出嬴图Cloud V2.1&#xff0c;此次发布专注于提供无与伦比的用户体验&#xff0c;包括具有水平可扩展性的嬴图Powerhouse的一键部署、具有灵活定制功能的管理控制台、VPC / 专用链接等&#xff0c;旨在满足用户不断变化需求的各项前沿功能&#xff0…