HTML学习日志Day2

最新推荐文章于 2024-04-20 23:47:07 发布

Blu_

最新推荐文章于 2024-04-20 23:47:07 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/weixin_44431550/article/details/103244811

版权

HTML基础

HTML5全局属性

1.contentEditable属性

介绍

主要功能是允许用户可以在线编辑元素中的内容。contentEditable是一个布尔值，可以被指定true或false。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>conentEditable属性</title>
	</head>
	<body>
		<h2>可编辑列表</h2>
		<ul contenteditable="true">
			<li>元素1</li>
			<li>元素2</li>
			<li>元素3</li>
		</ul>
	</body>
</html>

实现效果

在这里插入图片描述

2.contextmenu属性

介绍

contextmenu属性用于定义<div>元素的上下文菜单。上下文菜单在用户右键单击元素时出现。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div contextmenu="mymenu">上下文菜单
			<menu type="context" id="mymenu">
				<menuitem label="微信分享"></menuitem>
				<menuitem label="微博分享"></menuitem>
			</menu>
		</div>
	</body>
</html>

效果实现

在这里插入图片描述
(不过只有Firefox支持contextmenu属性）

3.data-*属性

介绍

使用data-*属性可以自定义用户数据。具体应用包括：
data-*属性用于存储页面或Web应用的私有定义数据。
data-*属性赋予所有HTML元素嵌入自定义data属性的能力。

4.draggable属性

介绍

draggable属性可以定义元素是否可以被拖动。
true:定义元素可以被拖动。
false:定义元素不可以被拖动。
auto:定义使用浏览器的默认行为。

5.dropzone属性

介绍

dropzone属性定义在元素上拖动数据时，是否被复制、移动或链接或被拖动数据。属性值说明如下：
copy:拖动数据会产生被拖动数据的副本。
move:拖动数据会导致被拖动数据被移动到新位置。
link:拖动数据会产生指向原始数据的链接。

6.hidden属性

介绍

在HTML5中，所有元素都包含一个hidden属性。该属性可以设置元素的可见状态，取值为一个布尔值，
当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ul>
			<p hidden="true">这个段落应该被隐藏</p>
		</ul>
	</body>
</html>

效果实现

在这里插入图片描述（内容不显示）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ul>
			<p hidden="false">这个段落应该被隐藏</p>
		</ul>
	</body>
</html>

在这里插入图片描述

7.spellcheck属性

介绍

spellcheck属性定义是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查：
1.input元素中的文本值（非密码）。
2.<textarea>元素中的文本。
3.可编辑元素中的文本。
spellcheck属性是一个布尔值的属性。取值包括true和false，为true时表示对元素进行拼写和语法检查，为false时则不检查元素。