네트워크 기반 1회:HTML 소개

9099 단어 webdevhtml

소개하다.


이 시리즈에서 나는 인터넷의 기초 주제를 토론하려고 시도할 것이다.1회에서는 HTML의 기초 지식을 소개한다.

카탈로그

  • What is HTML?
  • HTML Document structure

  • HTML Tags
  • Some Basic Tags
  • Singleton Tags
  • Important Singleton Tags
  • Semantic and Unsemantic Tags
  • Semantic Page Example

  • HTML Header Section
  • Difference between <header> and <head>
  • Navigation Section
  • Title
  • Favicon
  • Charset
  • UTF-8, ASCII and UNICODE
  • Viewport

  • HTML Body section
  • Block Level tags
  • <h1> to <h6>
  • Lists
  • Page Divisions or Sections
  • Inline Tags
  • Conclusion
  • References
  • HTML이란?


    HTML(하이퍼텍스트 태그 언어)은 웹 페이지 구조를 설명하는 언어입니다.HTML은 작성자에게 다음과 같은 메서드를 제공합니다.
  • 은 제목, 텍스트, 표, 목록, 사진 등을 포함한 온라인 문서를 발표합니다.
  • 버튼을 클릭하여 하이퍼텍스트 링크를 통해 온라인 정보를 검색합니다.
  • 원격 서비스와의 거래를 위한 디자인 양식으로 정보 검색, 예약, 제품 주문 등에 사용됩니다.
  • 은 스프레드시트, 비디오 클립, 사운드 클립 및 기타 응용 프로그램을 문서에 직접 포함합니다.
  • HTML 문서 구조


    이것은 HTML 문서의 대략적인 구조이다.
    <!DOCTYPE html>
    <html>
        <head>
            Document Header
        </head>
    
        <body>
            Document Body
        </body>
    </html>
    

    HTML 태그


    HTML은 다양한 태그를 사용하여 컨텐트를 포맷하는 태그 언어입니다.소수의 표기를 제외하고 대다수의 표기는 상응하는 끝 표기를 가지고 있다.예를 들어 <body>의 끝 표시는 <\body이다.

    몇 가지 기본적인 라벨


    라벨
    묘사<!DOCTYPE...>이 태그는 문서 유형 및 HTML 버전을 정의합니다.<html>태그에는 문서 제목과 본문으로 구성된 전체 HTML 문서가 포함되어 있습니다.<head>이 태그는 문서의 제목을 나타냅니다.<title>이 레이블은 문서 제목을 나타내는 <head> 레이블에 사용됩니다.<body>이 태그는 문서의 주체를 대표하며 <h1>, <div>, <p> 등 다른 HTML 태그를 저장한다.<h1>이 태그는 최상위 제목을 나타냅니다.라벨 <h2>, <h3>, <h3>, <h4>, <h5>, <h6>은 다른 크기의 제목을 표시하는데 그 중에서 <h1>이 가장 크고 <h6>이 가장 작다.<p>이 라벨은 한 단락을 대표한다.

    단일 태그


    singleton 표시는 끝 표시가 유효하지 않습니다.이러한 요소는 일반적으로 페이지에서 독립된 요소입니다.

    주요 단일 태그


    라벨
    묘사<br>텍스트 내용에 사용되는 줄 바꿈 문자로 단락 대신 줄 바꿈 문자를 만듭니다.<hr>수평자는 한 페이지의 직선이다.이것들은 웹 페이지의 각 부분을 구분하는 데 쓸 수 있다.<img>HTML 페이지에 이미지를 포함할 수 있습니다.기술적으로 이 라벨은 이미지에 유지된 공간을 만들고 이 이미지의 경로는 src 속성을 통해 인용할 수 있다.<meta>메타 태그는 컨텐트에 대한 정보입니다.그것들은 문서의 머리 부분에 위치하고 브라우저에 페이지 정보를 전달하는 데 사용된다.너는 웹 페이지에 많은 다른 원 표기를 사용할 수 있다.<input>방문자로부터 정보를 얻는 데 사용되는 폼 요소입니다.

    어의와 비어의 표기


    의미 표시는 브라우저와 개발자에 대한 의미를 설명한다.
    비어의 요소의 예: <div><span>.이것들은 모두 그것의 내용과 무관하다.
    의미 요소의 예: <form>, <table><article>.이것들은 그것의 내용을 명확하게 정의했다.

    의미 페이지 예



    HTML 머리글 섹션


    <header> 및 <head>

    <header> 요소는 페이지의 특정한 부분의 제목을 개술하는 구조 요소이다.그것은 <body> 원소에 속한다.<head> 요소는 페이지에 표시되지 않으며 문서 제목과 외부 파일에 대한 링크를 포함한 메타데이터를 요약하는 데 사용됩니다.그것은 바로 <html> 원소에 속한다.

    탐색 섹션

    <nav> 요소 표지 페이지의 주요 네비게이션 링크의 일부분.이것은 우리가 같은 사이트 내의 다른 페이지나 같은 페이지의 부분으로 연결할 수 있도록 허락한다

    직함

    <title>은 웹 페이지의 제목을 제공하는 데 사용됩니다.브라우저의 제목 표시줄에 표시됩니다.

    파비콘


    favicon은 특정 사이트나 웹 페이지와 관련된 작은 아이콘을 포함하는 파일입니다.
    현재, favicon.ico은 저희 홈페이지에 아이콘을 표시하는 데 사용됩니다. (보통 제목 표시줄의 제목 근처에서 볼 수 있습니다.)

    Charset


    문자 집합(charset)은 html 문서에서 사용되고 지원되는 서로 다른 문자의 조합수를 가리킨다.
    HTML 페이지를 올바르게 표시하려면 웹 브라우저에서 페이지에 사용되는 문자 세트를 알아야 합니다.이것은 <meta> 태그에 지정됩니다.

    UTF-8, ASCII 및 UNICODE


    ASCII 코드
    UNICODE
    UTF-8
    ASCII는 숫자 0–127에 매핑되는 128자를 정의합니다.
    유니코드 정의는 숫자 0-221에 매핑되는 221자 미만입니다.
    UTF-8은 가능한 유니코드 문자 인코딩 시나리오입니다.
    ASCII는 UNICODE의 하위 집합입니다.
    UNICODE는 ASCII의 하이퍼컬렉션입니다.
    비영어 문자에 적응하기 위해 발명하다

    뷰포트


    보기 포트는 사용자가 웹 페이지에서 볼 수 있는 영역이다.그것은 장치에 따라 다르다. 휴대전화에서 컴퓨터 화면보다 작다.
    HTML의 <meta 태그를 사용하여 정의됩니다.

    HTML 본문 섹션


    블록 레벨 태그


    <h1>에서 <h6>

    <h1>부터 <h6>까지 라벨은 제목에 사용되며 <h1>이 가장 크고 <h6>이 가장 작다.

    명세서

    <ul>, <ol>, <li>은 웹 페이지의 항목을 열거하는 데 사용됩니다.
    목록은 <ul> 또는 <ol>에서 시작하여 <li>으로 요소를 나열합니다.<ul> 일명 무질서 목록
    제1항
  • 제2항
  • 프로젝트 3
  • <ol> aka 주문 목록
    제1항
  • 제2항
  • 프로젝트 3
  • 페이지 파티션 또는 섹션

  • <div>은 페이지의 내용을 구분하는 데 사용되는 비어의 표시이다.
  • <section> 태그는 문서의 절을 정의하는 데 사용되는 의미 태그입니다.
  • <header> 태그는 문서 제목 부분에 사용되는 의미 태그입니다.
  • <footer> 표기는 문서의 꼬리 내용에 사용되는 의미 표기이다.
  • <nav> 표기는 문서 내비게이션 내용에 사용되는 의미 표기이다.
  • <main>은 문서 특유의 내용을 정의하는 의미 표시이다.사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 문서에 중복된 내용을 포함해서는 안 된다.
  • <aside> 표기는 의미 표기로서 절에 놓인 내용을 한쪽에 놓는 데 쓰인다.
  • <article>은 독립적이고 포함된 내용을 지정하는 데 사용됩니다.
  • <canvas> 태그는 스크립트(일반적으로 JavaScript)를 통해 동적으로 그래픽을 그리는 데 사용됩니다.이것은 투명하고 도형의 용기일 뿐입니다. 스크립트를 사용해서 실제적으로 도형을 그려야 합니다.
  • <form> 태그는 사용자가 입력할 수 있는 HTML 양식을 만드는 데 사용됩니다.
  • <table> 태그는 문서에서 테이블을 만드는 데 사용됩니다.
  • 인라인 레이블


    인라인 요소는 새 행에서 시작되지 않습니다.내연 요소는 필요한 너비만 차지한다.
  • <span>은 텍스트의 일부분이나 문서의 일부분을 표시하는 내부 용기입니다.
  • <label> 표시는 여러 개의 그룹 요소의 라벨을 정의합니다. 예를 들어 아래 목록, 입력 영역 등입니다.
  • <input> 레이블은 사용자가 데이터를 입력할 수 있는 입력 필드를 만드는 데 사용됩니다.
  • <b> 태그는 텍스트를 굵게 하는 데 사용됩니다.
  • <i> 태그는 텍스트를 기울일 때 사용됩니다.
  • <img> 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다.
  • <button> 탭에서 단추를 만들고 웹 페이지에 클릭할 수 있는 단추를 만듭니다.
  • <a> 태그는 웹 페이지에 링크를 만드는 데 사용됩니다.
  • 결론


    이것이 바로 HTML의 기초 지식이다.다음 회에서 나는 보도할 것이다.

    도구책


    HTML Basics w3schools
    HTML Basics Tutorial Point pdf
    Web Design w3org
    HTML Singleton tags

    좋은 웹페이지 즐겨찾기