HTML 태그: 대부분의 초보자는 모른다(3부)

HTML 기초를 배우는 과정에서 모든 초보자는 dev 태그, h1 ~ h6 태그, p 태그 등을 알고 있지만 대부분의 초보자는 세부 태그, 테이블 태그 등을 잘 모릅니다. -수준의 것이지만 그렇지 않습니다. h1 및 p 태그만큼 쉽다고 믿습니다. 이 태그를 분해하자...

1) 기본 태그:



사용:



동일한 사이트에서 사이트에 일부 자산을 반복해서 추가한 다음 기본 URL을 기본 태그에 배치하고 해당 URL의 나머지 부분을 필요한 위치에 배치할 때 사용합니다.
제가 그 의미를 어떻게 그리고 무엇을 의미하는지 보여드리겠습니다.
기본 태그 없이 👇

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <img src="https://cutt.ly/XXvfnhj" alt="Smoke-image">
    <img src="https://cutt.ly/wXvfO3U" alt="Red leaves on Floor">
    <img src="https://cutt.ly/VXvfZNl" alt="Sky with Stars">
    <img src="https://cutt.ly/vXvgeBw" alt="A paint">
</body>
</html>


동일한 사이트에서 4개의 이미지를 가지고 있으며 해당 사이트를 반복적으로 사용하고 있음을 알 수 있습니다. 따라서 다음과 같이 이 "https://cutt.ly "사이트를 공유하지 않는 이유는 무엇입니까?

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://cutt.ly" target="_blank">
</head>
<body>
    <img src="/XXvfnhj" alt="">
    <img src="/wXvfO3U" alt="">
    <img src="/VXvfZNl" alt="">
    <img src="/vXvgeBw" alt="Jungle">
</body>
</html>


그리고 img 태그에 대한 제한일 뿐만 아니라 링크, 참조 등 앵커 태그에 있는 모든 위치에서 사용할 수 있습니다. 그게 다입니다.
테이블 태그로 이동해 보겠습니다.

2) 테이블 태그:



테이블 태그는 이 질문에 대한 답변입니다. -> HTML을 사용하여 웹에서 테이블을 만드는 방법은 무엇입니까? 따라서 테이블 태그를 사용하여 기본적으로 테이블을 만들 수 있습니다.

기본 구문:



    <table>
        <caption></caption>
        <tr> 
            <th>Colum 1 title</th>
            <th>Colum 2 title</th>
        </tr>
        <tr>
            <td>Colum 1 data</td>
            <td>Colum 2 title</td>
        </tr>        
    </table>

나와 함께 참아 내가 모든 것을 설명 할 것입니다. 구문을 분석해 보겠습니다.
  • 테이블 태그-> 테이블임을 정의
  • 캡션 태그-> 테이블의 기본 제목을 정의합니다.
  • tr 태그 -> 테이블 행을 의미합니다.
  • th 태그 -> 테이블 헤더, 실제로는 테이블 열 헤더를 의미합니다.
  • td 태그 -> 테이블 데이터.

  • 이 짧은 단어를 기억해 두십시오.

    이제 예를 들어 이해해 봅시다.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            table,
            th,
            td {
                border: 1px solid black;
            }
            table{
                width: 500px;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
    
        <table> <!-- Table  -->
            <caption>This main title of the table</caption> <!-- Table Title-->
            <tr> <!-- Table Row -->
                <th>Items</th> <!-- Table header -->
                <th>Price</th>
            </tr>
            <tr> 
                <td>Jacket</td> <!-- Table data-->
                <td>$100</td>
            </tr>
            <tr>
                <td>Suit</td>
                <td>$80</td>
            </tr>
            <tr>
                <td>Trouser</td>
                <td>$45</td>
            </tr>
        </table>
    
    </body>
    </html>
    


    산출:





    이해가 되지 않으면 코드를 복사하여 VS 코드에 붙여넣고 라이브 서버에서 엽니다. 일부 값을 변경하면 진행 상황을 이해할 수 있습니다.

    3) 데이터 목록 태그:



    사용: 사용자가 입력 필드에 대한 몇 가지 옵션을 선택해야 하는 데이터 목록 태그 사용. 또는 개발자가 사용자가 선택할 수 있도록 미리 설정된 데이터를 제공하려고 합니다.

    기본 구문:




      <datalist>
        <option value="data 1">
        <option value="data 2">
      </datalist>
    
    


    Datalist 태그에는 제공할 몇 가지 옵션이 포함되어 있으며 이러한 모든 옵션은 전체 datalist 태그에 남아 있습니다. 아래에 예를 제공했습니다. 가능한 한 많이 줄이려고 노력했습니다.

    예시:




    <!DOCTYPE html>
    <html lang="en">
    <body>  
        <h3>Choose what you like the most</h3>
      <input list="connect-with-datalist"> 
      <datalist id="connect-with-datalist"> <!-- list and Id should be same to connect them both -->
        <option value="HTML">
        <option value="CSS">
        <option value="Javascript">
        <option value="React Js">
         <option value="All"></option>
      </datalist>
    
      <button>Submit</button>
    </body>
    </html>
    
    


    산출:




    OMG 오늘 많은 것을 배웠습니다. 나는 HTML에서 그것을 사용하기 시작한다고 말할 것입니다.

    Learn Little but Better!



    도움이 되셨다면 좋아요와 댓글 부탁드립니다.
    감사

    좋은 웹페이지 즐겨찾기