Detailed introduction of 28 new features of h5
1. New Doctype
Even if you use , even if the browser does not understand this sentence, it will render it in standard mode
You can also consider using the weird box pattern
2. Figure element
Use
<figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. Redefined
has been redefined and is now used to mean Small typesetting, such as the copyright statement at the bottom of the website
4. Remove the type attribute in the link and script tags
5. Add/without brackets
HTML5 does not have strict requirements for attributes Add quotes, close or not, but it is recommended to add quotes and closing tags
6. To make your content editable, just add a contenteditable attribute
7. Email Inputs
If When we set the input type to email, the browser will verify whether the input is of email type. Of course, we cannot just rely on the front-end verification, the back-end must also have corresponding verification
8. Placeholders
The meaning of this input attribute is that there is no need to use javascript to achieve the placeholder effect
9. Local Storage
Using Local Storage can permanently store large data fragments on the client (unless Active deletion), currently supported by most browsers, you can check whether window.localStorage exists before using it
10. Semantic header and footer
11. More HTML5 form features
12. IE and HTML5
By default, HTML5 new elements are rendered inline, but you can use the following method to
render them in block
header, footer, article, section, nav, menu, hgroup {
display: block;
}Unfortunately IE will ignore these styles. You can fix them as follows:
document.createElement(”article”); document.createElement(”footer”); document.createElement(”header”); document.createElement(”hgroup”); document.createElement(”nav”); document.createElement(”menu”);
13. hgroup
is generally used in the header to group a group of titles together, such as
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>
14. Required attribute
The required attribute defines whether an input is required. You can declare
<input type=”text” name=”someInput” required>
or
<input type=”text” name=”someInput” required=”required”>
# as follows ##15. Autofocus attribute Just like its meaning, it is to focus on the input box
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio support HTML5 provides
17. Video support Much like Audio, the
18. PreloadingVIDEO The preload attribute is as simple as its literal meaning. You need to decide whether you need to preload the video when the page loads
<video preload>
19. Display video Control
<video preload controls>
20. Regular Expression Due to the pattern attribute, we can use regular expressions directly in your markup
<form action=”" method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>21. Detecting attribute support In addition to Modernizr, we can also simply detect whether some attributes are supported through javascript, such as:
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>22. Mark element Think of the element as a highlight. When I select a piece of text, the markup effect of javascript on HTML should be like this: <h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
23. When to use
HTML5 has introduced so many elements, so do we still need to use p? You can use p when there is no better element.
24. Want to use HTML5 immediately? Don’t wait for 2022, you can use it now, just do it.
25. What is not HTML5 1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data attribute
<p id=”myp” data-custom-attr=”My Value”> Bla Bla </p>
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>27. Output元素
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
The above is the detailed content of Detailed introduction of 28 new features of h5. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Introducing the latest Win 11 sound tuning method
Jan 08, 2024 pm 06:41 PM
After updating to the latest win11, many users find that the sound of their system has changed slightly, but they don’t know how to adjust it. So today, this site brings you an introduction to the latest win11 sound adjustment method for your computer. It is not difficult to operate. And the choices are diverse, come and download and try them out. How to adjust the sound of the latest computer system Windows 11 1. First, right-click the sound icon in the lower right corner of the desktop and select "Playback Settings". 2. Then enter settings and click "Speaker" in the playback bar. 3. Then click "Properties" on the lower right. 4. Click the "Enhance" option bar in the properties. 5. At this time, if the √ in front of "Disable all sound effects" is checked, cancel it. 6. After that, you can select the sound effects below to set and click
PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions
Feb 25, 2024 am 11:15 AM
PyCharm is a powerful Python integrated development environment with rich functions and tools that can greatly improve development efficiency. Among them, the replacement function is one of the functions frequently used in the development process, which can help developers quickly modify the code and improve the code quality. This article will introduce PyCharm's replacement function in detail, combined with specific code examples, to help novices better master and use this function. Introduction to the replacement function PyCharm's replacement function can help developers quickly replace specified text in the code
What is Dogecoin
Apr 01, 2024 pm 04:46 PM
Dogecoin is a cryptocurrency created based on Internet memes, with no fixed supply cap, fast transaction times, low transaction fees, and a large meme community. Uses include small transactions, tips, and charitable donations. However, its unlimited supply, market volatility, and status as a joke coin also bring risks and concerns. What is Dogecoin? Dogecoin is a cryptocurrency created based on internet memes and jokes. Origin and History: Dogecoin was created in December 2013 by two software engineers, Billy Markus and Jackson Palmer. Inspired by the then-popular "Doge" meme, a comical photo featuring a Shiba Inu with broken English. Features and Benefits: Unlimited Supply: Unlike other cryptocurrencies such as Bitcoin
Introduction to the eighth color weapon of Neon Abyss
Mar 31, 2024 pm 03:51 PM
The eighth color is a weapon in Neon Abyss. Many players want to know about the ballistics of the eighth color of the weapon and how to play with the weapon strength. So let’s take a look at the detailed guide to Neon Abyss’ eighth color weapon trajectory, weapon strength, and weapon gameplay. Neon Abyss Color 8 Detailed Guide Weapon Introduction: The Wizard’s Secret Weapon! Weapon attack speed: Normal Weapon strength: Moderate Weapon gameplay: The attack method of the eighth color is three single-target attacks and then launches a ray. Ballistic display:
Introduction to the online score checking platform (convenient and fast score query tool)
Apr 30, 2024 pm 08:19 PM
A fast score query tool provides students and parents with more convenience. With the development of the Internet, more and more educational institutions and schools have begun to provide online score check services. To allow you to easily keep track of your child's academic progress, this article will introduce several commonly used online score checking platforms. 1. Convenience - Parents can check their children's test scores anytime and anywhere through the online score checking platform. Parents can conveniently check their children's test scores at any time by logging in to the corresponding online score checking platform on a computer or mobile phone. As long as there is an Internet connection, whether at work or when going out, parents can keep abreast of their children's learning status and provide targeted guidance and help to their children. 2. Multiple functions - in addition to score query, it also provides information such as course schedules and exam arrangements. Many online searches are available.
Detailed introduction of Samsung S24ai functions
Jun 24, 2024 am 11:18 AM
2024 is the first year of AI mobile phones. More and more mobile phones integrate multiple AI functions. Empowered by AI smart technology, our mobile phones can be used more efficiently and conveniently. Recently, the Galaxy S24 series released at the beginning of the year has once again improved its generative AI experience. Let’s take a look at the detailed function introduction below. 1. Generative AI deeply empowers Samsung Galaxy S24 series, which is empowered by Galaxy AI and brings many intelligent applications. These functions are deeply integrated with Samsung One UI6.1, allowing users to have a convenient intelligent experience at any time, significantly improving the performance of mobile phones. Efficiency and convenience of use. The instant search function pioneered by the Galaxy S24 series is one of the highlights. Users only need to press and hold
Are there any class-like object-oriented features in Golang?
Mar 19, 2024 pm 02:51 PM
There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes
Choose the applicable Go version, based on needs and features
Jan 20, 2024 am 09:28 AM
With the rapid development of the Internet, programming languages are constantly evolving and updating. Among them, Go language, as an open source programming language, has attracted much attention in recent years. The Go language is designed to be simple, efficient, safe, and easy to develop and deploy. It has the characteristics of high concurrency, fast compilation and memory safety, making it widely used in fields such as web development, cloud computing and big data. However, there are currently different versions of the Go language available. When choosing a suitable Go language version, we need to consider both requirements and features. head
