HTML 元素属性

创建时间:2019.05.27 修改时间:2019.05.27

如:

<a href="http://www.quma.live"> 去码 </a>

其中,href 为元素 <a> 的属性,属性值被包含在“=”号后面的引号内,可以为双引号或单引号。

注: 如果属性值本身含有双引号,则只能用单引号划分。

一般元素的通用属性

属性 描述
id 定义元素的唯一 id
class 为 html 元素定义一个或多个类名(多个类名用空格分隔)
style 定义元素的行内样式
title 描述元素的额外信息

常用的 HTML5 新增属性

1. contenteditable:规定是否可编辑元素的内容。

<p contenteditable="true"> 这是一个可编辑段落。</p>

效果如下:

这是一个可编辑段落。

2. data-*:用于存储页面的自定义数据。

可通过 javascript 的 getAttribute() 方法获取指定存储数据的内容。

<script>
function showDetails(animal)
{
	var animalType = animal.getAttribute("data-animal-type");
	alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
<p> 点击一个物种,看看它是什么类型:</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>

效果如下:

点击一个物种,看看它是什么类型:

3. hidden:设置元素隐藏。

<p hidden="hidden"> 这是一段隐藏的段落。</p>
<p> 这是一段可见的段落。</p>

效果如下:

这是一段可见的段落。

4. draggable:设置元素可拖动。

可与 javascript 中 ondragstart、ondrop、ondragover 事件配合使用,达到把元素拖放到指定位置的效果。

<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>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)" style="float:left;width:230px;height:70px;padding:10px;border:1px solid #aaaaaa;"> </div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)" style="float:left;width:230px;height:70px;padding:10px;border:1px solid #aaaaaa;">
    <p id="text" draggable="true" ondragstart="drag(event)"> 这是一段可移动的段落。可以在左右两个矩形框内拖动。</p>
</div>

效果如下:

这是一段可移动的段落。可以在左右两个矩形框内拖动。