HTML로 사진을 표시하는 방법 ----img와 배경의 차이점

이 장에서는 html---img와 배경의 그림 표시 방법의 차이점을 소개하여 html로 그림을 표시하는 두 가지 방법의 차이점을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 파싱 메커니즘에서

img는 html 태그에 속하고 배경은 CSS 방식입니다. 페이지는 html, css, js로 구성됩니다. 브라우저 구문 분석 메커니즘에 따라 html 태그가 먼저 구문 분석됩니다. CSS 파일이 헤드에 로드된다는 것은 누구나 알고 있지만 이는 즉시 실행된다는 의미가 아니라 html이 로드된 후에만 실행된다는 의미입니다. 따라서 로고 등 중요한 요소에는 img를 사용해야 합니다.

배너, 광고 이미지 등 단순히 사진만 표시하려는 경우 배경 방식을 사용하는 것이 좋습니다. 대역폭을 점유하고 데이터 혼잡을 유발하지 않도록 중요하지 않은 항목은 자동으로 뒤쪽 대기열에 추가되기 때문입니다.

사진이 많으면 여기서 새로운 문제가 발생합니다.(최신 테스트) IE는 10이고, FF는 10입니다. 사진이 너무 많으면 Delay 또는 404 심각한 문제가 발생합니다. , 이미지 로딩 속도가 느려지면 페이지의 기본 데이터 표시에 영향을 미치기 때문에 사용자가 볼 수 있는 모든 내용이 공백으로 표시됩니다. 따라서 지연로드를 사용하지 않는 경우에는 백그라운드를 사용하는 것이 좋습니다.

img 태그의 장점은 자동으로 닫히며 빈 태그가 나타나는 것을 방지할 수 있다는 것입니다(빈 태그도 w3c에서 검증한 내용 중 하나입니다). 백그라운드 방법을 사용하면 부트스트랩의 아이콘은 모두 i 태그로 추가되며 i 태그에는 빈 내용이 있으므로 빈 태그가 발생합니다. (이것이 나쁜 것은 아니며 장단점은 나중에 설명합니다. ).

2. SEO 관점에서

방금 말했듯이 img 태그는 자동으로 닫히며 텍스트 내용을 추가할 수 없습니다. 그러나 img에는 ​​alt 속성이 있으며 이 속성은 w3c 표준에서 필요합니다. , 이것에는 여전히 많은 장점이 있습니다.

먼저, 이미지가 상대적으로 크거나 사용자의 인터넷 속도가 느린 경우, 적어도 여기에 이미지가 어떤 콘텐츠인지 사용자에게 알려주는 텍스트 프롬프트가 표시됩니다. 사용자가 이 사진을 보려고 하면 여러 번 스와이프하여 로드하세요. 또한, alt 속성은 읽기를 돕는 데 도움이 되며, 특히 페이지를 탐색하기 위해 리더기를 사용하는 시각 장애인 친구에게는 너무 불친절할 것입니다.

둘째, alt 속성은 SEO에 유익합니다. 검색 엔진이 좋은 이미지 인식을 달성하려면 아직 갈 길이 멀습니다.

물론 단점도 있습니다.

먼저 Img에서 로드한 이미지는 src를 통해 가져옵니다. HTML 코드 수정이 허용되지 않는 경우, 동일한 이름의 파일만 어떻게 변경할 수 있나요? 교체되었지만 304 상태가 발생할 수 있으며, 이를 위해서는 서버 측에서 해당 설정을 지정해야 합니다. 이때 배경의 장점이 나오는데, 이것이 스킨체인지용 밤이다.

둘째, 이미지 표시 영역의 공간 크기가 예약된 경우 이미지는 예약된 공간과 일치해야 합니다. 그렇지 않으면 이미지가 늘어나거나 압축되며 이는 균등 비율 작업이 아닙니다. 물론 이 문제를 피하려면 프런트 엔드 및 시각 디자이너가 특정 규범을 준수해야 합니다.

3. 의미론적 관점

배경은 의미론과 관련이 없습니다. img는 의미론이 명확한 HTML 태그입니다.

추천: 먼저 로드해야 하는 중요한 사진에는 img를 사용하는 것이 가장 좋습니다. 중요하지 않은 사진에는 배경을 사용하는 것이 가장 좋습니다.

SEO를 수행하는 가장 편리한 방법은 배경에 그림이 배치되고 전경에 내용이 작성되는 것입니다. 둘 다 맞습니다. 내용을 표시하지 않으려면 text-indent -99999를 추가하세요. (이러한 플레이 방식은 검색 엔진 알고리즘이 단일화되고, 비중이 높은 키워드가 더 높은 순위를 차지하던 시대에 사용되었습니다.)

방금 부트스트랩의 배경 방법에 대해 언급했습니다. 부트스트랩의 방법은 배경을 사용하여 아이콘을 설정하는 것입니다. 아이콘 사용이 너무 유연하기 때문에 먼저 모듈화해야 하며 두 가지 방법을 모두 가질 수는 없습니다. 추신: 부트스트랩 v3 이후에는 아이콘 글꼴이 채택되었습니다

둘째, 아이콘의 중요성은 실제로 높지 않습니다. 마지막에 아이콘을 로드하면 대역폭 사용량이 줄어들고 PV 속도가 향상됩니다.

img 태그의 의미가 매우 명확하여 무분별하게 사용할 수 없으므로 부트스트랩에서는 의미가 없는 i 태그를 사용하여 아이콘을 설정하는 것이 좋습니다. 추신: 자신의 프로젝트에서 의미 없는 태그를 사용할 때는 해당 태그가 향후 호환 가능한지 여부와 HTML5

의 정의에 주의를 기울여야 합니다.

위 내용은 HTML로 사진을 표시하는 방법 ----img와 배경의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!