This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This section is mainly from

  • What is HTML?
  • The history of HTML?
  • The role of HTML in front-end development?
  • What is the relationship between HTML and JS and CSS?
  • How to use HTML?
  • How can I write more semantically speaking HTML?

And so on the question to reorganize the HTML knowledge system.

The Three Main elements of the Web

Introduction of HTML

HTML(HyperText Markup Language), the Markup Language used to build the basic structure of a web page and its content.

Hypertext 👉 Text contains links to other text

The markup language 👉 combines text and other information related to the text to reveal information about the structure of the document, such as HTML, XML, KML, Markdown, and so on

Development history – 1989 – Berners-Lee proposes an Internet-based hypertext system – 1993 – IETF publishes first TML proposal, resulting in the first version of HTML – 1994 – W3C, which later takes over standardization of HTML – 1995 – After several drafts, HTML2.0 is released (this version mainly adds some basic features, including form-based file uploading, tabulation, internationalization, etc.) – 1997 – January: HTML3.2 is released, This was followed in December by THE release of HTML4.0 (which uses many browser-specific element types and attributes) — 2014 — HTML5 was released as a W3C recommendation

HTML5 mainly solves these problems: 1. The chaos of document structure, the previous document structure is excessively dependent on div tags, HTML puts forward a variety of semantic tags, making the document easy to understand, and beneficial to SEO optimization; 2. Some new apis are provided

The HTML specification

  • An HTML document contains multiple HTML elements with different characteristics

  • HTML element = start tag + end tag + element content

  • Some elements have only one tag, such as IMG, input, br, and so on

  • HTML element tags are case insensitive

  • Elements can be nested among other elements

  • Elements can have attributes that contain additional information about the element

HTML structure

<! < HTML >: the root element, which contains the entire content of the page <head>: is not visible to the user. <body>: This element contains content that can be accessed by the user, including text, images, video, games, audio, and so onCopy the code

The elements contained in the head

meta

  • charset
  • name
  • http- equiv
<meta name="keywords" content="HTML"> <meta name="description" Content ="HTML base "> <meta name="viewport" content="width= device-width, initial-scale =1.0, maximum-scale =1.0, User - scalable = 0 "> HTTP headers custom meta, used to provide some information to a particular site https://wiki.whatwg.org/wiki/MetaExtensions < meta" HTTP - equiv = "expires" content="31 Dec 2021">Copy the code

title

<title>: The title of the page, which is displayed on the browser TABCopy the code

style

The < style > : CSS stylesCopy the code

link

Href ="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="my-" <link href-"fancy. CSS "rel="alternate styleshet" type="text/ CSS" title=" fancy ">Copy the code

script

<script type="text/javascript" SRC =" javascret.js ">Copy the code

The script property -defer 👉 is downloaded immediately and deferred, meaning that the script can be executed until the DOM is fully parsed and displayed, and is valid only for external scripts. The script with the defer property blocks the DOMContentL oaded event until the script is loaded and parsed. – async👉 Downloads scripts immediately. This does not interfere with other operations, such as downloading other resources or loading other scripts. This operation is valid only for external scripts

body

Inline element

  • Occupies only the space contained by the border of its corresponding label
  • Can only hold text or other inline elements
  • Dimensions can only be changed by modifying horizontal margins, borders, or row heights
  • Common inline elements:< a >, < span >. < br >, < I >, < em >, < strong >, < label >, < q >. < var >, < cite >, < code >

Block-level elements

  • The entire row that occupies its parent element always starts on a new row
  • Can hold other block elements or inline elements
  • You can control width height, line height, margin, border and so on to change its size
  • Commonly used block-level elements
The < div >, < p >, < h1 > - < h6 >, < ol >, < ul >, < dl >, < table >, < address >, < blockquote >, < form >Copy the code

Inline block-level elements

  • Elements are arranged within a row and do not own a row
  • You can set the width, height, vertical margin, and border
  • Common inline elements:<img> <input> <td>

Understanding inline elements, block-level elements, inline block-level elements is very important, novice recommends baidu to view relevant articles

semantic

Depending on the structure of the content, choosing the right tags builds a more maintainable code structure that developers can read and that machines can parse better.

Semantically – blocks

header

<header> - presents introductory information - usually contains a set of introductory or navigational elements such as the title, Logo, search box, author name, etc. - cannot be placed inside <footer>, <address>, or another <header> elementCopy the code

nav

<nav> - provides navigation links in the current document or other documents, such as menus, directories, indexes, etc. - is used to place popular links, less common links are usually placed in the footer at the bottomCopy the code

article

<article> - standalone document, page, application, site - a structure that can be independently assigned or reused, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etcCopy the code

section

<section> - Groups content by topic, usually with a heading - <section> usually appears in the outline of the document - do not use <section> as a normal container, such as to decorate a fragment style, in which case <div> is more appropriate - if there are individual chunks of content inside the element, If you can publish it individually, <article> is more suitable.Copy the code

aside

<aside> - represents an area that has little to do with the rest of the page's content, or that would not affect the overall content if taken apart - usually used in a sidebar to display ads, tips, references, etcCopy the code

footer

<footer> - represents the footer of the most recent chapter - usually contains information about the chapter's author, copyright data, or document links - elements in the footer are not part of the chapter and are not included in the outlineCopy the code

You can look at the semantic MDN page

Semantically – grouping

Figure, figcaption

<figure>/ < FigCaption > - <figure> Wraps independently referenced content: diagram, illustration, code, etc., usually with a title - < FigCaption > The caption/title of the diagram associated with it, usually first or last in <figure>Copy the code

blockquote

The <blockquote> -block-level reference element -cite attribute represents the URL of the sourceCopy the code

Dl, DT, dd

<dl>/ <dt>/ <dd> - Used to describe - group key-value pairs - usually used in metadata, term definition scenarios, etcCopy the code

Semantically – text

cite

<cite> - The <cite> element is usually used to cite the title of a workCopy the code

time

<time> > - Machine-readable time and date - datetime indicates the date and time to which this element is associated. If not specified, the element will not be resolved to a dateCopy the code

other

<address> The contact information of a person or organization <mark> is used in a reference to indicate the need for attention <code> Snippets of code <small> Disclaimers, precautions, etcCopy the code

Multimedia elements

The picture

img

  • The SRC attribute is required to embed the image in the file path
  • The Alt attribute contains a text description of the image and is optional. The screen reader will then read these descriptions to the user who wants to use the screen reader to let them know what the image means. When the image fails to load (network error, content blocked, or link expired), the browser displays the text in the Alt attribute on the page
  • Decoding modes: asynchronous and synchronous
  • Loading a lazy loading

picture

  • Elements by containing zero or more elements and aElement to provide versions of images for different display/device scenarios
  • Media properties: render the corresponding image according to the media conditions, similar to media query
  • The TYPE attribute: the MIME type that renders the corresponding image according to what the browser supports

Audio and video

video

  • The SRC attribute is required to embed the video file path
  • Controls Specifies whether to display browser controls. You can create custom controls
  • Autoplay Indicates whether toplay autoplay
  • The source element represents alternative resources for the video (different formats, sharpness, and sequence of attempts if reading fails or decoding fails)

HTML parsing

DOM(Document Object Model) : A structured representation of nodes and defines a way for programs to access this structure linking Web pages to scripting languages

  • Build a DOM tree
  • Style calculation to build the CSSOM tree
  • Combine DOM and CSSOM into a Render tree
  • Layout calculation
  • draw

conclusion

I have participated in the byte youth training camp, so I am preparing a series of relearning front end. Due to the time, it may only be a study note.

Update time: try the course day or every other day.

If there are any mistakes above, please let us know in the comments section!

Click “Like” before you go! 😗