HTML 5.1 New features and application examples of new features and application

As we all know, HTML5 belongs to the Wanwei Network Alliance (W3C). This organization provides standards for the entire network industry. The formation of the formation can be connected around the world. In November 2016, W3C updated the long -term exercise HTML 5 standard, which was the first small update in 2 years. Many initially proposed HTML 5.1 functional features have been removed due to design defects and lack of support from browser manufacturers.

Although there are some elements and function improvements, it is brought into HTML 5.1, it is still a small update. Some of these new elements include combined labels. Now this element includes <Dialog>, <details>, <summary> and <picTure>, so that developers provide more space for expressing creativity and content.

W3C and the beginning of the development of HTML 5.2 draft are expected to be released at the end of 2017. What we want to present here is the new functional characteristics and function improvement introduced in version 5.1. You don't need to move JavaScript to use these features. Not all browsers support these features, so you should check them to check the support of the browser before applying them to the production environment.

Most people who use target = '_ Blank' do not know a interesting fact-the newly opened label can change Window.Opener.Location to some network fishing pages. It will represent you on the open page to perform some malicious JavaScript code. Because the user believes that the opening page is safe, they will not doubt.

In order to completely eliminate this problem, HTML 5.1 has standardized the use of the REL = Noopner property that is standardized by isolation of the browser context. REL = NOOPENER can be used in <a> and <rea> tags.

 <A href =# target = _blank Roth = noopner> The link want make trouble anymore </a>

The <FIGCAPTION> tag represents the title or legend associated with the <figure> element, which is usually used as a container for visual elements such as pictures, charts, illustrations. In the early HTML version, <FIGCAPTION> can only be used as the first or last <figure> sub -label. HTML5.1 has relaxed this limit, and now you can use <FIGCAPTION> anywhere in the <figure> container.

 <Artlicle> <H1> The Headline of Todays News /Figure> <p> This is The Forth Hike in Petrol Prices in Two Month and the Third in Case of Diesel in One Fortnight. </P> </Article>

Spellcheck is an enumeration attribute that can take the value of the empty string, true and false. If the state is specified to be True, it means that the element will accept the spelling and grammar inspection of it.

Element.Forcespellcheck () will force user agents to report spelling and grammar errors detected on the text element, even if the user never focuses the input on the element.

 <p Spellcheck = True> <Label> name: <input Spellcheck = False ID = Textbox> </Label> </p>

The new version of HTML allows you to create an empty <option> element. It can be a sub -element of <Optgroup>, <DataList> or <select> element. You will find that this feature can help when designing a unilateral user -friendly table.

The Boolean variable AllowFullScreen property developed for Frame allows you to control whether the content can be displayed through the screen by using the RequestFullScreen () method. For example, we use iframes embedded in YouTube as an example. You need to set the AllowFullScreen property to allow the player to display the video full -screen.

 <Artadicle> <Header> <p> <IMG SRC =/Usericons/16235> <b> Fred Flintstone </b> </p> <p> <A href =/Posts/30934 R = BookMark> 12:44 < /a> — <A href =#A.503439551> Private Post </a> </p> </header> <p> <p> Check out my new video! </p> </main> < /Article>

HTML5.1 allows you to embed Header and FOOTER in another header. You can add a header or footer to the head elements, if they contain themselves in the paragraph content. If you want to add detailed elaboration such as <section> and <Article> tags to semantic paragraph elements, this feature will become very useful.

In the following code, the <Article> label contains a <header> tag, which has a <aside> tag with a <weader> tag.

 <Artader> <Header> <H2> LESSON: How To Cook Chicken </h2> <ASIDE> <Header> <h2> About the author: tom haank </h2> <a href =./tomhank/> Contact him! </a/p> </header> <p> Expert in nothing but cooking. The cookbook signshow. </P> </header> <p> <nS> Pour the Marinade Into Into Into Into Into Into Into Into Into Into Into The Zip-Top Bag with The Chicken and Seal It. Remove as Much Air As Posses from the Bag and Seal It. </P> </Article>

The new version of HTML allows you to add zero width pictures. This feature can be used when the picture does not need to be displayed to the user. If an IMG element has other uses, it is not just a picture, for example, as part of the service to calculate the number of page views, use 0 values ​​in the Width and Height properties. For pictures of 0 width, it is recommended to use empty attributes.

 <IMG SRC = TheimageFile.jpg Width = 0 Height = 0 SRC = "/Uploads/Allimg/170217/22010Q544-0.jpg"/>
 The new REPORTVALIDITY () method allows you to check a form and reset results, and report errors to users in the browser suitable position. User agents can report more than one restriction rule, if a single element encounters multiple problems at the same time. For this situation, the password input is a must -fill content but not filled, and it will be identified as an error.
 <H2> Form Validation </h2> <p> Enter Details </p> <FORM> <Label> MANDATORY Input Type = Password name = Password required/> </label> <Button type = Subm it> submit </ Button> </Form> <Script> Document.quryselector ('Form'). Reportvalidity () </script>
 6. The context of the browser
 In HTML 5.1, you can use the <Menu> mark to define the menu, which contains one or more <Menuitem> elements, and then uses the ContextMenu property to bind it to any element. The ID of the <Menu> element should be consistent with the value of the ContextMenu attribute of the element we want to add the context menu to it.
 Each <Menuitem> can have one of the following three forms:
 Radio -Get option from a group;
 Checkbox -Select or cancel the option;
 Command -execute a action when clicking.
 <H2 ContextMenu = Popup-Menu> Right Click to get the context menu demo. </h2> <Menu type = context id = Popup-menu> <Menuitem type = CheckBox Checked = TR UE> Checkbox 1 </Menuitem> <Menuitem Type = Command Label = Command Onclick = Alert ('Warning')> Checkbox 2 </Menuitem> <Menuitem Type = Radio name = Group1> Radio Button A </Menuitem T YPE = Radio name = Group1 Checked = True> Radio Button B </Menuitem> <Menuitem Type = Checkbox Disabled> Disable Menu item </Menuitem> </Menu>
 5. Use encrypted random numbers on scripts and styles
 Cryptographic Nonce is a randomly generated number, which can only be used once, and for each page request, it has to be generated. This NONCE attribute can be used in <Script> and <style> elements.
 It is generally used in the content security strategy of a website to determine whether a specific style and script should be implemented on the page. In the code provided below, this value is hard -coded, but in the actual use scenario, this value is randomly generated.
 <script Nonce = 'D3NE7UWP43BHR0E'> The JavaScript Code </Script>
 4. Reverse sequence link relationship
 The REV attribute is defined in HTML4, but it does not appear in HTML5. W3C is decided to re -include REV attributes in <a> and <link> elements. The relationship between the current and reverse link documents of the REV attribute identification. It has been included to support the widely used data structure mark format, RDFA.
 Let's use two documents to give an example. Each contains one course. Links between them can be defined using the following REL and REV attributes.
 // document with url chapter1.html <link href = lesson2.html rel = next reV = prev> // documente with url chapter2.html <link href = lesson1.html = PREV Rev = Next> <link href = lesson3. html Roth = NEXT Rev = Prev>
 3. Display/hide information
 The new <details> and <summary> elements allow you to add extension information to a paragraph. You can display or hide an additional information block through the click element. By default, the additional information is hidden.
 In the code, you should put the <summary> mark in the <details> mark, as shown below. After the <summary> label, you can add other content to be hidden.
 <section> <h3> Error Message </h3> <details> <summary> This file has't benload download du network error. </Summary> <DT> </dt> <d> PASSCODE.TXT </DD> <DT> File Size: </DT> <DD> 8 KB </DD> <DT> ERROR CODE: </DT> <DD> 342A </DD> </DL> </ Details> </section>
 2. More input item types
 The HTML input item element has expanded three input types-week, month, and DateTime-Local.
 As the name shows, the first two elements allow users to choose a week value and one month value. Depending on the support of the browser, they will be rendered into a drawing calendar displayed, allowing you to choose one specific week or month of a year.
 Datatime-Local represents a date and time input domain, but there is no time zone settings. Its data can be selected in a similar method to the Month or Week input item, and the time can be entered alone.
 <section> <h2> Week, Month and Datetime-Local </h2> <form action = action_page.php> Choose a Week: <input type = week name = year_week> <input = submit> </Form> <FOR Action = ACTION_PAGE.PHP> BIRTHDAY (MONTH and Year): <input type = month name = bdaymonth> <input type = submit> </form> <FORM ACTION = ACTION_PAGE.PH P> Joining (date and time): <input type = DateTime-Local Name = BDAYTIME> <input Type = Submit Value = Send> </Form> </Section>
 1. Response image
 The W3C introduces some functional characteristics, and the response image can be achieved without using CSS. They are ...
 srcset image attribute
 SRCSET attribute allows you to specify multiple optional image sources, corresponding to different pixel resolution. It will allow the browser to display the appropriate quality implementation according to the different user devices. For example, it is better to display a low -resolution picture for users with slow mobile devices.
 You can use the srcset property and bring its own X modification symbols to describe the pixel ratio of each picture. If the user's pixel ratio is equal to 3, the picture of HIGH-Res is displayed.
 <IMG SRC = Clicks/Low-Res.jpg SRCSET = Clicks/Low-Res.jpg 1x, Clicks/Medium-Res.jpg 2x, Clicks/High-Res.jpg 3X>
 In addition to the pixel ratio, you can also choose to use the W modification symbol to specify pictures of different sizes. In the following example, the High-Res image is defined as a display when the width is 1600px.
 <IMG SRC = Clicks/Low-Res.jpg SRCSET = Clicks/Low-Res.jpg 500W, Clicks/Medium-Res.jpg 1000W, Clicks/High-Res.jpg 1600W>
 Sizes image attribute
 Most of the time, creators like to display different pictures for different screen size. This can be achieved with the size attribute. It allows you to adjust the width for the size of the space distributed to the image display, and then use the srcset property to select the appropriate picture to display. For example…
 <IMG SRC = Clicks/Low-Res.jpg Sizes = (Max-Width: 25EM) 60VW, 100VW SRCSET = Clicks/Low-Res.jpg 500W, Clicks/Medium-Res.jpg 1000W, Clicks/High- res.jpg 1600W>
 Here, the SIZES attribute defines 100%of the image width of the window when the window is greater than 25 EM, or 60%of the view width of the view when it is less than equal to 25EM.
 picture element
 PICTURE element allows you to declare pictures for different screen size. This can be implemented by encapsulating <IMG> with <PICTURE> element and describing multiple <Source> sub -elements.
 <Piction> Marking alone does not show anything. You have been assumed that the default image source will be declared as the value of the SRC attribute, and the optional image source will be placed in the SCRSET attribute. As shown below::
 <picture> <Source Media = (Max-Width: 25em) srcSet = Clicks/Small/Low-Res.jpg 1x, Clicks/Small/Medium-Res.jpg 2X, Clices/Small/High-Res.jp. g 3x> < Source Media = (MAX-WIDTH: 60em) SRCSET = Clicks/Large/Low-Res.jpg 1x, Clicks/Large/Medium-Res.jpg 2x, Clices/Large/High-Res.jpg 3X> <IMG SRC = CLicks /Default/Medium- Res.jpg> </Piction>
 Summarize
 The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate.