Home > Article > Web Front-end > HTML5/CSS3 related knowledge explanation

HTML5/CSS3 related knowledge explanation

jackloveOriginal: 2018-05-21 14:53:181251browse

When you encounter some common knowledge points in learning html and css, this article will explain them in detail.

What is HTML5? What are the new features? What new tags are there? How to make lower versions of IE support HTML5 new tags?

HTML5 is the fifth major revision of HTML. It has abandoned many redundant tags and also added many new tags, making HTML more semantic and richer in interactive functions.
In HTML5, it has many new features:
1. More semantic tags, giving web pages better meaning and structure;
2. Support local storage. The web APP has a shorter startup time, faster Internet speed
3, and device compatibility. External applications can be directly connected to the data inside the browser. For example, video and audio can directly interact with microphones and cameras
4, and the connection is faster. Implemented Server-Sent Event and WebSockets, enabling page-based real-time chat, faster web game experience, and more optimized online communication.
5, audio and video tag references, can embed multimedia content on the page
6. Based on svg, the three-dimensional, graphic and special effects characteristics of canvas

The following are some new tags and changes
1. About DOCTYPE

//Previous HTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//HTML5< ;!DOCTYPE htm>

2. About meta

//Previous HTML//HTML5

3. New tag
canvas tag defines graphics, such as charts and other images. This tag is based on the JavaScript drawing API
audio defines audio content
video defines video (video or movie)
source defines multimedia resources

element
footer defines the footer of a section or document
header defines the header area of the document
mark defines text with a mark
meter defines weights and measures. Use only for measures with known maximum and minimum values
nav navigation
progress defines the progress of any type of task
ruby defines ruby annotation (Chinese pinyin or character)
rt defines character (Chinese pinyin or Character) interpretation or pronunciation
rp is used in ruby comments to define the content displayed by browsers that do not support ruby elements
section defines the section (section, section) in the document
time defines the date or Time
wbr specifies where to add line breaks in the text

In the past, we used the

tag to divide page blocks. Now HTML5 has new

, and other new elements, the page structure will be clearer

How to make lower versions of IE also support new HTML5 elements
Method 1
Add JavaScript to

<head>
     <script type="text/javascript">
          document.createElement(&#39;header&#39;)          document.createElement(&#39;footer&#39;)     </script></head>

This way you can use the added tags in IE

Method 2
Use html5shiv.js
Add

<!--[if lt IE 9]>
<script type="text/javascript"  src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

If the browser version is lower than IE9, this script will be parsed

What new types of input are there?

emaliEnter the email address. If it does not meet the email format, it cannot be submitted, and a prompt will pop up.
urlEnter the url, if it does not meet the url format, it cannot be submitted, and a prompt will pop up.
Number can only enter numbers
range a drag control

HTML5/CSS3 related knowledge explanation

range

Date date selection control

Cookies and What is the difference between localStorage? How does localStorage store deleted data?

What is Cookie
Cookie refers to the data that some websites store on the user's local terminal (Client Side) in order to identify the user's identity
Cookie is always stored in the client, according to the storage in the client Location can be divided into memory cookies and hard disk cookies.
Memory cookies are maintained by the browser and stored in the memory. They disappear after the browser is closed, and their existence time is short. Hard disk cookies are stored on the hard disk and have an expiration time. Unless the user manually cleans them or the expiration time is reached, the hard disk cookies will not be deleted and their existence time is long-term. Therefore, according to the existence time, it can be divided into non-persistent Cookies and persistent Cookies
Take login as an example
1. The client sends the user name and password to the server
2. The server authenticates successfully and authenticates the user. The binding of status and SessionID is recorded on the server side
3. When responding to the client, the SessionID will be written in the response header field Set-Cookie
4. The client receives the response and saves the SessionID as a Cookie. Down, from now on, requests sent by the client will carry this Cookie in the request header
What is localStorage
localStorage is an API for local persistent storage of client data
Websites with the same domain name share the same localStorage object, localStorage of different domain names cannot access each other (the same is true for cookies)
The storage space of each domain name is limited, at least 5MB (cookie is only about 4kb)
localStorage uses key-value pairs to store data , the key value must be a string (the same is true for cookies)
What is the difference between cookies and localStorage?
1. The server will bring the cookie when sending the request.
2. The cookie has a storage period and will automatically expire when it expires. However, localStorage will not unless it is manually deleted.
3. The cookie size limit is approximately 4KB. , localStorage is about 5MB

This article will explain tml and css. For more related content, please pay attention to the php Chinese website.

Related recommendations:

Javascript operation DOM common API summary

JavaScript full summary of timers & DOM document

Detailed explanation of how AJAX works and its advantages and disadvantages

The above is the detailed content of HTML5/CSS3 related knowledge explanation. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the steps to pass data in vue componentsNext article：Detailed explanation of the steps to pass data in vue components

See more

HTML5/CSS3 related knowledge explanation

Related articles