HTML5 태그 - 어떻게 작동하는지, 어떤 태그를 사용해야 합니까?

6677 단어 htmlfrontendwebdevbeginners
우리 기본 문제를 토론하기 시작합시다.HTML을 보셨든 안 보셨든 모든 요소를 언제 사용하는지, 심지어 현재 어떤 요소를 사용할 수 있는지 잘 모를 수도 있습니다.다음 내용은 웹 개발 초보자와 표기 전문가에게 유용한 메모가 될 것입니다!
본고는 Good 웹 개발 훈련소의 일부분이다.만약 당신이 본 것을 좋아한다면 head over here 전체 과정(서면 자원, 영상 연습과 프로젝트 활동 포함)을 무료로 볼 수 있습니다!

정의부터


HTML 또는 하이퍼텍스트 태그 언어는 웹 페이지의 뼈대를 정의하는 데 사용되는 언어입니다.그것은 어떤 방울과 호루라기도 포함하지 않는다는 것을 의미하지 않을 뿐만 아니라, 그 자체가 틀림없이 매우 예뻐 보이지 않을 것이다.그것은 단지 페이지에 표시된 내용, 이미지부터 텍스트, 그 사이의 모든 것을 정의하는 데 쓰일 뿐이다.
모든 현대 브라우저는 최신 HTML 표준인 HTML5를 지원합니다.이것은 웹 페이지의 구조를 개선하기 위해 일련의 기능을 증가시켰다.즉, 이것은 페이지의'레이아웃'을 나타내는 특수 요소를 추가했다. 예를 들어 내비게이션 표시줄이 어디에 있는지, 꼬리가 어디에 있는지 등이다.이것은 화면 판독기에 의존하여 인터넷을 탐색하는 시각장애인들에게 매우 유용하다. 왜냐하면 지금은 HTML부터 페이지의 모든 표지를 설명하는 것이 그 어느 때보다 쉽기 때문이다.

진입 문법


HTML을 작성할 때 태그를 사용합니다.기본적으로 이것은 당신이 사이트에 표시하고 싶은 내용 블록을 정의하는 데 쓰인다.텍스트 블록, 이미지, 제목 등 다양한 유형의 내용에 사용할 수 있는 태그가 많습니다.
예를 들어, 단락 태그 <p> 를 사용하여 이러한 텍스트 블록을 표시할 수 있습니다.
<p>
  Hard work and no play makes Jack a dull paragraph.
</p>
표지를 두 번 수정해야 합니다. 한 번은 내용의 시작 위치를 정의하고, 다른 한 번은 끝 위치를 정의합니다.이 경우 텍스트 블록(<p> 이전에 시작하고 텍스트 블록(</p> 이후에 끝납니다.종료 태그와 시작 태그를 표시하려면 / 를 추가해야 합니다.처음부터 끝까지 모든 블록을 요소라고 합니다.

속성


성명 표시 외에 추가 정보를 얻기 위해 이 표시에 속성을 추가할 수 있습니다.이것은 시작 태그 내의 형식 attribute="value" 을 사용하여 작성된 것입니다.class과id속성은 가장 흔히 볼 수 있는 것으로 더욱 잘 해석될 것이다once we start using CSS.또 다른 예는 페이지가 사용하는 언어를 lang 로 설명하는 것이다. 아래와 같다.

주 포장기


<html lang="en-US">
  <body>
    <!-- More to come in here! -->
  </body>
</html>
이것은 기본적인 포장입니다. 항상 주위의 HTML 파일을우선, 우리는basehtml 요소를 만들고 lang="en-US" 지정한 페이지의 언어를 사용합니다.캐나다에서 싱가포르까지 누구나 당신이 만든 사이트를 방문할 수 있기 때문에 번역 도구가 무엇을 필요로 하는지 알 수 있도록 언어를 지정하는 것이 가장 좋습니다!
이어서 우리는 우리의 몸을 추가하여 우리 사이트의 모든 내용을 살아남게 할 것이다.이것은 body 원소로 표시됩니다.안에 있는 것도 주의해야 한다<!-- … -->.이것이 바로 주석이 HTML에서 작동하는 방식이기 때문에 괄호 안에 있는 모든 내용이 페이지에 표시되지 않습니다.
참고: CodePen을 사용하는 경우 각 펜에는 HTML 상자에 넣은 코드와 언어 규범을 포함하여 이러한 html 및 body 패키지가 자동으로 추가됩니다.따라서 당신이 만든 모든 코드 펜에 사용할 필요는 없지만 이 도구 외에 사이트를 구축할 때 이것은 중요한 개념이라는 것을 알아야 합니다!

중요 레이블


많은 HTML 태그를 이해할 수 있습니다.너는 완전한 목록here을 찾을 수 있지만, 이것들은 네가 공부를 시작할 때 알아야 할 요점이다🏃‍♂️

컨텐츠 레이블

  • <p> 단락 블록;페이지에 텍스트를 표시하려는 경우 가장 일반적인 블록
  • <h1> ... <h6> 제목 블록, 그중h1은 최고 수준의 제목, h2는 두 번째 높은 수준의 제목입니다.신문의 문장은 좋은 예이다. 그 중에서 문장의 제목은 h1, 각 장과 절의 제목은 h2, 각 부제목은 h3
  • ul/ol 컨텐츠 목록을 만드는 데 사용되는 블록입니다.글머리 기호 (u-nordered) 목록을 원할 때 ul 를 사용하고, 번호 (o-ordered) 목록에 대해서는 ol 를 사용하십시오.
  • li, 또는 목록의 각 요소
  • dl 더 복잡한 컨텐트 목록을 만드는 데 사용되는 블록입니다.이것은 ul/ol와 비슷하지만, 현재 항목마다 제목과 설명이 두 개의 단독 블록으로 있을 수 있다.제목/본문 구조를 가진 목록에 적합하다
  • dt 제목 또는 목록 항목의 제목 정의
  • dd "정의 설명"또는 이 목록 항목의 내용
    주의: 이 두 요소는 포장할 필요가 없습니다.dd 요소를 관련 제목dt 아래에 놓으면 목록 항목이 정확해 보일 것입니다!만약 당신이 정말 필요하다면 하나div로 싸서 스타일링을 할 수 있습니다.
  • <span> 단락 또는 제목 내 텍스트의 포장.이것은 텍스트 블록의 일부 행이나 단어에 대한 사용자 정의 스타일에 매우 적합하다
  • <a href="https://penguin.club"> 다른 사이트나 귀하의 사이트 내 페이지를 가리키는 인터넷 링크.링크는 href 속성
    • 에 의해 지정됩니다.
    참고: 속성target='_blank'을 포함하여 현재 페이지가 아닌 새 탭에 링크를 강제로 열 수 있습니다.
  • <img src="https://cute_cat.gif" alt="gif of a cat eating ice cream" /> 이미지, 실제 이미지 파일은 src 이미지를 링크하고 설명하는 alt 에서 가져옵니다.이미지에 마우스를 걸거나 화면 판독기
    • 를 사용할 때 읽을 수 있음alt
  • <button> 클릭할 수 있는 버튼입니다.JavaScript 를 사용하여 단추를 실제로 실행할 수 있지만 잠시 수수께끼로 삼겠습니다.😁

    • 컨텐트 레이아웃의 태그

  • <header> 페이지 머리글, 사이트 배너 및 탐색 표시줄 포함
  • <footer> 일반적으로 다른 곳에서 찾을 수 없는 중요한 링크가 있는 페이지
  • <main> 페이지의 주요 내용 영역입니다.머리글 및 꼬리 분리에 도움
  • <nav> 웹 페이지의 내비게이션 표시줄(즉 맨 위에 있는 리본, 웹 사이트의 다른 페이지를 가리키는 모든 링크를 포함).통상적으로 <header> 범위 내에서
  • <section> 주요 내용의 하위 부분.페이지의 각 부분을 분할하기에 매우 적합하다.네, 절에 삽입해도 돼요!
  • <div> 용기를 정의하는 일반적인 방법.페이지 레이아웃에서 일하고 페이지의 일부분에 내용을 포지셔닝하려고 할 때, 최종적으로 이것들을 찾을 수 있습니다

    • <div>와 <section>


    일반적으로 당신은 <section> 요소를 공통된 주제로 나누어 고등학교 때 쓴 독서보고서 요강처럼 사용할 것이다.또한 A<div>는 이러한 분리를 전달하는 데 사용되지 않는다.신문 한 편을 예로 들다.우리는 문장의 내용과 평론은 두 가지 독립된 요소<section>라고 말할 수 있다.그러나 모든 댓글과'좋아요'와'싫어요'단추의 용기는 <div>s에 불과하다.

    네가 직접 이 원소들을 시험해 봐라!


    codepen.io로 뛰어가서 새 만년필을 만들다.미리 보기 상자에 표시된 내용을 보려면 위의 태그를 HTML 섹션에 붙여넣기 시작합니다!

    이러한 레이블의 역할 보기


    이제 완전한 사이트를 살펴보고 HTML이 어떻게 구성되었는지 봅시다.브라우저의'inspector'를 사용하여 이 동작을 진행할 것입니다. https://gsg.surge.sh 실시간 사이트에 접근할 수 있습니다.나는 네가 가장 좋아하는 사이트에서 이 도구를 열어 그들이 어떻게 자신의 표시를 구축하는지 보라고 격려한다.
    HTML 소개 - 실제 사이트의 구조를 확인합니다!

    이게 쓸모가 있나?


    너무 좋아요.본고는 우수한 조직이 초보자에게 비결을 가르치는 데 쓰이는 대량의 자원의 일부분이다.하면, 만약, 만약...
    💅 더 나은 CSS를 맨손으로 작성하는 방법 배우기
    ⚙️ JS에서 배열 함수의 사용법 이해
    📶 API와 대화하는 방법 이해
    👩‍💻 JS 프레임워크를 사용하여 다양한 프런트엔드 및 백엔드 구축
    🏃‍♂️ 그리고 웹 개발 세계에서 가장 중요한 일,
    저 멋진 훈련소들을 봐라!모든 활동, 서면 자원과 프로젝트는 무료입니다. 다른 사람과 탐색하고 공유할 수 있습니다😁

    수업에 액세스하려면 여기를 클릭하십시오!


    피드백, 비판 또는 컨텐트 제안이 있으면 [email protected] 로 문의하십시오.
    vba 여러 Excel 문서 병합
    Excel 암호 보호는 어떻게 해결합니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage