</p> 이 기사에서는 자신의 HTML5 템플릿을 만드는 방법을 안내합니다. HTML 기본 템플릿의 주요 요소를 설명하고 마지막으로 사용할 수 있고 추가 빌드 할 수있는 간단한 템플릿을 제공합니다.
이 기사를 읽은 후에는 자신의 HTML5 템플릿이 있습니다. 지금 HTML 템플릿 코드를 받으려면이 기사를 나중에 읽으십시오. 여기에 마지막 HTML5 템플릿이 있습니다. 
키 포인트 </p>
</p>
재사용 가능한 템플릿에 필요한 HTML 요소가 포함되어 있기 때문에
html5 템플릿 섹션의 주요 요소에는 일반적으로 SEO에 대한 메타 데이터, CSS 스타일 시트에 대한 링크 및 선택적 JavaScript 파일이 포함됩니다. </p>
html에서 태그를 사용하는 방법
</p> 섹션에는 문자 인코딩 및 CSS 파일에 대한 링크 및 JavaScript 파일과 같은 최종 사용자에게 표시되지 않은 문서에 대한 중요한 정보가 포함되어 있습니다. 이 정보는 브라우저, 검색 엔진 및 스크린 리더와 같은 기계에서 사용됩니다.
위의 … 사이에 포함 된 모든 요소는 중요하지만 최종 사용자는이를 볼 수 없습니다. 텍스트를 제외하고는 온라인 검색 및 브라우저 태그에 나타납니다. </p>
html에서 태그를 사용하는 방법
섹션에는 텍스트, 이미지 등과 같은 브라우저에 표시된 모든 것이 포함되어 있습니다. 최종 사용자에게 무언가를 보여 주려면 … </p> 태그 사이에 배치하십시오.
요소는 위의 코드 (<🎜 🎜>)와 같이 이상적으로 속성의 값은 이며 문서가 영어로 작성되었음을 지정합니다. 다른 모든 언어에는 프랑스어로 <🎜 🎜>
<<> </p> 은 무엇을 의미합니까? <<>
<🎜 🎜>
로 설정되고 값은 <🎜 🎜>입니다. 이것은 모바일 장치 전용입니다. 값의 두 부분이 있음을 알 수 있습니다. </p>
<🎜 🎜> <<> : 웹 사이트를 제시하려는 뷰포트의 픽셀 너비.
<<> : 이것은 0.0에서 10.0 사이의 양수 여야합니다. "1"값은 장치 너비와 뷰포트 크기 사이의 1 : 1 비율을 나타냅니다. </p>
, 설명 및 저자
</p>이 <🎜 🎜> 요소는 소위 오픈 그래프 프로토콜을 사용하며 사용할 수있는 다른 요소가 많이 있습니다. 이것들은 가장 자주 사용하는 요소입니다. Open Graph 웹 사이트에서 사용 가능한 Open 그래프 메타 옵션의 전체 목록을 볼 수 있습니다. 여기에 포함 된 요소는 소셜 미디어 게시물에 연결될 때 웹 페이지의 모양을 향상시킵니다. 예를 들어, 여기에 포함 된 5 개의
<<> 컨텐츠 제목 <🎜 🎜>
<<> 제공 콘텐츠 유형
<🎜 🎜> </p> 요소는 웹 브라우저를 외부 스타일 시트로 가리켜 이러한 CSS 스타일을 페이지에 적용 할 수 있도록합니다. <🎜 🎜> 요소는 속성이 <🎜 🎜>를 요구합니다. 과거에는 일반적으로 요소를 사용할 필요가 없다는 점에 주목할 가치가 있습니다. 요소 (또는
물론, 그러한 가정은 확인되지 않으며 접근성 문제가있을 수 있지만 거의 모든 브라우저에서 올바르게 렌더링됩니다. 예외는 이전 버전의 Internet Explorer (IE)입니다. 버전 9 이전에 IE는 인식되지 않은 요소를 수신 스타일로부터 차단했습니다. 렌더링 엔진은 이러한 신비한 요소를 "알 수없는 요소"로 취급하므로 외관이나 행동을 바꿀 수 없습니다. 여기에는 상상 한 요소뿐만 아니라 새로운 HTML5 요소를 포함하여 이러한 브라우저 버전을 개발할 때 정의되지 않은 요소도 포함됩니다.
</p>
및 를 가르쳐 줄 것입니다. 2020 년 9 월에 완전히 다시 작성되었으며 다른 곳에서 읽지 않은 최첨단 기술이 포함되어 있습니다.
CSS 지식을 연마하기 위해 최신 CSS 프로젝트 과정은 CSS3의 최신 고급 버전을 마스터하는 데 도움이 될 것입니다. </p>
<,> 그 외에도 인터랙티브 및 프로그래밍 방식의 반응성 UI를 통해 웹 사이트 또는 웹 응용 프로그램 개발을 다음 단계로 끌어 올릴 수 있습니다. 예를 들어, JavaScript에서 SitePoint의 방대한 리소스를 살펴보고 React를 살펴보십시오. 최고의 스캐 폴딩 웹 도구 및 라이브러리에 대한 가이드를 사용하여 새로운 프로젝트를 더 빨리 시작하는 방법을 배우십시오. 또는 코딩을 학습하지 않고 웹 경험을 구축하려면 Codeless Movement에 대한 스타터 가이드를 읽으십시오. 최신 코드리스 도구는 게임 체인저입니다. 처음으로 그들은 많은 경우 코딩에 대한 강력한 대안을 제공하기에 충분한 힘을 가지고 있습니다.
<<> html5 템플릿 faq <🎜
</p> 예. 템플릿은 캐릭터 인코딩, <🎜 🎜> 및 요소, CSS 및 JavaScript 파일과 같이 모든 웹 페이지에 나타나는 기본 요소에 대한 링크가 포함 된 매우 간단한 HTML 초보자 템플릿입니다.
html에서 템플릿을 만드는 방법은 무엇입니까?
및 </p> 요소입니다. HTML5 템플릿에는 모든 웹 페이지에 필요한 모든 기본 시작 코드가 포함되어 있습니다.
템플릿에 Favicon 및 Apple Touch 아이콘을 포함하여
html5 템플릿의 구조 HTML 템플릿이란 무엇입니까? <meta charset="utf-8">
그 구조를 자세히 살펴 보겠습니다.
요소
, 설명 및 저자
<title></title> 섹션에 있습니다. 요소는 HTML 파일의 최상위 요소입니다. 이는 문서의 DocType를 제외한 모든 것을 포함한다는 것을 의미합니다. 요소는 두 부분으로 나뉩니다. 웹 페이지 파일의 다른 모든 컨텐츠는 요소 내부 또는 내부에 배치됩니다. 다음 코드는 DocType 선언 후에 위치한 및
</p> 속성은 무엇입니까? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<🎜>
</body>
</html>
속성을 포함해야합니다. 주요 목적은 스크린 리더에게 큰 소리로 읽을 때 발음하는 방법과 같은 보조 기술을 알려주는 것입니다. (이 속성은 페이지 유효성 검사에는 필요하지 않지만 대부분의 유효성 검사기는 포함하지 않으면 경고를 발행합니다.) </p>
lang, 독일어로 , 힌디어 등의 값이 있습니다. (Wikipedia에서 전체 언어 코드 목록을 찾을 수 있습니다.) </p>
<🎜 🎜> <<> HTML 문서 문자 인코딩 <html> 섹션의 첫 번째 줄은 문서의 문자 인코딩을 정의하는 줄입니다. 웹 페이지에서 읽은 문자와 기호는 일련의 숫자로 정의되며 일부 문자 (예 : 문자)는 여러 가지 방법으로 인코딩됩니다. 따라서 웹 페이지를 인코딩 해야하는 컴퓨터를 참조하는 것이 유용합니다. 표시기 문자 인코딩은 유효성 검사기의 경고를 일으키지 않는 선택적 기능이지만 대부분의 HTML 페이지의 경우 다음에 권장됩니다.
lang
<🎜 🎜> <<> 참고 : 일부 이전 브라우저가 문자 인코딩을 올바르게 인코딩하는지 확인하려면 전체 문자 인코딩 선언을 문서의 첫 512 문자 어딘가에 포함시켜야합니다. 또한 컨텐츠 기반 요소 (예 : 뒷부분의 뒷부분에 나타나는 <html lang="en"> 요소) 앞에 나타나야합니다. </p> <<>
lang
UTF-8은 전 세계의 다양한 언어로 된 많은 문자를 포함하여 다양한 캐릭터와 많은 유용한 기호를 포함합니다. 월드 와이드 웹 얼라이언스 (World Wide Web Alliance)는 다음과 같이 설명합니다
en
<-based> UNICODE 기반 인코딩 (예 : UTF-8)은 여러 언어를 지원할 수 있으며 모든 언어 혼합 페이지 및 양식에 적응할 수 있습니다. 또한 사용하면 서버 측로 로직을 제거 할 수 있으므로 각 서비스 페이지 또는 각 수신 양식 제출에 대한 문자 인코딩을 개별적으로 결정할 수 있습니다. 이는 다국어 웹 사이트 또는 응용 프로그램을 처리하는 복잡성을 크게 줄입니다. fr
X-UA-Compatible 에서이 줄을 볼 수 있습니다 : <🎜 🎜>.
<head>
</p>이 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<🎜>
</body>
</html>
<!DOCTYPE html>
<meta> <🎜 🎜>
viewport
width=device-width, initial-scale=1 <<>는 브라우저의 제목 표시 줄 (예 : 브라우저 탭 위로 마우스를 마치면)에 표시되는 내용이며 검색 결과에도 표시됩니다. 이 요소는 </p> 섹션에서 유일하게 필요한 요소입니다. 설명 및 저자 Metaelements는 선택 사항이지만 검색 엔진에 중요한 정보를 제공합니다. 검색 결과에서 위의 코드 예제의 제목 및 설명은 다음과 같습니다.
위에서 언급했듯이 모든 메타 요소는 선택 사항이지만 SEO 및 소셜 미디어 마케팅에 적합합니다. HTML5 템플릿의 다음 부분에는 이러한 메타 요소 옵션 중 일부가 포함되어 있습니다.
width=device-width
initial-scale <<> 소셜 카드의 그래프 요소 열기 <meta>
섹션에서 볼 수 있습니다.
HTML 템플릿에 CSS 스타일 시트를 포함시킵니다
속성이 있었지만 실제로는 필요하지 않았으므로 웹에 포함 된 이전 코드를 찾으면 삭제하십시오. </p>
<link> 섹션. 이는 레이아웃을 실험 할 때 매우 편리하지만,이 스타일은 다른 페이지에서 액세스 할 수 없으므로 비효율적 및/또는 중복 코드를 초래하기 때문에 활성 사이트에서는 일반적으로 권장하지 않습니다. <style>
</style> <head>를 통과합니다
<<>
와 같은 많은 새로운 요소를 포함했습니다. 미확인 요소에 대한 지원이 구형 브라우저의 주요 문제라고 생각할 수도 있습니다. 그러나 그렇지 않습니다! 대부분의 브라우저는 실제로 사용하는 태그를 신경 쓰지 않습니다. </pre>
⋮
<p>
</body> 요소)를 포함하는 HTML 문서가있는 경우 CSS가 해당 요소에 특정 스타일을 첨부하는 경우 거의 모든 브라우저 가이를 완전히 처리 할 수 있습니다. . </p> <<> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<🎜>
</body>
</html>
<article> <<> html5 템플릿을 완료하십시오 <aside> <recipe>
<ziggy>
웹 페이지를 디자인 할 때는 빈 .html 페이지로 시작하여 모든 지루한 코드를 처음부터 쓰는 것보다 더 나쁜 것은 없습니다. 당사의 HTML5 템플릿은 실행을 시작 해야하는 모든 HTML 템플릿 코드를 제공하여 고유 한 디자인과 컨텐츠 작업을 즉시 시작할 수 있도록 제공합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<🎜>
</body>
</html>
위 내용은 HTML5 템플릿 : 모든 프로젝트를위한 기본 스타터 HTML 보일러 플레이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
