HTML 태그: 대부분의 초보자는 모른다(3부)
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>
나와 함께 참아 내가 모든 것을 설명 할 것입니다. 구문을 분석해 보겠습니다.
이 짧은 단어를 기억해 두십시오.
이제 예를 들어 이해해 봅시다.
<!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!
도움이 되셨다면 좋아요와 댓글 부탁드립니다.
감사
Reference
이 문제에 관하여(HTML 태그: 대부분의 초보자는 모른다(3부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/waqaskhan/html-tags-most-beginner-does-not-know-part-3-44ae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
