Today I will start a new HTML5/">html5 series course, which is my study notes on "The Definitive Guide to HTML5". I will organize the chapters or meaningful content that I think are good, or meaningful, for everyone to learn.
An element can define its own attributes, such as the a tag to define the href attribute, which is called a local attribute. Correspondingly, we can set common behaviors for all elements through global attributes. Of course, you can also set global attributes for individual elements, but it doesn't make much sense to do so. Below I will introduce these global attributes one by one.
The following example runs normally in the chrome browser. Some examples of firefox cannot run, and I have not tested other browsers, so it is recommended that you use chrome browser as your preferred html5 browser. I didn't focus on browser compatibility issues, but on learning and implementation. html5 is still being improved. With its popularity, I believe that mainstream browsers will support it better and better, and the browser compatibility problem will be much better at that time.
1.accesskeyThe accesskey property allows you to set one or more keyboard shortcuts so that you can select elements on the page. Let's look at the following example:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name: <input type="text" name="name" accesskey="n"/>
<p/>
Password: <input type="password" name="password" accesskey="p"/>
<p/>
<input type="submit" value="Log In" accesskey="s"/>
</form>
</body>
</html>
In this example, you can use key combinations to select elements in the page. For example, under the Windows operating system, you can use alt+XXX to select an element.
Running effect:
2.classI don't want to say anything more about this attribute. It is a function of grouping elements. Most of the time it is used in combination with CSS to set different display effects for elements in different groups.
3.contenteditableThis is a new attribute added to html5. Add contenteditable attribute to html elements, set it to true, allowing users to edit element content; set to false, and not allowing users to edit.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>
4.contextmenucontextmenu allows users to set the right-click menu of the html element, and the menu will pop up when the user triggers it. No browser supports this property so far.
5.dir The dir attribute defines the alignment of html element literals, supporting two values, ltr (from left to right) and rtl (from right to left).<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p dir="rtl">This is right-to-left</p>
<p dir="ltr">This is left-to-right</p>
</body>
</html>
6.draggabledraggable is an attribute that implements the drag and drop function of html elements in html5, which we will introduce in detail in the following courses.
7.dropzonedropzone is also an attribute that implements the html element drag function in html5. We will introduce it in detail in the later course.
8.hiddenEveryone should be familiar with this attribute, which is to hide an html element.
9.idEveryone should know this attribute. It sets a unique identifier for the html element, and no elements with a considerable id are allowed in an html page.
10.langlang specifies the language used to the content of the html element. The value of lang must be a valid iso language code. You can visit the address below for more details, http://tools.ietf.org/html/bcp47. It should be noted that dealing with language is a very complex and technical matter.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p lang="en">Hello - how are you?</p>
<p lang="fr">Bonjour - comment êtes-vous?</>
<p lang="es">Hola - ¿ cómo estás?</p>
</body>
</html>
11.spellcheck When using the spellcheck attribute, the browser will help you check whether the spellcheck content of the html element is spelled correctly. Only when the html element is editable can the spellcheck attribute be meaningful.<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>
Effect: (I didn't run the desired effect with chrome, I don't know why)
12.styleThere is no need to introduce this attribute too much, and set the css style for the html element.
13.tabindextabindex allows you to define the order in which html elements are accessed when using the tab key. When tabindex is set to -1, the html element will not be selected using the tab key.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>Name: <input type="text" name="name" tabindex="1"/></label>
<p/>
<label>City: <input type="text" name="city" tabindex="-1"/></label>
</p>
<label>Country: <input type="text" name="country" tabindex="2"/></label>
</p>
<input type="submit" tabindex="3"/>
</form>
</body>
</html>
Effect:
14.title The title can provide additional information for the html element, which is often used to display prompt information.<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com">Visit the Apress site</a>
</body>
</html>
Effect:
That’s all for today’s course, I hope these contents will be helpful to everyone.
demo download address: Html5Guide.rar