Three Elements of the Web

If the web page as a biological words, HTML constitutes the skeleton of the web page, so that the web page has a basic structure; CSS forms the skin of the web page, so that the web page is no longer boring; And JS is equivalent to a variety of biological organs, control the web page to achieve a variety of operations.

Introduction of HTML

Hyper Text Markup Language (HTML) is a Markup Language used to build the basic structure and content of web pages.

Hypertext: Text that contains links to other text.

Markup language: Combines text and other information related to the text to present information about the structure of the document.

The development history

  • 1989 – Berners-Lee proposes an Internet-based hypertext system
  • 1993 – The Internet Engineering Task Force (IETF) releases the first TML proposal, resulting in the first version of HTML
  • 1994 – W3C is established and takes over the standardization of HTML
  • 1995 – after several drafts, HTML2.0 was released (this version mainly supplemented some basic features, including form-based file uploading, tabulation, internationalization, etc.)
  • 1997 – January release of HTML3.2 followed by December release of HTML4.0 (which adopted many browser-specific element types and attributes)
  • 2014 – HTML5 is released as a W3C recommendation

HTML structure

  • An HTML document contains multiple HTML tags, each with its own unique features.
  • HTML element = Start tag + end tag + element content<P> I am a P tag </ P>.
  • But there are also some elements that are a tag such as: < img >; <br>And so on.
  • Tags in HTML are not case sensitive.
  • Elements can be nested within other elements.
  • Elements can have attributes that contain additional information about the element.

Build a simple page based on a few tags:

  • <! DOCTYPE html>: is placed at the front of the HTML document and will parse the rendered page according to the W3C HTML 5 standard.
  • <html>: the root element, which contains the entire page.
  • <head>: is not visible to users and contains such things as search engine oriented keywords, page descriptions, character encoding declarations, CSS styles, etc.
  • <body>: This element contains content that can be accessed by the user, including text, graphics, video, games, audio, etc.

The elements contained in the head

Meta is an auxiliary tag in the HEAD section of HTML. It is located at the head of the document and contains no content. The attributes of the tag define the name/value pair associated with the document.

defines the document character encoding

< Meta name=”viewport” content=”width= device-width,initial =1.0, maximum-scale =1.0, User-Scalable =0″> Defines the area of the device screen used to display web pages.

Is used to provide some information to a particular site.

title

: The title of the page, which is displayed on the browser TAB.

style

link

The favicon of the current page

script

As defer, the script can be executed until the DOM has been fully parsed and displayed, only for external scripts. The script with the defer property blocks the DOMContentL oaded event until the script is loaded and parsed.

Async immediately downloads scripts without hindering other operations, such as downloading other resources or loading other scripts. It is only valid for external scripts.

Elements in 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 elementsThe < div >, < p >, < h1 > - < h6 >, < ol >, < ul >, < dl >, < table >, < address >, < blockquote >, < form >

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>

Semantic HTML

Advantages of semantics

  • Easy for the user to read, giving the page a clear structure when styles are lost.
  • For SEO, search engines use tags to determine the context and weight of each keyword.
  • It is convenient for other devices to parse, such as blind readers, according to the semantic rendering of web pages
  • Good for development and maintenance, semantic more readable, code better maintenance, and CSS3 relationship more harmonious.

Semantic block

<header>

  • Present introductory information
  • Usually contains a set of introductory or navigational elements such as a title, Logo, search box, author name, etc
  • Can’t putThe < footer >, < address >Or the otherThe < header >Elements of the internal
<header>
  <h1>html<h1>
  <img src="https://www.bilibili.com" alt="bilibili">
</header>
Copy the code

<nav>

  • Provide navigation links in the current document or other documents, such as menus, directories, indexes, and so on
  • This is used to place the most popular links. The less common links are usually placed in the footer at the bottom
<nav>
<ul>
<li><a herf="* *">html</a></li>
<li><a herf="* *">css</a></li>
<li><a herf="* *">js</a></li>
</ul>
</nav>
Copy the code

<article>

  • Separate documents, pages, applications, sites
  • Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etc
<h1>How's the weather today</h1>
  <article class="user">
  <h3>On the first floor</h3>
  <p>It's good</p>
  <article class="user">
  <h3>On the second floor</h3>
  <p>It's good</p>
<article class="user">
<h3>On the third floor</h3>
  <p>It's good</p>
Copy the code

<section>

  • Group content by topic, usually with a title
  • <section>It usually appears in the outline of a document
  • Don’t put the<section>To use as a normal container, for example, to beautify fragment styles<div>A more appropriate
  • If there are separate chunks of content inside the element that can be published individually, it is more suitable<article>

<aside>

  • Represents a section that has little to do with the rest of the page’s content, or that does not affect the overall content when taken apart
  • Usually used in the sidebar to display ads, tips, quotes, etc

Semantic grouping

<figure>

  • Contains independently referenced content: charts, illustrations, code, etc
  • There is usually a title

<figcaption>

  • The description and title of the icon associated with it
  • Usually located in<figure>The first or last of

<blockquote>

  • Block-level reference elements
  • The cite attribute represents the URL of the source, a long reference

<dl>/<dt>/<dd>

  • Used to describe a set of key – value pairs
  • Usually used in metadata, term definition, and other scenarios

Semantic text

<cite>

  • <cite>The element is usually used to refer to the title of the work.
  • Include citations of papers, documents, books, movies, etc

<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 date
Contact information for a person or organization

is used in references to indicate that attention is needed

Code snippet

Disclaimer, notes, etc

Multimedia elements

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

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