【前端】HTML标签汇总

news2024/11/24 17:15:51

目录

展示用户信息的标签

1.文本标签 span

2.标题标签 h1~h6

3.竖着布局的标签 div

4.段落标签 p

5.超链接标签 a

5.1跳转至网上的资源

5.2锚点

6.列表标签

6.1有序列表 ol

6.2无序列表 ul

7.图片标签 img

7.1相对路径

7.1.1兄弟关系

7.1.2叔侄关系

7.1.3表兄弟关系

7.2绝对路径

8.表格标签

8.1形成一个表格

8.2表格的大小以及边框

8.3表格的优化

8.4单元格合并

8.4.1行合并 rowspan

8.4.2列合并 colspan

9.框架标签 \ 窗口标签 iframe

收集用户信息的标签

1.input + type

1.1.单行文本框 text

1.2.密码框 password

1.3.单选框 radio

1.4.复选框 checkbox

1.5.文件选择器 file

1.6.颜色拾取器 color

1.7.日期选择器 date

1.8.日期时间选择器 datetime-local

1.9.周选择器 week

1.10.滑块 range

1.11.数字输入框 number

2.下拉框 select

3.多行文本域 textarea

4.按钮

4.1普通按钮 button

4.2重置按钮 reset

4.3提交按钮 submit

音频和视频

1.音频 audio

2.视频 video


展示用户信息的标签

1.文本标签 span

<span>hello</span>

可以添加 style 样式

<span style="color : green">hello</span>

2.标题标签 h1~h6

<h1>h1标题</h1>

逐级减小, h4标题和文本一样大 .

3.竖着布局的标签 div

<div>竖着布局的标签</div>

4.段落标签 p

<p>段落标签</p>

段落标签是竖着布局的, 不同点是两个段落之间有较大的空隙

5.超链接标签 a

5.1跳转至网上的资源
<a href="https://www.baidu.com/">超链接至百度</a>

href 里面写想要跳转的网址,这里以百度为例

在这里我们没有写 target 属性, 所以 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下

<a href="https://www.baidu.com/" target="_blank">超链接至百度</a>
5.2锚点

为了实现同一页面上不同位置的跳转, 我们使用 name 属性标记需要到达的地方

<a name="aaa"></a>

然后使用超链接传送到目标位置

<a href="#aaa">跳转到aaa</a>

当多个超链接叠放在一起时, 它们会在同一行显示

为了让不同超链接竖着布局, 我们添加

<a href="#aaa">跳转到aaa</a><br>
<a href="#bbb">跳转到bbb</a><br>
<a href="#ccc">跳转到ccc</a>

为了让超链接固定在网页的某个位置,我们可以添加 style 属性, 如下

<a href="#aaa" style="position: fixed; right: 100px; bottom: 50px;">跳转到aaa</a>

当多个超链接叠放在一起时, 我们可以把它们放在一个块级元素中

    <span style="position: fixed; right: 100px; bottom: 50px;">
        <a href="#aaa">跳转到aaa</a><br>
        <a href="#bbb">跳转到bbb</a><br>
        <a href="#ccc">跳转到ccc</a>
    </span>

6.列表标签

6.1有序列表 ol
    <ol>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
    </ol>

ol 即 Ordered Labels

为了把标签前面的序号修改为大小写字母或其他符号, 我们可以使用 type 关键字, 例如

<ol type="a"></ol>

除此之外,我们还可以使用 start 标签控制编号从几开始, 例如

    <ol type="a" start="2">
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
    </ol>

6.2无序列表 ul
    <ul>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
    </ul>

7.图片标签 img

在 src 属性里写资源路径, 路径分为相对路径和绝对路径. 图片加载失败时, 显示 alt 属性里面的内容.

7.1相对路径

在相对路径中, 图片与图片有三种位置关系, 分别是兄弟关系 叔侄关系 表兄弟关系

7.1.1兄弟关系

当 html 文件和 jpg 文件在同一个包中, 它们之间是兄弟关系, 形如

html

        index.html

        pic.jpg

<img src="pic.jpg" alt="一张图片">

为了控制图片的大小,我们使用 style 属性定义宽和高, 形如

<img src="pic.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.1.2叔侄关系

当 html 文件与 jpg 的父级在同一个包中, 它们之间是叔侄关系, 形如

index.html

img

        pic.jpg

<img src="img/pic2.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.1.3表兄弟关系

当 html 文件的父级与 jpg 的父级在同一个包中, 它们之间是表兄弟关系, 形如

html

        index.html

img

        pic.jpg

首先使用 ../ 返回上级, 然后按照叔侄关系处理

<img src="../img/pic3.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.2绝对路径

联网复制图片网址, 赋值给 src 即可

8.表格标签

8.1形成一个表格

table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下

    <table>
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
    </table>

此为一行四列

    <table>
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>13</td>
            <td>男</td>
        </tr>
        <tr>
            <td>9</td>
            <td>李四</td>
            <td>14</td>
            <td>女</td>
        </tr>
        <tr>
            <td>85</td>
            <td>王五</td>
            <td>15</td>
            <td>男</td>
        </tr>
    </table>

此为四行四列

8.2表格的大小以及边框

为了让表格有边框, 我们添加 border 属性

<table border="1"></table>

我们使用 width, height 控制表格的宽和高

<table border="1" width="300px" height="150px"></table>

8.3表格的优化

相较于 <td> 标签, <th> 标签有加粗和居中的效果

    <table>
        <tr>
            <th></th>
        </tr>
    </table>

为了不让内容紧贴边框, 我们使用 cellpadding 属性控制单元格填充度

<table cellpadding="10px"></table>

为了改变单元格间的间距, 我们使用 cellspacing 属性, 通常将其置为 0 以取消间距

<table cellspacing="0"></table>

被 <thead> 标签包围的行在顶端显示, 被 <tfoot> 标签包围的行在底端显示, <tbody> 在中间显示

8.4单元格合并
8.4.1行合并 rowspan

rowspan 将不同行合并

<td rowspan="3"></td>

8.4.2列合并 colspan

colspan 将不同列合并

<td colspan="2"></td>

9.框架标签 \ 窗口标签 iframe

<iframe src=""></iframe>

在 src 中放入目标网址, 以牛客为例

<iframe src="https://www.nowcoder.com/"></iframe>

此时的窗口是有边框的, 为了取消边框, 我们把 frameborder 属性设置为 0

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

为了修改窗口大小, 我们调整宽高属性

<iframe src="https://www.nowcoder.com/" frameborder="0" width="1650px" height="800px"></iframe>

我们可以使用 name 属性标识窗口, 配合超链接的target 属性达到在此窗口跳转不同链接的效果

    <a href="https://www.nowcoder.com/" target="abc">跳转到牛客</a>
    <a href="https://leetcode.cn/" target="abc">跳转到力扣</a>
    <a href="https://www.bilibili.com/v/douga/" target="abc">跳转到bilibili</a>
    <iframe src="https://www.nowcoder.com/" name="abc" frameborder="0" width="1650px" height="800px"></iframe>

收集用户信息的标签

1.input + type

使用 input 标签收集用户信息时, 根据 type 属性的值进行区分

1.1.单行文本框 text
<input type="text"> 单行文本框

1.2.密码框 password
<input type="password"> 密码框

1.3.单选框 radio

使用 name 属性进行匹配, name 值相同为一组

<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 单选框

1.4.复选框 checkbox
<input type="checkbox"> 足球 <input type="checkbox"> 篮球 <input type="checkbox"> 排球 复选框

1.5.文件选择器 file
<input type="file">

1.6.颜色拾取器 color
<input type="color">

1.7.日期选择器 date
<input type="date">

1.8.日期时间选择器 datetime-local
<input type="datetime-local">

1.9.周选择器 week
<input type="week">

1.10.滑块 range
<input type="range">

滑块的属性: min 最小值, max 最大值, value 滑块的默认值

<input type="range" min="0" max="100" value="80">

1.11.数字输入框 number

数字输入框中只能输入数字

<input type="number">

数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长

<input type="number" min="0" max="100" value="80" step="5">

2.下拉框 select

    <select>
        <option>语文</option>
        <option>数学</option>
        <option>英语</option>
        <option>体育</option>
    </select>

3.多行文本域 textarea

<textarea cols="30" rows="10"></textarea>

4.按钮

4.1普通按钮 button
<input type="button" value="普通按钮1">

4.2重置按钮 reset
<input type="reset" value="重置按钮2">

重置按钮会将同一个 form 表单内的输入内容重置

4.3提交按钮 submit
<input type="submit" value="提交按钮3">

提交按钮会将同一个 form 表单内的输入内容提交, 提交后会刷新

    <form>
        <textarea cols="30" rows="10"></textarea> <br><br>
    
        <input type="button" value="普通按钮1"><br><br>
        <input type="reset" value="重置按钮2"><br><br>
        <input type="submit" value="提交按钮3">
    </form>

音频和视频

1.音频 audio

<audio src="" controls></audio>

在 src 中写资源路径, 加入 controls 属性后手动控制音频播放

将 controls 属性改为 autoplay 属性, 进入网页自动播放

<audio src="" autoplay></audio>

2.视频 video

<video src="" controls width="500px" height="100px"></video>

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

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

相关文章

xtu oj 加一

样例输入# 2 4 1 2 3 4 4 3 2 4 1样例输出# 3 5 解题思路&#xff1a;最小操作次数一定是把所有数变成数组中最大值max。 1、找最大值&#xff0c;一开始我把max初始值设为0&#xff0c;如果a[i]>max,maxa[i],WA了。又看了一遍题目&#xff0c;发现所有整数的绝对值小于…

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式 1、所要用到的激活工具2、开启电脑卓越性能模式Windows11Windows10在电源模式中选择卓越性能模式 3、将系统版本切换为 工作站版本 1、所要用到的激活工具 KMS激活工具(…

人工智能、机器学习与深度学习:层层递进的技术解读

引言 在当今科技快速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为一个热门话题&#xff0c;几乎渗透到了我们生活的方方面面。从智能手机的语音助手&#xff0c;到自动驾驶汽车&#xff0c;再到医疗诊断中的图像识别&#xff0c;人工智能的应用正在改变我…

光流法(Optical Flow)

一、简介 光流法&#xff08;Optical Flow&#xff09;是一种用于检测图像序列中像素运动的计算机视觉技术。其基于以下假设&#xff1a; 1.亮度恒定性假设&#xff1a;物体在运动过程中&#xff0c;其像素值在不同帧中保持不变。 2.空间和时间上的连续性&#xff1a;相邻像素之…

OkHttp网络请求框架

添加依赖 在 build.gradle 文件中添加 OkHttp 依赖&#xff1a; dependencies {implementation("com.squareup.okhttp3:okhttp:4.10.0") }使用OkHttp发起GET请求 同步请求 public class MainActivity extends AppCompatActivity {// Used to load the okhttptes…

《XGBoost算法的原理推导》12-14决策树复杂度的正则化项 公式解析

本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 我们定义一颗树的复杂度 Ω Ω Ω&#xff0c;它由两部分组成&#xff1a; 叶子结点的数量&#xff1b;叶子结点权重向量的 L 2 L2 L2范数&#xff1b; 公式(…

使用postmain 测试下载文件接口

文章目录 前言使用postmain 测试下载文件接口 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊!!…

Python函数详解

目录 一、函数的定义 二、函数的特性 三、函数参数 四、返回值 五、文档字符串 六、高级函数 七、偏函数 八、装饰器 总结 在Python编程中&#xff0c;函数是构建程序的基本模块&#xff0c;它提供了一种封装特定任务的方式&#xff0c;使得代码更加模块化、可重用和易…

【贪心算法】贪心算法三

贪心算法三 1.买卖股票的最佳时机2.买卖股票的最佳时机 II3.K 次取反后最大化的数组和4.按身高排序5.优势洗牌&#xff08;田忌赛马&#xff09; 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#…

【Android、IOS、Flutter、鸿蒙、ReactNative 】文本点击事件

Android Studio 版本 Android Java TextView 实现 点击事件 参考 import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.TextView; import android.widget.Toast;public c…

超30万亿消费规模下,低龄VS高龄、他VS她、共性VS个性的市场机会

作者 | NewAgingPro团队 前言 NewAgingPro团队基于多年研究沉淀&#xff0c;发现每个行业都具备为老年人群再次细分的机会&#xff0c;中国的银发经济市场将围绕老年人需求不断往细分场景垂直深耕。具体哪些需求是市场增长的源动力&#xff1f;40岁泛银发群体的需求趋势如何…

贪心算法-汽车加油

这道题目描述了一个汽车旅行场景&#xff0c;需要设计一个有效的算法来决定在哪几个加油站停车加油&#xff0c;以便最小化加油次数。题目给出了汽车加满油后的行驶距离n公里&#xff0c;以及沿途若干个加油站的位置。我们需要找出一个方案&#xff0c;使得汽车能够完成整个旅程…

【动手学电机驱动】STM32-FOC(6)基于 IHM03 的无感方波控制

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;IHM03 电机控制套件介绍 STM32-FOC&#xff08;5&…

CNN实现地铁短时客流预测

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

SDL打开YUV视频

文章目录 问题1&#xff1a;如何控制帧率&#xff1f;问题2&#xff1a;如何触发退出事件&#xff1f;问题3&#xff1a;如何实时调整视频窗口的大小问题4&#xff1a;YUV如何一次读取一帧的数据&#xff1f; 问题1&#xff1a;如何控制帧率&#xff1f; 单独用一个子线程给主线…

Linux 系统结构

Linux系统一般有4个主要部分&#xff1a;内核、shell、文件系统和应用程序。内核、shell和文件系统一起形成了基本的操作系统结构&#xff0c;它们使得用户可以运行程序、管理文件并使用系统。 1. linux内核 内核是操作系统的核心&#xff0c;具有很多最基本功能&#xff0c;它…

使用vscode 连接linux进行开发

1. 在Vscode中安装扩展功能remote ssh 2. 打开命令窗口 3. 在弹出的命令窗口输入ssh&#xff0c;并从弹出的提示中选择 Add New SSH Host 4. 在弹出的输入窗口中输入类似下面形式的 连接地址&#xff1a; 5. 输入回车后出现下面的对话框&#xff0c;这个对话框是说你要用哪个…

【C++】 C++游戏设计---五子棋小游戏

1. 游戏介绍 一个简单的 C 五子棋小游戏 1.1 游戏规则&#xff1a; 双人轮流输入下入点坐标横竖撇捺先成五子连线者胜同一坐标点不允许重复输入 1.2 初始化与游戏界面 初始化界面 X 输入坐标后 O 输入坐标后 X 先达到胜出条件 2. 源代码 #include <iostream> #i…

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…

【MySQL】MySQL基础知识复习(下)

前言 上一篇博客介绍了MySQL的库操作&#xff0c;表操作以及CRUD。 【MySQL】MySQL基础知识复习&#xff08;上&#xff09;-CSDN博客 本篇将进一步介绍CRUD操作&#xff0c;尤其是查找操作 目录 一.数据库约束 1.约束类型 1.1NULL约束 1.2UNIQUE&#xff1a;唯一约束 …