HTML은 의심 할 여지없이 인터넷의 주요 언어입니다.그에게서 시작되었습니다. 어떤 식 으로든 그는 월드 와이드 웹의 모든 웹 페이지를 만들고 운영하는 데 관여합니다. HTML이 무엇이며 어떻게 작동하는지 이해하지 않으면 원래 문서 인 텍스트의 연속 스트림을 구조화되고 아름답고 사용자 친화적 인 사이트로 전환하는 것은 불가능합니다.
HTML과 월드 와이드 웹
약어는 영어에서 파생되었습니다.HyperText Markup Language 구. 번역은 HTML이 무엇인지 완전히 설명합니다. 이것은 하이퍼 텍스트 마크 업 언어입니다. 인터넷 개발 초기에 나타 났으며 특히 적절하게 디자인해야하는 과학 및 기술 문서가 포함 된 웹 페이지를 디자인하기위한 것입니다.
언어의 창시자 인 Tim Berners-Lee는 다음과 같이 제안했습니다.그것의 도움으로, 다른 도시와 국가의 과학자들 간의 교환을 위해 간단하지만 이해하기 쉬운 문서를 쉽게 만들 수있을 것입니다. 그는 텍스트 형식을 지정하는 요소 인 설명자 세트를 개발했습니다. 이제 우리는 그것들을 태그로 알고 있습니다.
HTML 텍스트를 올바르게 표시하려면 다음이 필요합니다.그것을 처리합니다. 이것은 브라우저와 같은 특수 프로그램에 의해 수행됩니다. 마크 업 페이지를 수신하고 태그 설명자를 해석하며 사용자가 볼 수있는 텍스트를 표시합니다.
언어의 매우 중요한 부분입니다.그 이름은 하이퍼 텍스트 지원입니다. 이는 일부 HTML 페이지에 다른 페이지에 대한 링크가 포함될 수 있음을 의미합니다. 상호 참조 시스템은 과학 기사에서 특히 중요하여 복잡한 용어에 대한 설명에 깊이 들어 가지 않고 필요한 경우 독자를 해당 장으로 보낼 수 있습니다.
언어 발달
시간이 지남에 따라 HTML이었던 간단한 태그 세트존재 초기에 성장하고 강화되었습니다. 이제 멀티미디어 콘텐츠를 페이지에 포함하고 테이블을 만들고 이미지 배열을 제어 할 수 있습니다.
언어의 자발적인 확장을 억제하고 통제해야했으며 특정 표준이 필요했습니다.
1995-세 번째 버전 채택시기사양 및 레이아웃 디자이너의 운명에있는 전환점. 그 당시의 최신 브라우저는 더 이상 허용 된 표준, 즉흥 연주 및 계층화의 구현을 보장 할 수 없었습니다. 모든 인터넷 브라우저는 HTML이 무엇이며 특정 설명자가 어떻게 해석되어야하는지에 대한 고유 한 의견을 가지고 있습니다.
다행히 현재 브라우저 간의 주요 모순이 해결되어 프런트 엔드 개발자의 많은 노력과 신경을 덜어줍니다.
HTML5
다섯 번째 표준은 2018 년과 관련이 있습니다.HTML, 초안은 2007 년 말에 나타났습니다. 그는 웹 페이지의 의미론과 장애가있는 사용자의 접근성에 특히 중점을두고 많은 새로운 요소와 속성을 도입했습니다.
언어는 계속해서 적극적으로 발전하고 향상됩니다.
HTML 기본
주요 HTML 구조는 설명자, 태그 및 엔티티입니다. 도움을 받아 처리 된 일반 텍스트는 웹 문서로 바뀝니다.
하이퍼 텍스트 마크 업 엔터티는 기존 키보드에서 사용할 수없는 특수 유니 코드 문자에 대한 니모닉 코드입니다.
엔티티의 예 :
| < | 열린 꺾쇠 괄호 |
| > | 닫는 꺾쇠 괄호 |
| & larr; | 왼쪽을 가리키는가는 화살표 |
| uarr; | 위쪽을 가리키는 얇은 화살표 |
HTML 엔티티는 앰퍼샌드로 시작합니다.세미콜론으로 끝나고 문자에 대한 기억하기 쉬운 코드를 포함합니다. HTML 코드로 직접 작성할 수없는 문자를 표시 할 수 있기 때문에 중요합니다.
이러한 기호에는 예를 들어 꺾쇠 괄호가 포함됩니다. 하이퍼 텍스트 마크 업 언어에서는 양쪽에서 설명자 이름을 둘러싼 태그 식별자 역할을합니다.
HTML 태그
태그는 웹 문서의 주요 구조 구성 요소입니다. 그들은 개폐 부분과 그 사이의 내용물을 담은 용기입니다.
태그 예 :
<i> 태그 안의 텍스트 </ i>이것은 HTML 설명자입니다. 나는기울임 꼴 서체를 정의합니다. 문자 i는 기울임 꼴 단어의 첫 번째 문자입니다. 그는 가지고있다:
- 개구부
<i>; - 커버 부분
</ i>슬래시의 존재가 특징입니다. - 브라우저에서 구문 분석 한 후 기울임 꼴로 렌더링되는 콘텐츠입니다.
대부분의 설명자는 구조가 같지만 빈 태그 그룹이 적습니다.
가독성을 높이기 위해 <br> 여러 줄로 <br> 분할되어야하는 긴 텍스트입니다.
꼬리표 <br> 구문 분석 후 줄 바꿈으로 바뀝니다. 내용이 없기 때문에 커버 부분이 필요하지 않습니다.
다음 태그도 비어 있습니다.
<시간>텍스트 블록을 서로 구분하는가는 회색 선을 나타냅니다.<입력>대화 형 양식 요소의 전체 제품군을 나타냅니다.<img>이미지 파일 연결;- 여러 서비스 태그-
<메타>,<링크>.
설명자는 여러 수준에서 서로 중첩 될 수 있습니다. 유일한 예외는 콘텐츠를 포함 할 수없는 빈 태그입니다.
태그 속성
웹 문서를 만들 때 매우 중요한 것은 여는 태그 요소에 배치되는 속성입니다. 설명자는 하나 이상의 속성을 가질 수도 있고 전혀 없을 수도 있습니다.
대부분의 경우 속성 사용요소 동작의 일부 측면이 명확 해지고 때로는 시각적 표현을 근본적으로 변경할 수 있습니다. 서비스 목적으로 여러 속성이 사용되므로 CSS 또는 JavaScript에서 HTML 태그를 조작 할 수 있습니다.
속성 설정 :
색상 선택 : <입력 유형 = "체크 박스"이름 = "red"> 빨간색 <입력 유형 = "체크 박스"이름 = "노란색"선택됨> 노란색 <입력 유형 = "체크 박스"이름 = "green"> 녹색다음은 3 개의 대화 형 <input> 요소 그룹입니다. 속성 유형 표시를 확인란으로 정의하고, 이름 특정 필드의 이름과 속성을 포함합니다. 확인중요하지 않은 경우 두 번째 입력을 기본값으로 만듭니다.
설명자에 대해 정의 할 수있는 일반 속성과 특정 태그에 특정한 특정 속성이 있습니다.
범용 속성에는 ID, 클래스, 제목이 포함됩니다.
특정-앞서 언급 한 유형, 확인 된 유형, src, href 및 기타 여러 가지.
구문 기능
HTML 페이지를 받으면 브라우저는이를 구문 분석하고 불필요한 항목을 모두 버립니다. 따라서 대부분의 경우 여러 공백과 줄 바꿈은 무시됩니다.
다음 두 코드 스 니펫은 브라우저에서 완전히 동일하지만 그중 하나는 연속 된 공백을 많이 포함하고 여러 줄로 나뉘고 두 번째 코드는 그렇지 않습니다.
<!-첫 번째 스 니펫-> <p> Lorem ipsum <i> dolor sit </ i> amet. </ p> <p> <b> doloribus sunt, </ b> 광고 제공. </ p> <!-두 번째 스 니펫-> <p> Lorem ipsum <i> dolor sit </ i> amet. </ p> <p> <b> doloribus sunt, </ b> ad provident. </ p>
하이픈과 탭을 사용하여코드의 시각적 구조화이지만 브라우저에는 의미가 없습니다. 경우에 따라 공백 및 들여 쓰기와 함께 원본 텍스트 형식을 유지해야하는 경우 브라우저의 사전 처리없이 콘텐츠를 표시하는 태그가 있습니다. 예를 들면 다음과 같습니다. <프리>.
HTML은 대소 문자를 구분하지 않습니다.즉, 태그, 이름 및 속성 값은 소문자 또는 대문자로 작성 될 수 있으며 두 옵션 모두 브라우저에서 똑같이 올바르게 처리됩니다. 원하는 경우 대문자와 소문자의 조합을 사용할 수도 있지만 이는 코드의 정상적인 인식을 방해합니다.
태그, 속성 및 구문에 익숙해지면 HTML의 기본에서 전체 HTML 문서 구조로 이동할 수 있습니다.
HTML 문서 작성
모든 웹 페이지에는 브라우저에서 올바르게 표시하기 위해 일종의 골격이 있어야합니다.
HTML 문서의 필수 구조는 다음과 같습니다.
- 적절한 브라우저 렌더링을 보장하기위한 doctype 선언
- 전체 페이지에 대한 html 래퍼;
- 전용 서비스 부품
머리.
<! DOCTYPE html> <html> <헤드> <!-브라우저 및 검색 로봇 서비스 정보-> </ head> <본체> </ body> </ html>HTML5에는 태그가 필요하지 않습니다. 몸 그러나 문서에서는 컨텐츠 영역을 표시하는 데 계속 사용하는 것이 좋습니다.
중요하지만 선택적 서비스 설명자는 다음과 같습니다.
- 페이지 제목을 포함하는 제목;
- 인코딩, 현서 정보, http 헤더 및 기타 중요한 설정을 정의하는 메타 태그.
<헤드> <title> 페이지 제목 </ title> <meta charset = "utf-8"> <메타 이름 = "설명"내용 = "검색 로봇 페이지 설명"> </ head>그렇지 않으면 HTML 페이지의 구조는 무엇이든 될 수 있습니다. 그 기능은 특정 프로젝트에 따라 다릅니다.
지켜야 할 주요 규칙모든 웹 문서는 올바른 태그 중첩입니다. 먼저 가장 깊은 중첩 수준에있는 설명자를 닫은 다음 모든 외부 설명자를 하나씩 닫습니다.
<본체> <메인> <기사> <p> 단락 텍스트 </ p> <!-단락이 먼저 닫힙니다.-> </ article> <!-then article-> </ main> <!-다음 기본 태그-> </ body> <!-그리고 마지막으로 문서의 본문->의미 구조
사양 및새로운 디스크립터의 출현으로 웹 문서 작성 기술이 변경되었습니다. 처음에는 텍스트가 단락으로 만 나뉘어 연속적인 흐름으로 진행되었습니다. 그런 다음 테이블 레이아웃 시대가 도래하여 열과 같은 모든 구성에서 페이지에 블록을 배치 할 수있게되었습니다.
CSS가 개발되면서 스타일로 문서를 원하는대로 디자인 할 수 있었기 때문에 테이블 사용이 점차 중단되었습니다.
새로운 HTML 표준은 HTML 문서 구조에서 의미론을 환영합니다. 이는 다음과 같은 의미 태그를 사용하여 달성됩니다. 헤더, 보행인, 본관, 조, 탐색, 부분 다른 사람.
인터넷의 주요 언어는 매우 간단합니다. 누구나 HTML이 무엇인지 파악하고 자신의 웹 페이지를 만들어이 지식을 성공적으로 적용 할 수 있습니다.
