10 html5 adds important new features and content
May 30, 2021 Article blog
Table of contents
3. Three: localStorage and sessionStorage
6. Six: Remove the type property from the script and link tags
7. Seven: Contenteditable property
8. Eight: input adds placeholder, required, autofocus, pattern and other properties
Before we start, let's take a look at what html5 is, as Baidu defines html5: the fifth major change to the hypertext markup language (HTML) for an application under the core language of the World Wide Web, the standard universal markup language.
In fact, html5 is a collection of artificially defined rules and new apis. Here's a look at some of the new features of developing commonly used html5:
One: canvas label
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>Rendering results:
This element allows you to draw the pattern you want.
Two: video tag
<video src="视频地址" controls="controls" autoplay="autoplay" >
your browser does not support the video tag //可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
</video>The video label has the following properties:
1.autoplay: If this property appears, the video plays as soon as it is ready
2.controls: If this property appears, the control is displayed to the user, such as a play button
3.height: Set the height of the video player
4.loop: If this property appears, it will play repeatedly
5.preload: If this property appears, the video loads when the page loads and is ready to play. If autoplay is used, the property is ignored.
6.src: Video address
7.width: Set the width of the video player
Three: localStorage and sessionStorage
Web Storage has a similar concept to cookies, except that it is designed for larger storage capacity. The size of the cookie is limited, and every time you request a new page, the cookie is sent in the past, which is an invisible waste of bandwidth, and the cookie also needs to specify a scope that cannot be called across domains.
1.localStorage: For persistent local storage, data never expires unless it is actively deleted.
2.sessionStorage: Used to store data from a session locally that can only be accessed by pages in the same session and destroyed when the session ends. Therefore, sessionStorage is not a persistent local store, but only session-level storage.
Web Storage has methods such as setItem, getItem, removeItem, clear, and so on, unlike cookies where front-end developers need to encapsulate setcookies and getCookies themselves.
sessionStorage.setItem("name", "三十亿少女的梦");
console.log(sessionStorage.getItem("name")); //三十亿少女的梦Four: Semantic labels
Before HTML5 comes out, we build pages with divs, but none of these divs make sense. W e can only think of giving it some identity through attributes such as id. To make it easier for developers to observe and seo (search engine optimization), html5 has introduced these semantic tags.
Header: The header that stands for "page" or "section".
Footer: A footer that represents a "web page" or "section" and usually contains some basic information about the section, such as authors, links to related documents, and copyrighted material.
hgroup: Represents the title of a "web page" or "section", and when an element has multiple levels, it can place h1 to h6 elements within it, such as a combination of the main title and subtitle of an article
nav: The element represents the navigation link area of the page. The main navigation section used to define the page.
aside: is included in the article element as an ancillary information part of the main content, which can be related to the current article information, labels, ranking interpretation, etc.
section: Represents "section" or "segment" in a document, which can refer to segments by topic in an article, and "section" can refer to groupings on a page.
article: Most easily confused with sections and divs, in fact, article represents a self-contained content in a document, page, or website designed to allow developers to develop or reuse independently. E xamples are forum posts, blog posts, a user review, and an interactive widget gadget. (Specialection)
V: The new form control
Form controls such as date( time selection), time (time selection), email (email address), url (link) have been added to html5, and I personally like these additions. For example, the email control, before we do not have this control to judge whether the user entered the email format can only be judged by the js regular expression, but h5 after only use the input type property write email on it, but this is only the basic judgment can not guarantee 100% filtering, in order to be safe, the background or to make e-format judgment.
<input type="email" />
Six: Remove the type property from the script and link tags
After html5, your script and link don't have to add type properties to work just as well, but in order not to make mistakes, it's best to add them.
Seven: Contenteditable property
Any dom node you have can become editable by adding contenteditable "true" is also a great property addition, with which you can simulate textarea.
Eight: input adds placeholder, required, autofocus, pattern and other properties
<input type="text" placeholder="请输入姓名" />
<!--当这个输入框为空时框内显示：请输入姓名 -->
<input type="text" required /> <!--输入框为必填，否则不能提交表单 -->
<input type="text" autofocus /> <!--进入页面，自动聚焦到这个input -->
<input type="text" name="country_code" pattern="[A-z]{3}"> <!--输入值必须与正则匹配-->
Nine: Mark label
Using the mark tag can make your content stand out, and from the word mark you can guess the approximate purpose of the label
Ten: pageInput creates a slider
Html5 references the range type to create a slider that accepts min, max, step, and value properties, and can display min and max values using css's :before and :after, but not very friendly.
<style>
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]:after {
content: attr(max);
padding-left: 5px;}
}
</style>
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ />