프런트 엔드 인터뷰 요약 -HTML

0. 상단에서 편집하고 완료 후 뒷면에 넣기

1. doctype의 역할은 무엇입니까?

DOCTYPE ( document type)은 현재 작성된 HTML 버전을 브라우저에 알려주는 마크 업 언어로 된 문서 유형 선언의 약자입니다.

HTML 4.01과 HTML5의 DOCTYPE의 차이점

  • HTML 4.01의 doctype은 HTML 4.01이 文档类型定义Document Type DefinitionSGML ( 标准通用标记语言 国际上定义电子文档和内容描述的标准)을 기반으로하기 때문에 DTD ( ) 인용 해야합니다 .
  • HTML 5는 SGML을 기반으로하지 않으므로 DTD를 인용 할 필요는 없지만 브라우저 동작을 표준화하기 위해 doctype이 필요합니다 (html 5는이 명령문을 단순화하여 브라우저가 통합 표준을 사용하도록 지시합니다).

두 가지 버전의 선언 방법

HTML 5 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 4

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

2. HTML, XHTML 및 XML의 차이점은 무엇입니까?

  • HTML : 하이퍼 텍스트 마크 업 언어 / 하이퍼 텍스트 마크 업 언어
  • XML : 확장 가능한 마크 업 언어 / 확장 가능한 마크 업 언어
  • XHTML : 확장 가능한 하이퍼 텍스트 마크 업 언어 / 확장 가능한 하이퍼 텍스트 마크 업 언어

XML은 데이터를 전송하고 저장하도록 설계되었습니다.

HTML은 데이터를 표시하도록 설계되었습니다.

HTML

HTML은 웹 페이지의 내용을 설명하고 정의하는 데 사용되는 마크 업 언어이며 웹 페이지를 구성하는 가장 기본적인 것입니다.

소위 하이퍼 텍스트는 텍스트를 표시하는 것 외에도 그림, 링크, 오디오 및 비디오와 같은 다른 콘텐츠를 표시 할 수도 있음을 의미합니다.

XML

XML은 자체적으로 태그를 "발명"할 수 있습니다. 이것은 "확장 가능"의 의미이기도합니다.

XML은 특별한 것이 아닙니다. 일반 텍스트입니다. 일반 텍스트를 처리 할 수있는 모든 소프트웨어는 XML을 처리 할 수 ​​있습니다.

XHTML

HTML과 XML의 조합은 XHTML을 생성합니다. 더 엄격하고 순수한 HTML 버전입니다.

상속 측면에서 HTML은 SGML (Standard General Markup Language) 및 매우 유연한 마크 업 언어를 기반으로하는 응용 프로그램이며 XHTML은 SGML의 하위 집합 인 XML (Extensible Markup Language)을 기반으로합니다.

3. 데이터 속성이란 무엇입니까?

HTML5에서는 data-* ( 自定义数据属性)를 접두사로 사용하여 일부 데이터에 액세스하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다.

사용하는 방법?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="div1" data-id="myId" data-id-and-class="Hello">test2</div>
    <div id="div2" myName="Hello">test</div>
    <script>
        var div1 = document.getElementById("div1");
        //获取自定义的值
        var myId = div1.getAttribute("data-id");
        var my = div1.getAttribute("data-id-and-class");
        console.log(myId); // myId
        console.log(my); // Hello
        
        //设置自定义的值
        div1.setAttribute("data-name", "nicai")

        var div = document.getElementById("div2");
        var myName = div.getAttribute("myName");
        console.log(myName); //Hello
        </script>
</body>
</html>

getAttribute이 방법은 모든 최신 브라우저에서 작동하지만 HTML5 사용자 정의 데이터-* 속성이 사용되는 목적이 아니며 이전에 사용했던 사용자 정의 속성도 사용합니다.

4. HTML 의미론의 이해?

웹 의미론에 대한 심층적이고 간단한 언어 이해 _ 프론트 엔드 라운드 -CSDN 블로그 _ 웹 의미 이해 https://blog.csdn.net/weixin_45844049/article/details/109508985

5. HTML5 란 무엇입니까? HTML5와 HTML의 차이점은 무엇입니까?

HTML5 란?

HTML5HTML, 새로운 표준은, 그것의 주요 목표는 것입니다 모든 컨텐츠를 전송하는 등의 별도의 플러그인없이 Flash, Silverlight여기에는 애니메이션, 비디오, 풍부한 그래픽 사용자 인터페이스 등이 포함됩니다.

차이점

문서 선언 유형의 관점에서 :

  • HTML기억하기 힘든 긴 코드입니다. 다음 코드 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • HTML5그러나 기억하기 쉬운 단순한 진술 만이 있습니다. 다음과 같이 :
<!DOCTYPE html>

의미 구조의 관점에서 :

  • HTML4.0: 구조의 의미를 반영하는 태그는 없으며 일반적으로 <div id="header"></div>웹 사이트의 헤드를 나타 내기 위해 이러한 방식 으로 이름 지정 됩니다.
  • HTML5: 의미론에서 큰 장점이 있습니다. 그것은 같은 몇 가지 새로운 태그, 제공 <header>등을 : <article>, <footer>,.

문법 처리의 관점에서 :

HTML은 부정확 한 문법을 ​​처리 할 수 ​​없으며 HTML5는 부정확 한 문법을 ​​처리 할 수 ​​있습니다.

6. 일반적으로 사용되는 메타 태그는 무엇입니까?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

<meta>: 문서 레벨 메타 데이터 요소

meta 요소로 정의되는 메타 데이터 유형은 다음과 같습니다.

  • name 속성이 설정된 경우 meta 요소는 전체 페이지에 적용되는 문서 수준 메타 데이터를 제공합니다.
  • http-equiv 속성이 설정된 경우 meta 요소는 컴파일 명령이며 제공된 정보는 유사한 이름의 HTTP 헤더와 동일합니다.
  • charset 속성이 설정된 경우 meta 요소는 사용할 문자 인코딩을 문서에 알려주는 문자 집합 선언입니다.
  • itemprop 속성이 설정된 경우 meta 요소는 사용자 정의 메타 데이터를 제공합니다.

7. src와 href의 차이점은 무엇입니까?

src는 무엇입니까

src는 source의 약어로 외부 파일의 참조를 나타내고 외부 리소스의 위치를 ​​나타내며 참조 된 파일을 html 페이지의 지정된 위치로로드합니다.

src 속성은 페이지 콘텐츠의 필수 부분으로, 일반적으로 js 스크립트, img 그림 및 프레임과 같은 요소에 사용됩니다. 예 :

<script src="script.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<img src="2.png" />
<img src="https://apps.bdimg.com/img/2.png" />

href는 무엇입니까

href는 네트워크 리소스의 위치를 ​​나타내는 하이퍼 텍스트 참조를 의미하는 Hypertext Reference의 약어이며 페이지와의 직접적인 관계는 링크의 관계입니다.

<link href="reset.css" rel=”stylesheet“/>
<a href="https://www.php.cn/">

차이점

  • Src는 외부 리소스의 위치를 ​​나타냅니다. 가리키는 콘텐츠는 문서의 현재 태그 위치에 포함됩니다. src 리소스가 요청되면 지정된 리소스가 다운로드되어 js 스크립트와 같은 문서에 적용됩니다. img 사진 및 프레임. 브라우저가 요소를 구문 분석 할 때 리소스가로드, 컴파일 및 실행된다는 것을 알고 다른 리소스의 다운로드 및 처리를 일시 중지하므로 일반 js 스크립트가 헤드 대신 맨 아래에 배치됩니다.
  • href는 현재 요소 또는 문서와 연결을 설정하는 데 사용되는 네트워크 리소스의 위치 (하이퍼 링크)를 의미합니다. 브라우저가 다른 사람이 가리키는 파일을 인식하면 현재 문서를 중지하지 않고 리소스를 병렬로 다운로드합니다. 的 处理。 치료.

추천

출처blog.csdn.net/weixin_45844049/article/details/115032739