• Author: Chen Da Yu Tou
  • Making: KRISACHAN

The previous article shared logical properties of CSS and the box model shared some knowledge about the device screen and the coordinate composition of the browser viewport. This article will share some knowledge about HTML.

We have a brief introduction to the history of HTML at the beginning of the prologue. This article does not cover the details. If you are interested, check out Wikipedia.

HTML memorabilia

First, let’s take a quick look at how HTML has evolved (without explaining the differences between different versions).

  1. In 1982 Tim Berners-Lee created HTML;
  2. Tim Berners-Lee defined HTML in 1989 and wrote browser and server software by the end of 1990;
  3. In late 1991 Tim Berners-Lee mentioned HTML tags (which describe 18 elements, including the original, relatively simple design of HTML);
  4. In 1993, the Internet Engineering Task Force (IETF) published the first PROPOSAL for an HTML specification;
  5. In 1994, THE IETF created an HTML working group;
  6. HTML 2.0 was released as IETF RFC 1866 on 24 November 1995;
  7. The IETF closed its HTML working group on September 12, 1996;
  8. HTML 3.2 was released as a W3C recommendation on January 14, 1997. This is the first version to be completely developed and standardized by the W3C;
  9. HTML 4.0 was released as a W3C recommendation on December 18, 1997;
  10. On April 24, 1998, fine tuning was carried out without adding the version number;
  11. HTML 4.01 was released as a W3C recommendation on December 24, 1999;
  12. May 2000 ISO/IEC 15445:2000 (“ISO HTML”, based on HTML 4.01 strict version) was released as an ISO/IEC international standard.
  13. HTML 5 was released as a W3C recommendation on October 28, 2014;
  14. On March 20, 2015 HTML6 was proposed by W3C as a proposal.
  15. In November 2016, HTML5.1 was released as a W3C recommendation.
  16. HTML5.2 was released as a W3C recommendation on December 14, 2017;
  17. HTML5.3 was released as a W3C recommendation on October 18, 2018.

Fish head note: Some of the above information is really sad…

HTML tags

For everyday business, use span on the same line, div for line breaks, and A for hyperlinks. Ugly? Add color ah, not big enough? Font: xx-large Well, no problem, proficient in HTML. 🙂

If you’re reading this right now, you’re probably thinking, “What’s the point of HTML? I write it every day, and I crush div letters on the keyboard. This is for beginners.”

Yeah, you’re right. That’s the end of this piece, bye!

Oh, no, in fact, HTML is not simple in fishhead’s view. As a language originally born for the communication of scholars, it is full of rigor itself, and it has been developed for 37 years, it is not simple.

Fish head note: this article will not introduce the structure of the HTML tag and file composition, there is a need to understand the children’s referenceMDNwithW3school

First let’s look at what a basic HTML page would look like:


      
<html>
  <head>
    <meta charset="utf-8">
    <title>hello world</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>
Copy the code

From the above we can see that a basic HTML page will have
, which tells the browser that this is an HTML document, , which defines various document attributes, and , which defines the content body.

First of all, let’s take a look at the details of these major labels and sub-labels.

DOCTYPE

is a declaration, not a tag, and must be on the first line of the HTML document, before the < HTML > tag. It is an instruction to the Web browser about which HTML version of the page to write. You must always add
declaration so that the browser knows the document type. Refer to HTML elements and valid DTDS for details.

html

< HTML >
defines the start and end points of the document, and between them are the header and body of the document. Let’s take a look at the exclusive attributes that can be added to the < HTML >
tag:

attribute value describe
manifest url Define a URL that describes the cache information for a document. (Abandoned)
xmlns www.w3.org/1999/xhtml Define XML namespace attributes.

Global properties

HTML attributes give meaning and context to elements. The following global attributes can be used for any HTML element.

attribute describe
accesskey Specifies a shortcut key for the active element.
class Specifies one or more class names for the element (referencing classes in the stylesheet).
contenteditable Specifies whether the element content is editable.
contextmenu Specifies the context menu for the element. The context menu is displayed when the user clicks on the element.
data-* Private custom data for storing pages or applications.
dir Specifies the textual direction of the content in the element.
draggable Specifies whether elements can be dragged.
dropzone Specifies whether to copy, move, or link data when dragged.
hidden The specified element is still not or is no longer relevant.
id Specifies the unique ID of the element.
lang The language that specifies the content of the element.
spellcheck Specifies whether elements are spell-checked and syntactic checked.
style Specifies inline CSS styles for elements.
tabindex Specifies the TAB order of elements.
title Specifies additional information about the element.
translate Specifies whether element content should be translated.

head

The tag is used to define the header of the document, which is the container for all the header elements. describes various properties and information about a document, including its title, location on the Web, and relationship to other documents.

What tags can be placed inside ?

The first is<base>

is a useful tag that many people ignore.

The tag specifies the default address or target for all links on the page.

Typically, the browser extracts elements from the URL of the current document to fill in the blanks in the relative URL.

Use the tag to change this. Instead of using the URL of the current document, the browser then uses the specified base URL to resolve all relative urls. These include urls in the < A >, , ,

tags.
attribute value describe
href URL Specifies the base URL for all relative links on the page. (will be)
target _blank , _parent , _self , _top , framename Where to open all the links in the page. (optional)

The code is as follows:


      
<html>
  <head>
    <base href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/~tplv-t2oaga2asx-image.image" />
    <base target="_blank" />
  </head>
  <body>
    <img src="2018/12/25/167e378b5af48d99? imageView2/1/w/180/h/180/q/85/format/webp/interlace/1" />
    <a href="2018/12/25/167e378b5af48d99? imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">jump</a>
  </body>
</html>
Copy the code

According to the above [DEMO] (krissarea. Gitee. IO/blog/CSS/head – base. HTML) we can find that, in setting up the < base > url and target, the < img > and < a > even if you don’t set the base url to the jump, Can also get the desired effect.

And then the<link>,<style>,<title>

,

<link>

is mainly used for style file import

attribute value describe
charset char_encoding It’s not supported in HTML5.
href URL Specifies the location of the linked document.
hreflang language_code Specifies the language of the Chinese text of the linked document.
media media_query Specifies the device on which the linked document will be displayed.
rel alternate , author , help , icon , licence , next , pingback , prefetch , prev , search , sidebar , stylesheet , tag Specifies the relationship between the current document and the linked document.
rev reversed relationship It’s not supported in HTML5.
sizes *height , xwidth , *any Specifies the size of the linked resource. Only available for rel=”icon”.
target _blank , _self , _top , _parent , frame_name It’s not supported in HTML5.
type MIME_type Specifies the MIME type of the linked document.

<style>

attribute value describe
type text/css Specifies the MIME type of the stylesheet. (will be)
media screen , tty , tv , projection , handheld , print , braille , aural , all Specify different media types for stylesheets. (optional)

<title>

You can define the title of the document.

But maybe you don’t know it, or maybe you do it, or maybe you don’t, but the

tag is the only thing that’s required in the tag.

<meta>

Finally, there is
, an important tag that provides meta-information about the current HTML element, such as description, search engine specific keywords, and refresh frequency.

attribute objects are as follows:

attribute describe
content Sets or returns the value of the element’s Content property.
http-equiv Connect the Content property to an HTTP header.
name Attach the Content property to a name.
scheme Sets or returns the format of the value used to interpret the Content property.

Let’s start with content, which contains the value of the HTTP-Equiv or Name attribute, depending on which value is used.

<meta name="keywords" content="The WEB, CSS, fish head" />
Copy the code

The second is Scheme, which is used to set or return the format of the value used to interpret the Content property. Examples are as follows:

<meta name="revised" content="2019-04-03" scheme="YYYY-MM-DD" />
Copy the code

Interestingly, MDN has this description:

Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.

It means don’t use this property, because it’s not useful. 🙂

Then there is name, which defines the name of the document-level metadata. Note that the name cannot be set if the defined metadata is set to ItemProp, HTTP-equiv or Charset.

The meaning of name is as follows

value describe
application-name Defines the name of the web application running on the page
author Document authors
description This contains a short and accurate description of the page’s contents. Some browsers, such as Firefox and Opera, use this as the default description for bookmarks pages.
generator Contains the identifier of the software that generated the page.
keywords Contains words related to comma-separated page content.
referrer Controls HTTP in all HTTP requests made from this documentRefererThe contents of the header.
others Other things.

For detailed name values, visit developer.mozilla.org/zh-CN/docs/… .

Finally, we look at http-equiv, which connects the Content property to the HTTP header.

value describe
content-security-policy Allows site managers to control user agent resources on specified pages. With a few exceptions, this policy will largely specify the service source as well as the script endpoint. This will help prevent cross-site scripting attacks.
default-style This property specifies the preferred style sheet to use on the page.contentProperties must contain<link>The title of the element,hrefProperty that links to or contains a CSS style sheet<style>The title of the element.
refresh This property specifies if<content>If it contains only one positive integer, it is the interval (in seconds) between page reloads, and if it contains a positive integer followed by a string, it is the interval (in seconds) between redirects to the specified link.

For details on http-equiv values, visit developer.mozilla.org/zh-CN/docs/… .

body

The tag holds the contents of the document. There are about 357 available tags in < HTML >, of which MDN classifies the elements in **** into 11 categories. Developer.mozilla.org zh-cn /docs/Web/HT… .

According to THE division of MDN, there are the following 11 types of labels:

1. Content Partitioning:

The content partitioning element allows you to organize document content logically.

2. Text content

Use HTML text content elements to organize the contents of blocks or sections within open and closed tags . These elements identify the purpose or structure of the content, which is important for accessibility and SEO.

3. Inline text semantics

Use HTML Inline text semantics to define the semantics, structure, or style of a word, line of content, or any text.

4. Pictures and multimedia

HTML supports a variety of multimedia resources, such as images, audio, and video.

5. Embedded content

In addition to regular multimedia content, HTML can include a variety of other content, even if it’s not easy to interact with.

6. The script

For creating dynamic content and Web applications, HTML supports the use of scripting languages, most notably JavaScript. Some elements support this functionality.

7. Edit the logo

These elements can indicate parts of a text that have been changed.

8. Content of the form

The elements here are used to create and process table data.

9. The form

HTML provides a number of elements that can be used together to create a form that a user can fill out and submit to a web site or application.

10. Interactive elements

HTML provides a set of elements that help you create interactive user interface objects.

11. Web components

Web components are an HTML-related technology that, in simple terms, allows you to create custom elements and use them just like normal HTML. In addition, you can even create standard HTML elements that are customized.

Label semantics

Does semantics matter?

Some argue that HTML semantics don’t matter when there are more scenarios for “bidding rankings” and “software interfaces” than for “rich text.” Div, SPAN, and A tags are pretty much all you need, and the interesting thing is that most of the HTML structure on document sites like Wikipedia and Wikipedia is the same.

But is it really not important to semantic tags?

Yu Tou will not answer this question temporarily, but will reflect and practice yu Tou’s idea in the subsequent articles. If you are interested in this question, you can also discuss it by leaving a comment or adding yutou friends or joining Yutou’s wechat group. The contact information is at the bottom of the article.

As we know, in HTML, each title is defined by the title tag, there are six title tags, respectively: H1 ~6. Examples are as follows:

<h1>I'm a level one title</h1>
<h2>I'm a secondary title</h2>
<h3>I'm a level 3 title</h3>
<h4>I'm a level four title</h4>
<h5>I'm a category five headline</h5>
<h6>I'm a six level title</h6>
Copy the code

For consecutive headings, use

to join:

<hgroup>
  <h1>I'm a level one title</h1>
    <h2>I'm a secondary title</h2>
    <h3>I'm a level 3 title</h3>
    <h4>I'm a level four title</h4>
    <h5>I'm a category five headline</h5>
    <h6>I'm a six level title</h6>
</hgroup>
Copy the code

For paragraph content, use

:

<p>I'm paragraph content</p>
Copy the code

If we want to make a list we can use < OL >
or

  • . If we just want to mark the project, we can use

  • as an example: 

    <ul>
  <li>apple</li>
  <li>banana</li>
  <li>Altman,</li>
  <li>The oranges</li>
</ul>
Copy the code

    To mark the order, use < OL >
    , as shown in the following example:

    <ol>
  <li>Go ahead 300 meters</li>
  <li>Turn right</li>
  <li>Go ahead 300 meters</li>
  <li>Turn right</li>
  <li>Go ahead 300 meters</li>
</ol>
Copy the code

    Of course we can also nest as needed.

    <ol>
<li>First with a protein, salt half teaspoon and starch two tablespoons stir evenly, adjust "marinade", chicken breast cut into about a centimeter square of broken ding and "marinade" stir evenly, pickled half an hour.</li>
  <li>Mix 1 tablespoon of soy sauce, 1 tablespoon of starch water, 1/2 teaspoon of sugar, 1/4 teaspoon of salt, 1 teaspoon of white vinegar, and 1/2 teaspoon of minced garlic to make a "seasoning mix."</li>
  <li>After the chicken is marinated, the salad oil is put into the pot to heat up. First, pour the chicken into the pot and fry it for half a minute with high fire. After the chicken turns brown, remove it and drain the oil.</li>
  <li>Leave about two tablespoons of oil in the wok, heat up the dried chilies, fry them with low heat until fragrant, then add the Chinese prickly pepper and shallot pieces to stir until fragrant. Then put the chicken back into the pot, fry it quickly with high fire for a moment, and then pour in the "comprehensive seasoning" to continue to fry.</li>
  <ul>
    <li>If you use authentic Sichuanese cooking, you just add peanuts at the end, toss them a few times and you're ready to go.</li>
    <li>If you're in the north, add diced cucumbers, carrots and peanuts, toss and stir.</li>
  </ul>
</ol>
Copy the code

    When we speak, we tend to emphasize certain words in order to make them more important, as in the following example:

    <p>I<em>very</em>Like to work overtime</p>
Copy the code

    If it is stressed, it is:

    <p>Fish head, tomorrow<strong>Don't be late</strong>the</p>
Copy the code

    Semantics is needed everywhere around us. We rely on our past learning experience to know what objects represent by looking at them. For example, “Red stop, green go”. If the semantics are wrong or inverted, the impact is unimaginable.

    In the same way, we need to make sure we use the right elements to give content the right meaning, function, and shape.

    Each tag has its own usage scenarios, and it would take more than one article to list them all. More need to be able to stick to see you here to explore, of course, you are also very welcome to discuss the semantics of tags with fish head.

    References:

    HTML

    HTML (Hypertext Markup Language)

    HTML Element Reference

    The HTML element

    HTML word processing basics

    HTML elements and a valid DTD

    HTML Global attributes

    HTML <head>The label

    HTML DOM Meta object

    MDN <meta>The label

    Repeat the front-end

    HTML4

    HTML5

    HTML5.1

    10 new HTML 5.1 features

    HTML5.2

    HTML5.3

    html6test

    HTML6 proposal

    ARIA in HTML

    Document Object Model

    What if it does? HTML6- Broad concepts

    Hello CSS series

    Hello CSS is a series of articles on the basic concepts of CSS, designed to help you understand and improve the status of CSS in the minds of all developers. Due to my limited level of fish head, writing is limited, if you find any unreasonable, incorrect place in the article, but also bother not to point out, I will be very grateful; If you have any thoughts or questions through the article, I hope you can leave a message, and we can discuss with each other. If I get anything out of this series, I’m overjoyed!

    If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.