유행은 아니지만 중요한 HTML 태그.

10453 단어 webdevhtml
HTML (하이퍼텍스트 태그 언어) 은 웹 내용을 레이아웃하는 데 사용되는 주요 태그 언어입니다.
웹 전단에서 일하는 개발자에게 양식이나 스크립트/DOM 조작을 깊이 연구하기 전에 최소한 기본적으로 알아야 할 첫 번째 언어입니다.
이 글에서 저는 HTML 태그를 중점적으로 소개할 것입니다. 이런 태그는 많은 웹 개발자들이 사용하지 않습니다. 만약에 이런 태그를 사용하면 웹 프로젝트의 재미를 높일 뿐만 아니라 그들의 S.E.O(검색엔진 최적화) 성능도 향상시킬 수 있습니다.
명단에는 구체적인 순서가 없다.

문서 라이브러리 URL 요소 - <Base>


HTML<base> 요소는 HTML 문서의 모든 관련 URL에 사용되는 기본 URL을 정의합니다.하나의 기본 요소만 있을 수 있으며, 여러 개의 기본 요소를 성명하면 첫 번째 기본 요소만 따르고 나머지는 무시됩니다.
요소는 href와 target 속성을 포함하고 href는 전체 문서에 사용되는 기본 URL을 저장합니다. target 속성은 <a>(anchor) 요소와 마찬가지로 _self,_blank,_parent_top가 정의한 <a>,<area> 또는 <form> 요소의 기본 탐색 상하문은 명확한 목표 속성이 없습니다.
예:
<base href="https://www.neglected-tags.com/" target="_blank"></base>

<!-- Declaring only the global browsing context for <a>, <area> and <form> elements -->
<base target="_top"></base>
참고: Open graph 태그는 기본 요소를 확인하지 않으므로 항상 완전한 절대 URL을 포함해야 합니다.

연락처 주소 요소 - <주소>


HTML<address>은 의미 HTML 태그 중 하나로 초점에 있는 HTML 문서가 개인이나 개인 또는 조직의 연락처를 제공하는 것을 나타낸다.
이것은 페이지 맨 위의 기업 연락처일 수도 있고 <article> 요소 중의 글쓴이 정보일 수도 있다.
주소 정보는 필요한 모든 유형의 연락처 데이터를 포함하여 상기 상하문에 적합한 모든 형식을 사용할 수 있다.이러한 정보는 URL, 이메일 주소, 물리적 주소, 전화 번호, 소셜 미디어 핸들, 지리 좌표 등이 될 수 있다.
반드시 포함해야 하는 가장 중요한 정보는 주소가 속하거나 가리키는 개인이나 개인 또는 조직의 이름이다.
예:
    <address>
        Organization Name: The Neglected Tags <br>
        Web Site:
        <a href="https://www.neglected-tags.com/">www.neglected-tags.com</a><br>
        visit us: Abandoned Hills<br>
        Ground Floor,
        Many Trees
    </address>

주요 요소-<Main>


HTML<main> 요소는 HTML5 사양의 블록 레벨 요소로서 HTML 문서<body>의 주요 컨텐트에 중점을 두는 데 도움이 됩니다.주요 컨텐트 영역은 문서의 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련되거나 확장된 컨텐트로 구성됩니다.
요소의 컨텐트는 문서에 고유하며 HTML 문서에는 숨겨지지 않은 요소가 하나<main>만 있는 것이 좋습니다.
main 요소는 매우 중요하다. 왜냐하면 accessibility Landmarksskip navigation가 페이지의 주요 내용을 쉽게 식별하고 더 빨리 접근할 수 있도록 도와주기 때문이다.<main> 요소도 브라우저 리더 모드에서 내용을 특정 리더 보기로 변환할 때 사용하는 요소 중 하나입니다.
예:
<html>
  <head>
    <title>The Neglected</title>
  </head>
  <body>
    <main>
      <h1>The Neglected HTML Tags</h1>
      <p>
        We are actually a group of highly usefull HTML tags.
      </p>
      <article>
        <h2>Main</h2>
        <p>... </p>
      </article>
      <article>
        <h2>Address</h2>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

설명 목록 요소 - <main>


html<dl> 요소는 하나의 설명 목록을 정의했는데 그 중에서 하나의 용어<dl>와 각자의 설명<dt>을 포함한다.
예:
<html>
  <head>
    <title>List of negected HTML tags</title>
  </head>
  <body>
    <dl>
      <dt>Base</dt>
      <dd>The base url to be used for all relative URLs in a HTML document.</dd>
      <dt>Address </dt>
      <dd>Indicates the contact information of a person or people or organization.</dd>
      <dt>Main</dt>
      <dd>A block-level element that indicate the dominant content of the body of a HTML document</dd>
    </dl>
  </body>
</html>

세부 공개 요소-<dd>


HTML <details> 요소는 열린 상태로 전환할 때 표시되는 공개 위젯을 만듭니다.<details> 디테일 요소에 이 요소는 디스클로즈에 설명 탭을 제공한 다음, 전환할 때 내용을 표시하고, 그렇지 않으면 설정하지 않았을 때 텍스트 '디테일' 을 표시합니다. 이것은 비정보적입니다.
열기 등록 정보를 설정하면 공개 컨텐트가 페이지에 표시되고 그렇지 않으면 전환 이벤트가 전송될 때까지 컨텐트가 숨겨집니다.
예:
<details>
    <summary>Main</summary>
    This is the time that I the main element choose to vent my anger.
</details>

<!-- open state -->
<details open>
    <summary>Address</summary>
    Hey main, where should I address your anger to.
</details>

참고: Internet Explorer에서는 이 요소를 지원하지 않습니다.

대화 상자 요소 - <summary>


HTML<summary 요소는 활성 브라우저 창에 나타나는 경고 해제, 팝업 창 또는 모드 창과 같은 대화 상자나 다른 상호 작용을 만드는 데 사용됩니다.
이 요소에는 오픈 속성이 있습니다. 이 속성을 설정할 때 대화상자를 사용자에게 보여야 합니다. 그렇지 않으면 숨겨진 상태를 유지해야 합니다.
예:
<dialog>
  <h2> Wrath of the neglected tags!!! </h2>
  <button id="close-dialog">Close Dialog</button>
</dialog>

<button id="show-dialog">Click Here!</button> 

<script>

  var dialog = document.querySelector('dialog');
  document.querySelector('#show-dialog').onclick = () => { dialog.show(); };
  document.querySelector('#close-dialog').onclick = () => { dialog.close(); }; </script>
주의:tabindex 속성은 <dialog> 요소에 사용할 수 없습니다.
저는 이 모든 html 요소를 이 글에 넣을 수 없기 때문에 아래에 다른 내용을 추가하여 영예롭게 추천합니다.

명예 후보:

  • <dialog>
  • <dialog>
  • <aside>
  • <bdi>
  • <cite>
  • <progress>
  • 만약 내가 이 글에서 HTML 요소를 빠뜨렸다고 생각한다면, 마음대로 언급해 주십시오. 나는 그것들을 추가할 수 있습니다.만약 이 내용을 매우 좋아하신다면, 지원해 주시기를 바랍니다. creation process 📝. 저희는 감격을 금할 수 없습니다.
    계속, 네트워크에 표시.
     
     

    좋은 웹페이지 즐겨찾기