Comments: An element can define its own attributes, such as the href attribute defined by TAG ). Correspondingly, we can use global attribute to set common behaviors for all elements. Of course, you can also set global attributes for individual elements, it doesn't make much sense to start a brand new html5 series of courses today. It's my learning notes for reading The Definitive Guide to HTML5. I will sort out the chapters that I think are good or meaningful for you to learn.
An element can define its own attributes, such as the href attribute defined by TAG ). Correspondingly, we can use global attribute to set a common behavior for all elements. Of course, you can also set global attributes for individual elements, but this does not make much sense. The following describes these global attributes one by one.
The following example runs normally in the chrome browser. Some examples cannot run in firefox, and I have not tested other browsers. Therefore, we recommend that you use chrome as your preferred html5 browser. I did not focus on browser compatibility, but on learning and implementation. Html5 is still being improved. With its popularity, I believe that mainstream browsers will provide better support for it, and browser compatibility will be much better at that time.
1. accesskey
The accesskey attribute allows you to set one or more keyboard shortcuts so that you can select the elements on the page. Let's look at the following example:
The Code is as follows:
<! 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 the combination key to select elements on the page. For example, in windows, you can use alt + XXX to select an element.
Running effect:
2. class
I don't want to say anything about this attribute. It is a grouping function for elements. It is more often used in combination with css to set different display effects for different groups of elements.
3. contenteditable
This is a new attribute added to html5. Add the contenteditable attribute to the html element and set it to true to allow the user to edit the element content. Set it to false to prevent the user from editing.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
</Head>
<Body>
<P contenteditable = "true"> It is raining right now </p>
</Body>
</Html>
4. contextmenu
The contextmenu allows you to set the right-click menu of html elements. When a user triggers the menu, it will pop up. So far, no browser supports this attribute.
5. dir
The dir attribute defines the alignment of html element text. Two values are supported: ltr (from left to right) and rtl (from right to left ).
The Code is as follows:
<! 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. draggable
Draggable is the attribute for implementing the drag-and-drop function of html elements in html5. We will introduce it in detail in subsequent courses.
7. dropzone
Dropzone is also an attribute for html element drag-and-drop in html5. We will introduce it in detail in subsequent courses.
8. hidden
Everyone should be familiar with this attribute, that is, hiding an html element.
9. id
This attribute should be known to all. It sets a unique identifier for the html element, and the element with a considerable id is not allowed in an html page.
10. lang
Lang specifies the language used by the html element content. The lang value must be a valid iso language code. For more information, visit the following url: http://tools.ietf.org/html/bcp47. It should be noted that the processing language is quite complex and technical.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
</Head>
<Body>
<P lang = "en"> Hello-how are you? </P>
<P lang = "fr"> Bonjour-comment bytes tes-vous? </>
<P lang = "es"> Hola-example Cómo est ás? </P>
</Body>
</Html>
11. spellcheck
When the spellcheck attribute is used, the browser will help you check whether the text of the html element is correctly spelled. the spellcheck attribute makes sense only when the html element can be edited.
The Code is as follows:
<! 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 using chrome. I don't know why)
12. style
This attribute does not need to be described too much. You can set css styles for html elements.
13. tabindex
Tabindex allows you to define the access sequence when html elements use the tab key. When tabindex is set to-1, the html element is not selected using the tab key.
The Code is as follows:
<! 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
Title can provide additional information for html elements, which is often used to display prompt information.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
</Head>
<Body>
<A title = "Apress Publishing" href = "http://apress.com"> Visit the Apress site </a>
</Body>
</Html>
Effect:
This is the end of today's course. I hope this content will help you.
Demo: Html5Guide.rar
