이 가이드는 HTML 스타터 템플릿이 무엇인지 보여줍니다.
HTML 스타터 템플릿이란 무엇입니까?
HTML 시작 템플릿에는 선언, ,
및 태그, CSS 스타일 및 JavaScript 스크립트의 기본 집합이 포함되어 있습니다. 이러한 태그는 개발자에게 많은 시간과 노력을 절약할 수 있는 웹 페이지를 만들기 위한 기반을 제공합니다.HTML 시작 템플릿은 다음과 같이 나타납니다.
< HTML 단지 = '안에' >
< 머리 >
< 메타 문자 집합 = 'UTF-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 스케일=1' >
< 제목 > 리눅스 < / 제목 >
< 링크 친척 = '스타일시트' 헥사 = './style.css' >
< 메타 http-equiv = 'X-UA 호환' 콘텐츠 = 'ie=가장자리' >
< / 머리 >
< 몸 >
<메인>
< h1 > HTML 스타터 템플릿 < / h1 >
< / 메인>
< 스크립트 소스 = 'index.js' >< / 스크립트 >
< / 몸 >
< / HTML >
HTML 시작 템플릿에서 사용할 수 있는 태그/요소에 대한 지식을 얻으려면 아래 데모를 따르십시오.
태그
“ ” 태그는 파일 유형에 대한 데이터를 포함하고 브라우저에 렌더링 방법을 알려줍니다. 이 태그는 웹 페이지를 구축하는 데 사용되는 HTML 버전에 대한 정보를 제공하여 검색 엔진 최적화에 많은 도움이 됩니다. 이 태그가 HTML 파일에 없으면 웹 브라우저가 예기치 않게 작동하거나 잘못된 요소를 표시할 수 있습니다.
태그
“ ” 태그는 필수 요소이며 모든 HTML 요소의 컨테이너 역할을 합니다. 루트 요소는 제대로 작동하려면 다른 모든 요소를 내부에 배치해야 함을 의미합니다. 이 태그는 웹페이지의 구조와 내용을 정의하고 문서에 대한 메타데이터를 지정하는 데 사용할 수 있습니다. '를 사용하여 단지 ” 속성은 HTML 페이지의 언어를 설정할 수 있습니다.
< HTML 단지 = '안에' >// 암호
< / HTML >
위의 코드 스니펫에서 HTML 페이지 언어는 ' 영어 '.
'' 태그
웹 페이지에 대한 정보는 ' <헤드> ”는 웹페이지에 표시되지 않으며 이 정보는 SEO 목적으로 사용됩니다. 일반적으로 페이지 제목, 설명, 키워드와 같은 메타데이터와 외부 스타일시트, 스크립트 및 기타 리소스에 대한 링크가 포함됩니다.
< 머리 >// 끼워 넣다 암호 여기
< / 머리 >
<메타> 태그
태그는 페이지의 문자 집합, 키워드 및 설명과 같은 HTML 문서에 대한 메타데이터를 제공합니다. 브라우저 엔진 최적화에 필수적인 역할을 합니다. 웹 브라우저가 올바른 인코딩 표준을 사용하여 텍스트를 올바르게 표시하는지 확인합니다. 또한 HTML 페이지와 관련된 키워드 및 설명을 설정하는 데 사용됩니다.
< 메타 ... / ><제목> 태그
“ <제목> ”는 브라우저의 제목 표시줄에 웹 페이지 또는 웹 사이트 이름을 표시하는 데 활용됩니다. 이 태그는 웹 사이트의 웹 페이지를 관리하는 데 유용할 수 있습니다. 설명적이고 의미 있는 제목을 포함하여 SEO 프로세스를 돕고 접근성을 향상시킵니다. 일부 장애가 있는 사용자가 사이트를 보다 쉽게 탐색할 수 있도록 도와줍니다.
< 제목 > 리눅스힌트 < / 제목 >' 안에 위의 코드 줄을 실행 한 후 <헤드> ” 태그를 사용하면 웹페이지가 다음과 같이 나타납니다.
위의 출력은 ' 내부에 제공된 더미 데이터를 표시합니다. <제목> ” 태그가 이제 제목 표시줄에 배치됩니다.
<링크> 태그
이 태그는 HTML 파일을 다른 파일에 연결하여 HTML 파일의 스타일 또는 메서드를 상속하거나 사용하는 데 사용됩니다. 다른 파일은 개발자가 만든 CSS 파일이거나 Bootstrap이나 Tailwind 등과 같은 CSS 프레임워크의 일부 CDN일 수 있습니다. 이를 사용함으로써 코드 라인이 많이 줄어들고 다음에서 활용할 수 있는 사전 빌드 스타일을 제공하기 때문에 널리 사용됩니다. HTML 파일:
< 링크 친척 = '스타일시트' 헥사 = './style.css' >위의 코드 줄에서 ' 스타일.css ” 파일이 HTML 파일과 연결되고 있습니다. 이제 'style.css' 파일 내부에 구축된 클래스에 액세스하여 HTML 파일에 스타일을 적용할 수 있습니다. 예를 들어 ' 다음 CSS 속성을 사용하여 HTML 파일 내에 이미 삽입된 ” 태그:
h1 {font-family: times new roman;
색상 : 다크시안;
}
위의 코드를 ' 스타일.css ” 파일. 렌더링 후 웹 페이지는 다음과 같이 나타납니다.
웹 페이지는 '를 사용하여 외부 CSS 파일의 HTML 요소에 스타일이 적용되었음을 보여줍니다 <링크> ” 태그.
' ' 태그
태그의 주요 용도는 웹 페이지의 보이는 모든 콘텐츠를 포함하는 것입니다. 여기에는 텍스트, 이미지, 비디오 및 웹 페이지의 주요 콘텐츠를 구성하는 웹 페이지의 기타 요소를 삽입하는 데 도움이 되는 여러 태그가 포함됩니다. 웹 페이지에 CSS 속성을 한번에 적용할 때도 활용할 수 있습니다. 또한 시맨틱 태그 및 기타 접근성 기능을 포함하여 웹 페이지의 접근성을 향상시킵니다. < 몸 >
// 여기에 HTML 요소 추가
< / 몸 >
'<스크립트>' 태그
HTML 파일 내의 JavaScript 기능에 액세스하려면 ' <스크립트 > 태그를 사용합니다. 개발자는 스크립트 태그 내부에 JavaScript 코드를 직접 삽입하거나 동일한 '