HTML5/CSS3 related knowledge explanation-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

HTML5/CSS3 related knowledge explanation

jacklove

May 21, 2018 pm 02:53 PM

csscss3html5

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

JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

See all articles