你不知道的HTML属性，让你的网页更加响应式

news2024/10/7 10:21:44

前言

当我们谈论 HTML 时，通常会想到一些常见的属性，如 class、id、href 等等。但是，HTML 还有许多你可能从未听说过的属性，这些属性可以让你的网页更加丰富多彩。在本文中，我将介绍一些你可能不知道的 HTML 属性，让你的网页更加出色。

1. inputmode 属性

在移动端中，inputmode 值会影响弹出的键盘布局。它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。

1.1 inputmode="none" 无键盘

不使用虚拟键盘，这个时候页面需要使用自定义的键盘代替。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

<input type="text" inputmode="none">

1.2 inputmode="text" 默认值，文本

使用用户本地区域设置的标准文本输入键盘。

<input type="text" inputmode="text">

在这里插入图片描述

1.3 inputmode="tel" 电话

电话输入键盘，包含 0 到 9 的数字、星号和井号键。多用于输入电话号码。

<input type="text" inputmode="tel">

在这里插入图片描述

1.4 inputmode="url" 地址

键盘必须显示 / 符号键，也会更加明显，更有助于用户输入 URL 地址。

<input type="text" inputmode="url">

在这里插入图片描述

1.5 inputmode="email" 邮箱

键盘必须显示 @ 符号键，更方便用户输入电子邮件。

<input type="text" inputmode="email">

在这里插入图片描述

1.6 inputmode="numeric" 数字

显示数字键盘，展示的就是 0 到 9 的数字，根据设备不同也可能显示减号键。

<input type="text" inputmode="numeric">

在这里插入图片描述

1.7 inputmode="decimal" 小数

小数输入键盘，包含数字和分隔符（通常是小数点或者千分符逗号），根据设备不同也可能显示减号键。

<input type="text" inputmode="decimal">

在这里插入图片描述

1.8 inputmode="search" 搜素

为搜索输入优化的键盘，例如，返回键可能被重新标记为 『前往』，或任何搜索图标或类似图标的 Enter 键。

<input type="text" inputmode="search">

在这里插入图片描述

2. video 标签

<video> 标签定义视频，比如电影片段或其他视频流。<video> 元素支持三种视频格式：MP4、WebM、Ogg。

注意： Internet Explorer 8 以及更早的版本不支持 <video> 标签。

属性值描述
autoplayautoplay设置该属性后，视频在就绪后马上播放。
controlscontrols设置该属性后，则向用户显示控件，比如播放按钮。
heightpixels视频播放器的高度。
widthpixels视频播放器的宽度。
looploop设置该属性后，则当媒介文件完成播放后再次开始播放。
mutedmuted设置该属性后，视频的音频输出为静音。
posterurlposter 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
preloadauto、metadata、none设置该属性后，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
srcurl要播放的视频的 URL。

以 poster 为例：

<template>
  <div>
    <video width="320" height="240" src="../assets/1.mp4" poster="../assets/mn.png" controls></video>
  </div>
</template>

效果展示

在这里插入图片描述

3. multiple 属性

multiple 属性是一个布尔属性。规定可同时选择多个选项。通常用于文件选择和下拉列表，当用于文件选择时，可选择多个文件；当用于下拉列表时，可选中多个选项。

<template>
  <div>
    <input type="file" multiple />
    <select multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</template>

效果展示

在这里插入图片描述

4. accesskey 属性

accesskey 属性规定激活（使元素获得焦点）元素的快捷键。

注意： 在不同操作系统中不同的浏览器中访问快捷键的方式不同：

浏览器WindowsLinuxMac
IE[Alt] + accesskeyN/A
Chrome[Alt] + accesskey[Alt] + accesskey[Control] [Alt] + accesskey
Firefox[Alt] [Shift] + accesskey[Alt] [Shift] + accesskey[Control] [Alt] + accesskey
Safari[Alt] + accesskeyN/A[Control] [Alt] + accesskey
OperaOpera 15 or newer: [Alt] + accesskey、Opera 12.1 or older: [Shift] [Esc] + accesskey

以下例子是当我同时按下 Alt+z 时：

<template>
  <div>
    <input type="text" accesskey="z">
  </div>
</template>

效果展示

在这里插入图片描述

5. tabindex 属性

tabindex 属性规定当使用 “tab” 键进行导航时元素的顺序。

<template>
  <div>
    <input type="text" tabindex="1">
    <input type="text" tabindex="3">
    <input type="text" tabindex="2">
    <input type="text" tabindex="4">
  </div>
</template>

当我按下 Tab 键时：

在这里插入图片描述

6. download 属性

通常用于超链接中，使用该属性后，打开链接会触发浏览器的下载行为，而不是显示链接内容。

<template>
  <div>
    <a href="ceshi.png" download>下载图片</a>
    <!-- 还可以更改下载时的默认文件名 -->
    <a href="ceshi.png" download="xiugai.png">下载图片并更改图片的名字</a>
  </div>
</template>

7. dir 属性

dir 属性规定元素内容的文本方向。

值描述
ltr默认。从左向右的文本方向。
rtl从右向左的文本方向。
auto让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。

以 rtl 为例：

<template>
  <div>
    <bdo dir="rtl">文本方向从右到左!</bdo>
  </div>
</template>

效果展示

在这里插入图片描述

8. spellcheck 属性

spellcheck 属性规定是否对元素内容进行拼写检查。true 规定应当对元素的文本进行拼写检查，false 规定不应对元素的文本进行拼写检查。

<template>
  <div>
    <p contenteditable spellcheck="true">how ar you</p>
  </div>
</template>

效果展示

在这里插入图片描述

9. translate 属性

translate 属性规定元素内容是否要翻译。yes 规定元素内容需要翻译，no 规定元素内容不需要翻译。

<template>
  <div>
    <p translate="no">hello</p>
    <p>hello</p>
  </div>
</template>

效果展示

在这里插入图片描述

10. title 属性

title 属性提供了元素的额外信息，浏览器通常用这些东西显示工具条提示，通常在展示不全的文本标题使用。

<template>
  <div>
    <p title="我是描述文本">hello</p>
  </div>
</template>

效果展示

在这里插入图片描述

11. contenteditable 属性

contenteditable 属性指定元素内容是否可编辑。true 指定元素是可编辑的，false 指定元素是不可编辑的。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

<template>
  <div>
    <p contenteditable>点击我可编辑</p>
  </div>
</template>

效果展示

在这里插入图片描述

12. draggable 属性

draggable 属性是 HTML5 支持拖放操作的方式之一，用来表示元素是否可被拖放。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style type="text/css">
  #div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
</style>

<body>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>

</html>

效果展示

在这里插入图片描述

13. dropzone 属性

dropzone 属性规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接。

<div dropzone="copy"></div>
值描述
copy拖动数据会导致被拖数据产生副本。
move拖动数据会导致被拖数据移动到新位置。
link拖动数据会生成指向原始数据的链接。

14. hidden 属性

hidden 属性规定对元素进行隐藏。

<template>
  <div>
    <p hidden>这是一段文字</p>
    <p>这是一段文字</p>
  </div>
</template>

效果展示

在这里插入图片描述

15. lang 属性

lang 属性规定元素内容的语言。语言代码参考手册

<template>
  <div>
    <p lang='fr'>这是一段文字</p>
  </div>
</template>

16. data-* 属性

data-* 属性用于存储私有页面后应用的自定义数据。可以在所有的 HTML 元素中嵌入数据。

由以下两部分组成：

  • 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
  • 该属性可以是任何字符串。

注意： 自定义属性前缀 data- 会被客户端忽略。

<template>
  <div>
    <ul @click="dotOn">
      <li data-type="bird">第一</li>
      <li data-type="fish">第二</li>
      <li data-type="spider">第三</li>
    </ul>
  </div>
</template>
<script>
export default {
  methods: {
    dotOn(e) {
      console.log(e.target.dataset.type);
    },
  },
};
</script>

效果展示

在这里插入图片描述

17. input - type 属性

type 属性规定要显示的 <input> 元素的类型。默认类型是：text。

值描述
button定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox定义复选框。
colorNew定义拾色器。
dateNew定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew定义用于 e-mail 地址的字段。
file定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden定义隐藏输入字段。
image定义图像作为提交按钮。
monthNew定义 month 和 year 控件（不带时区）。
numberNew定义用于输入数字的字段。
password定义密码字段（字段中的字符会被遮蔽）。
radio定义单选按钮。
rangeNew定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset定义重置按钮（重置所有的表单值为默认值）。
searchNew定义用于输入搜索字符串的文本字段。
submit定义提交按钮。
telNew定义用于输入电话号码的字段。
text默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew定义用于输入时间的控件（不带时区）。
urlNew定义用于输入 URL 的字段。
weekNew定义 week 和 year 控件（不带时区）。

input 的 tpye 类型：

<template>
  <div>
    <p>
      <span>1.当 type 为 button 时：</span>
      <input type="button" value="点我">
    </p>
    <p>
      <span>2.当 type 为 checkbox 时：</span>
      <input type="checkbox">
    </p>
    <p>
      <span>3.当 type 为 color 时：</span>
      <input type="color">
    </p>
    <p>
      <span>4.当 type 为 date 时：</span>
      <input type="date">
    </p>
    <p>
      <span>5.当 type 为 datetime-local 时：</span>
      <input type="datetime-local">
    </p>
    <p>
      <span>6.当 type 为 email 时：</span>
      <input type="email">
    </p>
    <p>
      <span>7.当 type 为 file 时：</span>
      <input type="file">
    </p>
    <p>
      <span>8.当 type 为 hidden 时：</span>
      <input type="hidden">
    </p>
    <p>
      <span>9.当 type 为 image 时：</span>
      <input type="image" src="1.png" width="16" height="16">
    </p>
    <p>
      <span>10.当 type 为 month 时：</span>
      <input type="month">
    </p>
    <p>
      <span>11.当 type 为 number 时：</span>
      <input type="number" min="1" max="5">
    </p>
    <p>
      <span>12.当 type 为 password 时：</span>
      <input type="password">
    </p>
    <p>
      <span>13.当 type 为 radio 时：</span>
      <input type="radio">
    </p>
    <p>
      <span>14.当 type 为 range 时：</span>
      <input type="range" min="1" max="10">
    </p>
    <p>
      <span>15.当 type 为 reset 时：</span>
      <input type="reset">
    </p>
    <p>
      <span>16.当 type 为 search 时：</span>
      <input type="search">
    </p>
    <p>
      <span>17.当 type 为 submit 时：</span>
      <input type="submit">
    </p>
    <p>
      <span>18.当 type 为 tel 时：</span>
      <input type="tel">
    </p>
    <p>
      <span>19.当 type 为 text 时：</span>
      <input type="text">
    </p>
    <p>
      <span>20.当 type 为 time 时：</span>
      <input type="time">
    </p>
    <p>
      <span>21.当 type 为 url 时：</span>
      <input type="url">
    </p>
    <p>
      <span>22.当 type 为 week 时：</span>
      <input type="week">
    </p>
  </div>
</template>

效果展示

在这里插入图片描述

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

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

相关文章

SPI通信协议SPI通信外设

SPI通信协议SPI通信外设

目录 SPI 介绍 硬件电路 移位示意图 软件SPI SPI时序基本单元 SPI时序​编辑 W25Q64 硬件电路 W25Q64框图 Flash操作注意事项 指令集 硬件SPI SPI框图 主模式全双工连续传输 非连续传输 SPI 介绍 硬件电路 推挽输出&#xff0c;高低电平都有很强的驱动能力&…
阅读更多...
基于Python数据分析的详细讲解+实战（含代码）

基于Python数据分析的详细讲解+实战（含代码）

名字&#xff1a;阿玥的小东东 学习&#xff1a;Python、C/C 主页链接&#xff1a;阿玥的小东东的博客_CSDN博客-python&&c高级知识,过年必备,C/C知识讲解领域博主 目录 载入数据集 数据预处理 探索性数据分析 发现相关性 开发模型 模型部署 Python数据分析代码实…
阅读更多...
Vue基础(一)

Vue基础(一)

前言&#xff1a; Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。 …
阅读更多...
【Vue2.0源码学习】内置组件篇-keep-alive

【Vue2.0源码学习】内置组件篇-keep-alive

文章目录 1. 前言2 用法回顾3. 实现原理propscreateddestroyedmountedrender 4. 生命周期钩子5. 总结 1. 前言 <keep-alive> 是 Vue 实现的一个内置组件&#xff0c;也就是说 Vue 源码不仅实现了一套组件化的机制&#xff0c;也实现了一些内置组件&#xff0c;关于<k…
阅读更多...
区块链系统探索之路：比特币核心的编译和探索

区块链系统探索之路：比特币核心的编译和探索

前几节我们研究了椭圆曲线&#xff0c;有限域等比特币和区块链所依赖的底层算法。问题在于这些算法不是独立存在&#xff0c;而是作为模块嵌入到整个区块链的体系之中。因此不了解区块链的体系组成或应用场景&#xff0c;那么我们就很难理解这些算法衍生出来的概念或者基于他们…
阅读更多...
【硬件1】platform/i2c总线

【硬件1】platform/i2c总线

文章目录 1.platform总线&#xff1a;相对于USB/PCI/I2C/SPI等物理总线来说&#xff0c;platform总线是一种虚拟的总线&#xff0c;实际并不存在&#xff0c;总线的工作就是就是完成总线下的设备和驱动之间的匹配。也就是在左手中找到与右手相匹配的设备驱动&#xff0c;并完成…
阅读更多...
基于Java+Springboot的智能图书馆座位管理系统设计和实现

基于Java+Springboot的智能图书馆座位管理系统设计和实现

博主介绍&#xff1a;擅长Java、微信小程序、Python、Android等&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例…
阅读更多...
MySQL实战解析底层---为什么只查一行的语句，也执行这么慢

MySQL实战解析底层---为什么只查一行的语句，也执行这么慢

目录 前言 第一类&#xff1a;查询长时间不返回 第二类&#xff1a;查询慢 前言 一般情况下&#xff0c;如果说查询性能优化&#xff0c;首先会想到一些复杂的语句&#xff0c;想到查询需要返回大量的数据但有些情况下&#xff0c;“查一行”&#xff0c;也会执行得特别慢这…
阅读更多...
第11讲：BootService 核心实现解析，Agent 的“地基”原来是这样的

第11讲：BootService 核心实现解析，Agent 的“地基”原来是这样的

之前介绍了 ServiceManager 加载并初始化 BootService 实现的核心逻辑。下图展示了 BootService 接口的所有实现类&#xff0c;本课时将深入分析这些 BootService 实现类的具体逻辑&#xff1a; 网络连接管理 在前面的介绍中提到 SkyWalking Agent 会定期将收集到的 JVM 监控和…
阅读更多...
基于Java+Swing实现雷电小游戏

基于Java+Swing实现雷电小游戏

基于JavaSwing实现雷电小游戏 一、系统介绍二、功能展示三、其他系统四、获取源码 一、系统介绍 基于java的雷电游戏基本功能包括&#xff1a;敌方飞机随机飞行、我方飞机手动控制飞行&#xff0c;射击比拼&#xff0c;游戏闯关等。本系统结构如下&#xff1a; &#xff08;1&…
阅读更多...
Java中线程的创建与使用、Thread类的常用方法

Java中线程的创建与使用、Thread类的常用方法

1、什么是进程与线程 1.1 含义 1.1.1 进程 进程是指正在运行的程序的实例。在操作系统中&#xff0c;一个进程代表了一个正在执行的程序&#xff0c;它包括了程序的代码、数据以及程序执行时所需要的系统资源。 最直观的就是我们任务管理器&#xff1a; 任务管理器中的每一…
阅读更多...
Centos7安装和配置Mysql5.7

Centos7安装和配置Mysql5.7

第一步&#xff1a;获取mysql YUM源 进入mysql官网获取RPM包下载地址&#xff0c;下面就是mysql5.7的Yum仓库的rpm包&#xff1a; mysql5.7链接地址&#xff1a; https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 第二步&#xff1a;下载和安装mysql…
阅读更多...
卷福的十年同学会

卷福的十年同学会

1.一通电话 某个上班日的午休时间里&#xff0c;小卷正趴在办公桌玩着手机准备睡一会&#xff0c;“叮咚”&#xff0c;一条微信消息弹出来&#xff0c;是大学的班群消息。 “五一期间大家来学校聚一下吧&#xff0c;今年是我们成为同学的十年了&#xff0c;大家提前报名哦&a…
阅读更多...
Qt设置软件启动动画(支持图片和视频俩种方式)

Qt设置软件启动动画(支持图片和视频俩种方式)

目录 软件启动动画效果静态背景动态背景 程序启动动画QSplashScreen启动时加载静态图片启动时加载视频动画将启动动画置于所有窗口顶层 软件启动动画效果 先来看效果。下面录制了加载图片和gif动图的俩种效果。 静态背景 动态背景 这里我加载了一个gif的动图&#xff0c;你也…
阅读更多...
AMBA AHB的burst termination

AMBA AHB的burst termination

前言 在AMBA AHB协议中&#xff0c;AHB master可以用burst传输连续取多笔数据。AHB定义了4、8和16拍的burst传输、未定义长度的burst传输和单次传输。Burst传输中支持incrementing和wrapping。 Incrementing burst用于访问顺序的memory地址&#xff0c;burst中每个拍的地址都…
阅读更多...
数据压缩的常用手段以及方法

数据压缩的常用手段以及方法

0. 简介 之前我们在《经典文献阅读之–R-PCC(基于距离图像的点云压缩方法)》中提到了&#xff0c;我们可以通过一些算法层面来完成数据的压缩&#xff0c;而其实更简单或者说更直接的方法就是使用half这种形式来完成数据压缩。 1. half和float Half是用16位表示浮点数的一种…
阅读更多...
什么是 FL Studio？2023年最新版 FL Studio21.0.3.3517中文版图文安装教程

什么是 FL Studio？2023年最新版 FL Studio21.0.3.3517中文版图文安装教程

什么是 FL Studio&#xff1f; FL Studio 是一个数字音频工作站 (DAW)。该软件借助各种编辑工具、插件和效果&#xff0c;让您可以录制、混音和掌握高度复杂的音乐作品。FL Studio 还允许您注册和编辑 MIDI 文件&#xff0c;您可以在众多可用乐器之一上演奏这些文件。FL Studi…
阅读更多...
树莓派 python3.9降级为python3.7

树莓派 python3.9降级为python3.7

今天烧录了一个官方烧录器中的最新的镜像&#xff0c;打开之后python的版本是3.9的&#xff0c;之前做的一些东西都是基于python3.7的&#xff0c;再重新架构十分麻烦&#xff0c;于是干脆就把python3.9进行降级&#xff0c;降为python3.7. 这个镜像不像之前的一些镜像&#x…
阅读更多...
通用商城项目（上）

通用商城项目（上）

通用型产品&#xff08;电商&#xff09;发布解决方案落地实现&#xff08;基于分布式微服务技术栈&#xff1a; SpringBootSpring CloudSpring Cloud Alibaba VueElementUl MyBatis-Plus MySQL Git Maven Linux Nginx Docker 前后端分离&#xff09; 项目技术栈和前置技术 项…
阅读更多...
【软件设计师暴击考点】操作系统知识高频考点暴击系列【一】

【软件设计师暴击考点】操作系统知识高频考点暴击系列【一】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;软件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023