1. HTML5 및 HTML4

1.1 출시 이유 및 목표

H5 문자 인코딩 형식을 다음과 같이 지정합니다.

특정 사용법: 새로운 의미 체계 태그 사용

Email, url, number, range, DatePickers

일부 브라우저에서만 지원되는 요소

二、新增的语义化标签

2.1 新增元素

旅游

上海

2.2 讲解标签

CAR

三、表单内新增的元素和属性

3.1 form 小编俗解：在表单外部的标签可以通过form属性进行链接

3.2 formtarget 属性

3.3 autofocus 获取焦点

3.4 required 属性

3.5 placeholder 属性，用于显示文本未输入内容之前，

3.6 autoComplete 属性

3.7 pattern 属性

3.8 小编有话说

四、新的Javascript选择器

4.1 querySelector()

4.2 querySelectorAll()

五、新增 dom 节点属性

clasList 中的属性和方法

六、JSON 的新方法

6.1 eval

七、自定义标签属性

八、JS加载过程

一般情况

defer (延迟脚本)

집

웹 프론트엔드

HTML 튜토리얼

HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유

php是最好的语言

Jul 30, 2018 pm 03:51 PM

css html html5 javascript

H5가 출시된 이후로 모두가 html5만 기억합니다. html4는 정말 강력하고 웹에서 다양한 용도로 사용됩니다. 문제는 함께 해결해 나가기 때문에 이번 글에서는 HTML5의 새로운 기능을 자세히 소개하겠습니다. 아파치 PHP mysql

시작!

1. HTML5 및 HTML4

1.1 출시 이유 및 목표

의 출현 H5는 웹에서 매우 중요한 의미를 갖습니다. 그의 의도는 현재 웹에 존재하는 모든 종류의 문제를 해결하는 것이기 때문입니다.

웹 브라우저 간 호환성이 매우 낮음
문서 구조가 명확하지 않습니다. 구조, 의미 태그 추가)
웹 애플리케이션의 기능이 제한되어 있습니다

#🎜🎜 #H5의 출현으로 위의 문제가 크게 해결되었습니다

1.2 구문 변경

1.2.1 DOCTYPE 문

H5 문 of DOCTYPE은 다음과 같습니다:

     <!DOCTYPE html>

로그인 후 복사

Html:4s DOCTYPE의 문은 다음과 같습니다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

로그인 후 복사

Html: 4t DOCTYPE의 문은 다음과 같습니다

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

로그인 후 복사

# 🎜🎜#1.2.2 문자 인코딩 지정

H5 문자 인코딩 형식을 다음과 같이 지정합니다.

    <meta charset="UTF-8" />

로그인 후 복사

Html:4s 문자 인코딩을 다음과 같이 지정합니다.

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

로그인 후 복사

# 🎜🎜# 1.2.3 닫는 태그의 요소는 생략할 수 있습니다

무슨 일이 일어나고 있는지 이해하기 위해 간단한 예를 들어보겠습니다

우리는 일반적으로 p 태그를 다음과 같이 작성합니다: # 🎜🎜#

  <body>
  <p>Hello  world!</p>
  </body>

로그인 후 복사

#🎜 🎜#새로운 글쓰기 방식은 다음과 같이 작성할 수 있습니다.

    <body>
    <p/>Hello world!
    </body>

로그인 후 복사

믿을 수 없다면 직접 테스트해 볼 수 있습니다. 매우 간단합니다. 스타일을 별도로 설정하고 동일한지 확인하면 동일하다는 것을 증명할 수 있습니다. 참고: p 태그의 스타일을 설정하세요.

1.2.4 부울 값이 있는 속성(비활성화, 선택됨)

disabled는 주로 입력 요소, 버튼 요소, 옵션 요소 등에 사용됩니다. 요소는 비활성화됩니다. 사용법은 다음과 같습니다.

속성 값이 "false"인 경우 속성 값 "disabled"는 다른 단어 또는 "enabled"("false" 제외)로 대체될 수 있습니다. , 이는 속성이 활성화되지 않았음을 의미합니다. "true" 값은 속성이 활성화되었음을 의미합니다. 다음 코드의 버튼 요소는 모두 비활성화된 상태입니다.

    <input type="button" disabled="true" value="测试按钮">  
    <input type="button" disabled="123" value="测试按钮">  
    <input type="button" disabled=" " value="测试按钮">  
    <input type="button" disabled="any word" value="测试按钮">

로그인 후 복사

다음 코드의 버튼 요소는 활성화된 상태입니다.

    <input type="button" disabled="false" value="测试按钮">  
    <input type="button" value="测试按钮">

로그인 후 복사

checked 사용법은 동일합니다. 장애인이므로 여기서는 더 이상 말하지 않겠습니다.

1.2.5 따옴표 생략(태그의 속성값은 따옴표 생략 가능)

H5 앞의 속성값 쓰는 방법은 이렇습니다 , img 태그의 src 속성을 예로 들어 보겠습니다.

    <body>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png"  class="lazy"   alt="">
    </body>

로그인 후 복사

현재 다음과 같이 작성할 수 있습니다.

    <body>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png"  class="lazy"  sre = HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유  alt = "">
    </body>

로그인 후 복사

둘의 결과는 동일합니다. 이미지는 정상적으로 표시될 수 있습니다

1.3 새로 추가된 시맨틱 태그

시맨틱이란 무엇인가요?

의미화는 합리적인 HTML 태그와 고유 속성을 사용하여 문서 콘텐츠의 형식을 지정하는 것을 의미합니다. 일반인의 용어로 의미론은 기계가 이해할 수 있도록 데이터와 정보를 처리하는 것입니다.

특정 사용법: 새로운 의미 체계 태그 사용

1.4 새로운 "멋진" 태그 요소

video, audio, canvas, embed, mark, 진행률, 미터, 시간 , ruby, rt, rp, wbr, command, Details, datalist, datagrid, keygen, output, source, menu

편집기는 여기에 모두 나열하지 않습니다. Baidu를 직접 사용하세요. 일반적으로 많이 사용되지는 않습니다. 단지 이것만 가지고 있다는 것을 기억하십시오. (면접 시 활용 가능)

1.5 새로운 입력 유형

Email, url, number, range, DatePickers

여기에는 부분적인 설명만 제공됩니다. #🎜 🎜#

번호

    <input type="number" name="">

로그인 후 복사

```
 <input  type = "range" name = "">
```
로그인 후 복사

HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유 나머지 편집자는 테스트하지 않을 것입니다. 관심이 있으면 테스트할 수 있습니다. 그것. !

HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유 더 이상 프레임 사용 안 함

일부 브라우저에서만 지원되는 요소

기타 폐지된 요소
1.7 새로운 전역 속성
전역 속성은 모든 태그를 참조합니다. 사용할 수 있는 속성
contentEditable 속성(콘텐츠 편집 가능 여부 지정)

    <input type="text" name="name" contenteditable="true">

로그인 후 복사

designMode 속성(페이지의 모든 요소에 대해 편집 가능 모드를 활성화하기 위해 js에서 사용됨)

            window.onload = function() {
            document.designMode = "on";
        }

로그인 후 복사

# 🎜🎜#
hidden attribute

spellcheck 속성(문법 검사와 함께 입력 및 텍스트 영역에서 제공되는 새 속성) HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유

#🎜 🎜#

      <a href="javascript:void(0);" tabindex="3">你好</a>
      <a href="javascript:void(0);" tabindex="2">hello world!</a>
      <a href="javascript:void(0);" tabindex="1">html5</a>

로그인 후 복사

HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유

二、新增的语义化标签

2.1 新增元素

页眉

主要用于页面的头部的信息介绍，也可用于板块头部

页脚

页面的底部或者版块底部

导航 (包含链接的的一个列表)

     <nav>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
    </nav>

로그인 후 복사

页面上的一个标题组合

        <hgroup>
                 <h1 id="旅游">旅游</h1>
                 <h2 id="上海">上海</h2>
      </hgroup>

로그인 후 복사

页面上的板块

用于划分页面上的不同区域,或者划分文章里不同的节

用来在页面中表示一套结构完整且独立的内容部分

可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等

该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

用于对元素进行组合。一般用于图片或视频

figure 的子元素,用于对figure的内容进行说明

    <figure>
<!-- (注意没有alt) -->
    <img  src="/static/imghw/default1.png"  data-src="images/225.jpg"  class="lazy"      style="max-width:90%" height="100px" / alt="HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유" >
    <figcaption>薰衣草</figcaption>
</figure>

로그인 후 복사

HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유

2.2 讲解标签

强调独立性
强调分段，一般存在一个标题的
```
    <section>
    <h1 id="CAR">CAR</h1>
    </section>
```
로그인 후 복사
1. 并不是所有的链接组都放在nav标签中，只需要将主要的，基本的放进nav中即可。
一般用于传统导航，侧边栏导航，页内导航、翻页导航
1. 来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
2. 非主体结构标签
Header 元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面和页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据、搜索表单或相关的logo图片。
Footer元素可以作为其上层父级内容区或者一个根区块的脚注。Footer通常包含其相关区块的脚注信息，如作者、相关的阅读链接及其版权信息等
Hgroup元素是将标题及其子标题进行分组的标签。Hgroup标签通常会将h1-h6标签进行分组。譬如一个内容区的标题及其子元素算一组。
Address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、它们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
三、表单内新增的元素和属性
3.1 form 小编俗解：在表单外部的标签可以通过form属性进行链接
eg：
```
    <form id="form1">
    <label for="man">MAN</label><input type="radio" id="man" name="sex">
    <input type="radio" id="woman" name="sex">
    </form>
    <label for="woman" form="form1">WOMAN</label>
```
로그인 후 복사
3.2 formtarget 属性
- _blank 在新窗口中打开。
- _self 默认。在相同的框架中打开。
- _parent 在父框架集中打开。
- _top 在整个窗口中打开。
3.3 autofocus 获取焦点
```
    <input type="text" name="">
    <input type="text" name="" autofocus="autofocus">
```
로그인 후 복사
3.4 required 属性
HTML5中新增的属性可以应用于大多数的输入标签上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。看下面例子：
```
    <form>
    <input type="text" name="" autofocus="autofocus" required>
    <input type="submit" name="">
    </form>
```
로그인 후 복사
3.5 placeholder 属性，用于显示文本未输入内容之前，
```
    <form>
    <input type="text" name="name" placeholder="请输入你的姓名">
    </form>
```
로그인 후 복사
3.6 autoComplete 属性
```
    <form autocomplete="on">
    <input type="text" name="name" placeholder="请输入你的姓名" >
    </form>
```
로그인 후 복사
3.7 pattern 属性
该属性用于正则表达式。见下面小例子：
```
    <form>
    <input type="text" name="content" autocomplete="off" placeholder="请输入邮箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
    <input type="submit">
</form>
```
로그인 후 복사
3.8 小编有话说
新增的表单属性和元素还有很多，在这里我只列举了一些较常用的属性和元素，至于剩余的部分，小伙伴们用到的时候网上搜索就行。好啦！这部分结束，继续下面的内容。
四、新的Javascript选择器
4.1 querySelector()
```
    <p id="box">Hello World！</p>
    <script type="text/javascript">
      var box = document.querySelector("#box");
      box.style.color = "red";
      box.style.fontSize = "24px";
      box.style.fontWeight = "blod";
    </script>
```
로그인 후 복사
4.2 querySelectorAll()
```
    <p id="box">Hello World！</p>
    <p id="box">Hello！</p>
    <p id="box">World！</p>
    <script type="text/javascript">
      var boxList = document.querySelectorAll("#box");
      boxList.forEach(function(item){
          item.style.color = "red";
          item.style.fontSize = "24px";
          item.style.fontWeight = "blod";
      });
    </script>
```
로그인 후 복사
五、新增 dom 节点属性
clasList 中的属性和方法
- length (长度)
```
    <p id="box" class="test  test1   test2  test 3 test4"></p>
    <script>
        var  box = document.querySelector("#box");
        window.onload = function (){
            console.log(box.classList);
            console.log(box.classList.length);
        }
    </script>
```
로그인 후 복사
- add() 增加
```
    <p   id = "box"  class = "test  test1 test2 test3 test4 "></p>    
    <script>
        var box = document.querySelector("#box");
        window.onload = function(){
            box.classList.add("test5");
            console.log(box.classList);
        }
    </script>
```
로그인 후 복사
- remove() 移除
```
    <p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
    var box = document.querySelector("#box");
    window.onload = function (){
        box.classList.remove("test");
        console.log(box.classList);
    }
</script>
```
로그인 후 복사
- toggle() 简单理解：有则删除，没有则添加