Understand HTML5 in 20 minutes and see what new features H5 has

What is HTML?

HTML (Hyper Text Mark-up Language). Hypertext Markup Language. HTML text is descriptive text composed of HTML commands. HTML commands can describe text, graphics, animations, sounds, tables, links, etc. The structure of HTML includes two parts: Head and Body. The head describes the information required by the browser, and the body contains the specific content to be explained. (HTML Video Tutorial)

What is HTML5?

The so-called effect that HTML5 can achieve is not an isolated upgraded version of HTML, but the combined performance of HTML+CSS3+JS. HTML is just a markup language, but it has been more semantically optimized, added some tags that are considered more scientific, and removed some tags, but tags are tags, and behaviors are behaviors. There is no CSS3, no JS, and HTML is not It's always just HTML. (html5 video tutorial)

Simply put, HTML5 is more semantic and standardized than the tags of previous HTML versions, and some new tags have been added. Please look at the picture below:

#This is the HTML form of the previous web page. The new HTML looks like this:

## Obviously, HTML5 is no longer dominated by DIV as before, and new semantic tags have been added. It may make teamwork easier for front-end engineers because there is a unified new standard.

Let’s put it into perspective, it’s a department store warehouse. The administrator Lao Wang came to clean up the warehouse, put all kinds of clothing, shoes, and department stores into different boxes, put labels on the boxes and write his name. Think of a suitable name. We can understand those boxes as DIVs, and the names on the labels are class and ID.

Okay, here comes the question. Lao Wang came home from work, and Lao Li came to take over. Lao Li started to curse after seeing what Lao Wang was doing, because he couldn't understand the labels Lao Wang wrote on the boxes, which made him have to open each box one by one to look at it. What exactly is inside? This greatly reduces work efficiency.

The current HTML5 is to directly hand over the marked boxes to Lao Wang. He can put different clothes, hats and shoes according to different boxes, so that when Lao Zhang It will be much more convenient when I come to take over my shift. And more than that, HTML5 provides more tags so that Lao Zhang and Lao Wang can independently complete some previously complex work without having to trouble other colleagues.

#What exactly does html5 have?

More semantic tags (developers can be more elegant and browsers can understand better)

Search engine search, why does it search for the title and not the "Introduction" ? This is because of the difference in structure. However, everyone's class naming habits of the structure will be different, and it cannot be standardized, so it is better to create new tags.

In some lower version browsers, the h5 tag is incompatible and will be considered p, which will not affect our functions. You can also add a new line of code document.createElement("header") in the script, but as many tags are used, you need to write as many lines of document.createElement(""), so there is a third-party plug-in html5shiv.js

Usage:

<!--[if lt IE 9]><script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->

Note: The Html5.js file called in the page must be added within the head element of the page, because the IE browser must know this before the element is parsed. element, so this js file cannot be called at the bottom of the page.

Application Tag

DataList

progress

Attributes

Link Relationship Describe

What is the relationship between the place linked to and the current document?

<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>

rel also appears in other places,

<link rel="stylesheet" href="css.css">

link itself will not request the file, but rel= "stylesheet" will only request the file

It is not popular in China at the moment

Structure data tag

<p itemscope itemtype="www.baidu.com">        <p itemprop="主人">主人</p>
        <p itemprop="小狗">小狗一</p>
        <p itemprop="小狗">小狗二</p>    </p>

can facilitate search engines to focus on crawling

Very advanced, but only google supports it

ARIA

Accessible Rich Internet Application

<label for="myinput">请输入您的名字</label>
<input type="text" id="myinput">

Why does it have to be labeled for above?

is for the understanding of search engines

Custom attributes

That is, attributes such as data-*, they have no functionality, they are just for Save strongly related data of dom nodes.

<ul id="list"></ul>
    <p id="info"></p>
    <script>        var data={            01:{
                name:"张三",
                age:18
            },            02:{
                name:"李四",
                age:19
            },            03:{
                name:"王五",
                age:20
            }
        };        for (var X in data) {            var item=data[X];            var oli=document.createElement("li");            var olist=document.getElementById("list");
            oli.appendChild(document.createTextNode(item.name));
            olist.appendChild(oli);
            oli.setAttribute("data-name",item.name);
            oli.setAttribute("data-age",item.age );
            oli.addEventListener("click", function () {                var name=this.getAttribute("data-name");                var age=this.getAttribute("data-age");
                alert(age+name)
            })
        }
    </script>

上面的代码用 setattribue 方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){    console.log(this.dataset["name"]);
})

智能表单

新的表单类型

<input type="date">
<input type="color">
<input type="range">

但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。

虚拟键盘适配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。

虽然 input type="email" 看似可以验证表单，但是真是太弱了，只是验证有没有 @ ，真的要验证的话，还是要自己写正则表达式

页面多媒体

音频

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：

<script>        var btn=document.getElementById("btn");        var btn1=document.getElementById("btn1");        var audio=document.getElementsByTagName("audio")[0];
        btn.addEventListener("click", function () {
            audio.play();
        })
        btn1.addEventListener("click",function (argument) {
            audio.pause();
        })
</script>

视频

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我们一般不是这样用的，因为视频有版权，有些浏览器只能支持一两个，我们一般是source：

<video controls="controls"><source src="下午03-网页多媒体.web.mp4"><source src="下午03-网页多媒体.web.ogg"><p>您的浏览器不支持</p></video>

还有一个插件，是可以帮我们做兼容的，是html5media.info/的组件，ie7以上都可以兼容。

以下是多媒体的属性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，现在还没有人用

canvas

2d

3d

svg

优势：体积小，质量高，效果好，可控程度高。

相关推荐：

成为一名优秀的前端工程师需要学什么？

web前端学习路线:WEB前端开发快速入门