【从0-1的HTML】第2篇:HTML标签

文章目录

  • 1.标题标签
  • 2.段落标签
  • 3.文本标签
    • br
    • b
    • strong
    • sub
    • sup
  • 4.超链接标签
  • 5.图片标签
  • 6.表格标签
  • 7.列表标签
    • 有序列表ol
    • 无序列表ul
    • 定义列表dl
  • 8.表单标签
  • 9.音频标签
  • 10.视频标签
  • 11.HTML元素分类
    • 块级元素
    • 内联元素
  • 12.HTML布局
  • 13.内联框架
  • 13.内联框架

1.标题标签

标题标签:h1、h2、h3…h6,1-6表示标题层级,最大h1,最小h6

<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>

2.段落标签

可以使用段落标签来将内容分成若干个段落

<p>This is a paragraph</p>
<p>This is another paragraph</p>

3.文本标签

br

一个空的HTML元素,关闭标签没有任何意义,但在HTML之后的版本中,不允许使用没有结束标签的HTML元素,所以推荐使用

b

仅加粗文本

strong

加粗文本,表示标签中的内容的重要性,两者在显示并没有差别

sub

下标文本

sup

上标文本

<p><b>Everything happens for a reason!</b> <br/> <strong>You can change your odds!</strong> <br> <strong>You can change your life!</strong></p>
<!--下标文本-->
<sub>下标文本</sub>
<!--上标文本-->
<sup>上标文本</sup>

4.超链接标签

超链接(Hyperlink)通常简称为链接(Link),是指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是当前网页中的其它位置,还可以是图片、文件、应用程序等

<!--href属性:1、可以指向网页,2、可以指向图片,3、可以指向压缩文件,4、可以指向本地文件,指向可以是相对路径,也可以是绝对路径-->
<a href="http://www.w3school.com.cn/" target="_blank">访问 W3School</a>

5.图片标签

HTML 使用 标签插入图片,img 是 image 的简称,自闭和标签,只包含属性,没有结束标签

<!--图片-->
<!--src:必填属性,指定图片的地址(网络图片)或者路径(本地图片)-->
<!--alt:可选属性,当图片无法正常显示的时候,会显示alt属性中的信息-->
<img src="64960446_p0.jpg" alt="wlop">

6.表格标签

在 HTML 中,我们使用 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的,都包括行、列、单元格、表头等元素。

<!--table表格-->
<!--tr:行-->
<!--th:表头-->
<!--td:表格单元格标签-->
<!--border-collapse:表格边框合并-->
<table border="1" style="border-collapse: collapse"><tr><th>朝代</th><th>开国皇帝</th></tr><tr><td></td><td>嬴政</td></tr><tr><td></td><td>刘邦</td></tr>
</table>

7.列表标签

HTML 列表(List)可以将若干条相关的内容整理起来,让内容看起来更加有条理

有序列表ol

<!--有序列表:ol order list缩写-->
<ol><li>有序1</li><li>有序2</li>
</ol>

无序列表ul

<!--无序列表:ul unordered list缩写-->
<ul><li>无序1</li><li>无序2</li>
</ul>

定义列表dl

<!--定义列表:dl definition list缩写dt definition term缩写,标题dd definition description缩写,描述
-->
<dl><dt>标题1</dt><dd>标题1的描述</dd><dt>标题2</dt><dd>标题2的描述</dd>
</dl>

8.表单标签

表单属于 HTML 文档的一部分,其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件,用户通过修改表单中的元素(例如输入文本,选择某个选项等)来完成表单,通过表单中的提交按钮将表单数据提交给后端程序。

<!--表单-->
<!--action属性:表示将表单数据提交的url,默认是当前页面,当姓名和年龄输入点击提交时,提交到当前网页-->
<!--http://localhost:63342/FrontEnd/HTML/%E6%A0%87%E7%AD%BE.html?username=kii&age=25-->
<!--input:表示定义输入框-->
<!--method:表示表单数据提交方式,主要是get和post方式-->
<!--    get:请求数据直接拼接在路径后面 ?username=kii&age=25,大小有限制-->
<!--    post:请求数据通过请求体传递 username=lisi&age=19, 大小无限制-->
<!--    如果要提交数据,必须添加name属性-->
<form action="" method="get">姓名:<input type="text" name="username" id="1">年龄:<input type="number" name="age" id="2"><input type="submit" value="get提交">
</form>
<form action="" method="post">姓名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="post提交数据">
</form>

9.音频标签

<!-- 音频标签audiosrc: 设置视频资源路径controls: 播放控件 [注意: 当值和key一样的时候,可以省略值]
--><audio src="./audio/news.mp3" controls></audio>

10.视频标签

<!-- 视频标签src属性:视频路径controls属性:播放控件
-->
<video src="./video/news.mp4" controls width="950px" ></video>

11.HTML元素分类

HTML元素主要分为两个类别,块级元素和内联元素

块级元素

通常是以新行来开始,块级元素主要包括div、h、table、p

内联元素

通常不会以新行开始,内联元素主要包括span、a-

12.HTML布局

HTML4布局主要通过div实现

HTML5布局有很多其他标签:header、nav…稍微了解就行,具体使用可以查看手册

<div><li>HTML教程</li><li>CSS教程</li><li>JS教程</li><li>Java教程</li><li>Python教程</li>
</div>

13.内联框架

iframe:可以在网页中显示网页,可以设置width和height

<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>
>CSS教程</li><li>JS教程</li><li>Java教程</li><li>Python教程</li>
</div>

13.内联框架

iframe:可以在网页中显示网页,可以设置width和height

<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>

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

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

相关文章

快速排序(Quick Sort)算法详解(递归与非递归)

引言 在计算机科学中&#xff0c;排序算法是最基础且重要的算法之一。快速排序&#xff08;Quick Sort&#xff09;作为一种高效的排序算法&#xff0c;在实际应用中被广泛使用。平均时间复杂度为 (O(n log n))&#xff0c;最坏情况下为 (O(n^2))。本文将详细介绍快速排序算法…

修改 vscode 左侧导航栏的文字大小 (更新版)

新增, 个人常用 按 Ctrl Shift P 打开命令面板 输入并选择 : Developer: Toggle Developer Tools 打开开发者工具。 1. 起因&#xff0c; 目的: 问题&#xff1a; vscode 左侧的文字太小了&#xff01;&#xff01;&#xff01;我最火的一篇文章&#xff0c;写的就是这个…

Kerberos面试内容整理-Kerberos 的配置与排障

正确配置 Kerberos 对其正常工作至关重要。在Linux/Unix环境下,Kerberos配置通常通过编辑配置文件(例如 /etc/krb5.conf)完成。其中指定了Realm名称、KDC和管理员服务器地址、默认域到Realm的映射等参数。管理员需要在KDC端初始化数据库并创建主体(可以使用 kadmin 等工具添…

Windows + CPU也能跑时序预测:TSLib框架快速上手与踩坑避雷

在时序预测领域,选择一个成熟的框架往往能让我们事半功倍。最近接手了一个紧急的时序预测项目,经过一番调研后,我选择了TSLib(Time-Series-Library)这个优秀的开源框架来快速搭建整个预测流程。 由于开发环境限制在Windows平台且没有GPU支持,整个部署过程还是遇到了一些…

从 0 到 1:用 Trae 插件 Builder 模式开发端午包粽子小游戏

​ 前言 Trae插件获取&#xff1a;https://www.trae.com.cn/plugin 在编程的世界里&#xff0c;效率就是生命。我们开发者常常为了一个项目的搭建&#xff0c;重复着创建文件夹、初始化项目配置、编写样板代码等一系列繁琐的操作&#xff0c;耗费了大量的时间和精力。而如今…

React-native之Flexbox

本文总结: 我们学到了 React Native 的 Flexbox 布局&#xff0c;它让写样式变得更方便啦&#xff01;&#x1f60a; Flexbox 就像一个有弹性的盒子&#xff0c;有主轴和交叉轴&#xff08;行或列&#xff09;。 在 RN 里写样式要用 StyleSheet.create 对象&#xff0c;属性名…

Leetcode 1336. 每次访问的交易次数

1.题目基本信息 1.1.题目描述 表: Visits ---------------------- | Column Name | Type | ---------------------- | user_id | int | | visit_date | date | ---------------------- (user_id, visit_date) 是该表的主键(具有唯一值的列的组合) 该表的每行表示 use…

腾讯云国际版和国内版账户通用吗?一样吗?为什么?

在当今全球化的数字化时代&#xff0c;云计算服务成为众多企业和个人拓展业务、存储数据的重要选择。腾讯云作为国内领先的云服务提供商&#xff0c;其国际版和国内版备受关注。那么&#xff0c;腾讯云国际版和国内版账户是否通用&#xff1f;它们究竟一样吗&#xff1f;背后又…

解锁Java多级缓存:性能飞升的秘密武器

一、引言 文末有彩蛋 在当今高并发、低延迟的应用场景中&#xff0c;传统的单级缓存策略往往难以满足性能需求。随着系统规模扩大&#xff0c;数据访问的瓶颈逐渐显现&#xff0c;如何高效管理缓存成为开发者面临的重大挑战。多级缓存架构应运而生&#xff0c;通过分层缓存设…

Android Kotlin 算法详解:链表相关

前言 &#x1f60a; 在 Android 开发中&#xff0c;算法与数据结构是基本功之一&#xff0c;而链表&#xff08;Linked List&#xff09;作为常见的数据结构&#xff0c;经常出现在各类面试题与实际业务场景中。本文将以 Android Kotlin 为语言&#xff0c;结合 LeetCode 上的…

Blinko智能笔记系统实现跨平台同步与隐私保护的完整技术方案解析

文章目录 前言1. Docker Compose一键安装2. 简单使用演示3. 安装cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站 前言 是否…

【小红书】API接口,获取笔记列表

小红书笔记列表API接口详解 - 深圳小于科技助力高效数据对接 深圳小于科技&#xff08;官网&#xff1a;https://www.szlessthan.com&#xff09;提供的小红书笔记列表API接口&#xff0c;帮助开发者快速获取小红书平台笔记数据&#xff0c;实现高效内容管理与分析。 接口概述…

Qwen2.5-VL 损失函数

Qwen2.5-VL 损失函数 flyfish 文章名称链接深入理解交叉熵损失 CrossEntropyLoss - 概率基础链接深入理解交叉熵损失 CrossEntropyLoss - 对数链接深入理解交叉熵损失 CrossEntropyLoss - 概率分布链接深入理解交叉熵损失 CrossEntropyLoss - 信息论&#xff08;交叉熵&#…

LeetCode 1524. 和为奇数的子数组数目

好的&#xff01;让我们详细解释 LeetCode 1524. 和为奇数的子数组数目 这道题的思路和解法。 题目&#xff1a; https://leetcode.cn/problems/number-of-sub-arrays-with-odd-sum/description/ 题目分析 问题描述&#xff1a; 给定一个整数数组 arr&#xff0c;返回其中和…

kafka学习笔记(三、消费者Consumer使用教程——消费性能多线程提升思考)

1.简介 KafkaConsumer是非线程安全的&#xff0c;它定义了一个acquire()方法来检测当前是否只有一个线程在操作&#xff0c;如不是则会抛出ConcurrentModifcationException异常。 acquire()可以看做是一个轻量级锁&#xff0c;它仅通过线程操作计数标记的方式来检测线程是否发…

百度蜘蛛池的作用是什么?技术@baidutopseo

百度蜘蛛池的作用 百度蜘蛛池是一种用于集中管理和调度百度搜索引擎蜘蛛&#xff08;爬虫&#xff09;的技术工具。其主要目的是优化网站内容的收录效率&#xff0c;帮助搜索引擎更高效地发现和抓取网页内容。技术baidutopseo 提升收录效率 通过集中大量百度蜘蛛的访问请求&…

黑马Java面试笔记之 消息中间件篇(Kafka)

一. Kafka保证消息不丢失 Kafka如何保证消息不丢失 使用Kafka在消息的收发过程中都会出现消息丢失&#xff0c;Kafka分别给出了解决方案 生产者发送消息到Brocker丢失消息在Brocker中存储丢失消费者从Brocker接收消息丢失 1.1 生产者发送消息到Brocker丢失 设置异步发送 消息…

dis css port brief 命令详细解释

华为交换机命令 display css port brief 详细解释 display css port brief 是华为交换机中用于 快速查看堆叠&#xff08;CSS&#xff0c;Cluster Switch System&#xff09;端口状态及关键参数 的命令&#xff0c;适用于日常运维、堆叠链路健康检查及故障定位。以下是该命令的…

Redis 缓存问题及其解决方案

1. 缓存雪崩 概念&#xff1a;缓存雪崩是指在缓存层出现大范围缓存失效或缓存服务器宕机的情况下&#xff0c;大量请求直接打到数据库&#xff0c;导致数据库压力骤增&#xff0c;甚至可能引发数据库宕机。 影响&#xff1a;缓存雪崩会导致系统性能急剧下降&#xff0c;甚至导…

使用Python进行函数作画

前言 因为之前通过deepseek绘制一下卡通的人物根本就不像&#xff0c;又想起来之前又大佬通过函数绘制了一些图像&#xff0c;想着能不能用Python来实现&#xff0c;结果发现可以&#xff0c;不过一些细节还是需要自己调整&#xff0c;deepseek整体的框架是没有问题&#xff0…