20분 안에 HTML5를 이해하고 H5에 어떤 새로운 기능이 있는지 알아보세요.

HTML이란 무엇인가요?

HTML(하이퍼 텍스트 마크업 언어). 하이퍼텍스트 마크업 언어. HTML 텍스트는 HTML 명령으로 구성된 설명 텍스트입니다. HTML 명령은 텍스트, 그래픽, 애니메이션, 사운드, 표, 링크 등을 설명할 수 있습니다. HTML의 구조는 Head와 Body의 두 부분으로 구성됩니다. Head는 브라우저에 필요한 정보를 설명하고 Body는 설명할 특정 내용을 포함합니다. (HTML 비디오 튜토리얼)

HTML5란 무엇인가요?

우리가 HTML5라고 부르는 효과는 HTML의 단독 업그레이드 버전이 아니라 HTML+CSS3+JS의 성능을 결합한 것입니다. HTML은 단지 마크업 언어이지만 의미론적으로 더 최적화되었고, 더 과학적인 것으로 간주되는 일부 태그가 추가되었으며 일부 태그도 제거되었습니다. 그러나 태그는 태그이고 동작은 동작입니다. CSS3가 없으면, JS가 없으면 HTML은 동작이 아닙니다. 항상 HTML만 사용하세요. (html5 비디오 튜토리얼)

간단히 말하면 HTML5는 이전 HTML 버전의 태그보다 더 의미론적이고 표준화되었으며 몇 가지 새로운 태그가 추가되었습니다. 아래 사진을 봐주세요.

이전 웹페이지의 HTML 형식입니다. 새 HTML은 다음과 같습니다.

분명히 HTML5는 이전처럼 더 이상 DIV에 의해 지배되지 않으며 새로운 의미 태그가 추가되었습니다. 통합된 새로운 표준이 있기 때문에 프런트엔드 엔지니어의 팀워크가 더 쉬워질 수 있습니다.

생각해보면 백화점 창고인데 관리자 라오왕이 창고 청소를 하러 와서 온갖 옷, 신발, 백화점을 각기 다른 상자에 넣고 라벨을 붙이고, 그의 이름을 쓰세요. 적절한 이름을 생각해 보세요. 우리는 해당 상자를 DIV로 이해할 수 있으며 레이블의 이름은 클래스와 ID입니다.

자, 질문입니다. 라오왕이 일을 마치고 집에 왔고, 라오리가 인계를 받기 위해 왔다. 라오리는 라오왕이 하는 일을 보고 욕하기 시작했다. 라오왕은 상자에 적힌 라벨을 이해할 수 없어 하나하나 열어야 했기 때문이다. 상자를 하나씩 살펴보게 되면, 그 안에 정확히 무엇이 들어있나요? 이렇게 하면 작업 효율성이 크게 떨어집니다.

현재 HTML5는 표시된 상자를 Lao Wang에게 직접 전달하는 것입니다. 그는 상자에 따라 다른 옷, 모자, 신발을 넣을 수 있습니다. 내가 교대근무를 맡게 되면 훨씬 더 편리해질 거예요. 게다가 HTML5는 Lao Zhang과 Lao Wang이 다른 동료에게 방해를 주지 않고 이전에 복잡한 작업을 독립적으로 완료할 수 있도록 더 많은 태그를 제공합니다.

html5에는 구체적으로 어떤 기능이 있나요?

더 많은 의미 태그(개발자는 더 우아할 수 있고 브라우저는 더 잘 이해할 수 있음)

검색 엔진 검색, 왜 "소개"가 아닌 제목을 검색합니까? 구조의 차이 때문이다. 그러나 구조의 모든 클래스 명명 습관은 다르며 표준화할 수 없으므로 새 태그를 만드는 것이 좋습니다.

일부 하위 버전 브라우저에서는 h5 태그가 호환되지 않으며 p로 간주되어 기능에 영향을 미치지 않습니다. 스크립트에 document.createElement("header") 코드의 새 줄을 추가할 수도 있지만 태그가 많이 사용되므로 document.createElement("") 줄도 많이 작성해야 하므로 세 번째 코드가 있습니다. 파티 플러그인 html5shiv.js

사용법:

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

참고: 페이지에서 호출된 Html5.js 파일은 페이지의 head 요소 내에 추가되어야 합니다. 요소가 구문 분석되기 전에 IE 브라우저가 이를 알아야 하므로 페이지 하단에서 이 js 파일을 호출할 수 없습니다.

애플리케이션 태그

DataList

진행

속성

링크 관계 설명

이 링크된 위치와 현재 문서의 관계

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

rel도 다른 위치에 표시됩니다.

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

링크 자체는 파일을 요청하지 않습니다. rel= "stylesheet"는 파일만 요청합니다

현재 중국에서는 인기가 없습니다

구조적 데이터 태그

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

검색 엔진이 집중할 수 있도록 지원 크롤링

매우 고급이지만 Google만이

ARIA

액세스 가능한 리치 인터넷 애플리케이션

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

지원해야 하는 이유 라벨이 붙었나요?

은 검색 엔진이 이해하기 위한 것입니다

사용자 정의 속성

즉, data-*와 같은 속성은 기능이 없으며 단지 DOM 노드와 밀접하게 관련된 데이터를 저장합니다.

<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前端开发快速入门