HTML 常用标签总结

本篇文章总结了一些我在学习html时所记录的标签,虽然总结并不是非常全面,但都是一些比较常用的。

html元素标签

首先一个html界面是由无数个元素标签组成的,每个元素具有它的属性

1.input

单行文本框
标签type属性——text

<input type="text" >

密码框
标签type属性——password

<input type="password">

单选框
标签type属性——radio

选项名:<input type="radio">

例如:

男:<input type="radio">

name属性相同的视为一组
placeholder属性向框内添加文字,::-webkit-input-placeholder设置提示字的颜色
outline: none;取消选中后出现的边框

男: <input type="radio" name="sex">  女:<input type="radio" name="sex">

多选框
标签type属性——checkbox

选项名:<input type="checkbox">
篮球: <input type="checkbox">   足球: <input type="checkbox">  排球: <input type="checkbox"> 

文件选择器
标签type属性——file

<input type="file">

颜色拾取器
标签type属性——color

<input type="color">

日期
标签type属性——date

<input type="date">

日期选择时间器
标签type属性——datetime-local

<input type="datetime-local">

周选择器
标签type属性——week

<input type="week">

滑块
标签type属性——range

<input type="range">

常见搭配属性
min和max:分别表示最小值和最大值
value属性:设定进入页面时滑块的数值

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

数字
标签type属性——number

<input type="number">

常见搭配属性
min和max:分别表示最小值和最大值
value属性:设定进入页面时数字的数值
step:每次增大减小的数量
按钮
普通按钮
标签type属性——button

<input type="button" >

提交按钮
标签type属性——submit

<input type="submit" >

重置按钮
标签type属性——reset

<input type="reset" >

2.select下拉框

例:

<select >
        <option>选择1</option>
        <option>选择2</option>
        <option>选择3</option>
</select>

常见搭配属性:
value:
onchange :选项改变时触发方法
例:通过下拉框改变三个方块的样式

<!DOCTYPE HTML>
<html>
       <head>
             <meta charset = "utf-8">
             <style>
                .sty1{  background-color:#aaa;height:200px;width:200px; margin-top:20px ; margin-left : 10px ;float:left}
             </style>
       </head>
       <body>
                <div id="div1" class="sty1" ></div>
                <div id="div2" class="sty1" ></div>
                <div id="div3" class="sty1" ></div> 
                <select id = "s1" onchange="m1()">
                        <option value="flag0">请选择样式</option>
                        <option value="flag1">样式1</option>
                        <option value="flag2">样式2</option>
                        <option value="flag3">样式3</option>
                        <option value="flag4">样式4</option>
                        <option value="flag5">样式5</option>
                </select>         
       </body>
       <script >
              function m1(){
                        var x = document.getElementById("s1");
                        if(x.value == "flag1"){
                                var y = document.getElementById("div1");
                                y.style.backgroundColor = "#a00";
                        }else if(x.value == "flag2"){
                                var y = document.getElementById("div2");
                                y.style.height="400px";
                        }else if(x.value == "flag3"){
                                var y = document.getElementById("div2");
                                y.style.opacity = "0.4";
                        }else if(x.value == "flag4"){
                                var y = document.getElementById("div3");
                                y.style.transform="rotate(" + 30 +"deg)" ;
                        }else if(x.value == "flag5"){
                                var y = document.getElementById("div2");                              
                                y.style.height="200px";
                                y.style.opacity = "1";
                                var t = document.getElementById("div1");
                                t.style.backgroundColor = "#aaa";
                                var m = document.getElementById("div3");
                                m.style.transform="rotate(" + 0 +"deg)" ;
                        }
                }                                  
       </script>
</html>

3.div 标签

它是默认竖着布局标签
默认为无颜色无高度无宽度
(id class style 其他)
id 该元素的标识
class 该元素的类
子div可以比父div大

<div id="div3" class="sty1"></div>  
            <div id=:div4" class="sty2"></div>//sty2的大小比sty1大

4.span文本标签

形成独立空间
例如

<span style="color:red;fond-size:30px">h<>

多个span标签默认向右排列

5.h1-h6标题标签

默认竖着布局
字体会加粗放大

6.p段落标签

<p>  </p>

标签之间的间隔会大

7.超链接标签(锚点标签)

<a>点击跳转</a>

跳转到地址或文件:href
例:

<a href="https://www.baidu.com/" >

点击跳转//点击会跳转到百度

target :控制打开新页面
blank和self分别是打开新页面是否覆盖原本页面
窗口名:指定窗口打开
例:

<a href="https://www.baidu.com/" target="_blank" >点击跳转</a>//点击会不关闭当前页面,再打开百度

作为锚点标签时
可以通过锚点跳转到页面的其他位置

<a name="aa">锚点</a><br>//定义锚点,<br>的作用是换行
<a href="#aa">跳转到aa位置</a><br>//作为锚点时要加#

把跳转键固定在某个位置用position属性的fixed
例:

<a href="#div" style="position:fixed:right:100px;bottom:300px">点击跳转</a><br>

8.图片标签

src属性:引用图片资源

alt属性:给图片加注释
filter:brightness()让图片变亮或变暗
绝对路径:被访问资源在磁盘中的绝对位置

<img src:"图片在电脑中的路径">

相对路径:访问资源与被访问资源的关系
与html文件在同一文件夹下(兄弟关系)

<ima src="文件名" >

图片在文件在同一文件夹的另一文件夹下(叔侄关系,在兄弟文件夹内部)
<img src:兄弟文件/图片名">
图片位于文件父亲文件的兄弟文件下(表兄弟关系),先返回上面再进入兄弟中

<img src:"../兄弟文件夹/图片名>

浏览器复制图片地址

<img src:”浏览器图片地址">

9.列表标签

<ul>
    <li>hello<li>
    <li>hello<li>
</ul><ol>
    <li>hello<li>
    <li>hello<li>
</ol>

可以更改type使列表从什么开始

<ol type="A" start="5">//列表以英文字母排序,并从第五个字母开始
    <li>hello<li>
    <li>hello<li>
</ol>

去掉列表样式(各个.) 样式属性中加list-style:none
10.表格标签

<table>
   <tr></tr>//第一行
   .....    //表示有几行
   <tr></tr>//第n行
   <tr>
      <td>1</td>//表示一行内有几个单元格
      <td>2</td>
      ....
      <td></td>
   </tr>
</table>
形成独立空间,会放到表格的最上边,头部
<table>  
  <thead>
     <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
     </tr>
  </thead>
</table>
<tbody>

形成独立空间,身体

<table>
   <tr></tr>
   <tr>
      <td>1</td>//表示一行内有几个单元格
      ....
      <td></td>
   </tr>
</table>

实例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <table border="1" color="blue">
        <tr>
            <td style="text-align: center;"colspan="2">上午</td>
            <td style="text-align: center;"colspan="2">下午</td>
        </tr>
        <tr>
            <td>8:00-10:00</td>
            <td>10:00-12:00</td>
            <td>14:00-16:00</td>
            <td>16:00-18:00</td>
        </tr>
        <tr>
            <td rowspan="2">领导讲话</td>
            <td>大会主题报告</td>
            <td>分会专题报告</td>
            <td rowspan="2">总结报告</td>
        </tr>
        <tr>
            <td>专家报告</td>
            <td>分组讨论</td>

        </tr>
        <tr>
            <td style="text-align: center;" colspan="4">全体参观考察无锡国赛</td>
        </tr>
     </table>

属性
border属性:控制表格的边框,例:border=“1”
width,height属性控制宽和高
cellspacing:单元格之间的距离(等于0表示紧挨到一起)例:cellspacing=“0”
cellpadding:单元格的填充度 例:cellpadding=“10px”

<table border="1" cellspacing="0"  cellpadding="10px">
   <tr>1</tr>
   <tr>2</tr>
</table>

rowspan把下面几行合并
colspan:把后面几列合并

<table>
   <tr>//第一行
      <td rowspan="3">1</td>//从此格开始把下三行合并
      <td>2</td>
      <td></td>
   </tr>
   <tr>//第二行
      <td rowspan="3">1</td>//从此格开始把下三行合并
      <td>2</td>
      <td colspan="2">3</td>//从此格开始向右合并2列
   </tr>
   .....
</table>

11.框架标签(窗口标签)

嵌套其他页面

<ifame ></iframe>
<ifame  src="网站网址"  ></iframe>

属性
src拿取资源
frameborder:窗口的边线
width和height
name:窗口名(可以超链接标签中的target属性联动)

12.音频标签

<audio></audio>

拿取音频资源

<audio src="音频名"></audio>

属性
src拿取资源
controls 手动播放并让播放器显示出来,不用写参数,加上就是true
autoplay 自动播放,不用写参数,加上就是true,不加就是flase
autoplay loop 循环播放

13.视频标签

<video></video>

属性babiao
src拿取资源
controls 手动播放并让播放器显示出来,不用写参数,加上就是true
autoplay 自动播放,不用写参数,加上就是true,不加就是flase
autoplay loop 循环播放
wideh和height控制视频的宽高

14.多行文本域

<textarea row="10" cols="50"></textarea>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第四十五周:文献阅读

目录 摘要 Abstract 文献阅读&#xff1a;基于注意力的双向LSTM和编码器-解码器的水质预测 现有问题 提出方法 创新点 方法论 1、EMD&#xff08;经验模态分解&#xff09; 2、VMD&#xff08;变分模态分解&#xff09; 3、VBAED模型 研究实验 数据集 数据预处理 …

此站点的连接不安全,怎么解决?

有部分的网站用户在打开的时候会被提示“此站点的连接不安全”这种现象为什么会出现&#xff0c;大概率是因为没有安装SSL证书或者SSL证书出现了错误&#xff0c;小编在这里面将展开讲解为大家分析其中的原因以及解决方法。 一&#xff1a;遇到该情况的时候该怎么办&#xff1…

【基于HTML5的网页设计及应用】——随机验证码

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

2024/3/24--爬虫库

1.常用的爬虫库 (1)在setting的project里面点击Python Interpreter (2&#xff09;常用的爬虫库有 import requests //用途&#xff1a;用于发送HTTP请求。from bs4 import BeautifulSoup //用于从HTML或XML文档中提取数据。import scrapy //一个功能强大的爬虫框架&#xf…

TypeScript基础类型

string、number、bolean 直接在变量后面添加即可。 let myName: string Tomfunction sayHello(person: string) {return hello, person } let user Tom let array [1, 2, 3] console.log(sayHello(user))function greet(person: string, date: Date): string {console.lo…

R语言迅速计算多基因评分(PRS)

Polygenic Risk Scores in R 最朴素的理解PRS&#xff1a; GWAS分析结果中&#xff0c;有每个SNP的beta值、se值、P值&#xff0c;因为GWAS分析中将SNP变为0-1-2编码&#xff0c;所以这些显著的SNP的beta值&#xff0c;就可以用于预测。 比如&#xff1a;GWAS分析中&#xf…

【C语言】结构体与位段

一、前言 我们之前学习过定义一个整型类型的变量又或者定义一个浮点型类型的变量...&#xff0c;这些变量可以描述一个整数又或者描述一个小数...&#xff0c;可无论是整数还是小数...&#xff0c;它们也只是简单对象。如果我们想要描述像一本书&#xff0c;一个人这种复杂对象…

在国企做软件测试工程师是一种什么样的体验:每天过的像打仗一样

工作越来越卷&#xff0c;下班越来越晚。每到本该下班的时间&#xff0c;总有一批双目无神的打工人坐在工位上&#xff0c;生无可恋地继续加班...... 如今的职场&#xff0c;加班似乎已成为一种普遍化的现象。有人说&#xff1a;在高薪的背后&#xff0c;都是一群玩命工作的身影…

H3C技术大全复现之高级路由交换技术 1

华子目录 VLAN 基本技术VLANIEEE 802.1Q交换机端口类型MVRP协议实验测试 VLAN扩展技术Super VLAN产生背景Super vlan&#xff08;相当于vlanif接口&#xff0c;也属于虚拟接口&#xff0c;可以充当网关&#xff09;Sub vlan&#xff08;普通vlan&#xff09;关于代理ARP普通代理…

芒果YOLOv8改进:提升篇:从零开始训练 YOLOv8最新稳定8.1版本教程说明,适用Mac、Windows、Linux端

从零开始训练 YOLOv8 - 最新8.1版本教程说明 本文适用Windows/Linux/Mac&#xff1a;从零开始使用Windows/Linux/Mac训练 YOLOv8 算法项目 《芒果 YOLOv8 目标检测算法 改进》 适用于芒果专栏改进 YOLOv8 算法 文章目录 官方 YOLOv8 算法第一步 配置环境1.1 系列配置1.2 代码…

火星文:一种特殊的文字编码

title: 火星文&#xff1a;一种特殊的文字编码 date: 2024/3/25 13:26:20 updated: 2024/3/25 13:26:20 tags: 火星文文字变种网络流行解码阅读社交趣味艺术创新未来符号 定义 火星文是一种特殊的文字编码&#xff0c;也称为奇文&#xff0c;其特点是将常见的文字进行特殊的变…

Linux收到一个网络包是怎么处理的?

目录 摘要 ​编辑 1 从网卡开始 2 硬中断&#xff0c;有点短 2.1 Game Over 3 接力——软中断 3.1 NET_RX_SOFTIRQ 软中断的开始 3.2 数据包到了协议栈 3.3 网络层处理 3.4 传输层处理 4 应用层的处理 5 总结 摘要 一个网络包的接收始于网卡&#xff0c;经层层协议栈…

苍穹外卖项目笔记

软件开发流程 需求分析&#xff1a;说明书和原型 设计&#xff1a;UI&#xff0c;数据库&#xff0c;接口设计 编码&#xff1a;项目代码&#xff0c;单元测试 测试&#xff1a;测试用例&#xff0c;测试报告 上线运维&#xff1a;软件环境安装&#xff0c;配置 软件环境…

ClickHouse03-小白如何快速搭建ClickHouse集群

普通测试通常使用ClickHouse单节点就可以了&#xff0c;但是生产环境不免需要考虑多活、负载等高可用问题&#xff0c;集群就成了基础需求 ClickHouse在集群的选择上&#xff0c;作者已知的有两种&#xff1a; 使用ZooKeeper作为节点协调的组件&#xff0c;使用ClickHouse-Kee…

Java实现JDBC编程

1 数据库编程的必备条件 编程语言&#xff0c;如Java&#xff0c;C、C、Python等 数据库&#xff0c;如Oracle&#xff0c;MySQL&#xff0c;SQL Server等 数据库驱动包&#xff1a;不同的数据库&#xff0c;对应不同的编程语言提供了不同的数据库驱动包&#xff0c;如&#x…

day44 动态规划part6

完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 完全背包和01背包问题唯一不同…

vue3怎么读取本地json数据

在Vue 3中&#xff0c;可以使用fetch API或其他HTTP客户端来读取本地JSON数据。以下是一个使用fetch的示例&#xff1a; <template><div><h1>本地JSON数据</h1><div v-if"data">{{ data }}</div></div> </template>…

MP4如何把视频转MOV格式? MP4视频转MOV格式的技巧

在现代的数字媒体时代&#xff0c;视频格式转换成为了许多用户必须掌握的技能。特别是将MP4视频转换为MOV格式&#xff0c;这对于需要在Apple设备上播放或编辑视频的用户来说尤为重要。本文将详细介绍如何将MP4视频转换为MOV格式&#xff0c;帮助读者轻松应对不同设备和平台的需…

利用云手机高效运营多个海外社媒账户

随着全球化进程的不断推进&#xff0c;中国出海企业和B2B外贸企业日益重视海外社媒营销&#xff0c;将其视为抢占市场份额的关键策略。在海外社媒营销中&#xff0c;企业通常会在多个平台上批量开通账户&#xff0c;搭建自己的社媒内容矩阵。本文将会介绍如何用云手机高效运营多…

平价开放式耳机哪些品牌好用?五款高质量测评入手不后悔 !

现在耳机主要分为入耳式和开放式&#xff0c;而且入耳式耳机对外界声音隔绝太严重&#xff0c;走路的时候听不到脚步声喇叭声音也不利于安全&#xff0c;甚至戴耳机和别人说话沟通也很困难。所以现在的年轻人开始追求舒适、安全、健康的听歌产品&#xff0c;开放式耳机也逐渐成…