Detailed explanation of HTML basics (Part 1)

Detailed explanation of HTML basics (Part 1)

1. Understand the WEB

Web pages are mainly composed of elements such as text, images and hyperlinks. Of course, in addition to these elements, web pages can also include audio, video and Flash.

The browser is the platform for displaying and running web pages.

Browser kernel (typesetting engine, interpretation engine, rendering engine)

Responsible for reading web page content, organizing information, calculating how to display the web page and displaying the page.

Browser Kernel Remark
IE Trident IE, Cheetah Security, 360 Speed ​​Browser, Baidu Browser
Firefox Gecko Unfortunately, it has declined in recent years. It opens slowly, needs frequent upgrades, has a pig-like teammate called Flash, and a god-like opponent called Chrome.
Safari webkit Now many people mistakenly call webkit the chrome kernel (even though the chrome kernel is already blink). Apple felt like its wife was snatched away by someone else, and it even fainted in the toilet crying.
chrome Chromium/Blink The Blink rendering engine (i.e. the browser core) was developed in the Chromium project and built into the Chrome browser. Blink is actually a branch of WebKit. The latest versions of most domestic browsers use the Blink kernel. Secondary Development
Opera blink Now follow chrome to use the blink kernel.

Web Standards

"Composition" 👉 Structural standards, performance standards and behavioral standards

  • Structural standards for organizing and categorizing elements on a web page (HTML)
  • Presentation standards are used to set the layout, color, size and other appearance attributes of web page elements (CSS)
  • Behavior standards are used to define web page models and write interactions (JavaScript)

「Advantages of Web Standards」👇

  • Easy to maintain: You can change the style of the entire site by simply changing the CSS file
  • Fast page response: HTML document size is reduced and response time is short
  • Accessibility: Web pages written in semantic HTML (HTML with structure and presentation separated) are easier to be recognized by screen readers.
  • Device compatibility: Different style sheets can make web pages look different on different devices.
  • Search engines: Semantic HTML can be more easily parsed by search engines and improve rankings

2. Introduction to HTML

HTML (Hyper Text Markup Language): Hypertext Markup Language

The so-called hypertext has two meanings:

  • Because it can add pictures, sounds, animations, multimedia and other content (beyond the text limit)
  • Not only that, it can also jump from one file to another, connecting (hyperlinking text) with files hosted anywhere in the world.

「HTML skeleton format」

<!-- The largest root tag in the page -->
<html>
    <!-- Header tag -->
    <head>     
        <!-- Title Tag -->
        <title></title> 
    </head>
    <!-- Main body of the document -->
    <body>
    </body>
</html>

Team agreed capitalization

HTML tag names, class names, tag attributes, and most attribute values ​​are all in lowercase

HTML element tag classification

  • Regular elements (double tags)
  • Empty element (single tag)
 Regular elements (double tags)
  <Tag name> content</Tag name> For example <body> I am text</body>
  Empty element (single tag)
  <Tag name/> For example<br /> or<br>

HTML tag relationships

  • Nested relationship parent-child inclusion relationship
  • Parallel relationship Brother-level parallel relationship
  • If the relationship between two tags is a nested relationship, the child element is best indented by the position of a tab key (a tab is 4 spaces). If it is a parallel relationship, it is best to align it vertically.

Document Type <!DOCTYPE>

The document type is used to indicate what version of XHTML or HTML you are using. Tells the browser to parse the page according to the HTML5 standard.

Page language lang

Lang specifies the language used by the HTML tag content

 <html lang="en">  
  en defines the language as English zh-CN defines the language as Chinese

The role of lang

1. Set the CSS style or font of different languages ​​according to the lang attribute

2. Tell the search engine to do accurate identification

3. Let the grammar checker do the language identification

4. Help translation tools to identify

5. Help web page readers to identify

Character Set

A character set is a collection of multiple characters. In order for a computer to accurately process text in various character sets, character encoding is required so that the computer can recognize and store various texts.

  • UTF-8 is the most commonly used character set encoding method.
  • The html file is saved in UTF-8 encoding, and the browser decodes the corresponding html content according to the encoding.
  <meta charset="UTF-8" />

Usage of meta viewport

Usually viewport refers to the window or viewport. The area on a browser (or possibly a webview in an app) that is used to display a web page. The viewports on mobile and PC are different. The viewport on PC is the browser window area, while on mobile there are three different viewport concepts: layout viewport, visual viewport, and ideal viewport.

meta has two attributes name and http-equiv

The value of the name attribute

  • Keywords (keywords) tell search engines the keywords of the web page
  • Description (website content description) is used to tell search engines the main content of your website.
  • viewport (mobile terminal window)
  • Robots (defines the indexing method of search engine crawlers) Robots are used to tell crawlers which pages need to be indexed and which pages do not need to be indexed
  • author
  • generator (webpage creation software)
  • copyright

http-equiv has the following parameters

http-equiv is equivalent to the file header of http. It can return some useful information to the browser to help display the content of the web page correctly and accurately.

content-Type Set the web page character set (Html4 usage, not recommended)

Expires(期限) , which can be used to set the expiration time of a web page. Once a web page expires, it must be retransmitted to the server.

Pragma(cache模式) , used to set the browser to prohibit the page content from being retrieved from the local machine's cache. Once set, once you leave the web page, it cannot be retrieved from the cache again.

Refresh(刷新) , automatically refresh and point to the new page.

cache-control （ caching mechanism followed by requests and responses)

	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Semanticization of HTML tags

  • It is convenient for reading and maintaining the code, and it can make the page present a clear structure when the style is lost.
  • It is beneficial to SEO, as search engines use tags to determine the context and weight of individual keywords.
  • Facilitates parsing by other devices, such as blind readers rendering web pages based on semantics

"Extended" tag : specifies the default URL for all links on the page and sets the open status of the overall link

<head>
    <base href="http://www.baidu.com" target="_blank">
    <base target="_self">
</head>
<body>
    <a href="">Test</a> Jump to Baidu</body>

3. Common HTML tags

1. Layout tags : Mainly used with CSS, tags that display the structure of a web page, and are the most commonly used tags for web page layout.

  • Title tag h (h1~h6)
  • The paragraph tag p can divide the HTML document into several paragraphs
  • Horizontal line label hr
  • Line break tag br
  • Div and span tags: have no semantics and are the two most important boxes in our web page layout.

2. Typography Tags

  • b and strong Text is displayed in bold
  • i and em make the text italic
  • s and del` The text is displayed with a strikethrough
  • u and ins text are underlined

3. Tag attributes (inline)

When using HTML to create web pages, if you want the HTML tags to provide more information, you can use the attributes of the HTML tags to set them.

<Tag name attribute 1 = "attribute value 1" attribute 2 = "attribute value 2" ...> content </tag name><mobile phone color = "red" size = "5 inches"> </mobile phone>

4. Image tag img

insert image description here

Notice:

  • Tags can have multiple attributes, which must be written in the start tag, after the tag name.
  • There is no particular order between attributes. Tag names and attributes, as well as attributes, are separated by spaces.
  • Take the format of key-value pair key=“value”
<img src="cz.jpg" width="300" height="300" border="3" title="This is a small dandelion" />

5. Link tags (important)

<a href="jump target" target="target window pop-up method">text or image</a>
target="_self" default window pop-up mode target="_blank" new window pop-up
property effect
href Used to specify the URL address of the link target. (Required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink.
target Used to specify how to open the linked page. The possible values ​​are _self and _blank. _self is the default value, and _blank is used to open the page in a new window.

The difference between src and href

In a nutshell: src is the source of the resource, href is the redirect URL

1.src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.

2. src is the abbreviation of source, which points to the location of external resources. The content pointed to will be embedded in the location of the current tag in the document. When the src resource is requested, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frame elements, etc. When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same applies to elements such as images and frames, which is similar to embedding the pointed resource into the current tag. This is also why you should put js scripts at the bottom instead of at the top.

3.href is the abbreviation of Hypertext Reference, which points to the location of network resources and establishes a link between the current element (anchor) or the current document (link). If we add it in the document, the browser will recognize the document as a CSS file, and it will download the resources in parallel and will not stop processing the current document. This is why it is recommended to use the link method to load CSS instead of the @import method.

Notice:

1. External links need to add http:// www.baidu.com

2. Internal links can directly link to the internal page name, such as <a href="index.html"> Homepage

3. If the link target is not determined at the time, the href attribute value of the link tag is usually defined as "#" (that is, href="#"), indicating that the link is temporarily an empty link.

4. Not only can you create text hyperlinks, you can also add hyperlinks to various web page elements such as images, tables, audio, video, etc.

Anchor positioning : By creating anchor links, users can quickly locate target content.

1. Use the corresponding id name to mark the location of the jump target. (Find the target)
  <h3 id="two">Episode 2</h3> 
2. Use <a href="#id name">Link text</a> to create link text (clickable) 
  <a href="#two">

6. Annotation Tags

<!-- Comment statement-->     
  The shortcut key is: ctrl + /       
  Or ctrl + shift + /

Team agreement: There is a space before and after the comment content, and the comment is located above the code to be commented on, occupying a separate line

7. Path

insert image description here

8. Other knowledge

Preformatted text Text within a label element usually preserves spaces and line breaks. The text will also be rendered in a monospaced font. Formatting text means displaying the page according to the text format we have written in advance, retaining spaces and line breaks, etc.

Special characters

insert image description here

What is XHTML

  • XHTML stands for "EXtensible HyperText Markup Language".
  • The goal of XHTML is to replace HTML.
  • XHTML is almost identical to HTML 4.01.
  • XHTML is a stricter and cleaner version of HTML.
  • XHTML is a strict version of HTML that is redefined as an XML application. For example, it requires that tags must be lowercase, tags must be closed correctly, tags must be in the correct order, and attributes must use double quotes.
  • XHTML is a W3C standard.

What should I pay attention to when writing HTML code?

  • Use as few non-semantic div and span tags as possible;
  • When the semantics are not obvious, when you can use either div or p, try to use p, because p has upper and lower spacing by default, which is beneficial for compatibility with special terminals;
  • Do not use pure style tags, such as b, font, u, etc., use css settings instead.
  • Text that needs to be emphasized can be included in strong or em tags (browser default styles, don't use them if you can specify them with CSS). The default style of strong is bold (don't use b), and em is italic (don't use i);
  • When using a table, use caption for the title, thead for the header, tbody for the main body, and tfoot for the footer. The table header and general cells should be distinguished, the table header uses th and the cells use td;
  • The form fields should be wrapped with fieldset tags, and the purpose of the form should be explained with legend tags;
  • The description text corresponding to each input tag needs to use the label tag, and by setting the id attribute for the input and setting for in the label tag, the description text is associated with the corresponding input.

4. Table

It is still a commonly used tag, but it is not used for layout. It is commonly used to display and present tabular data. Because it can make the data display very regular and easy to read. Especially when displaying data in the background, it is very important to be proficient in using tables. A clean and simple table can present complex data in an orderly manner.

Create a table

<table>
  <tr>
    <td>Text in the cell</td>
    ...
  </tr>
  ...
</table>

table, tr, td, they are the basic tags for creating tables, and none of them can be missing

  • table is used to define a table tag.
  • The tr tag is used to define rows in a table and must be nested in the table tag.
  • td is used to define cells in a table and must be nested in a tag.
  • The letters td refer to table data, which is the content of a data cell. Now we understand that a table is best used to store data. td is like a container that can hold all elements.

insert image description here

Header cell tag th: Generally, the header cell is located in the first row or column of the table, and the text is bold and centered. You only need to replace the corresponding cell tag with the header tag.

insert image description here

Table title caption Usually this title will be centered and displayed above the table. The caption tag must come right after the table tag. This tag only makes sense inside a table. You are the wind and I am the sand

<table>
   <caption>I am the table title</caption>
</table>

Table properties

insert image description here

The three parameters are 0. In our normal development, the three parameters border cellpadding cellspacing are 0

Merge cells. The order of merging is先上后下先左right. After merging, you need to delete the redundant cells.

  • Merge across rows: rowspan="number of merged cells"
  • Merge across columns: colspan="number of merged cells"

Summary table

Tag Name definition illustrate
< table></ table> Table Tags It's a square box.
< tr></ tr> Table row labels Row labels only make sense inside table tags
< td ></ td> Cell Labels The cell tag is a container-level element that can hold anything.
< th></ th> Header Cell Label It is still a cell, but the text inside it will be centered and bold
< caption ></ caption> Table title tag The title of the table follows the table and is centered with the table.
clospan and rowspan Merge attributes To merge cells

Table partition structure

For more complex tables, the structure of the table is relatively complex, so the table is divided into three parts: header, body and footnotes. These three parts are marked with: thead, tbody, and tfoot respectively, which makes it easier to distinguish the table structure.

Notice:

  • < thead ></ thead>: used to define the header of the table. Used to put titles and such. Must have label inside!
  • < tbody></ tbody>: Used to define the body of the table. Put the data body.
  • < tfoot></ tfoot> is used to place table footnotes, etc.
  • The above tags are all placed in the table tag.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

<<:  Pure HTML+CSS to achieve Element loading effect

>>:  Detailed explanation of HTML basics (Part 2)

Recommend

Detailed explanation of how to manually deploy a remote MySQL database in Linux

1. Install mysql Run the following command to upd...

HTML tag overflow processing application

Use CSS to modify scroll bars 1. Overflow setting...

How to add interface listening mask in Vue project

1. Business Background Using a mask layer to shie...

About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)

Database application is an indispensable part of ...

JavaScript Snake Implementation Code

This article example shares the specific code of ...

Web Design: Web Music Implementation Techniques

<br />When inserting music into a web page, ...

Vue+Websocket simply implements the chat function

This article shares the specific code of Vue+Webs...

Web page header optimization suggestions

Logo optimization: 1.The logo image should be as ...

Analysis of problems caused by MySQL case sensitivity

MYSQL is case sensitive Seeing the words is belie...

Introduction to deploying selenium crawler program under Linux system

Table of contents Preface 1. What is selenium? 2....

MySQL 8.0.25 installation and configuration tutorial under Linux

The latest tutorial for installing MySQL 8.0.25 o...

Summary of online MYSQL synchronization error troubleshooting methods (must read)

Preface After a failover occurs, a common problem...

Detailed explanation of the workbench example in mysql

MySQL Workbench - Modeling and design tool 1. Mod...

How to quickly deploy an Elasticsearch cluster using docker

This article will use Docker containers (orchestr...

Linux system MySQL8.0.19 quick installation and configuration tutorial diagram

Table of contents 1. Environment Introduction 2. ...