Crosstalk is a kind of language art, emphasizing speech, learning and singing, while HTML is a markup language, emphasizing compatibility and inclusion.

HTML: Hyper Text markup Language. It’s really not a programming language!

What is HTML?

Explain? What is TMD hypertext:

That’s text that contains a hyperlink that you can point to somewhere else, whether it’s in your current document, another document on your LAN, or anywhere else on the Internet. These documents form a tangled web of information.

What is a markup language?

This is a tagging system that describes the structure of a document. It does not have any semantics to manipulate machine behavior (it cannot compute 1+1), but it is simply a way for browsers or other programs to understand the structure of the text so that they can locate the parts to manipulate. Typical markup languages are HTML and XML.

What is HTML?

HTML uses Angle brackets tags to describe the structure and content of a web page. The purpose of a Web browser is to read HTML documents and display them as web pages. Instead of displaying HTML tags, browsers display the content of a page according to the label’s identity. The suffix of an HTML document is.html or.htm

Here is an HTML document

The page it displays in the browser is:

The basics of HTML

HTML tags

As the basic elements that make up HTML documents, HTML tag tags are often called HTML tags (HTML tags). HTML tags are keywords surrounded by Angle brackets, such as < HTML >

HTML tags usually come in pairs, such as and , where the first tag is the start tag and the second tag is the end tag, but some tags are “closed”, such as line breaks, insert images,

splitter, and so on

The HTML element

HTML files are made up of different elements that start with a start tag and end with a close tag. The content of the element is between the start tag and the end tag

The following example contains three HTML elements:

The < HTML > //< HTML > element defines the entire HTML document. Start tag < HTML >, end tag </ HTML >. The content is the body element. The <body> //<body> element defines the body of an HTML document. Start tag <body>, end tag </body>. The element content is the P element. <p>This is my first paragraph.</p> // This <p> element defines a paragraph in the HTML document. Start tag <p>, end tag </p>. Element content is: This is my first paragraph. </body> </html>Copy the code

Some HTML elements have empty content. Empty elements are closed in the start tag (ending at the end of the start tag).

HTML attributes

Attributes provide additional information for HTML elements. For example, <img SRC =” XXX “weight=”300” height=”300″/> assigns size attributes to image elements. It has some basic rules:

  • Attributes are always specified in the opening tag of an HTML element.

  • Attributes always take the form of name/value pairs, such as name=”value”.

  • Attribute values should always be enclosed in quotes. Double quotes are the most common, but single quotes are fine. In some rare cases, such as when the attribute value itself contains double quotes, you must use single quotes, for example:

    Name ='Bill "HelloWorld" Gates' <h1 align="center">This is a heading</h1> // Add a page background colorCopy the code

HTML Version declaration

The version declaration for HTML5.0 is: <! DOCTYPE html>

Tip: Declarations are case insensitive.

HTML <head>

Under the version declaration, there is the header definition, wrapped in the <head> tag. Elements within <head> can contain scripts, indicate where the browser can find the stylesheet, provide meta information, and so on. Elements that can be used within a <head> element are: <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <command>

Let’s look at the element tags one by one:

The

tag defines the title of the document. The title element is required in all HTML/XHTML documents. The title element can: optimize your SEO, define the title in the browser toolbar to provide the title that shows up when a page is added to a favorites page and the page title that shows up in search engine results,

The tag specifies the default address or target for all links on the page and can specify the root URL for all relative urls contained in a document. There can be only one element in a copy. If multiple elements are specified, only the first href and target values are used; the rest are ignored.

<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head> <a Href > http://www.w3school.com.cn < / a > / / href is empty, jump the default linkCopy the code

Note that handling in-page anchors with can be problematic, for example:

Given a < base href = “https://example.com” >

Anker

Links to example.com/#anchor are problematic, and the normal in-page anchor format would be example.com#anchor

The tag defines the relationship between the document and external resources. For example, introducing an external style file. CSS:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

The <style> tag defines the HTML style

HTML has three styles: built-in, inline, and inline

  1. First, the externality, which is currently the most popular, decoupled external style files (.css) from HTML documents, using tags to associate individual CSS files. For example, to reference an external stylesheet file in an index. HTML document, you need to create a link to the external stylesheet file in the header of the index. HTML code:

<link rel="stylesheet" type="text/css" herf="css/default.css"/>

  1. The built-in type is set in the <head> document header by the tag <style> and can be referenced by class or ID in <body>.

     <style>
     h1 {color: blue}
     p {background: yellow}
 </style>
Copy the code

  2. Inline types give styles to elements when they are marked, such as:

<h1 style="color: blue">

If all three of these style definitions exist for an element, the inline type takes precedence.

<meta> Metadata tags

The <meta> tag provides metadata about the HTML document. Metadata is information about data. Metadata is not displayed on the page, but is readable to the machine. Metadata can be used by browsers (how to display content or reload a page), search engines (keywords), or other Web services.

Typically, meta elements are used to specify metadata such as the description of the page, keywords, author of the document, etc. Some search engines use the name and content attributes of the meta element to index your page:

The name and content attributes describe the content of the page:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

The following meta elements define the keywords of the page:

<meta name="keywords" content="HTML, CSS, XML" />

Meta elements define the following types of metadata:

  • If the name attribute is set, the meta element provides document-level metadata that applies to the entire page.

  • If the HTTP-equiv attribute is set, the meta element is a compilation instruction that provides the same information as a similarly named HTTP header.

  • If the charset attribute is set, the meta element is a character set declaration that tells the document which character encoding to use.

  • If the ItemProp property is set, the meta element provides user-defined metadata. Note: The global attribute name has special semantics within the <meta> element; In addition, the ItemProp attribute cannot be used if any of the name, HTTP-equiv, or Charset attributes are present in the same <meta> tag.

    <meta http-equiv=" content-type "Content ="text/ HTML; <meta http-equiv="Refresh" content="5; url=http://www.w3school.com.cn" />Copy the code

The

The <script> element can either contain a script statement or point to an external script file via the SRC attribute. Common uses of JavaScript are image processing, form validation, and dynamic changes to content. To select HTML elements, JavaScript most commonly uses the document.getelementByid () method.

At the specified position, click the button to insert text: <p id="js1">daijiaoben</p> <button type="button" onclick="jsfunction()"> click </button> <script> function jsfunction(){ Document.getelementbyid ('js1').innerhtml ='test'} </script> Write the method to the function and call the function via the onclick event: <button type="button" onclick="myFunction()"> </button> <p id="demo"> This is a demo. </p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!" ; } </script>Copy the code

The

<noscript> Sorry, your browser does not support JavaScript! </noscript>

HTML character entity

In HTML, certain characters are reserved, such as the less-than (<) and greater-than (>) signs, because browsers mistake them for tags.

If we want to display reserved characters correctly, we must use character entities in our HTML source code. Character entities look like this: &entity_name or &#entity_number; To display a less than sign, we must write: < or < or <

A common character entity in HTML is the non-breaking space (). Browsers always truncate Spaces in HTML pages. For example, if you write 10 Spaces in the text, the browser will remove the extra Spaces and empty lines from the source code when the page is displayed. All consecutive Spaces or empty lines count as one space. If you want to increase the number of Spaces on a page, you need to use character entities. Such as:

<p>space &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; space</p>Copy the code

The result is:

HTML file path

Absolute file path The absolute file path is the full URL to an Internet file:

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

Relative path Relative path points to the file relative to the current page.

HTML recommended writing specification

Use HTML5 elements to unify semantics: With HTML5 elements such as

Use lowercase element names although HTML5 allows mixed uppercase and lowercase letters in element names. However, the use of lowercase element names is recommended. It’s not good to mix upper and lower case names. Lower case is cleaner. Lower case is easier to write

<section> 
  <p>This is a paragraph.</p>
</section>
Copy the code

Close empty HTML elements

Use a lower-case attribute name:

and add quotes to the attribute value

Style definitions

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
Copy the code
  • The open bracket is on the same line as the selector
  • Use a space before opening the parentheses
  • Use two character indentation
  • Use a colon followed by a space between each attribute and its value
  • Use Spaces after each comma or semicolon
  • Use a semicolon after each attribute value pair, including the last one
  • Use quotation marks around values only if they contain Spaces
  • Place the closing parentheses on a new line without Spaces
  • Avoid more than 80 characters per line

Use lowercase file names

Most Web servers (Apache, Unix) are case-sensitive to file names: London.jpg cannot be accessed as london.jpg.

Other Web servers (Microsoft, IIS) are case insensitive: London.jpg can be accessed as london.jpg or London.jpg. To avoid problems with file names, always use lowercase file names.

Always use the Alt attribute on the image. This property is important when the image cannot be displayed.

Always define the image size. This reduces flicker because the browser reserves space for the image before it loads. Do not add blank lines for no reason.

To improve readability, add blank lines to separate large or logical blocks of code. Do not use tabs.

Do not omit the < HTML > <body> <title> tag.

Above is the basic knowledge of HTML, programming is a craft, the foundation is very important, the foundation is firm, after the thing is reliable!

Thank you for reading. If there are any inaccuracies and errors, please leave a comment and correct them. I will correct them in time.

Summary is not easy, please do not reprint without permission, otherwise don’t blame old uncle you are welcome

Welcome those who like research technology to communicate with me, WX:1296386616

References:

www.runoob.com/html Rookie tutorial

Developer.mozilla.org/zh-CN/docs/… MDN Web docs

www.w3school.com.cn/html/index…. W3School