标签（1）（详解）

news2025/11/7 8:32:53

目录

标签

部分标签

标签之标题

标题介绍与应用

VSCode插件

标签之段落

换行

水平线

 标签之图片

网站中最多的元素

图片路径详解

绝对路径

相对路径

网络路径

标签之超文本链接 

超链接描述

超链接属性

超链接表现

标签之文本

常用文本标签

标签

部分标签

  1. <html>：定义HTML文档的根元素。
  2. <head>：包含有关文档的元信息，如标题、字符集、外部样式表等。
  3. <title>：定义文档的标题，显示在浏览器的标签页上。
  4. <meta>：提供关于文档的元信息，如字符集、作者、描述等。
  5. <link>：用于引入外部资源，通常用于链接样式表。
  6. <style>：用于在文档内部定义样式信息。
  7. <body>：包含文档的可见内容。
  8. <h1> 到 <h6>：定义标题，从最高级别到最低级别。
  9. <p>：定义段落。
  10. <a>：定义超链接，链接到其他页面或资源。
  11. <img>：插入图像，指定图像的源、大小等属性。
  12. <ul>：创建无序列表。
  13. <ol>：创建有序列表。
  14. <li>：定义列表项。
  15. <div>：用于组合其他元素，可以用于布局目的。
  16. <span>：用于标记文本的特定部分，通常与CSS一起使用。
  17. <table>：创建表格。
  18. <tr>：定义表格行。
  19. <td>：定义表格单元格。
  20. <th>：定义表格表头单元格。
  21. <form>：创建表单，用于收集用户输入。
  22. <input>：定义输入字段，如文本框、复选框等。
  23. <textarea>：定义多行文本输入框。
  24. <button>：创建按钮。
  25. <select>：创建下拉选择框。
  26. <option>：定义下拉选择框中的选项。
  27. <label>：定义表单元素的标签。
  28. <br>：插入换行。
  29. <hr>：插入水平分隔线。

标签之标题

标题介绍与应用

标题（Heading）是通过 <h1> - <h6>标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6 

VSCode插件

快速打开浏览器

扩展 -> 搜索open in browser -> 点击安装

正确使用标题

请确保将 HTML 标题标签只用于标题。

不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于SEO

应该将< h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推

image-20211014171609998

标题标签位置摆放

在标签中添加属性：align="left | center | right" 默认居左

image-20211017140517014

标签之段落

段落是通过<p>标签定义的

<p>这是一个段落 </p> 
<p>这是另一个段落</p>

image-20211017125215977

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

image-20211014175748915

水平线

<hr/>标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

 标签之图片

网站中最多的元素

网站中最多的元素毋庸置疑，一定是图片

<img> 标签定义 HTML 页面中的图像

<img src="" alt="" title="" width="" height="">

注意事项

<img>是单标签，不需要进行闭合操作

属性：

  1. src：路径（图片地址与名字）
  2. alt：规定图像的替代文本
  3. width：规定图像的宽度
  4. height：规定图像的高度
  5. title：鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhanCode\1.jpg

<img src="E:\itbaizhanCode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

  1. 子级关系: /

  2. 父级关系: ../

  3. 同级关系: ./（可以省略）

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

标签之超文本链接 

超链接描述

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档

<a href="url">链接文本</a>

超链接属性

在标签<a>中使用了href属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。

  2. 访问过的链接显示为紫色并带有下划线。

  3. 点击链接时，链接显示为红色并带有下划线。

特别提示

后期我们会通过CSS样式修改掉这些效果

超链接表现

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

标签之文本

常用文本标签

标签描述
<em>定义着重文字
<b>定义粗体文本
<i>定义斜体字
<strong>定义加重语气
<del>定义删除字
<span>元素没有特定的含义

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

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

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

相关文章

Linux权限系列--给普通用户添加某个命令的sudo权限

Linux权限系列--给普通用户添加某个命令的sudo权限

原文网址&#xff1a;Linux权限系列--给普通用户添加某个命令的sudo权限_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Linux系统如何给普通用户添加某个命令的sudo权限。 使用场景 普通开发者可能需要sudo的命令&#xff1a; apt-get&#xff08;经常要安装软件&#x…
阅读更多...
《Zookeeper》源码分析（十四）之 投票是如何发送与接收的

《Zookeeper》源码分析（十四）之 投票是如何发送与接收的

目录 MessengerWorkerSenderWorkerReceiver第5步&#xff1a;检验选票的epoch和version第6步&#xff1a;处理投票 Messenger Messenger管理接收到的消息以及待发送的消息&#xff0c;其源码如下&#xff1a; 它的源码比较简单&#xff0c;接下来着重介绍它维护的两个线程&a…
阅读更多...
【仿写tomcat】七、项目结构优化以及代码开源

【仿写tomcat】七、项目结构优化以及代码开源

仿写tomcat 项目结构开源地址 项目结构 到目前为止&#xff0c;博主的仿写tomcat就告一段落了&#xff0c;后续有时间了还会继续补充功能&#xff0c;现在的项目结构如下。 在保证功能的前提下作出的改动有&#xff1a; 将各个类中的参数统一成了Config类&#xff0c;通过对…
阅读更多...
Java课题笔记~ Ajax

Java课题笔记~ Ajax

1.1 概述 AJAX (Asynchronous JavaScript And XML)&#xff1a;异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML&#xff0c;JavaScript 表明该技术和前端相关&#xff1b;XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面&#xff1a; 与服…
阅读更多...
百度又开源一款压测工具，可模拟几十亿的并发场景，太强悍了

百度又开源一款压测工具，可模拟几十亿的并发场景，太强悍了

dperf 是百度开源的一款基于 DPDK 的 100Gbps 网络性能和负载测试软件&#xff0c;能够每秒建立千万级的 HTTP 连接、亿级别的并发请求和数百 Gbps 的吞吐量。 优点 性能强大&#xff1a; 基于 DPDK&#xff0c;使用一台普通 x86 服务器就可以产生巨大的流量&#xff1a;千万…
阅读更多...
[oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

[oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原1m 变亮2m 变暗 从3m到10m 又是什么效果 呢&#xff1f;&#xff1f; 真的可以 让文字 blink闪烁吗&#xff1f;&#x1f441; 3m 3m 实现斜体字的效果 4m 4m 对应着下划线 控…
阅读更多...
==和equals方法之间的区别，hashcode的理解，String拼接，Spring拆分

==和equals方法之间的区别，hashcode的理解，String拼接，Spring拆分

==和equals方法之间的区别 字符串有字符串常量池的概念,本身就推荐使用String s="字符串", 这种形式来创建字符串对象， 而不是通过new关键字的方式, 因为可以把字符串缓存在字符串常量池中,方便下次使用,不用遇到new就在堆上开辟一块新的空间 有一对双胞胎姐妹,晓苑…
阅读更多...
LabVIEW开发感应电机自动测试台

LabVIEW开发感应电机自动测试台

LabVIEW开发感应电机自动测试台 设计开发先进的电机测试台&#xff0c;能够测试额定功率为0-15hp的单相和三相感应电动机。系统能够测量感应电动机的不同参数&#xff0c;例如电压&#xff0c;电流&#xff0c;有功功率&#xff0c;无功功率&#xff0c;视在功率&#xff0c;功…
阅读更多...
有限状态机--实现cp的功能

有限状态机--实现cp的功能

有限状态机–实现cp的功能 执行的任务 上图是我们想实现的任务&#xff0c;对于A机来说&#xff0c;从fd1读取内容写到fd2&#xff0c;B机要做的是从fd2读取内容写到fd1中。 画出A机的状态。 代码示例 fsm.c #include <stdio.h> #include <stdlib.h> #include …
阅读更多...
ShowMeBug CEO李亚飞受邀参加深圳青年创新创业系列沙龙电子信息专场

ShowMeBug CEO李亚飞受邀参加深圳青年创新创业系列沙龙电子信息专场

7月13日下午&#xff0c;由深圳市科技交流服务中心&#xff08;深圳市科技专家委员会办公室&#xff09;主办&#xff0c;深圳新一代产业园承办的“2023深圳青年创新创业系列沙龙——电子信息专场”活动举行。ShowMeBug CEO李亚飞受邀参加此次活动。 深圳市科学技术协会党组成员…
阅读更多...
web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

文章目录 前言一、点聚合是什么&#xff1f;二、开发前准备三、API示例1.引入高德地图2.创建地图实例3.添加标点4.删除标点5.删除所有标点&#xff08;覆盖物&#xff09;6.聚合点7.自定义聚合点样式8.清除聚合9.打开窗体信息 四、实战开发需求要求效果图如下&#xff1a;封装思…
阅读更多...
nginx php-fpm安装配置

nginx php-fpm安装配置

nginx php-fpm安装配置 nginx本身不能处理PHP&#xff0c;它只是个web服务器&#xff0c;当接收到请求后&#xff0c;如果是php请求&#xff0c;则发给php解释器处理&#xff0c;并把结果返回给客户端。 nginx一般是把请求发fastcgi管理进程处理&#xff0c;fascgi管理进程选…
阅读更多...
基于YOLOX的输电线路异物检测算法研究及软件设计_有系统有文献，整体认知蛮好的

基于YOLOX的输电线路异物检测算法研究及软件设计_有系统有文献，整体认知蛮好的

我国自改革开放以来&#xff0c;大力发展工业和经济&#xff0c;对电能同样有着巨大的需求&#xff0c;所需求的电能不仅需要保证其数量&#xff0c;还要保障其质量&#xff0c;因此对整个电力系统安全稳定的运行也提出了更高的要求&#xff0c;电力系统发生故障要实时检测并及…
阅读更多...
从零做软件开发项目系列之一综论软件项目开发

从零做软件开发项目系列之一综论软件项目开发

1 引言 有一个三个泥瓦匠的故事。 三个泥瓦匠在砌墙&#xff0c;一个人走过来&#xff0c;问他们在干什么。 　　第一个泥瓦匠没好气地说&#xff0c;你没看见吗&#xff1f;我在辛苦地砌墙呢。 　　第二个回答&#xff0c;我们正在建一座高楼。 　　第三个则洋溢着喜悦说&…
阅读更多...
Vue2子组件修改父组件的方法

Vue2子组件修改父组件的方法

Vuex Vuex 是状态管理器&#xff0c;集中式存储管理所有组件的状态。 Vuex速成整理_AYBAIWAN的博客-CSDN博客https://blog.csdn.net/aybaiwan/article/details/131442547?spm1001.2014.3001.5501vuex中this.$store.commit和this.$store.dispatch的用法_老电影故事的博客-CSD…
阅读更多...
第八届XCTF联赛首场国际外卡赛——WACON2023即将开启！

第八届XCTF联赛首场国际外卡赛——WACON2023即将开启！

由国际战队SuperGuesser操刀命题 第八届XCTF首场国际外卡赛 WACON2023即将开启 线上资格赛前6名队伍 将晋级WACON2023总决赛 飞往韩国首尔 与全球顶尖白帽黑客一决高下 总决赛冠军队伍将获得&#xff1a; 3千万韩元&#xff08;折合人民币16万&#xff09;高额奖金 &第八…
阅读更多...
Java IO流（一）IO基础

Java IO流（一）IO基础

概述 IO流本质 I/O表示Input/Output,即数据传输过程中的输入/输出,并且输入和输出都是相对于内存来讲Java IO(输入/输出)流是Java用于处理数据读取和写入的关键组件常见的I|O介质包括 文件(输入|输出)网络(输入|输出)键盘(输出)显示器(输出)使用场景 文件拷贝&#xff08;File&…
阅读更多...
基于Java的深圳坂田附近闲置物品交易群管理系统

基于Java的深圳坂田附近闲置物品交易群管理系统

开发技术&#xff1a;java 开发框架&#xff1a;springmvc、spring、mybatis 数据库&#xff1a;mysql 备注&#xff1a;方便大家将手中的二手闲置物品转让给需要的人&#xff0c;例如大家搬家的时候&#xff0c;有不要的&#xff08;冰箱、洗衣机、桌子、椅子&#xff09;等物…
阅读更多...
【3519DV500】AI算法承载硬件平台_2.5T算力+AI ISP图像处理_超感光视频硬件方案开发

【3519DV500】AI算法承载硬件平台_2.5T算力+AI ISP图像处理_超感光视频硬件方案开发

Hi3519DV500 内置双核 A55 &#xff0c;提供高效、丰富和灵活的CPU 资源&#xff0c;以满足客户计算和控制需求。 Hi3519DV500集成了高效的神经网络推理引擎&#xff0c;最高2.5Tops NN算力&#xff0c;支持业界主流的神经 网络框架。神经网络支持完整的 API 和工具链&#xf…
阅读更多...
Qt使用qml（QtLocation）显示地图

Qt使用qml（QtLocation）显示地图

一、qt版本和QtLocation模块版本确认 如果qt版本过低的话是没有QtLocation模块的&#xff0c;我的版本如下 构建工具版本如下 二、qml代码编写 1、工程中添加模块 首先在工程中添加模块quickwidgets positioning location 2、添加资源文件 3、在资源文件中添加qml文件 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023