How much do you know about HTML5 tips?
- 1. New document type (Doctype)
- 2. HTML `` tag
- 3. Figure elements
- 4. No more need for scripts and link types
- 5. Quotation marks
- 6 、 contenteditable
- 7. Semantic
- 8, IE Japanese HTML5
- 9. Audio support
- 10. Regular expressions
- 11. Detect browser support for attributes
- 12. Mark element
- 13. When to use <div>
1. New document type (Doctype)
<!DOCTYPE html>
Note : Your doctype statement needs to appear on the first line of your html file.
2. HTML <tt> <i> <b> <big> <small>tags
It turns out that you can use the <small> element to create a subtitle that is closely related to the logo. However, now that HTML5 has modified this usage, the <small> element has been redefined, or more appropriately, it is now used to represent small print or other side notes (for example, the copyright notice at the bottom of the website).
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>
3. Figure elements
Are you still considering using the following code to mark up pictures?
<img src="../cat.jpg" alt="猫">
<p style="margin-left: 160px;">这只猫好可爱</p>
The above code cannot be associated with the title of the figure in a simple and semantically relevant way, because it is only wrapped with paragraph tags and image elements, and HTML5 improves this by introducing the <figure> element. When combined with the <figcaption> element, we can pair the figure caption with the figure. code show as below:
<figure>
<img src="../cat.jpg" alt="猫">
<figcaption>
<p style="margin-left: 140px;">这只猫好可爱</p>
</figcaption>
</figure>
4. No more need for scripts and link types
Most likely you still add type attributes to your links and script tags like the code below.
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
In HTML5, this is no longer needed. It means that these two tags represent style and script respectively. Therefore, we can delete all their type attributes. code show as below:
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5. Quotation marks
Remember, HTML5 is different from XHTML, if you don't like it, you don't have to wrap the attributes in quotes. However, if you feel that using quotation marks will make you more comfortable, of course there will be no problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cat {
margin-left: 140px;
}
</style>
</head>
<body>
<figure>
<img src="../cat.jpg" alt="猫">
<figcaption>
<p class = cat>这只猫好可爱</p>
</figcaption>
</figure>
</body>
</html>
6 、 contenteditable
One of the very powerful features of HTML5 is "contenteditable", which, as the name suggests, will allow users to edit any text content contained in an element (including its child elements). It has a wide range of uses, such as simple task lists or wiki-based sites. In addition, it has the advantage of using local storage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory</li>
<li> Watch video of self </li>
</ul>
</body>
</html>
7. Semantic
This part of the content is introduced in another article of the blogger, if you want to know about the semantics of HTML5 in the past
8, IE Japanese HTML5
IE understands that new HTML5 elements require a certain amount of effort. In order to ensure that new HTML5 elements can be displayed correctly as block-level elements, it is necessary to define their styles with the following code:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
Even so, IE still doesn't know what these elements are, so it ignores these formats, and the following code is needed to solve this problem:
document.createElement("article");
document.createElement("footer");
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
9. Audio support
**Note:** If you want to learn more about the new features of audio and video, you can refer to another blogger's article
HTML5+CSS3.
We no longer need to rely on third-party plug-ins to provide audio. HTML5 provides the audio element <audio>. Currently, only the latest browsers support HTML5 audio. At this point, it is better to provide some backward compatibility.
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>
Speaking of audio formats, neither Mozilla nor Webkit fully supports it. Firefox wants to see an .ogg file, and the Webkit browser only supports the most common .mp3 extension. This means that, at least for now, you should create two versions of audio. When Safari loads the page, it does not recognize the .ogg format file and will skip it and move it to the mp3 version. Please note that IE does not support it. Opera 10 or lower only supports .wav files.
10. Regular expressions
Thanks to the properties of the new mode, we can insert a regular expression directly into the code.
<form method=post action=”">
<label for=”username”>create a username: </label>
<input id=”username” type=”text” name=”username” placeholder=”4 required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”>
<button type=”submit”>Go </button>
</form>
If you are familiar with regular expressions, you will notice this new pattern: [A-Za-z]{4,10} only accepts uppercase and lowercase letters. This string must have a minimum of four characters and a maximum of ten characters.
11. Detect browser support for attributes
As mentioned earlier, not all browsers support these attributes. Is there any way to determine whether the browser can recognize them? This question is very well asked. Here are two ways to introduce you. The first option is to use Modernizr to detect, or you can create and analyze these elements to see what capabilities the browser has. For example, in the previous example, if we want to determine whether the browser can execute the pattern attribute, we can add JavaScript to the page:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
In fact, this is a very common way to determine browser compatibility. The jQuery library takes advantage of this technique. In the above code, we create a new input element and confirm whether the pattern attribute can be recognized. If it can be recognized, the browser supports this function, otherwise it does not support it.
<script>
if (!’pattern’ in document.createElement(‘input’) ) {
// do client/server side validation
}
</script>
Remember, this will need to rely on JavaScript to achieve!
12. Mark element
The main function of the <mark> element is to highlight text that needs to be visually highlighted to the user on the page. The string wrapped in this tag must be related to the user's current behavior. For example, if I search for "Open your Mind" in some blogs, I can use JavaScript in the <mark> tag to wrap every action.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </h6>
</body>
</html>
13. When to use <div>
Do I still need to use the <div> tag? Of course it needs. For example, if you want to wrap a piece of code in an element, especially for content positioning, <div> will be a very ideal choice. However, if this is not the case, but a list of links to wrap blog posts or footers, it is recommended that you use the <article> and <nav> elements respectively.
The content of this blog is referenced from the WeChat public account "Web front-end development"
https://mp.weixin.qq.com/s/Bh2Kb3LYGXxCkKq6o2yUsQ
If there is any infringement, please contact the blogger to delete qq:1105810790