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