HTML5中常用的全局属性

努力学习的前端小白(找工作ing)

已于 2023-03-21 16:25:04 修改

阅读量299

点赞数 1

文章标签： html5 html

于 2023-03-20 22:52:17 首次发布

本文链接：https://blog.csdn.net/m0_65066464/article/details/129677703

版权

1.contentEditable属性

功能：允许用户编辑元素中的内容。该属性是一个布尔值，当值为true时，允许编辑，当值为false时，不能编辑。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>contentEditable属性展示</title>
	</head>
	<body>
		<p contenteditable="true">此段落内容可以编辑</p>
		<p contenteditable="false">此段落内容不可编辑</p>
	</body>
</html>

效果图：

2.designMode属性

功能：用于指定整个页面是否可编辑，该属性并非布尔值，而是on和off。当值为on时，页面可编辑；当值为off时，页面不可编辑。该属性只能在JavaScript脚本中进行编辑修改。

<iframe id="editor"></iframe>

在JavaScript脚本中指定designMode属性的方法

editor.document.designMde="on"

3.hidden属性

功能：用户隐藏或显示元素。该属性是一个布尔值，当值为true时，元素不可见；当值为false时，元素可见。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>hidden属性展示</title>
	</head>
	<body>
		<input type="text" hidden />
		<input type="text" />
	</body>
</html>

效果图：

4.spellcheck属性

功能：用于进行拼写检查。在HTML5中，spellcheck属性针对input(type=text)元素和textarea两个文本输入框提供拼写检查。该属性是一个布尔值，当值为true时，执行拼写检查；当值为false时，不执行拼写检查。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>spellcheck属性展示</title>
	</head>
	<body>
		<input type="text" spellcheck="false" />
		<br />
		<textarea rows="10" cols="40" spellcheck="true">please input your name</textarea>
		
  	</body>
</html>

效果图：

5.tabindex属性

功能：一个页面中会有很多个控件，当按Tab键时，焦点会在各个控件之间进行转换，tabindex用于表示该控件是第几个被访问的控件。如果设置一个控件的tabindex值为负数，那么按下Tab键时该控件就不能获得焦点，但是仍然可以通过编程的方式让控件获得焦点。Tab键按从小到大的顺序进行导航，值为0的控件会被最后导航到。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>tabindex属性展示</title>
	</head>
	<body>
		<input type="text" tabindex="-1" />
		<input type="text" tabindex="0" />
		<input type="text" tabindex="3" />
		<input type="text" tabindex="1" />
		<input type="text" tabindex="2" />
  	</body>
</html>

6.title属性

功能：用于描述元素信息，当用户将鼠标悬停到具有该属性的元素上时，会显示title的内容信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>title属性展示</title>
	</head>
	<body>
		世界贸易组织简称<acronym title="World Trade Organization">WTO</acronym>
  	</body>
</html>

效果图：

7.accesskey属性

功能：用于给HTML元素定义快捷键。当按下快捷键时，获得焦点的按钮有一个带颜色的边框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>accesskey属性展示</title>
	</head>
	<body>
		<button>没选中的按钮</button>
		<button accesskey="a">快捷键是Alt+a</button>
	</body>
</html>

效果图：

8. dir属性

功能：用于规定元素内容的排列方向。该属性对应三个值：从左往右排列，使用ltr；从右往左排列，使用rtl；如果要根据浏览器内容自动判断，则使用auto。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>dir属性展示</title>
	</head>
	<body>
		<bdo dir="rtl">1234567</bdo><br />
		<bdo dir="ltr">1234567</bdo><br />
		<bdo dir="auto">1234567</bdo><br />
	</body>
</html>

效果图：

9.draggable属性

功能：用于设置是否可以进行拖拽。该属性是一个布尔值，当值为true时，可以进行拖拽；当值为false时，不能进行拖拽。将鼠标停放在要拖拽的元素上，按住鼠标左键即可进行拖拽操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />  
		<title>draggable属性展示</title>
	</head>
	<body>
		<p draggable="true">鼠标可以拖动这段文字。</p>
		<p draggable="false">鼠标不可以拖动这段文字。</p>
	</body>
	
</html>

效果图: