Course 모듈 3 - Lecture: 인기 있는 HTML 태그

4.1a, href 태그

글쎄요, 우리는 당신에게서 자바 프로그래머를 준비하고 있다는 것을 잊지 않고 있습니다. 그래서 당신은 5개의 태그만 배우면 됩니다.

첫째, 이것은 텍스트를 하이퍼텍스트로 바꾸는 가장 중요한 태그입니다 - link . HTML에서 링크를 생성하려면 태그 <a>(앵커, 앵커)가 사용됩니다.

기본 링크는 다음과 같습니다.

<a href="link-address">link text</a>

파란색 은 사용자가 보는 텍스트이고 녹색 은 링크 텍스트를 클릭하면 이동할 주소(링크)입니다.

링크가 포함된 일반적인 HTML 문서는 다음과 같습니다.


<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

아니요, 일반적으로 다음과 같습니다.



<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

세상은 완벽하지 않습니다.

4.2 img 태그 및 src 속성

HTML 페이지에 이미지를 삽입하기 위해 태그 <img>(이미지라는 단어에서 유래)가 사용됩니다. 이것은 단일 태그이며 닫는 태그가 없습니다. 태그의 일반 보기:

<img src="image link">

모든 것이 매우 간단합니다. HTML 문서에 이미지를 표시하려면 해당 이미지에 대한 링크를 알고 img. 그것을 시도, 당신은 그것을 좋아할 것입니다.

4.3 테이블 요소

또한 HTML 페이지에는 데이터가 있는 테이블이 포함될 수 있습니다. 하지만 생각해보면 하나의 태그로는 지나갈 수 없습니다. 결국 테이블에는 머리글, 행, 열 및 셀이 있습니다. 그들은 모두 자신의 태그를 생각해 냈습니다.

<table>- 테이블 자체
<tr>( 테이블 행 ) – 행 테이블 ;
<th>( 테이블 h 헤더) – 테이블 헤더 셀 ;
<td>( 테이블 데이터 ) – 테이블 셀.

다음은 3x3 테이블의 모양입니다 html(추가 헤더 행 포함).


<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

지금은 테이블이 거의 사용되지 않지만. 문제는 전화에서 페이지를 볼 때 테이블을 다른 방식으로 표시하는 것이 유용할 수 있다는 것입니다(단순히 화면에 맞지 않음). 그러나 여전히 테이블이 어떻게 배열되어 있는지 알아야 합니다.

4.4 ID 및 이름 속성

그리고 두 가지 더 중요한 점은 id및 속성입니다 name. 이들은 태그가 아니라 속성이지만 매우 자주 사용됩니다.

id태그 속성을 사용하면 전체 문서 내에서 고유한 이름을 지정할 수 있습니다 . HTML 문서에 주어진 태그의 값이나 매개변수를 변경하는 JavaScript가 있는 경우에 유용합니다. 그런 다음 고유의 도움으로 id원하는 태그를 정확하게 참조할 수 있습니다.

속성은 name유사한 기능을 수행하지만 해당 값이 페이지 내에서 고유할 필요는 없습니다. 즉, 이론적으로 동일한 이름을 가진 태그가 여러 개 있을 수 있습니다. 이는 요소 그룹 작업을 더 쉽게 하기 위해 수행됩니다.

예를 들어 페이지에는 각각 하나의 항목만 선택할 수 있는 여러 목록이 있습니다. 그런 다음 목록에서 새 요소를 선택할 때 목록의 나머지 요소 선택을 재설정해야 합니다. 그러나 다른 목록은 건드리지 마십시오. 동일한 목록의 모든 요소가 동일한 이름을 가진 경우 쉽게 수행할 수 있습니다.

id모든 태그는 속성 및 를 모두 가질 수 있습니다 name. 예:


<img id="image123" name="avatar" src="link to picture">