일부 HTML 코드 작성 스타일 제안 요약_HTML/Xhtml_웹 페이지 제작

리소스 파일을 생략하는 프로토콜

사진, 미디어 파일, 스타일, 스크립트의 URL에서 프로토콜 부분(http:, https:)을 생략하는 것이 좋습니다. 프로토콜 부분을 생략하면 리소스 파일이 페이지 URL의 프로토콜을 상속하지 않습니다. 콘텐츠 혼합 문제를 방지할 수 있을 뿐 아니라 페이지 크기를 줄일 수도 있습니다. 예를 들어 JavaScript 파일을 참조하는 방법은 다음과 같이 제안할 수 있습니다.

h4, h5, h6 태그는 왜 거의 사용되지 않나요?

제목 태그에는 h1부터 h6까지 포함됩니다. 우리는 일반적으로 h1, h2, h3을 사용하지만 h4, h5, h6은 거의 사용하지 않습니다.

합리적으로 의미가 있고 (레이아웃에 CSS를 사용하지 않고) 그대로 실행할 수 있는 웹 사이트에서는 제목 태그에 의미가 있을 뿐만 아니라 일부 스타일링 효과도 있습니다. 그러나 오늘날 CSS가 대중화되면 h1과 h6을 사용하는 것이 좋습니다. 실제로는 큰 차이는 없지만 외관상 부담없이 사용할 수 있다는 차이점이 있습니다.

제목 태그로서 더욱 강력한 기능을 가지고 있습니다. 제목 요소는 페이지에서 가중치가 높은 키워드를 의미하므로 h4, h5, h6의 가중치를 부여하기 위해 h1, h2, h3가 자주 사용됩니다. 값이 높지 않고, Strong이나 em만큼 좋지도 않아서 거의 사용되지 않는 것으로 추정됩니다. 권한 수준은 다음과 같습니다.

h1 > h3 > 강력 > h4 > h6

thead, tbody, tfoot 중 언제 사용하나요?

원래 thead는 th와 같은 테이블 제목 단위를 담는 테이블 헤더로 사용되는 줄 알았는데, tbody는 테이블 내용을 담는 데 사용되었고, tfoot은 실제로 테이블 설명을 담는 데 사용되었습니다. 맞습니다. 이 태그는 실제로는 필요하지 않습니다.

브라우저에서는 일반적으로 테이블이 표시되기 전에 전체 테이블을 다운로드해야 하기 때문에 이는 테이블 레이아웃 시대의 사용자 읽기에 영향을 미치기 때문에 이러한 태그는 테이블을 여러 테이블 부분으로 나누고 다운로드된 항목을 사용합니다. 또한, 긴 양식을 인쇄할 때 각 페이지에 머리글과 바닥글이 나타날 수 있습니다.

선택 태그 생략
드림웨이브를 사용해 본 학생들은 HTML 파일을 만들 때 기본 코드가 다음과 같은 느낌을 받았을 것입니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. html>
2. 머리>
3. 머리>
5. 몸>
6. 몸>
7. html>

헤드 영역에는 제목, 외부 CSS, 자바스크립트 참조를 넣고 페이지에 표시되는 내용은 본문에 배치하겠지만 사실 html, head, body는 모두 생략 가능한 태그입니다.

이러한 선택적 태그를 삭제하면 이상해 보이지만 페이지가 정상적으로 표시되고 W3C 감지가 통과할 수 있습니다. 하지만 페이지를 작성하려면 한 가지 주의할 점이 있습니다. XHTML을 사용하는 경우에는 다음 코드가 명령문으로 필요하므로 html 태그를 유지하세요.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. html xmlns="http://www .w3.org/1999/xhtml"> 

b태그와 i태그

많은 사람들이 b 태그와 i 태그가 u 태그와 같은 운명을 가지고 있다고 생각하며 W3C에서는 "권장하지 않는 태그"로 분류합니다. 그러나 HTML5 사양에서는 이 두 태그를 여전히 권장하고 있습니다. 나는 항상 이것을 알고 있었고 친구들과 논쟁을 벌이기도 했습니다. 그러나 HTML5에서 어떻게 정의해야 하는지 전혀 이해하지 못했습니다.

시간 태그

hr은 콘텐츠를 구분하는 수평선입니다. 저는 항상 hr이 형편없는 것이라고 생각했습니다. 실제로 CSS로 처리할 수 있는지 여부에 관계없이 hr은 의미적으로 구분선입니다. 기사의 맥락이 완전히 분리되어 있어 관련성이 없습니다.

hr은 의미상 동일하고 크롤러도 이를 이해할 수 있다는 점을 제외하면 많은 블로그 게시물에 나타나는 아래 그림의 구분선과 같은 기능을 합니다.

왜 태그를 버튼으로 사용하나요?

IE 하위 버전에서는 hover 효과를 볼 수 없기 때문에 input type="button"이 아닌 것은 이해할 수 있습니다. 그런데 왜 a 태그가 href 없이 버튼으로 만들어졌을까요? .. 이 접근 방식이 맞나요? 아직 생각해 본 적이 없는데, 예전에는 조건 반사 같았어요.

후기

Google의 HTML/CSS 코딩 스타일 가이드는 매우 유용하지만, 들여쓰기에 공백 두 개를 사용하도록 권장하는 항목이 있습니다. 네, 저희 팀은 아직도 탭을 사용하고 있습니다.

이 설명서의 많은 HTML 제안은 HTML5용이지만 여기서는 XHTML 스타일이 아닌 HTML 스타일이 사용됩니다. 실제로 코드 생략은 코드의 가독성을 약화시킵니다. .