head 태그에는 어떤 속성이 있나요?-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

head 태그에는 어떤 속성이 있나요?

不言

Mar 21, 2019 am 11:29 AM

html html5 javascript

이 글의 내용은 head 태그에 어떤 속성이 있는지에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

head 태그에는 무엇이 들어있나요?

모든 HTML 문서에는 필수 태그인 가 있습니다. 컨테이너로서 주로 HTML 문서 자체의 정보(메타데이터)를 설명하는 데 사용되는 태그가 포함되어 있습니다. 주로 브라우저와 검색 엔진용으로 페이지에 표시됩니다.

, , <script> </p> <p style="white-space: normal;">메타 정보 태그 소개</p> <p style="white-space: normal;"><title></p> <p>브라우저의 제목 표시줄이나 탭 페이지에 표시되고 일반적으로 전체 웹 페이지의 내용을 완전히 요약하는 문서의 제목을 정의합니다. </p> <p style="white-space: normal;"><base></p> <p>페이지의 모든 상대 URL에 대한 기반을 제공합니다. 문서에는 <base> 태그가 하나만 있을 수 있습니다. </p> <p>현재 저는 이 태그를 사용하는 "타오바오"만 관찰했습니다. </p> <p style="white-space: normal;"><link></p> <p>아래와 같이 주로 링크 스타일 시트에서 외부 리소스와 현재 문서 간의 관계를 지정합니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>물론 다른 기능도 많이 있습니다. </p> <ol><li>예를 들어, 다음과 같은 용도로 사용됩니다. SEO, 주로 검색 엔진용 보기: </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre><div class="contentsignin">로그인 후 복사</div></div> <p>웹사이트에는 동일한 페이지를 가리키는 여러 URL이 있는 경우가 많습니다. 위 태그는 검색 엔진에 페이지의 기본 URL이 무엇인지 알려줍니다. 메인 페이지를 삭제하고 다른 중복 페이지를 제거하세요. </p> <ol><li>rss 구독 제공: </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre><div class="contentsignin">로그인 후 복사</div></div> <p>위 태그는 검색 엔진에서 이해할 수 있을 뿐만 아니라 많은 브라우저 플러그인에서도 인식될 수 있습니다. </p> <ol><li>은 페이지 아이콘을 나타냅니다. </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>대부분의 브라우저는 이 링크의 리소스를 읽고 페이지에 표시합니다. </p> <ol><li>페이지 사전 처리 제공: </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>도메인 이름에 대한 DNS 쿼리를 미리 수행하세요. 경우에 따라 도메인 이름을 강제로 미리 가져오는 것이 유용할 수 있습니다. </p> <p>예를 들어, 웹사이트 홈페이지에서는 자주 참조되는 도메인 이름이 홈페이지 자체에서는 사용되지 않더라도 웹사이트 전체에서 미리 확인되도록 강제합니다. 홈 페이지의 성능은 영향을 받지 않지만 전반적인 사이트 성능은 향상됩니다. </p> <p><style></p> <p>문서의 스타일 정보를 포함합니다. </p> <p><meta></p> <p>일반적으로 키-값 쌍으로 나타나는 일반 메타데이터 정보 표현 태그: <meta name="xxx" content="yyy"></p> <p>charset attribute</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>From Starting HTML5부터는 현재 문서에서 사용하는 문자 인코딩을 선언하기 위해 위의 작성 방법을 권장하며, <head>에 먼저 넣는 것이 좋습니다. </p> <p style="white-space: normal;">http-equiv 속성</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>HTML4에서 위 코드는 문자 집합을 선언하는 데 사용되었지만 이제는 더 이상 사용되지 않습니다. </p> <p>content-type 외에도 몇 가지 다른 값이 있습니다: </p> <p>content-언어(구식), set-cookie(구식), default-style, 새로 고침, content-security-policy</p> <p>일반적으로 사용되지 않기 때문입니다. , 그래서 하나씩 소개하지는 않겠지만, 관심이 있으시면 여기를 클릭해 자세히 알아볼 수 있습니다. </p> <p style="white-space: normal;">name 속성</p> <p>사실 <meta> 태그는 읽는 쪽과 쓰는 쪽 모두 이름과 내용의 형식에 동의하는 한 자유롭게 정의할 수 있습니다. 예를 살펴보겠습니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"></pre><div class="contentsignin">로그인 후 복사</div></div> <p>위 사용법은 HTML 표준은 아니지만 모바일 개발의 사실상 표준입니다. 다음은 content의 내용에 대한 설명입니다. </p> <p>width: 페이지 너비(양의 정수일 수 있음) 또한 문자열 "device-width"일 수도 있습니다. 이는 장치 너비와 동일함을 의미합니다. height: 페이지 높이(양의 정수일 수 있음) 문자열 "device-height"일 수도 있으며 이는 장치 높이와 동일함을 의미합니다. 초기 규모: 초기 규모 조정. 최소 규모: 최소 크기 조정 비율입니다. maximum-scale: 최대 스케일링 비율. user-scalable: 사용자 확장을 허용할지 여부입니다. 뷰포트 외에도 </p> <p>name 속성 값에는 </p> <p>application-name, 작성자, 설명, 생성기, 키워드, 리퍼러, 로봇 등 꽤 많은 값이 있습니다. </p> <p>마찬가지로 하나씩 소개하지는 않겠습니다. 관심이 있으시면 여기를 클릭하여 자세히 알아보세요. </p> <p><script></p> <p>은 실행 가능한 스크립트를 포함하거나 참조하는 데 사용됩니다. 스크립트 태그의 몇 가지 일반적인 전역 속성을 살펴보겠습니다. </p> <p>async</p> <p>는 브라우저가 다른 스레드를 사용하여 스크립트를 다운로드하도록 하며 페이지 렌더링을 차단하지 않습니다. 스크립트가 다운로드되면 브라우저는 렌더링을 일시 중지하고 스크립트를 실행하며 실행 후 페이지를 계속 렌더링합니다. </p> <p>async는 스크립트의 실행 순서를 보장할 수 없습니다. 먼저 다운로드된 스크립트가 먼저 실행됩니다. </p> <p>연기</p> <p>은 또한 브라우저가 스크립트를 병렬로 다운로드하도록 하지만 다운로드가 완료된 후 즉시 실행되지는 않습니다. 대신 DOM이 로드될 때까지 기다립니다(즉, </html> 태그). 방금 읽었습니다) 스크립트를 실행하기 전에. </p> <p>defer는 스크립트가 실행되는 순서가 페이지에 나타나는 순서와 동일하도록 보장합니다. </p> <p>src</p> <p>외부 스크립트를 참조하는 주소를 정의하세요. 이 속성을 지정하는 스크립트 태그에는 스크립트가 포함되어서는 안 됩니다. 스크립트 파일이 영어가 아닌 문자를 사용하는 경우 문자 인코딩도 기록해야 합니다. 예: </p> <p><script charset="utf-8" src="https://www.example.com/script.js"></script>
type # 🎜🎜#

기본값은 text/javascript