1. 첫 번째 단계 : 개발 도구를 열고 지정된 폴더를 엽니 다.
2 단계 : index.html 파일을 디스크에 저장하십시오. .html은 웹 접미사입니다.
3 단계 : HTML5의 기본 형식 쓰기 시작.
<doctype html> // 문서 유형 선언 <html lang = zh-cn> // html 문서가 시작되었음을 나타냅니다. 1. <head> // 문서 메타 데이터 포함 시작 시작 <메타 charset = utf-8> // 선언 문자 인코딩 </title> // 문서 제목 설정 </head> // <body> //의 내용을 의미합니다. html 문서 <a href = http://www.baidu.com> baidu </a> // hyperlink element (tag) </body> // html </html> // html의 끝을 표현합니다. 문서둘. 문서 구조 분석 1. 도구
문서 유형 선언 (문서 유형 선언, DocType라고도 함). 주로 브라우저를 알려줍니다
보기의 파일 유형. 이전 HTML4.01 및 XHTML 1.0에서 특정 HTML 버전 및 스타일을 나타냅니다.
이제 HTML5는 버전과 스타일을 나타내지 않아도됩니다.
<doctype html> //
2.html 요소우선, 요소는 레이블을 의미하고 HTML 요소는 HTML 레이블입니다. HTML 요소는 문서를 시작하고 종료하는 요소입니다. 콘텐츠를 포함하여 이중 레이블, 반향 및 꼬리입니다.
이 요소에는 속성과 값이 있습니다 : lang = zh-cn,
그것은 문서가 언어를 사용한다는 것을 의미합니다 : 단순화 된 중국어.
<html lang = zh-cn> // 영어 인 경우 en '
단순화 된 중국 페이지 : HTML LANG = ZH-CMN-HANS
전통 중국 페이지 : HTML LANG = ZH-CMN-HANT
영어 페이지 : Html lang = en
3. 헤드 요소메타 데이터 컨텐츠를 포함하는 데 사용되며 메타 데이터 데이터는 다음과 같습니다.
<스타일>, <title>. 이 내용은 링크와 같은 브라우저에 대한 정보를 제공하는 데 사용됩니다.
JavaScript 정보를 제공하고 제목은 페이지 제목을 제공합니다.
<head> ... </head> //이 정보는 페이지에 표시되지 않습니다.
<noscript> 요소는 스크립트가 실행되지 않을 때 대체 내용 (텍스트)을 정의하는 데 사용됩니다.
이 태그는 <cript> 레이블을 인식 할 수 있지만 스크립트를 지원할 수없는 브라우저를 인식하는 데 사용할 수 있습니다.
4. 메타 요소이 요소는 문서에 대한 정보를 제공하는 데 사용됩니다. 표현하다
브라우저 페이지에 어떤 코드가 사용되는지 알려줍니다. 물론 파일은 보존됩니다
UTF8 및 브라우저는 UTF8이 중국어를 올바르게 표시하도록 설정합니다.
<meta charset = utf-8> // 코드를 설정하는 것 외에도 기타
5. 제목 요소이름에서 알 수 있듯이이 요소는 매우 간단합니다. 브라우저의 왼쪽 상단에 제목을 설정하십시오.
<title> 기본 구조 </title>
6. 몸체 요소문서 컨텐츠, 즉 브라우저의 영역 부분을 포함하는 데 사용되는 요소. 모든 가시 콘텐츠는 여기에 있어야합니다
내부적으로 요소를 추가하십시오.
<body> ... </body>
7. 요소하이퍼 링크는 나중에 자세히 설명합니다.
<a href = http://www.baidu.com> baidu </a>
삼. 원소 라벨 토론HTML은 마크 언어이며, 우리는 지금 구조에 대해 자세히 논의했습니다. 여기서 다시 분석합시다
레이블 또는 레이블은 종종 서면 요소로 구성된 것으로 부릅니다.
1. 요소요소는 브라우저에 일부 컨텐츠를 처리하는 방법을 알려주는 일련의 레이블입니다. 각 요소에는 다음과 같은 키워드가 있습니다
<body>, <title>, <meta>는 요소입니다. 다른 레이블 이름은 다른 의미를 나타내며 단락 레이블, 텍스트 태그, 링크 레이블, 사진 레이블 등이 포함됩니다.
요소는 일반적으로 단일 태그 (공기 요소)와 듀얼 태그의 두 가지 유형으로 나뉩니다. 단일 레이블은 일반적으로 특정 위안을 선언하거나 삽입하는 데 사용됩니다.
예를 들어, 문의 문자 인코딩은 <Meta>를 사용하고 <Img>은 일반적으로 inction <와 같은 영역의 내용을 설정하는 데 사용됩니다. p> ... </p>.
2. 속성과 값단일 및 이중 분할 외에도 요소의 내부 속성 및 값을 설정할 수 있습니다. 이 속성 값은 요소를 변경하는 데 사용됩니다
행동. 예를 들어, 하이퍼 링크 : <a> href 속성, 다른 웹 사이트에 연결할 수있는 URL을 교체하십시오.
네. 실재HTML 엔티티는 물리적 코드를 통해 특별한 의미 문자로 표시됩니다.
엔티티 번호 설명의 엔티티 이름의 결과 표시
공간
<<<<<<< 2
>> 숫자보다 큽니다
& & & 및 번호
견적 마크
'' ''
¢ ¢ ¢
镑 镑 £ £
圆 圆 ¥ ¥ ¥ ¥
元 元 € 유로
§ § § 작은 축제
权 权 © 저작권
® ® ® 등록 상표
™ ™ ™ 상표
× × × 곱셈 번호
÷ ÷ 숫자를 제외하고
5. 새로운 구조적 레이블기사 요소
페이지의 컨텍스트와 관련이없는 독립적 인 컨텐츠를 나타냅니다. 예를 들어 기사, 블로그 게시물, 포럼 게시물, 사용할 수 있습니다.
섹션 요소
챕터, 헤더, 바닥 글 또는 페이지의 다른 부분과 같은 페이지의 컨텐츠 블록을 나타냅니다. 문서 구조를 나타내는 H1, H2 및 기타 요소와 함께 사용할 수 있습니다. 예 : <섹션> ... </섹션>; </div> html4.
제쳐두고 요소
기사 요소의 내용 외에 기사 요소의 내용과 관련된 보조 정보를 표현하십시오.
헤더 요소
컨텐츠 블록의 제목 또는 페이지의 실제 페이지를 나타냅니다.
HGROUP 요소
실제 페이지 또는 페이지의 제목 블록의 조합을 나타냅니다.
바닥 글 요소
전체 페이지 또는 페이지의 콘텐츠 블록의 각주를 나타냅니다. 일반적으로 그는 제작자의 이름, 창의적 날짜 및 제작자의 연락처 정보를 포함합니다.
NAV 요소
페이지의 탐색 링크의 일부를 나타냅니다.
그림 요소
독립 스트림 컨텐츠 섹션을 나타내며, 일반적으로 문서의 내용에서 독립 단위를 나타냅니다. Figcaption 요소를 사용하여 그림 요소 그룹에 제목을 추가하십시오. 예를 들어:
<Fig> <Figcaption> PRC </figcaption> <p> Peopele 's Republic of China는 1949 년에 태어났습니다 </p> </figure>다섯. 메타 데이터
<Meta> 요소는 문서에서 다양한 메타 데이터를 정의 할 수 있으며 하나의 HTML 페이지는 여러 <Meta>를 포함 할 수 있습니다.
요소.
1. 이름/값 메타 데이터 쌍을 지정하십시오<meta name = author content = bnbbs> <meta name = description content = 이것은 html5 page> <meta name = 키워드 내용 = html5, css3, 응답> <meta name = gen erator content = sublime text 3>
대도시 데이터 이름 설명
저자 현재 페이지의 저자
설명의 현재 페이지에 대한 설명
키워드 현재 페이지 키워드
생성기 현재 페이지의 인코딩 도구
2. 문자 코딩을 선언합니다<meta charset = utf-8>
3. 시뮬레이션 HTTP 헤더 필드// 지정된 URL 로의 5 초 <Meta http-equiv = Crofrement Content = 5; >
속성 값 설명
새로 고침 현재 페이지를 다시로드하거나 URL을 지정합니다. 단위 초.
컨텐츠 유형 문자 코딩을 선언하는 또 다른 방법
육. 글로벌 속성그 전에 우리가 참여한 요소는 로컬 데이터를 설명했으며 물론 우리는 다음과 같은 글로벌 속성도 알고 있습니다.
ID. 글로벌 속성은 모든 요소의 일반적인 동작입니다.
1. 속성<p id = abc> 단락 </p>
설명 : ID 속성은 요소에 고유 식별자를 할당합니다. 이 식별자는 일반적으로 CSS 및 JavaScript를 제공하는 데 사용됩니다.
선택 요소를 호출하십시오. 한 페이지에 한 번 동일한 ID 이름 만 있습니다.
2. 클래스 속성<p class = abc> 단락 </p> <p class = abc> 단락 </p> <p class = abc> 단락 </p>
설명 : 클래스 속성은 요소를 분류하는 데 사용됩니다. 문서의 하나 이상의 요소를 통해 CSS를 동시에 동시에 설정합니다.
방법.
3. Accesskey 속성<입력 유형 = 텍스트 이름 = 사용자 계정 키 = n>
설명 : 바로 가기 작업, Windows에서 Alt+지정된 키, 브라우저 ALT가 충돌하지 않는다는 전제.
4. 콘텐츠에 대한 속성<p contenteditable = true> 수정할 수 있습니까 </p>
설명 : 텍스트를 편집 가능한 상태로 편집 할 수 있으며 False를 편집 할 수 없습니다. 또는 직접
속성을 설정하십시오.
5. 디르 속성<p dir = rtl> 텍스트 오른쪽 </p>
설명 : 왼쪽에서 오른쪽으로 (LTR) 또는 오른쪽에서 왼쪽으로 (RTL) 텍스트를 두십시오.
6. hidden 속성<p hidden> 텍스트 오른쪽 </p>
설명 : 요소를 숨 깁니다.
7. llang 속성<p lang = en> html5 </p>
설명 : 언어를 로컬로 설정할 수 있습니다.
8. 기타 속성<p type = application/x-shockwave-flash> </object>3. 범위 4. 아동 초점 5. 마크
<mark>는 주로 시각적으로 눈에 띄는 단어를 제시하는 데 사용됩니다. <mark> 레이블의보다 일반적인 응용 프로그램은 검색 결과에서 사용자에게 검색 키워드를 표시하는 것입니다.
html5 : <mark> </mark>
html4 : <span> </span>
6. 요약<summary> 태그에는 세부 사항 요소의 제목이 포함되어 있으며 세부 사항 요소는 관련 문서 또는 문서 조각의 세부 사항을 설명하는 데 사용됩니다. 요약 요소는 세부 사항 요소의 첫 번째 하위 요소 여야합니다.
html5 : <details> <summary> html 5 </summary>이 문서는 당신에게 html 5를 떠나야하는 모든 것을 가르쳐줍니다. </details>
html4 : 없음
7. DETALIST<datalist> 레이블은 선택적 데이터 목록을 정의합니다. 입력 요소를 사용하면 입력 값의 드롭 다운 목록을 만들 수 있습니다.
Datalist와 그 옵션은 표시되지 않으며 법적 입력 값 목록 일뿐입니다.
입력 요소의 목록 속성을 사용하여 Datalist를 바인딩하십시오.
<입력 목록 = CRAS /> <DATALIST ID = CARS> <옵션 값 = BMW> <옵션 값 = form> <옵션 값 = Volvo> < /datalist>9. 명령
명령 버튼을 표현하십시오
명령 요소가 메뉴 요소에있을 때만 요소가 표시됩니다. 그렇지 않으면이 요소가 표시되지 않지만 키보드 단축키 키를 지정하는 데 사용할 수 있습니다.
<메뉴> <command onclick = alert ( 'hello world')> 나를 클릭하십시오!여덟. 버려진 라벨
표현 요소
Basefont
큰
센터
세례반
에스
스트라이크
TT
유
올바른 의미론으로 교체하고 CSS를 사용하여 렌더링 후 효과를 보장하는 것이 좋습니다.
프레임과 같은 요소
프레임 워크의 많은 가용성 및 접근성으로 인해 HTML5 사양은 다음 요소를 제거합니다.
액자
프레임 세트
노 프라임
그러나 html5는 iframe을 지원합니다.
속성 클래스
많은 표현 속성이 다음과 같이 새로운 사양에 의해 제거됩니다.
맞추다
링크, vlink, alink, 바디 태그의 텍스트 속성
bgcolor
높이와 너비
iframe 요소에서 속성을 스크롤합니다
Valign
HSPACE 및 VSPACE
테이블 레이블의 CellPadding, Cellspacing 및 테두리 속성
헤더 레이블의 프로필 속성
링크 태그의 대상 속성 a
IMG 및 Iframe 요소의 Longdesc 속성
ABBR은 약어를 대체합니다 (약어를 나타내는 데 사용)
물체 교체 애플릿
Ul은 Dir를 교체했습니다
다른
위에서 설명한 것은 편집자가 소개 한 HTML5의 새로운 레이블입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!