Home Web Front-end JS Tutorial HTML5/CSS3 related knowledge explanation

HTML5/CSS3 related knowledge explanation

May 21, 2018 pm 02:53 PM
css css3 html5

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>
Copy after login

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]-->
Copy after login

in

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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to write split lines on bootstrap How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to set up the framework for bootstrap How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What Does H5 Refer To? Exploring the Context What Does H5 Refer To? Exploring the Context Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles