Web前端:HTML篇(二)元素属性

news2024/9/20 9:37:21

HTML 属性


属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原神·启动</title>
</head>
<body>
<a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/pc_default">这是一个神秘链接</a>
</body>
</html>

在网页中点击,可以跳转到指定的连接。(下载原神)


HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

Remark

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='John "ShotGun" Nelson'

几个注意点:

  1. 属性和属性值,尽量小写,本来这样做也方便些。
  2. class 属性可以多用 class=" " (引号里面可以填入多个class属性)
  3. id 属性只能单独设置 id=" "(只能填写一个,多个无效)

属性列表:

copy来的,带链接,可以直接跳转到原网页。

属性名元素描述
accept<form>、<input>服务器接受内容(通常是文件类型)的列表。
accept-charset<form>支持的字符集列表。
accesskey全局属性用于激活或聚焦元素的键盘快捷键。
action<form>处理通过表单提交的信息的程序的 URI。
align 已弃用<caption>、<col>、<colgroup>、<hr>、<iframe>、<img>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>指定元素水平对齐的方式。
allow<iframe>指定 iframe 的特性策略。
alt<area>、<img>、<input>在图片无法显示时展示的替代文本。
async<script>异步执行该脚本。
autocapitalize全局属性设置用户输入时是否自动大写。
autocomplete<form>、<input>、<select>、<textarea>指示浏览器是否可以自动填充表单中的值。
autofocus<button>、<input>、<select>、<textarea>页面加载后,该元素应自动获得焦点。
autoplay<audio>、<video>音视频应该自动播放。
background<body>、<table>、<td>、<th>指定图像文件的 URL。

备注:虽然浏览器和电子邮件客户端可能仍然支持此属性,但它已经过时。请使用 CSS background-image 代替。

bgcolor<body>、<col>、<colgroup>、<marquee>、<table>、<tbody>、<tfoot>、<td>、<th>、<tr>

元素的背景颜色。

备注:这是遗留属性。请使用 CSS background-color 属性代替。

border<img>、<object>、<table>

边框宽度。

备注:这是遗留属性。请使用 CSS border 属性代替。

buffered<audio>、<video>包含已缓存媒体的时间范围。
capture<input>来自 Media Capture 规范,指定一个新文件是否可以被捕获。
charset<meta>申明该页面或脚本的字符编码。
checked<input>指出该元素在页面加载后是否处于选中状态。
cite<blockquote>、<del>、<ins>、<q>包含一个指明引用或修改的来源的 URI。
class全局属性通常和 CSS 配合使用,使用常用属性来为元素添加样式。
color<font>、<hr>

该属性为文本设置颜色,可以使用具名颜色或十六进制 #RRGGBB 格式的颜色。

备注:这是遗留属性。请使用 CSS color 属性代替。

cols<textarea>定义一个 textarea 中包含多少列。
colspan<td>、<th>colspan 属性定义了一个单元格跨越的列数。
content<meta>与 http-equiv 或 name 关联的值,取决于上下文。
contenteditable全局属性指示该元素的内容是否可以被编辑。
controls<audio>、<video>指示浏览器是否应该向用户显示播放控件。
coords<area>指定热点区域坐标的一组值。
crossorigin<audio>、<img>、<link>、<script>、<video>元素如何处理跨源请求。
csp 实验性<iframe>指定嵌入文档必须同意对自身强制执行的内容安全策略。
data<object>指定资源的 URL。
data-*全局属性允许你对一个 HTML 元素附加自定义的属性。
datetime<del>、<ins>、<time>指示与元素关联的日期和时间。
decoding<img>指示解码图像的首选方法。
default<track>指示应启用该轨道,除非与用户首选项指示的不同。
defer<script>指示该脚本应在页面解析后执行。
dir全局属性定义文本的方向。允许的值有 ltr(从左到右)或 rtl(从右到左)。
dirname<input>、<textarea>
disabled<button>、<fieldset>、<input>、<optgroup>、<option>、<select>、<textarea>指示用户是否可以与该元素交互。
download<a>、<area>指示用于下载资源的超链接。
draggable全局属性定义元素是否可以被拖拽。
enctype<form>定义 method 为 POST 时,表单数据的内容类型。
enterkeyhint 实验性<textarea>, contenteditableenterkeyhint 指定在虚拟键盘上显示的回车键的动作标签(或图标)。该属性可用于表单控件(例如 textarea 元素的值),或者在可编辑宿主中的元素(例如使用 contenteditable 属性)。
for<label>、<output>描述与当前元素绑定的元素。
form<button>、<fieldset>、<input>、<label>、<meter>、<object>、<output>、<progress>、<select>、<textarea>指示该元素所属的表单。
formaction<input>、<button>指示元素的动作,覆盖 <form> 中定义的动作。
formenctype<button>、<input>如果按钮/输入是提交按钮(例如,type="submit"),该属性用于设置表单提交时要使用的编码类型。如果指定了该属性,则会覆盖按钮所属的 form 的 enctype 属性。
formmethod<button>、<input>如果按钮/输入是提交按钮(例如,type="submit"),该属性用于设置表单提交时要使用的提交方法(GETPOST 等)。如果指定了该属性,则会覆盖按钮所属的 form 的 method 属性。
formnovalidate<button>、<input>如果按钮/输入是提交按钮(例如,type="submit"),该布尔属性用于指示在提交表单时不进行验证。如果指定了该属性,则会覆盖按钮所属的 form 的 novalidate 属性。
formtarget<button>、<input>如果按钮/输入是提交按钮(例如,type="submit"),该属性用于指定提交表单后接收到的响应在哪个浏览上下文(例如,标签页、窗口或内联框架)中显示。如果指定了该属性,则会覆盖按钮所属的 form 的 target 属性。
headers<td>、<th>应用于 <th> 元素的 ID。
height<canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video>

指定此处列出的元素的高度。对于其他所有元素,请使用 CSS height 属性。

备注:对于某些实例,例如 <div>,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。

hidden全局属性阻止对给定元素的渲染,同时保持子元素(例如脚本元素)处于激活状态。
high<meter>指示高值区间的下限值。
href<a>、<area>、<base>、<link>关联资源的 URL。
hreflang<a>、<link>指定关联资源的语言。
http-equiv<meta>定义编译程序指令(pragma directive)。
id全局属性通常与 CSS 一起使用,以为特定元素添加样式。此属性的值必须是唯一的。
integrity<link>、<script>指定子资源完整性值,允许浏览器验证它们获取的内容。
intrinsicsize 已弃用<img>此属性指示浏览器忽略图像的实际的固有大小,并假设它是属性中指定的大小。
inputmode<textarea>, contenteditable提供一个提示,指示用户在编辑元素或其内容时可能输入的数据类型。该属性可用于表单控件(例如 textarea 元素的值),或者在可编辑宿主中的元素(例如使用了 contenteditable 属性的)。
ismap<img>指示图像是服务器端图像映射(image map)的一部分。
itemprop全局属性
kind<track>指定文本字幕的类型。
label<optgroup>、<option>、<track>为元素指定用户可读的标题。
lang全局属性定义元素中使用的语言。
language 已弃用<script>定义元素中使用的脚本语言。
loading 实验性<img>、<iframe>指示元素是否应该被懒加载(loading="lazy")或立即加载(loading="eager")。
list<input>指示建议用户输入的预定义选项列表。
loop<audio>、<marquee>、<video>指示媒体在播放结束时是否应从头开始播放。
low<meter>指示低值区间的上限值。
max<input>、<meter>、<progress>指示允许的最大值。
maxlength<input>、<textarea>定义元素中允许的最大字符数。
minlength<input>、<textarea>定义元素中允许的最小字符数。
media<a>、<area>、<link>、<source>、<style>指定链接资源所设计的媒体的提示。
method<form>POST. 定义用于提交表单的 HTTP 方法。可以是 GET(默认)或 POST
min<input>、<meter>指示允许的最小值。
multiple<input>、<select>指示是否可以在 email 或 file 类型的输入中输入多个值。
muted<audio>、<video>指示页面加载时音频是否会被静音。
name<button>、<form>、<fieldset>、<iframe>、<input>、<object>、<output>、<select>、<textarea>、<map>、<meta>、<param>元素的名称。例如,用于服务器标识表单提交中的字段。
novalidate<form>此属性指示在提交表单时不应验证表单。
open<details>、<dialog>指示内容目前是否可见(若用于 <details> 元素)或对话框是否处于活动状态且可以与之交互(若用于 <dialog> 元素)。
optimum<meter>指示最佳数值。
pattern<input>定义用于验证元素值的正则表达式。
ping<a>、<area>ping 属性指定一个用空格分隔的 URL 列表,以便在用户访问超链接时通知这些 URL。
placeholder<input>、<textarea>提供用于告诉用户可以在字段中输入什么的提示。
playsinline<video>布尔属性,指示视频是否要“内嵌”播放;也就是说,在元素的播放区域内播放。请注意,该属性的缺失并不意味着视频将始终以全屏模式播放。
poster<video>用于指示在用户播放或搜索之前要显示的海报帧的 URL。
preload<audio>、<video>指示是否应预加载整个资源、部分资源或者不预加载。
readonly<input>、<textarea>指示元素是否可以被编辑。
referrerpolicy<a>、<area>、<iframe>、<img>、<link>、<script>指定在获取资源时发送哪个引荐来源(referrer)。
rel<a>、<area>、<link>指示目标对象与链接对象的关系。
required<input>、<select>、<textarea>指示是否必须填写此元素。
reversed<ol>指示列表是否应以降序而不是升序显示。
role全局属性定义元素的显式角色,供辅助技术使用。
rows<textarea>定义文本区域的行数。
rowspan<td>、<th>定义表格单元格应跨越的行数。
sandbox<iframe>阻止在 iframe 中加载的文档使用某些特性(例如提交表单或打开新窗口)。
scope<th>定义表头单元格(在 th 元素中定义)所关联的单元格。
scoped 非标准 已弃用<style>
selected<option>定义页面加载时将被选中的值。
shape<a>、<area>
size<input>、<select>定义元素的宽度(以像素为单位)。如果元素的 type 属性是 text 或 password,则它是字符数。
sizes<link>、<img>、<source>
slot全局属性为影子 DOM(shadow DOM)影子树中的插槽分配一个元素。
span<col>、<colgroup>
spellcheck全局属性指示是否允许对元素进行拼写检查。
src<audio>、<embed>、<iframe>、<img>、<input>、<script>、<source>、<track>、<video>可嵌入内容的 URL。
srcdoc<iframe>
srclang<track>
srcset<img>、<source>一个或多个响应式图像候选项。
start<ol>定义除 1 以外的第一个数字。
step<input>
style全局属性定义将覆盖先前设置的 CSS 样式。
summary 已弃用<table>
tabindex全局属性使用指定的聚焦(tab)顺序覆盖浏览器的默认聚焦顺序。
target<a>、<area>、<base>、<form>指定打开链接文档的位置(若用于 <a> 元素)或显示接收到的响应的位置(若用于 <form> 元素)。
title全局属性在鼠标悬停在元素上时显示的提示文本。
translate全局属性指定当页面本地化时,元素的属性值和其文本节点后代的值是否应该被翻译,或者是否应该保持不变。
type<button>、<input>、<embed>、<object>、<ol>、<script>、<source>、<style>、<menu>、<link>定义元素的类型。
usemap<img>、<input>、<object>
value<button>、<data>、<input>、<li>、<meter>、<option>、<progress>、<param>定义页面加载时元素中显示的默认值。
width<canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video>

确定此处所列元素的宽度。

备注:对于其他所有实例,例如 <div>,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。

wrap<textarea>指示文本是否应该换行。

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

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

相关文章

如何开启或者关闭 Windows 安全登录?

什么是安全登录 什么是 Windows 安全登录呢&#xff1f;安全登录是 Windows 附加的一个组件&#xff0c;它可以在用户需要登录的之前先将登录界面隐藏&#xff0c;只有当用户按下 CtrlAltDelete 之后才出现登录屏幕&#xff0c;这样可以防止那些模拟登录界面的程序获取密码信息…

来聊聊redis集群数据迁移

写在文章开头 本文将是笔者对于redis源码分析的一个阶段的最后一篇&#xff0c;将从源码分析的角度让读者深入了解redis节点迁移的工作流程&#xff0c;希望对你有帮助。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的 java coder &#xff0c;是 CS…

JavaScript青少年简明教程:赋值语句

JavaScript青少年简明教程&#xff1a;赋值语句 赋值语句&#xff08;assignment statement&#xff09; JavaScript的赋值语句用于给变量、对象属性或数组元素赋值。赋值语句的基本语法是使用符号 () 将右侧的值&#xff08;称为“源操作数”&#xff09;赋给左侧的变量、属…

Docker Minio rclone数据迁移

docker minio进行数据迁移 使用rclone进行数据迁移是一种非常灵活且强大的方式&#xff0c;特别是在处理大规模数据集或跨云平台迁移时。rclone是一款开源的命令行工具&#xff0c;用于同步文件和目录到多种云存储服务&#xff0c;包括MinIO。下面是使用rclone进行数据迁移至Mi…

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案 一&#xff0c; 文章简介二&#xff0c;硬件平台构建2.1 音频源板2.2 音频收发板2.3 双板硬件连接 三&#xff0c;软件方案与软件实现3.1 方案实现3.2 软件代码实现3.2.1 4路I2S接收3.2.2 I2S DMA pingpong配置3.2.3 音频数…

卧室激光投影仪推荐一下哪款效果最好?当贝X5S亮度卧室开灯照样清晰

现在家庭卧室装投影仪也不是什么稀奇的事情了&#xff0c;外面客厅看电视机&#xff0c;里面卧室投影仪直接投白墙各有各的优势。躺在卧室的床上&#xff0c;看超大屏投影真的很惬意。卧室投影的品类比较多&#xff0c;有些价格便宜的投影宣传说卧室看很适合&#xff0c;其实不…

设计模式12-构建器

设计模式12-构建器 由来和动机原理思想构建器模式的C代码实现构建器模式中的各个组件详解1. 产品类&#xff08;Product&#xff09;2. 构建类&#xff08;Builder&#xff09;3. 具体构建类&#xff08;ConcreteBuilder&#xff09;4. 指挥者类&#xff08;Director&#xff0…

实战:OpenFeign使用以及易踩坑说明

OpenFeign是SpringCloud中的重要组件&#xff0c;它是一种声明式的HTTP客户端。使用OpenFeign调用远程服务就像调用本地方法一样&#xff0c;但是如果使用不当&#xff0c;很容易踩到坑。 Feign 和OpenFeign Feign Feign是Spring Cloud组件中的一个轻量级RESTful的HTTP服务客…

rabbitmq生产与消费

一、rabbitmq发送消息 一、简单模式 概述 一个生产者一个消费者模型 代码 //没有交换机&#xff0c;两个参数为routingKey和消息内容 rabbitTemplate.convertAndSend("test1_Queue","haha");二、工作队列模式 概述 一个生产者&#xff0c;多个消费者&a…

C4D2024软件下载+自学C4D 从入门到精通【学习视频教程全集】+【素材笔记】

软件介绍与下载&#xff1a; 链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1n8cripcv6ZTx4TBNj5N04g?pwdhfg5 提取码&#xff1a;hfg5 基础命令的讲解&#xff1a; 掌握软件界面和基础操作界面。学习常用的基础命令&#xff0c;如建模、材质、灯光、摄像机…

设计模式-领域逻辑模式-结构映射模式

对象和关系之间的映射&#xff0c;关键问题在于二者处理连接的方式不同。 表现出两个问题&#xff1a; 表现方法不同。对象是通过在运行时&#xff08;内存管理环境或内存地址&#xff09;中保存引用的方式来处理连接的&#xff0c;关系数据库则通过创建到另外一个表的键值来处…

昇思25天学习打卡营第19天|munger85

Diffusion扩散模型 它并没有那么复杂&#xff0c;它们都将噪声从一些简单分布转换为数据样本&#xff0c;Diffusion也是从纯噪声开始通过一个神经网络学习逐步去噪&#xff0c;最终得到一个实际图像 def rearrange(head, inputs): b, hc, x, y inputs.shape c hc // head r…

大数据平台之HBase

HBase是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;是Apache Hadoop生态系统的重要组成部分。它特别适合大规模结构化和半结构化数据的存储和检索&#xff0c;能够处理实时读写和批处理工作负载。以下是对HBase的详细介绍。 1. 核心概念 1.1 表&#x…

TIA博途V19无法勾选来自远程对象的PUT/GET访问的解决办法

TIA博途V19无法勾选来自远程对象的PUT/GET访问的解决办法 TIA博途升级到V19之后,1500CPU也升级到了V3.1的固件,1200CPU升级到了V4.6.1的固件, 固件升级之后,又出现了很多问题,如下图所示,在组态的时候会多出一些东西, 添加CPU之后,在属性界面可以看到“允许来自远程对象…

第二讲:NJ网络配置

Ethernet/IP网络拓扑结构 一. NJ EtherNet/IP 1、网络端口位置 NJ的CPU上面有两个RJ45的网络接口,其中一个是EtherNet/IP网络端口(另一个是EtherCAT的网络端口) 2、网络作用 如图所示,EtherNet/IP网络既可以做控制器与控制器之间的通信,也可以实现与上位机系统的对接通…

python爬虫基础——Webbot库介绍

本文档面向对自动化网页交互、数据抓取和网络自动化任务感兴趣的Python开发者。无论你是初学者还是有经验的开发者&#xff0c;Webbot库都能为你的自动化项目提供强大的支持。 Webbot库概述 Webbot是一个专为Python设计的库&#xff0c;用于简化网页自动化任务。它基于Seleniu…

高速ADC模拟输入接口设计

目录 基本输入接口考虑 输入阻抗 输入驱动 带宽和通带平坦度 噪声 失真 变压器耦合前端 有源耦合前端网络 基本输入接口考虑 采用高输入频率、高速模数转换器(ADC)的系统设计是一 项具挑战性的任务。ADC输入接口设计有6个主要条件&#xff1a; 输入阻抗、输入驱动、带宽…

【RaspberryPi】树莓派系统UI优化

接上文&#xff0c;如何去定制一个树莓派的桌面系统&#xff0c;还是以CM4为例。 解除CM4上电USB无法使用问题 将烧录好的tf卡通过读卡器插入到电脑上&#xff0c;进入boot磁盘&#xff0c;里面有一个Config文件&#xff0c;双击用记事本打开&#xff0c;在【pi4】一栏里加入一…

农业农村大数据底座:实现智慧农业的关键功能

随着信息技术的快速发展&#xff0c;农业领域也在逐步实现数字化转型。农业农村大数据底座作为支持智慧农业发展的重要基础设施&#xff0c;承载了多种关键功能&#xff0c;为农业生产、管理和决策提供了前所未有的支持和可能性。 ### 1. 数据采集与监测 农业农村大数据底座首…

【k8s故障处理篇】calico-kube-controllers状态为“ImagePullBackOff”解决办法

【k8s故障处理篇】calico-kube-controllers状态为“ImagePullBackOff”解决办法 一、环境介绍1.1 本次环境规划1.2 kubernetes简介1.3 kubernetes特点二、本次实践介绍2.1 本次实践介绍2.2 报错场景三、查看报错日志3.1 查看pod描述信息3.2 查看pod日志四、报错分析五、故障处理…