From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 1058
// Zxx: The following is the full text of the translation. Based on the vivid and localized language principles, the content is edited.
Note: This list will update some new tips several times a week. In the end, this article will become a very useful resource.
// Zxx: I have no time to update the ugly words. Therefore, this article contains 28 items even on the day your daughter was married.
With the rapid development of the front-end, you may be far behind the hero. If you don't want to be overwhelmed by HTML5 changes/updates,
The content of this article can be used as a warm-up course that must be understood.
1. New doctype // zxx: "doctype" Chinese meaning "document type"
Still in use trouble. Can't you remember the XHTML document type?
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
If so, why is it still in use? Use the new HTML5 document type instead. You will live longer-as Douglas Quaid says
<! Doctype HTML>
I thought about it. I made this article for HTML5.Code, You may doubt whether the code is unreliable. Don't worry. Now this is feasible. Only the old Browser needs a specific doctype (document type ). If the browser does not know doctype, it will simply render the included labels in standard mode. So, sister, you are bold enough to throw all the care off the cloud, to embrace the new HTML5 document type.
Ii. graphic elements)
Let's take a look at the labels added to the image below:
<p> image of Mars. </P>
Text is wrapped in the p label, and it is different from the IMG label. It is hard to think of this as the title. HTML5 adopts<Figure>Element.
When the combination of <figcaption> elements is used, we can semantically think of the title corresponding to the image.
<Figure>
<Figcaption>
<P> This is an image of something interesting. </P>
</Figcaption> </figure>
Iii. <small> redefinition
Not long ago,<Small>The element is used to create a subtitle near the logo. This is a very useful expression element. However, this usage may not be correct now.<Small>The element has been redefined and is a small character, so it is more available. Imagine the copyright status at the bottom of your website. According to the new HTML5 definition of this element,<Small>The information can be correctly wrapped.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 4. Script and link are not required TypeThe small element refers to a small character ".
You may still add the type attribute to the link and script labels.
<LINK rel = "stylesheet" href = "path/to/stylesheet.css" type = "text/CSS"/> <SCRIPT type = "text/JavaScript" src = "path/ /script. JS "> </SCRIPT>
This is not a necessity. This means that these labels point to the style sheet and script respectively. Therefore, we can kill the type attribute together.
<LINK rel = "stylesheet" href = "path/to/stylesheet.css"/> <SCRIPT src = "path/to/script. js"> </SCRIPT>
5. quotation marks or not... This is indeed a problem. Remember, HTML5 is not XHTML. If you don't want it, you don't have to mark your attributes with quotation marks, and you don't have to close the elements. In other words, as long as you feel comfortable, there is no right or wrong. This is the case for myself.
<P class = myclass id = someid> Start the reactor.
You have to make your own decisions on this. If you prefer structured documents, you should keep the quotation marks in your arms even if the sky falls down.
6. editable content
The latest browser has a very nice new attribute that can be applied to elements calledContenteditable. The idea is to allow users to edit any text contained in the element content, including child elements. There are many similar applications, such as simple to-do list applications.ProgramTo take advantage of its local storage.
<Ul contenteditable = "true">
<Li> mourn the death of Hong Kong compatriots </LI>
<Li> 30 th anniversary of Shenzhen SAR </LI>
<Li> Yichun air crash </LI> </ul>
Or, based on the previous tips, we can write it:
<Ul contenteditable = true>
You can click here: HTML5 content editable demo
7. Email input (inputs)
If we apply the type attribute "email" to the form input box, we can command the browser to only allow strings that match the valid email address structure.
Yes, built-in form verification will come soon. For some obvious reasons, we cannot rely on built-in verification for 100%. Older browsers do not recognize this "email" type,
They are simply returned to the common text box.
<Form action = "" method = "get">
<Label for = "email"> Email: </label> <input id = "email" name = "email" type = "email"/>
<Button type = "Submit"> OK </button>
</Form>
You can click here: HTML5 mailbox built-in verification demo
// Zxx: After my small test, it seems to be effective only in Chrome browser (XP system). When the input content is not in a valid email format,
The "OK" button does not respond. When the input is a valid email address, click the "OK" button to submit the page for Refresh.
Currently, we cannot rely on browser verification. Client/Server verification is required.
It should also be pointed out that when talking about the elements and attributes that are supported and not supported, all browsers are a little unreliable. For example, opera seems to support email verification, but only when the name attribute is specified. Besides, it does not support placeholder attributes.
Face to face. The bottom line is that it does not rely on this form of verification... But you can still use it!
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng,
Visit more excellent technical articles from the original source.
Author: Zhang xinxu, welcome to my personal website. 8. placeholder (placeholders) // zxxWhat do placeholders mean? By default, a text prompt is displayed in the text box/Text domain space. when the focus is obtained, the text will disappear;
If the content is empty when the focus is lost, the prompt text appears again. As shown in:
Some prompt text displayed in these form controls is placeholders. In the past, we needed a little JavaScript code to implement the placeholder effect, as shown in my previous article "automatically show and hide jquery mini-plug-ins in text boxes/fields. Of course, you need to set an initial default value, and then judge based on the input content to determine whether the text box value is changed or not. If you use the placeholder property, everything is easy.
<Label for = "email"> Email: </label> <input id = "email" type = "email" Placeholder = "zhangxinxu@zhangxinxu.com" size = "26"/>
According to my tests, currently only WebKit core browsers support the placeholders attribute, such as chrome5 and safari4. The results are as follows:
Click here: HTML5 placeholder demo
9. Local Storage thanks to local storage (informal HTML5 for the purpose of convenience induction), we can make advanced browsers remember our edited content,
Even if the browser is disabled or the page is refreshed.
// Zxx: the original video is a YouTube video by default and cannot be viewed without turning over the wall. Therefore, video from another website is displayed here.
We recommend that you view the HTML and JavaScript code in full screen mode.
// Zxx: Based on the video content, I made a demo about local storage.
Click here: HTML5 local storage demo
The Internet Explorer 8 supports local storage as follows:
Although it is clear that all browsers are not supported, we can expect this method to work under Safari 4 and Firefox 3.5 in Internet assumer8.
Please note that, in order to make up for the old browser will not recognize local storage, you should first test to determine whether window. localstorage exists.
10. semantic header and footer
Past days:
<Div id = "Header">... </div> <Div id = "footer">... </div>
Div, naturally, there is no semantic structure-even after the ID is applied. Now, with HTML5, we can use the
The above code can be replaced:
<Header>...
It is perfect for projects with multiple headers and footers.
Try not to confuse the "Header" and "footer" elements. They only refer to their containers. Therefore, put the meta information at the bottom of the blog on the footer element.
It works internally. This also applies to header.
11. More HTML5 form features (more HTML5 form features)
Use the following video to learn more useful HTML5 form features: // zxx: toutube video, which needs to be turned over the wall
12. Internet Explorer and HTML5)
Unfortunately, the annoying IE browser requires minor operations to understand the new HTML5 elements.
All elements, default, have an inline display
To ensure that all new HTML5 elements can be correctly rendered by block-level elements, we need to define them as follows:
Header, footer, article, section, NAV, menu, hgroup {display: block ;}
Unfortunately, ie still ignores these styles because it does not know where these labels come from, like header elements. Fortunately, there is a simple solution:
Document. createelement ("article"); document. createelement ("footer"); document. createelement ("Header ");
Document. createelement ("hgroup"); document. createelement ("nav"); document. createelement ("menu ");
The strange thing is that this code seems to trigger ie browsers. To make it easier to apply this to each new application, Remy sharp creates a script, usually called HTML5 Shiv. This script also fixes some display problems.
<! -- [If IE]> <SCRIPT src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </SCRIPT> <! [Endif] -->Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 13. Imagine a part of the information (hgroup). In my website title, I have the name of my site, and then I immediately have a subtitle. Although we can use a
In terms of hierarchy, when it comes to titles displayed on other web pages. By using the hgroup element of the outline stream that does not affect the document, we can combine these headers.
<Header>
<Hgroup>
<H1> recall fan page <H2> only for people who want the memory of a lifetime. </H2>
</Hgroup>
</Header>14. required attributes (required attribute)
The form allows new necessary attributes to specify whether special input is required. Depending on your code preferences, you can declare this attribute in either of the following two ways.
<Input type = "text" name = "someinput" required>
Or, use a more structured method:
<Input type = "text" name = "someinput" required = "required">
Both methods are supported. With this code, the browser supports this attribute. If the "someinput" text box is blank, the form will not be submitted.
The following is a simple example. We will also add placeholder attributes because there is no reason not to do so.
<Form action = "" method = "get">
<Label for = "name"> name: </label>
<Input id = "name" name = "name" type = "text" Placeholder = "zhangxinxu" required = "required"/>
<Button type = "Submit"> submit </button>
</Form>
You can click here: HTML5 required attribute demo
If the content in the input is blank, the text box is highlighted when the form is submitted. // Zxx: It seems to have little effect only in chrome.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 15. autofocus attributes
Similarly, the HTML5 solution eliminates JavaScript requirements. If a specific input should be "select" or be important, by default,
We can now automatically obtain the focus attribute.
<Input type = "text" name = "someinput" Placeholder = "zhangxinxu" required autofocus>
Interestingly, although I personally prefer the XHTML method (with quotation marks, etc.), writing "autofocus = autofocus" is a bit strange.
Therefore, we will stick to the method of using a single keyword.
16. Audio support
We no longer need to rely on third-party plug-ins to render audio. HTML5 provides
<Audio>Element, well, at least, in the end, we don't have to worry about these plug-ins. Currently,
Only the most recent browsers provide HTML5 audio support. At this time, it is still a good practice to provide some backward compatible forms.
<Audio autoplay = "autoplay" controls = "controls">
<Source src = "file.ogg"/>
<Source src = "filepath"/>
<A href = "filepath"> download this file. </a>
</Audio>
Mozilla and WebKit are not completely compatible yet. When the audio format is involved, firefoxwill look at a .ogg file, and webkit's browser supports ghost extension.
This means that at least now you should create two versions of audio.
When the safari page is displayed, the supervisor will not recognize the .ogg format and will skip it and move it to the MP3 version. Please note that IE, as usual, does not support these formats,
Opera 10 can only use .wav files in the following example.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. VII. Video SupportAnd
<Audio>The element is similar. video exists in the new browser! In fact, recently, YouTube announced a new HTML5 video embedding function. Of course, it is to support this function in browsers. Because the HTML5 specification does not specify a specific video codec, it is left to the browser. Although safari and Internet javaser9 can be expected to support videos in H.264 format (flash players can play), Firefox and opera stick to the open source theora and Vorbis formats. Therefore, when HTML 5 videos are displayed, you must provide these two formats.<Video controls preload> <source src = "cohagenphonecall. OGV" type = "Video/Ogg; codecs = 'vorbis, theora '"/>
<Source src = "cohagenphonecall.mp4" type = "Video/MP4; 'codecs = 'avc1. 42e01e, mp4a. 100'"/>
<P> your browser is old. <a href = "cohagenphonecall.mp4"> download this video instead. </a> </P>
</Video>Whether it is in the "Ogg" format or in the "MP4" format, the video Chrome browser can be correctly encoded.
There is another noteworthy thing:
18. preload videos)
- We do not need to set the type attribute technically. However, if we do not do this, the browser has to search for the Type on its own. To save some bandwidth, please declare it yourself.
- Not all browsers understand HTML5 videos. Under the resource element, we can provide a download link or embed the Flash version of the video. It depends on you.
- The controls and preload attributes will be mentioned below.
- There is a way to allow all browsers to support video tags. For more information, see "allow all browsers to support HTML5 video tags.
The preload attribute is not exactly what you think, though, you should first decide whether to pre-install the video in the browser. Is it necessary? Maybe.
If a visitor visits a page that displays a video, you must preload the video to save some time for the visitor to wait.
You can set preload = "preload" or simply add preload to preload a video. I prefer the latter solution, but it does not have anything to do.
<Video preload>19. Display Control bar
If you use every technical point mentioned above, you may have noticed that using the above Code, the video only displays an image,
No control bar. To render the playback control bar, you must specify the CONTROLS attribute in the video element.
<Video preload controls>
Note that different browsers render different progress bars.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 20. Regular Expression
How often do you find yourself writing regular expressions to verify a specific text. Thanks to the new pattern attribute, We can insert a regular expression directly at the tag.
<Form action = "" method = "get">
<Label for = "username"> name: </label>
<Input id = "username" name = "username" type = "text" Placeholder = "4-10 English letters" pattern = "[A-Za-Z }"
Required = "required" autofocus/>
<Button type = "Submit"> submit </button>
</Form>
It should be clear if you are familiar with regular expressions
[A-Za-Z] {4, 10}4-10 uppercase/lowercase English letters are accepted.
If the browser supports the pattern attribute, when submitting a form, if the content in the text box does not conform to its regular expression, the text box is highlighted. As shown in.
Click here: HTML5 Regular Expression demo
// Zxx: I tested it myself. It seems that it is only valid in chrome currently (WIN System)
Note that we have begun to combine these great attributes.
If you have blurred the concept of a regular expression, see here.
21. Attribute support DetectionIf we have no way to check whether the browser supports these attributes, these attributes cannot be called good attributes. Well, good opinion. In fact, we have several methods. Here we will discuss two. The first is to use the excellent modernizr library, or we can create and analyze these elements to determine the browser's capabilities. For example, in our previous example, if we want to determine whether the browser can use the pattern attribute, we can add a small JavaScript section to our page:
Alert ('pattern' in document. createelement ('input '));// Boolean
In fact, this is a common method to determine browser compatibility. Jquery library uses this trick. In the preceding example, a new input element is created,
Check whether the browser recognizes the pattern attribute. If yes, the browser supports this function. Otherwise, of course it is not supported.
<SCRIPT> If (! 'Pattern' in document. createelement ('input '))
{// Do client/server side validation} </SCRIPT>
Remember that this method depends on JavaScript.
22. Mark Element)
Imagine
<Mark>The element is highlighted. The string of this label package should be associated with the user's current action. For example, if I search for "Kitagawa Keiko" on some blogs, I can use JavaScript to wrap each of the current result strings with the Mark tag.<H3> Search Results23. When to use Div
Some of us began to ask when to use Div. Now we can use header, article, section, and footer. We also have the opportunity to use Div... ? Of course.
Div should be used when there are no better elements.
For example, if you find that you need to wrap a block of code in the packaging unit for content locating and processing. However, if you wrap a blog post or, possibly, the link list at the bottom, you need to consider using the <Article> and <nav> elements separately because they are more semantic.
24. What can I start to use now
It has been said that HTML5 will not be fully completed until 2022, and many people ignore it completely. This is a huge mistake. In fact, there are a few HTML5 features,
We can use it in all our projects! Simpler and cleaner code is always a good thing. In today's quick video presentation tips, I will show you some available options.
// Zxx: YouTube video, which needs to be turned over the wall.
25. Which are not HTML5 (what is not HTML5)
It is understandable to those who classify the transition from JavaScript to HTML5 based on their own hypothetical images. Hey, even Apple inadvertently promoted this idea. Who cares about this for non-developers? It is a simple method that applies to modern web page standards. However, even though it may only be semantic, it is important to understand exactly what is not HTML5.
- SVG:Not HTML5, at least 5 years old.
- Css3:It's not HTML5, it's... CSS.
- Geolocation:Not html5.// Zxx: geolocation: HTML 5 enables web applications to determine your location and provide more information.
- Client storage ):Although not HTML5, it is a bit appropriate, but it is excluded from the standard because it is worried that it will become too complicated as a whole. It now has its own specifications.
- Web sockets:It is not HTML5. Similarly, it has its own set of standards.
No matter how different your needs are, all these technologies can be categorized as modern network stacks. In fact, many of these branches are managed by the same person.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 26. The data attribute)
Now we can officially allow all HTML elements to support custom attributes. However, in the past, we may look like this:
<H1 id = someid customattri = value> look, it's cool.
... The checker will make a big fuss! But now, as long as we define our custom attributes with the prefix of "data", the pirated attributes will immediately become the cards.
If you find that you have attached an important data to a class attribute for Javascript, this attribute will be of great help.
HTML snippets
<Div id = "mydiv" data-custom-ATTR = "my value"> barabara, Lady Gaga </div>
Retrieve the value of Custom Attributes
VaR thediv = Document. getelementbyid ('mydiv '); var ATTR = thediv. getattribute ('data-custom-ATTR ');
Alert (ATTR );// My value
This attribute can also be used in CSS. For example, the following example shows some silly CSS text changes:
CSS code:. Data_custom {display: inline-block; position: relative ;}
. Data_custom: hover {color: transparent ;}
. Data_custom: hover: After {content: ATTR (data-hover-response); color: black; position: absolute; left: 0 ;}
HTML code:<A class = "data_custom" data-hover-response = "I told you not to touch me! "Href =" # "> don't touch me, ~~ </A>
If your browser supports the after pseudo class and the ATTR attribute of content, you can see the effect similar to the following (IE8 is different ):
To view the effect, click here: CSS and HTML5 custom attribute demo
In addition, the content attribute is actually a very powerful attribute. Because earlier versions of IE do not support this attribute, it is not yet popular. For content generation technology,
For more information, see my previous article "CSS content generation technology and application.
27th. Output Element
As you may have expected, the output element is used to display partial calculations. For example, if you want to display the position of a mouse or the sum coordinate of a series of numbers,
This data should be inserted into the output element.
For example, when the submit button is pressed, we use JavaScript to insert the values of the two numbers into an empty output.
<Form action = "" method = "get">
<P> 10 + 5 = <output name = "sum"> </output> </P>
<Button type = "Submit"> calculation </button> </form> (function () {var F = Document. Forms [0];
If (typeof f ['sum']! = 'Undefined') {f. addeventlistener ('submit ', function (e ){
F ['sum']. value = 15; E. preventdefault () ;}, false);} else {
Alert ('your browser is not ready yet! ');}})();
I tested it myself. It seems that only Opera browser has the following advantages:
If you are using a newer version of operabrowser, click here: HTML5 result output box demo
This element can also accept an attribute, which reflects the name of the relevant output element, similar to the label working principle.
Original address: http://www.zhangxinxu.com/wordpress? P = 1058, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. Create senders with the Range Input)
HTML5 introduced
RangeType input.<Input type = "range">
It can receive min, Max, step, and value attributes. Although only operabrowser supports this input type,
But when we can actually use it, it will be wonderful!
See the following quick demonstration:
Step 1: Label
First, create a tag<Form method = "Post">
<H4> volume control </H4>
<Input type = "range" name = "range" min = "0" max = "10" step = "1" value = ""/>
<Output name = "result"> </output>
</Form>Step 2: CSS Below, we will use a little style. We will use before and after to inform users of the maximum and minimum values we have set.
Input {font-size: 14px; font-weight: bold ;}
Input [type = range]: Before {content: ATTR (min); padding-Right: 5px ;}
Input [type = range]: After {content: ATTR (max); padding-left: 5px ;}
Output {display: block; font-size: 5.5em; font-weight: bold ;}Step 3: Javascript Finally, we
(Function () {var F = Document. Forms [0], range = f ['range'], result = f ['result'],
Cachedrangevalue = localstorage. rangevalue? Localstorage. rangevalue: 5;
// Check whether the browser is cool enough // Identify range input.
VaR o = Document. createelement ('input'); O. type = 'range'; If (O. type = 'text ')
Alert ('Sorry, your browser is not cool enough. Please try the latest operabrowser. ');
// Set the Initial Value // Set the value to 5 regardless of local storage.
Range. value = cachedrangevalue; Result. value = cachedrangevalue;
// When a value is selected, update the local storage Range. addeventlistener ("mouseup", function (){
Alert ("the value you selected is:" + range. Value + ". I am currently using local storage to save this value. Refresh and detect on modern browsers. ");
Localstorage? (Localstorage. rangevalue = range. Value): Alert ("data is stored in the database or somewhere else. ") ;}, False
); // Display the selected value when sliding Range. addeventlistener ("change", function (){
Result. value = range. value;}, false );})();
You can click here: HTML5 Range Input cool effect demo
My computer is an XP system. The default theme is displayed. After the slider is released, the effects of opera are shown in. Cool:
Thank you for reading this article! We have already discussed a lot, but it may only touch on HTML5. I hope it will be helpful for your learning!
// Zxx: The above is all the translation/editing content. I will not say much about it if I have enough content.
Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 1058
(This article is complete)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
