首先要给大家科普一下布尔值和属性值

布尔值:

对于具有boolean值的属性,当只写属性而不写指定属性值时,表示属性值为true;如果想要将属性值设为false,可以不使用该属性。另外,要想将属性值设定为true时,也可以将属性名设定为属性值,或将空字符串设定为属性值。

<!-- 只写属性不写属性值,代表为true -->
<input type="checkbox" checked>
<!-- 不写属性,代表属性值为false -->
<input type="checkbox">
<!-- 属性值等于属性名,代表制为true -->
<input type="checkbox" checked="checked">
<!-- 属性值等于空字串符,代表制为true -->
<input type="checkbox" checked="">

属性值:

属性值两边既可以用双引号,也可以用单引号,当属性值不包括字符串,<、>、=、单引号、双引号等字符时,属性值两边的引号可以忽略,例如下面的写法都是正确的。

<input type="text">
<input type='text'>
<input type=text>

html5有八个全局属性

1.contentEditable

contentEditable属性的主要功能是允许用户在线编辑元素中的内容,contentEditable是一个布尔值属性,可以是true或false

该属性还有一个隐藏的inherit(继承)状态,属性为true时,元素被指定为允许编辑,属性为false时,元素被指定为不允许编辑,未指定true或false,则有inherit状态来决定,如果元素的父元素是可编辑的,则该元素就是可编辑的

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<h2>可编辑列表</h2>
     <ul contenteditable="true">
       <li>导航1</li>
       <li>导航2</li>
       <li>导航3</li>

</ul>

</body>

</html>

编辑完后,如果想要保存内容,只能把该元素的innerhtml发送到服务器端进行保存,在javascript中,元素还有一个isContenteditable属性,当元素可编辑时,该属性值为true,当元素不可编辑时,该属性为false

2.contextmenu

contextmenu属性定义<div>元素的上下文菜单,所谓上下文菜单就是会在用户右键点击元素时出现,该属性目前只在firefox中有用

3.data-*属性

使用data-*属性可以自定义用户数据,具体应用包括:

1.data-*属性用于存储页面或web应用的私有自定义数据

2.data-*属性赋予所有html元素潜入自定义data属性的能力

data-*属性包括以下两部分

  1. 属性名:不应该包含任何大写字母,并在前缀“data-”之后必须至少有一个字符

  2. 属性值:可以是任意字符串

4.draggable

draggable属性可以定义元素是否可以被拖动

true定义元素可以被拖动,false定义元素不可被拖动,auto定义元素使用浏览器默认行为

5.dropzone

dropzone属性定义在元素上拖动数据时,是否复制,移动或连接被拖动数据

copy拖动数据会产生被拖动数据的副本,move拖动数据会导致被拖动数据被移动到新位置,link拖动数据被产生只想原始数据的链接

目前所有浏览器都不支持dropzone属性

<div dropzone="copy"></div>

6.hidden

html5中所有元素都包含一个hidden属性,该属性设置元素的可见状态,取值为一个布尔值,当为true,元素处于不可见状态,当为false元素处于可见状态

<p hidden="true">这短话被隐藏了</p>

7.spellcheck

spellcheck 属性定义是否对元素经行拼写和语法检查,可以对一下内容进行拼写检查:

input元素中的文本只(非密码)

<textarea>元素中的文本

可编辑元素中的文本

spellcheck属性是一个布尔值属性,取值包括true和false,为true时表示对元素进行拼写和语法检查,为false则反之。

<!-- 以下两种书写方法正确 -->
<textarea spellcheck="true"></textarea>
<input type="text" spellcheck="false">
<!-- 以下书写方法为错误 -->
<textarea spellcheck>

如果元素readonly属性或disabled属性为true,则不执行拼写检查

下面大家自己做一个可以编辑的段落吧~

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<h2>这是一个可以编辑的段落</h2>
<p contenteditable="true" spellcheck="true">来编辑我啊</p>
</body>

</html>

8.translate

translate属性定义是否应该翻译该元素内容

yes表示翻译该元素内容,no表示不翻译元素内容

目前主流浏览器无法正确的支持translate