跳到主要内容

1.3-标签的属性

Create by Fall on 07 Dec 2022 Recently revised in 14 Jan 2023

全局属性​

一般来讲，属性填写在起始标签内，比如：<div class="box"></div>

class​

声明类名，用于 <style> 标签内引用，编写外联样式

<div class="box">
  盒子
</div>
<style>
  .box{
    height:300px;
    width:300px;
    background-color:pink;
  }
</style>

id​

区别于 class 的点为，id 在整个页面内必须是唯一的

<div id="pink">
  盒子
</div>
<style>
  #box{
    height:300px;
    width:300px;
    background-color:pink;
  }
</style>

style​

样式，可以在 style 标签内书写样式，但是一般不会建议这样做

  • 优先级高，很难被覆盖掉
  • 很难进行复用
<div style="height:200px;width:250px;background-color:pink;"></div>

draggable​

可以通过设置 draggable="true" 让标签可以拖动

  • 拖动标签按下鼠标后移动，会有类似于图片按下后移动的内容
<div draggable="true">
  这是一段文字，你可以拖动它
</div>

ondragstart：元素开始被拖动时触发 作用在拖拽元素上

ondragenter：当拖曳元素进入目标元素的时候触发的事件，作用在目标元素上

ondragover：拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上

ondragleave：拖拽元素拖离开了目标元素时触发，作用在目标元素上

ondrop：被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上

ondragend：当拖拽完成后触发的事件，作用在被拖曳元素上

contenteditable​

表示改标签中的内容可以编辑

<div contenteidtable>
  里面的内容可以编辑
</div>

hidden​

标签上添加 hidden 属性后，标签不会被看到

<p hidden>This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

特定属性​

表单属性​

一些属性只能在特定的标签上使用

placehodler,autofocus,multiple,required,minlength,maxlength,max,min,pattern

在 <input> 标签内的可选 type 作为属性

input 中 type 属性可选值作用
radio定义圆形选择框（单选）
checkbox方形选择框（复选框）
button可定义按钮
file定义输入字段和上传按钮
reset重置表单中的数据
submit可以把数据提交到服务器
text单行的输入字段，默认宽度为20个字符
hidden隐藏的输入字段

视频属性​

参考文章​

作者链接
MDN 官方文档https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
EvenyYlzzhttps://juejin.cn/post/6900005459856457735