집 > 기사 > 웹 프론트엔드 > HTML에서 중요하고 어려운 태그를 사용하는 방법

HTML에서 중요하고 어려운 태그를 사용하는 방법

王林앞으로: 2021-02-18 09:47:232304검색

이 글을 쓴 이유는 최근 프론트엔드 지식을 배우고 있어서 향후 리뷰를 용이하게 하기 위해 일부 핵심 태그의 사용법을 특별히 정리했습니다.

1. 태그 사용

다른 웹페이지, 파일, 동일한 페이지 내의 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 만듭니다. a 태그는 매우 일반적으로 사용되는 태그이지만 그 용도가 잘 이해되지 않는 경우가 많습니다.

속성:

a의 href 값:

은 URL(바람직하게는 //google.com 형식으로 작성됨) 경로(/a/b/c, index.html) 의사 프로토콜(js)일 수 있습니다. 코드, 이메일, 휴대폰 번호) ID는 페이지의 특정 부분으로 이동하는 데 자주 사용됩니다. iframe과 함께 사용해야 함) _parent(이전 레벨의 페이지에서 열림) _self(현재 페이지가 로드됨, 이 값이 기본값임)

2. 프로그래머가 직접 이름을 지정합니다.

창 이름(사용자 이름) 지정된 창 열기를 달성하기 위해 창의 이름을 지정할 수 있습니다. iframe의 이름은 지정된 iframe에서 다운로드를 열 수 있는 기능입니다. 이 기능은 일반적으로 사용되지 않는 페이지를 다운로드하는 것입니다.

2. img 태그 사용법

기능: 가져오기 요청을 보내고 사진을 표시합니다

속성:

alt: 이미지의 대체 텍스트 설명을 정의합니다. 높이: 이미지의 높이 너비: 이미지의 너비 src: 이미지의 URL입니다. 이 속성은 a1f02c36ba31691bcfe87b2722de723b 요소에 필요합니다.

응답형 글쓰기:

예: max-width: 100%

교체 가능 요소:

는 대체 가능 요소입니다. 디스플레이 속성의 기본값은 인라인이지만 기본 해상도는 포함된 이미지의 원래 너비와 높이에 따라 결정되므로 인라인 블록처럼 동작합니다. 테두리/테두리 반경, 패딩/여백, 너비, 높이 등에 대한 CSS 속성을 설정할 수 있습니다. 기준선이 없습니다. 즉, 인라인 서식 지정 컨텍스트에서 수직 정렬: 기준선을 사용할 때 이미지 하단이 컨테이너의 텍스트 기준선에 맞춰 정렬됩니다.

3. 테이블 태그의 사용법

은 테이블 형식의 데이터, 즉 2차원 데이터 테이블을 통해 표현되는 정보를 나타냅니다. 이것은 비교적 간단합니다

(학습 비디오 공유:

html 비디오 튜토리얼

)

다음은 샘플 코드입니다.

  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

속성:

align: 이 열거형 속성은 문서에 포함된 테이블을 정렬하는 방법을 지정합니다. 다음과 같은 값이 있습니다. 왼쪽은 표가 문서의 왼쪽에 표시되고, 오른쪽은 표가 문서의 오른쪽에 표시됩니다. border: 테이블 테두리의 크기를 정의합니다. 0으로 설정되면 프레임 속성이 비어 있음을 의미합니다. 1로 설정하면 테이블에 1px 테두리가 생깁니다.

**cellpadding:** 이 속성은 내용과 표 셀 테두리 사이의 공간을 정의합니다.

**cellspacing: **이 속성은 두 셀 사이의 공간 크기(백분율 또는 픽셀)를 정의합니다.

**width: **이 속성은 표의 너비를 정의합니다. 너비는 픽셀 또는 백분율 값일 수 있으며 너비의 백분율 값은 테이블 컨테이너의 너비로 정의됩니다.

border-collapse: 테두리 병합

border-spacing: 0; 테두리 간격이 0으로 설정됨

table { 테이블 레이아웃: 자동; 국경 붕괴: 붕괴; 테두리 간격: 0; }

4. 기타 생각

어려운 것은 아니지만 많은 것을 기억하고 더 조심해야 합니다! ! !

——————텍스트 정보의 일부는 MDN 및 Hungry Man Valley에서 가져온 것입니다

HTML에서 중요하고 어려운 태그를 사용하는 방법

관련 기사