HTML5 retains most of the elements of previous HTML, but also adds some common attributes, let’s take a look

1. ContenEditable properties

HTML5 adds a property called contenEditable to most HTML elements, which, if set to true, allows you to edit the content of the HTML element directly (excluding form elements that allow input themselves), and has inheritable features: If an element’s parent, contenEditable, is true, it defaults that child element to be editable as well, unless false is specified

Usage:

<html>
	<head>
    	<meta charset="utf-8">
    	<title></title>
	</head>
	<style>
		table tr.table td{width:50%; }</style>
	<body>
		<table  contenteditable="true" border="1" style="width: 400px; border-collapse: collapse;">
		    <tr>
		        <td>html</td>
		        <td>html5</td>
		    </tr>
		    <tr>
		        <td>css</td>
		        <td>css3</td>
		    </tr>
		</table>
	</body>
</html>
Copy the code

Display effect:

2. DesignMode properties

The designMode attribute is equivalent to a global contenEditable attribute. If the designMode attribute is set to ON for the entire page, all elements on the page that support the contenEditable attribute become editable, with the default attribute being off

Note: designMode can only be edited in javascript scripts

Usage:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>I am the h2</h2>
		<ul>
			<li>This is a street dance</li>
			<li>This is a basketball</li>
		</ul>
		<script type="text/javascript">
		   document.designMode = "on";
		</script>
	</body>
</html>
Copy the code

Display effect:

3. Spellcheck properties

It is < input… />
add the spellCheck property, which supports Boolean. If this property is set, the browser checks incoming text. If it fails, the browser will alert you for misspelled words.

Usage:

<body>
    <p contenteditable="true" spellcheck="true">This is the editable paragraph:</p>
    <input type="text" name="fname" spellcheck="true">
</body>
Copy the code

Display effect:

4. The contextmenu properties

A context menu that represents an element and is displayed when the user right-clicks on the element. The value of the ContextMenu attribute is the ID of the

element that needs to be opened.

Usage:

	<body>
		<div oncontextmenu="myfunction()" contextmenu="menu">
			<div style='background:#FFC107; width: 80px; text-align:center; border: 1px solid #FFC107; '>Click on the I</div>
			<menu id="menu" type='context'>
				<! Menuitem only works in Firefox! -->
				<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
					<menu label="Share on...">
						<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
						<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
					</menu>
				<menuitem label="Email This Page" onclick="window.location='mailto:? body='+window.location.href;"></menuitem>
			</menu>
		</div>
		<p id="demo"></p>
		<script type="text/javascript">
			function myfunction(){
				let x = document.getElementById("demo");
				x.innerHTML = "You right-click in div!";
			}
			/** prevents the browser from right-clicking events */ by default
			$(document).bind('contextmenu'.function (){
				console.log('Right mouse click:'+ new Date().getTime())
				return false;
			})
		</script>
	</body>
Copy the code

Display effect:

Of course, we also tried out the menuItem element in Firefox, which showed the following menu