HTML基本语法-标签

news2024/11/25 20:44:35

注释

注释就是帮助我们理解的解释
本身不参加编译

HTML里面的注释

<!--这是被注释的内容-->

我们也可以直接使用ctrl+/(快捷键)
来实现光标行注释

标签基础认知

标签构成

在这里插入图片描述
有双标签-开始和结束
就之前 的加粗标签和标题标签

标签关系

父子关系(嵌套关系)

比如上面的meta标签和title在head标签内部
这种技术父子关系

兄弟关系(并列关系)

我们的head,body标签就是兄弟关系
在这里插入图片描述
下面是一些具体的标签

排版标签

标题标签

双标签在这里插入图片描述
只有六个,标签内的内容加粗,文字变大,从h1->h6字体大小递减
还会自动换行(独占一行)

<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h6>这是六级标题,一共也只有六级标题</h6>
</body>

这就是我们的
运行的结果在这里插入图片描述

段落标签

在这里插入图片描述

<p>这里是第一自然段-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<p>这里是第二自然段</p>

在这里插入图片描述
特点:独占一行(上面的因为显示问题会自动换行)
一个段落的最后一行会和新的段隔一行

换行标签

单标签
在这里插入图片描述

<br>这就是换行标签
<p>这里演示换行操作,<br>现在的语句就到了下一行了</p>

在这里插入图片描述

水平线标签

在这里插入图片描述
水平线也就是
红线上面的那条线
代码

<h1>这是一级标题</h1>
<hr>
<h2>这是二级标题</h2>
<hr>

在这里插入图片描述

文本格式化标签

在这里插入图片描述
一些文本标记
加粗什么的
左边和右边的标签效果一下都为双标签,标签里的内容,会对应格式输出

<body>
<b>加粗</b>
<strong>也是加粗,想要强调就用单词</strong>
<u>下划线</u>
<ins>也是下划线</ins>
<i>倾斜</i>
<em>也是倾斜</em>
<s>删除线</s>
<del>也是删除线</del>
</body>

效果
在这里插入图片描述

媒体标签

图片标签

在这里插入图片描述
标签属性(图片来源)这么写
在这里插入图片描述
src属性
同一个文件夹下
在这里插入图片描述
直接写./图片名.文件后缀
.就是当前的意思,在同一个文件夹寻找
在这里插入图片描述
效果
在这里插入图片描述

注意属性之间用空格隔开

alt属性是替换文本-如果图片找不到-显示失败就替换为alt文本
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
title属性
在这里插入图片描述
效果
在这里插入图片描述
width和height
在这里插入图片描述
宽度和高度
注意:图片有比例,值设置高度/宽度,程序会自动设置另一个防止变形
如果都设置,如果设置不合理就会变形

路径

比如图片的src
有时候不在同一个文件夹怎么办
学习一下路径(路径本身不是标签)

绝对路径(了解)

绝对路径
用的比较少,从盘符开始,你把这个程序发给别人,可能人家电脑没有对于的盘,所以工作一般是相对路径
也可以用图片url,不过需要网络

相对路径

从当前文件找目标文件

分为三个目录
父级目录,子级目录,同级目录
在这里插入图片描述
同级别
在这里插入图片描述
加不加.都可以
下级目录
在这里插入图片描述
下级的话,先写同级的文件夹,在一直到对于文件在的文件夹后写对应文件即可
上级目录
在这里插入图片描述
返回上个文件夹

../就是到上一级的文件夹目录了

音频标签

视频标签

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

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

相关文章

【基础算法】关于高精度计算的问题【很高位数数据的加减乘除(相关代码用C++实现)】

文章目录前言1.高精度加法2.高精度减法3.高精度乘法4.高精度除法写在最后前言 当我们在利用计算机进行一些计算时&#xff0c;可能会遇到这类问题 &#xff1a; 有些计算要求精度高&#xff0c;希望计算的数的位数可达几十位甚至几百位&#xff0c;虽然计算机的计算精度也算较…

PostgreSQL的安装配置及使用

一.安装地址&#xff1a;https://www.postgresql.org/选择合适的版本下载二.配置mac 配置 pg_hba.conf 文件open .bash_profile export PATH$PATH:/Library/PostgreSQL/14/bincd /Library/PostgreSQL/14 sudo -u postgres bash cd data vim pg_hba.conf进入编辑模式&#xff1…

angular

1. angular获取不到DOM结点 angular中的ngOnInit钩子函数获取不到DOM节点&#xff1b; 这个钩子函数中&#xff0c;表示组件和指令初始化完成&#xff0c;并不是真正的DOM加载完成&#xff1b; 所以这时候需要利用另外一个钩子函数ngAfterViewInit()&#xff0c;是在视图加载完…

传统单体架构存在哪些问题?

传统单体应用架构模型通常我们所使用的传统单体应用架构都是模块化的设计逻辑&#xff0c;程序在编写完成后会被打包并部署为一个具体的应用&#xff0c;而应用的格式则依赖于相应的应用语言和框架。例如&#xff0c;在网上商城系统中&#xff0c;Java Web工程通常会被打成WAR包…

SpringBoot的自动装配原理、自定义Starter与SPI机制

一、前言Spring简直是java企业级应用开发人员的春天&#xff0c;我们可以通过Spring提供的ioc容器&#xff0c;避免硬编码带来的程序过度耦合。但是&#xff0c;启动一个Spring应用程序也绝非易事&#xff0c;他需要大量且繁琐的xml配置&#xff0c;开发人员压根不能全身心的投…

学习国家颁布的三部信息安全领域法律,理解当前工作中的信息安全合规要求

目录三部信息安全领域的法律文件三部法律的角色定位与联系三部法律的适用范围三部法律的主要履职部门三部法律条文章节结构中的共性三部法律中的一些次重点章节网络安全法的重点章节数据安全法的重点章节个人信息保护法的重点章节关于工业和信息化部行政执法项目清单三部信息安…

ubuntu本地访问nas

需求 本地磁盘空间太小&#xff0c;本地网络里有个nas&#xff0c;希望将nas作为数据盘挂载到本地使用。 方法1 基于sftp访问nas 首先nas设置时要打开sftp访问功能。 然后用ubuntu桌面访问服务器的功能登录sftp&#xff0c;类似如下指令 sftp://user192.168.0.100 ubuntu下…

已上传的微信小程序源码丢失,通过反编译找回

前提&#xff1a;你的程序源码已经上传&#xff0c;可以打开体验版或开发版小程序。工具&#xff1a;小程序包解密&#xff1a;链接: https://pan.baidu.com/s/1A2ZCqflr4jMLfg03U_LWHQ 提取码: 4ntn wxappUnpacker&#xff1a;链接: https://pan.baidu.com/s/1HQS8xQsqrhc4hzi…

图纸等敏感文件数据外发时 如何确保效率和安全性?

很多企业随着业务的发展&#xff0c;需要频繁的与外部供应商、合作伙伴之间进行数据的交换和使用。尤其是制造型企业&#xff0c;可能每天都要与几十、上百家供应商及合作伙伴进行产品数据交换。目前&#xff0c;大多数企业已经在内部实施了PDM/PLM系统&#xff0c;实现了对组织…

coco数据集训练nanodet详细流程

github地址 首先要配置环境 conda create -n nanodet python3.8 -y conda activate nanodet确认一下cuda版本 nvcc -V确认是11.3之后&#xff0c;要安装11.3对应的pytorch版本。 本机装pytorch1.12.1后面运行的时候会报错&#xff08;torch没有经过cuda编译&#xff09;&…

C语言中到底是非0表示真,还是1表示真?

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天我们来重点说一说C语言中到底是非0表示真&#xff0c;还是1表示真&#xff1f;这就是说到C语言中的两个常见运算形式&#xff0c;即关系运算符和逻辑运算符。为照顾急性子的同学&#xff0c;先直接说结论…

【概念辨析】数组指针指针数组

目录 一、数组指针 二、指针数组 三、 数组指针的数组名不是二级指针 再来说最关键的&#xff1a;数组指针为什么不是二级指针呢&#xff1f; 代码如下&#xff1a; 四、指针数组的数组名是二级指针 在复习&#xff0c;在考试&#xff0c;在焦虑。 又一次学习到了数组指针和指针…

MybatisPlus的注意点

userService是基础于ServiceImpl 而servicfeImpl中要传入一个继承于BaseMapper的类和一个实体类 这个继承于BaseMapper的类就是我们的userMapper&#xff0c;所以userMapper要集成BaseMapper 重点来了&#xff0c; UserService中的我们去调用Impl实现类的saveOrUpdate方法&am…

神经网络中超参数调节和优化技巧、优化算法的分类介绍

目录什么是卷积神经网络超参数的调整学习率迭代次数批次大小激活函数隐含层的数目和单元数权重初始化Dropout方法网格搜索和随机搜索神经网络优化算法介绍优化算法分类一阶优化梯度下降算法二阶优化梯度下降算法随机梯度下降(SDG)小批量梯度下降进一步优化梯度下降算法动量方法…

Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝,无法连接。(极简解决办法)

一、遇到问题。 在需要启动Redis客户端的时候&#xff0c;会发现会报这个错误。报这个错误的原因就是Redis的服务端没有开启&#xff0c;那Redis的客户端是访问不了的 二、解决办法。 1.解决的办法就是要启动服务端&#xff0c;让这个客户端可以访问到。启动服务端最简单不会…

秒懂算法 | 基于朴素贝叶斯算法的垃圾信息的识别

本文将带领大家亲手实现一个垃圾信息过滤的算法。 在正式讲解算法之前,最重要的是对整个任务有一个全面的认识,包括算法的输入和输出、可能会用到的技术,以及技术大致的流程。 本任务的目标是去识别一条短信是否为垃圾信息,即输入为一条文本信息,输出为二分类的分类结果。…

百度AI人脸比对

文章目录一、百度智能云1、注册登录2、创建应用3、完成认证领取免费测试资源二、springboot集成1、pom2、配置application.yml3、官方文档三、逻辑分析四、代码1、图片上传2、格式转换3、百度Token获取4、工具类5、实体类6、AI人脸验证7、AI人脸比对8、controller接口一、百度智…

LeetCode010之正则表达式匹配(相关话题:动态规划)

题目描述 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符* 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 示例 1&#xff1a; 输入&…

vue-print-nb使用

下载 pnpm add vue-print-nb --save 全局注册&#xff0c;使用插件的注册方式 或 局部注册自定义指令 import print from vue-print-nb directives: {print } 绑定到点击按钮上 <button v-print"content">Print!</button> 设置配置项-常用 id和popTi…

集群演变( Redis 案例)

文章目录集群演变单节点主从模式哨兵模式Redis Cluster 集群本文浅谈一下集群的发展&#xff0c;用 Redis 做例案例集群演变 集群演变思路 #mermaid-svg-lOtU0w7tegcH7NSB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermai…