Jsliang Job Search Series – 39-HTML series summary

Common HTML5 tags are:

• <section>– section
• <nav>Navigation –
• <article>– Complete independent content block
• <aside>– Content that is less relevant to the page content: such as ads (remaining)
• <header>– Page or article header
• <footer>– End of page or text
• <main>– Document content
• <figure>– A legend related to the document
• <figcaption>– Legend description
• <mark>– Quotes that need to be highlighted
• <video>– video
• <audio>– the audio
• <source>– forvideo 和 audioThe specifiedMedia sources
• <track>– forvideo 和 audioThe specifiedText orbitsubtitle
• <canvas>– Bitmap area
• <svg>– the vector diagram
• <progress>– the progress bar
• <meter>– slider

HTML has an honorable task:

• The content of the page can be expressed clearly and structurally without CSS.

So, when you build a page structure, you need to think about semantics.

• Easy to modify and maintain
• Accessible Reading support
• Search engines are good for SEO
• For future-oriented HTML, browsers may offer richer support in the future

<! - the head -- -- >
<header>
  <nav></nav>
</header>

<! -- Content area -->
<main>
  <! The left -- -- -- >
  <article>
    <! -- Left title -->
    <header></header>
    <! -- Image block -->
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
  </article>

  <! - right - >
  <aside>
    <! -->
    <nav></nav>
    <section></section>
  </aside>
</main>

<! -- -- -- > at the bottom of the
<footer></footer>
Copy the code

The header information area can contain content information such as the

• <aside>: Can store ads, search content, share links, etc
• <section>: Forms, lists, article blocks, etc
• <article>: represents a complete, self-contained block of content. Such as articles or news reports.
• <figure>: Article illustration block
• <figcaption>: Notes on article illustrations

The

Docoment, Window, HTML, body hierarchy:

window > document > html > body
Copy the code

• window 是 BOMIs used to get and set browser properties and behavior, and as a global object.
• documentObject is a document-related object that has some functionality for manipulating document content, but no statuswindowHigh.
• htmlThe element object followsdocumentThe element object belongs tohtmlThe documentDOMObject, you can think of it ashtmlThe objects that are labeled in the source code, they look likediv,selectThere is no fundamental difference between these objects.

Although and are inline elements, they can be set to width and height because they involve replaceable and non-replaceable elements.

Replacing elements is when the browser decides what to display an element based on its tags and attributes.

Such as:

• <img>According to thesrcProperty to read picture information and display it
• <input>According to the labeltypeProperty to determine whether to display an input field or a radio button.

The replacement elements are: , , , < SELECT >,

Most elements of HTML are non-replaceable, meaning their content is presented directly to the browser.

Such as:

• <p>Direct full display

Overall comparison:

• <div>– label block
• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>– Heading 1 – Heading 6
• <form>– the form
• <hr>– the horizontal line
• <ul>– Unordered list
• <ol>– Ordered list
• <li>– Defines list items forul 和 li 中
• <p>– paragraph
• <table>,<thead>,<tbody>,<thead>,<th>,<tr>,<td>– Table elements

• <a>– Hyperlinks or anchors
• <b>– Bold font
• <br>– a newline
• <code>– Defines computer code text
• <i>– italics
• <img>Pictures –
• <input>– input box
• <label>– forinputMark/label
• <button>– button
• <textarea>– Multi-line text box

The display attribute enables conversions between inline and block-level elements.

• display: inline– Converts to inline elements
• display: block– Converts to block-level elements
• display: inline-block– Converts to inline block elements

Eight articles are referenced in this series.

• Mdn-html5 tag list【 Reading Suggestions: 5min】
• Html5 semantic tags【 Reading Suggestions: 5min】
• Block-level elements and inline element summaries【 Reading Suggestions: 5min】
• The difference between inline and block-level elements in HTML【 Reading Suggestions: 5min】
• Mdn-html5 tag list【 Reading Suggestions: 5min】
• Html5 semantic tags【 Reading Suggestions: 5min】
• Block-level elements and inline element summaries【 Reading Suggestions: 5min】
• The difference between inline and block-level elements in HTML【 Reading Suggestions: 5min】

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.