Lesson 02-HTML5 Infrastructure and Tag Application

Overview of HTML

Concept of HTML

HTML stands for HyperText Markup Language, which means Hypertext Markup Language.
HTML is not a programming language, but a descriptive markup language.
Function: HTML is a language responsible for describing the semantics of a document.

Concept: Hypertext

The so-called hypertext has two meanings:

(1) Content such as pictures, audio, video, animation, and multimedia become hypertext because they exceed the limitations of text.

(2) Not only that, it can also jump from one file to another and connect to files on hosts around the world. That is: hyperlink text.

Concept: Markup language

HTML is not a programming language, but a descriptive markup language. This has two main meanings:

(1) Markup language is a set of tags. For example: the tag <a> represents a hyperlink, the tag <img> represents an image, the tag <h1> represents a first-level title, etc., all of which belong to HTML tags.

To put it simply: a web page is composed of web page elements, which are described by HTML tags, and then parsed by the browser and displayed to the user.

(2) Programming languages ​​have a compilation process, while markup languages ​​do not have a compilation process. HTML tags are directly parsed and executed by the browser.

HTML is a language responsible for describing document semantics

A file in HTML format is a pure text file (that is, a renamed txt file), which uses some tags to describe semantics. These tags cannot be seen intuitively on the browser page, so it is called “hypertext markup language”.

Next, we need to learn many “tag pairs” in HTML, which can give different semantics to text.

For example, during an interview, you are asked, what is the role of the <h1> tag?

  • Correct answer: Add the semantics of the main title to the text.
  • Wrong answer: Make the text bold, black, and large.

A deeper understanding of “semantics” will become clear when we learn various tags next.

HTML’s special terms

  • Web page: A page composed of various tags is called a web page.
  • Home page: The starting page or navigation page of a website.
  • Tags: For example, <p> is called a start tag, and </p> is called an end tag, also called a tag. Each tag has a special meaning.
  • Element: For example, <p> content</p> is called an element.
  • Attribute: Auxiliary information given to each tag.
  • XHTML: HTML that complies with the XML syntax standard.
  • DHTML: dynamic. The page composed of javascript + css + html is a DHTML.
  • HTTP: Hypertext Transfer Protocol. It is used to specify the format of data when the client browser interacts with the server. SMTP: Mail Transfer Protocol, FTP: File Transfer Protocol.

Write the first HTML page

We open the VS Code software, create a new file named test.html (note that the file name is test and the suffix is ​​html), and save it locally.

Next, enter html:5 in the file, and then press the Tab key on the keyboard to automatically generate the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

After writing the tags, we use the Chrome browser to open the above test.html file to see the page effect:

At this point, the first simple HTML page is written. Doesn’t it feel very accomplished?

HTML structure detailed explanation

HTML tags usually appear in pairs (double-sided tags), such as <div> and </div>; there are also a few single tags (single-sided tags), such as: <br />, <hr /> and <img src="images/1.jpg" />, etc.

Attributes and tags, and between attributes, need to be separated by spaces. Attribute values ​​are enclosed in double quotes.

HTML skeleton tag classification

Tag nameDefinitionDescription
<html></html>HTML tagThe largest tag in the page, we call it the root tag
<head></head>Head of the documentNote that the tag we must set in the head tag is title
<titile></title>Title of the documentLet the page have its own web page title
<body></body>Body of the documentThe element contains all the contents of the document, and the page content is basically placed in the body

Quickly generate the skeleton of html

Method 1: Create a new html file in VS Code, enter html:5, press the Tab key, and the automatically generated code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Method 2: Install the Emmet plugin in Sublime Text. Create a new html file, enter html:5, and press the Tab key. The automatically generated code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Method 3: Install the Emmet plugin in Sublime Text. Create a new html file, enter html:xt, and press the Tab key. The automatically generated code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

In the above methods 2 and 3, we will find that the content of the first line is somewhat different, which is what we will talk about next. Document declaration header.

Document declaration header

The first line of any standard HTML page must be a statement starting with <!DOCTYPE ……>. This line is the document declaration header, that is, DocType Declaration, or DTD for short.

DTD can tell the browser which HTML or XHTML specification the document uses.

What specifications does HTML4.01 have?

HTML4.01 is compatible with IE6. HTML5 is compatible with IE9. Nowadays, mobile phones and mobile web pages can use HTML5 because it is more compatible.

As an aside, html1 to html3 are used by the US military and advanced research institutes and are not open to the public.

There are two major specifications in HTML4.01, and each major specification has 3 small specifications. So there are a total of 6 specifications (see the figure below).

HTML4.01 stipulates two types of specifications: normal and XHTML. HTML feels that some of its regulations are not strict, for example, can the tag use uppercase letters? <H1></H1> Therefore, HTML feels that some strict standards have been formulated into XHTML1.0. The letter X in XHTML means “strict”.

To summarize, HTML4.01 has a total of 6 DTDs. To put it bluntly, there are a total of 6 situations in the first line of HTML:

strict:

Indicates “strict”, and the requirements in this mode are more stringent. Where is this strictness reflected? Some tags cannot be used.
For example, the u tag is to underline a text, but this conflicts with the essence of HTML, because HTML is best to be responsible only for semantics, not style, and the underline u is a style. Therefore, the u tag cannot be used in strict.

So how to underline the text? In the future, CSS attributes will be used to solve it.

XHTML1.0 is more strict, because the system itself stipulates that, for example, tags must be lowercase, tags must be strictly closed, attributes must be quoted, and so on.

Transitional: means “normal”, this mode does not have some other specifications.

Frameset: means “frame”, used in the frame page.

In sublime, enter html:xt, x means XHTML, t means transitional.

In HTML5, DTD is greatly simplified, which means there is no XHTML in HTML5. The DTD (document declaration header) of HTML5 is as follows:

<!DOCTYPE html>

Page language lang

The following line of tags is used to specify the language type of the page:

<html lang="en">

There are two most common language types:

  • en: Define the page language as English.
  • zh-CN: Define the page language as Chinese.

Head tag head

A relatively complete skeleton of html5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="Very awesome" />
    <meta name="Description" content="NetEase is a leading Internet technology company in China, providing users with free email, games, and search engine services, and has opened more than 30 content channels such as news, entertainment, and sports, as well as blogs, videos, forums, and other interactive exchanges, gathering the power of people online." />
    <title>Document</title>
</head>
<body>

</body>
</html>

Interview questions:

  • Question: The head tag of a web page indicates the configuration of the page. What configuration is there?
  • Answer: Character set, keywords, page description, page title, IE adaptation, viewport, iPhone small icon, etc.

Common tags inside the head tag are as follows:

  • <title>: Specifies the title of the entire web page, which is displayed at the top of the browser.
  • <base>: Specifies the default address or default target for all links on the page.
  • <meta>: Provides basic information about the page
  • <body>: Used to define the content to be displayed in the HTML document, also known as the main tag. The code we write must be placed in this tag.
  • <link>: Defines the relationship between the document and external resources.

meta tag:

meta means “meta”. “Meta” configuration means basic configuration items.

Several common meta tags are as follows:

(1) Character set charset:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Character set is defined by the charset in the meta tag. Charset is character set, that is, the encoding method of the web page.

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

The above line of code is very critical and must be written. Otherwise, garbled characters may occur. For example, when you save, if the meta does not match the declaration, the browser will display garbled characters.

utf-8 is the most commonly used character set encoding method. Other commonly used character set encoding methods include gbk and gb2312. Regarding “encoding method”, we will introduce it in detail in the next paragraph.

(2) Viewport viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: means the viewport width is equal to the screen width.

The viewport knowledge point is difficult for beginners to understand, but it will be used when learning about mobile web applications.

(3) Define “keywords”:

For example:

<meta name="Keywords" content="NetEase, mailbox, game, news, sports, entertainment, women, Asian Games, forum, SMS" />

These keywords tell search engines what this webpage is about, which can improve the search hit rate. Let others find you and search for you.

(4) Define “page description”:

In addition to setting the character set, meta can also set keywords and page descriptions.

As long as the Description page description is set, Baidu search results will be able to display these statements. This technology is called SEO (search engine optimization).

Example of setting page description:

<meta name="Description"
content="NetEase is a leading Internet technology company in China. It provides users with free email, games, and search engine services. It has opened more than 30 content channels such as news, entertainment, and sports, as well as blogs, videos, forums, and other interactive exchanges, gathering the power of people online." />

You don’t need to remember the above <meta> tags, but there is another <meta> tag that you need to remember:

<meta http-equiv="refresh" content="3;http://www.baidu.com">

The above tag means that after 3 seconds, it will automatically jump to the Baidu page.

title tag:

Used to set the title of the web page:

<title>Title of the web page</title>

The title tag is also helpful for SEO search engine optimization.

base tag:

<base href="/">

The base tag is used to specify the base path. After specifying, all a links are based on this path.

<body> tag

The attributes of the <body> tag are:

  • bgcolor: Set the background color of the entire web page.
  • background: Set the background image of the entire web page.
  • text: Set the text color in the web page.
  • leftmargin: The left margin of the web page. The default for IE browser is 8 pixels.
  • topmargin: The top margin of the web page.
  • rightmargin: The right margin of the web page.
  • bottommargin: The bottom margin of the web page.

The <body> tag has some other attributes, which are explained here with an example:

In the above code, when we use hyperlinks for the words Point me, point me, the link attribute indicates the default display color, the alink attribute indicates the color when the mouse is clicked but not released, and the vlink attribute indicates the color displayed after the click is completed.

Introduction to computer coding

Computers cannot directly store text, but store codes.

Computers can only process binary data. For other data, such as 0-9, a-z, A-Z, we can define a set of rules to represent these characters. For example, A is represented by 110, B is represented by 111, etc.

ASCII code:
Published by the United States, 1 byte (8-bit binary) is used to represent a character, and a total of 2^8=256 characters can be represented.
The national language of the United States is English. As long as it can represent 0-9, a-z, A-Z, and special symbols.

ANSI code:
Each country has expanded the ASCII code to display its own language. Use 2 bytes (16-bit binary) to represent a Chinese character, and a total of 2^16=65536 Chinese characters can be represented. For example:
China’s ANSI code is GB2312 code (simplified), which encodes 6763 Chinese characters, including more than 600 special characters. There is also GBK (simplified).
Japan’s ANSI code is JIS code.
Taiwan’s ANSI encoding is BIG5 encoding (Traditional Chinese).

GBK:
GB2312 is extended to display rare and ancient Chinese characters. It now contains about 21,000 characters. It also provides 1,890 Chinese character code points. K means “extension”.

Unicode encoding (unified encoding):
Using 4 bytes (32-bit binary) to represent a character is a good idea, but the efficiency is too low. For example, the letter A only needs one byte to be represented by ASCII, but it needs 4 bytes to be represented by Unicode, which causes a great waste of space. The Unicode encoding of A is 0000 0000 0000 0000 0000 0000 0100 0000

UTF-8 (Unicode Transform Format) encoding:
Depending on the character, choose the length of its encoding. For example: a character A is represented by 1 byte, and a Chinese character is represented by 2 bytes.

There is no doubt that UTF-8 encoding is used in development, it is definitely correct.

There are two character sets that can be used for Chinese:

  • The first one: UTF-8. UTF-8 is an international universal character library, which covers all human languages ​​on the earth, such as Arabic, Chinese, bird language…
  • The second one: GBK (an extension of GB2312). GB2312 is a national standard, a Chinese character library, which only covers Chinese characters and some commonly used foreign languages, such as Japanese Katakana, and common symbols.

Font size: UTF-8 (full characters) > GB2312 (only Chinese characters)

Key point 1: avoid garbled characters
The character library of the current HTML document declared by the meta tag must be the same as the encoding type of the saved file, otherwise garbled characters (key point).

Take the sublime editor as an example. When we don’t set it, the default type of sublime is UTF-8. Once you change to gb2312, you must remember to set the save type of sublime: File → set File Encoding to → Chinese Simplified(GBK). The same is true for VS Code.

Key 2: Comparison of UTF-8 and gb2312
Save size: UTF-8 (more bloated, slower loading) > gb2312 (smaller, faster loading)

Summary:

  • UTF-8: many characters, languages ​​of various countries, but large save size, bloated file;
  • gb2312: few characters, only Chinese and a few foreign languages ​​and symbols, but small size, small file.

List 2 usage scenarios:

1) Your company is engaged in Japanese anime, and the names of Japanese anime often appear. The webpage should use UTF-8. If you use gb2312, you will not be able to display Japanese.
2) Your company is a Chinese webpage, and you are extremely pursuing the display speed of the webpage, so you should use gb2312. If UTF-8 is used, each Chinese character will have one more byte, so 5000 Chinese characters will have 5 more KB.

We have personally tested:

  • QQ, NetEase, and Sohu all use gb2312. These companies all pursue display speed.
  • The Tibetan channel of Xinhuanet uses UTF-8 to ensure the number of character sets.

How do we check the encoding method of a web page? Open the web page in the browser, right-click, select “View Web Page Source Code”, and find the charset attribute in the meta tag.

So, why can we view the source code of the web page? Because the opened HTML web page has been saved in my temporary folder, and the HTML in the temporary folder is a plain text file, so the plain text file can naturally view the source code of the web page.

HTML specifications

  • HTML is not case-sensitive, but it is recommended that HTML tag names, class names, tag attributes, and most attribute values ​​be unified in lowercase.
  • The suffix of HTML page is html or htm (some systems do not support suffixes longer than 3 characters, such as DOS system)

Standards for writing XHTML

(1) All tag elements must be correctly nested and cannot be cross-nested. Correct writing example: <h1><font></font></h1>
(2) All tags must be lowercase.
(3) All tags must be closed.

  • Double tags: <span></span>
  • Single tag: <br> is recommended to be written as <br /> <hr> is recommended to be converted to <hr />, and <img src="URL" />
    (4) All attribute values ​​must be quoted. <font color="red"></font>
    (5) All attributes must have values. <hr noshade="noshade">、<input type="radio" checked="checked" />
    (6) XHTML documents must begin with a DTD document type definition.

Basic syntax features of HTML

HTML is insensitive to line breaks and tabs
HTML only cares about the nesting structure and nesting relationship of tags. Who nests whom and who is nested by whom has nothing to do with line breaks and tabs. Whether there is a line break or a tab does not affect the structure of the page.

In other words, HTML does not rely on indentation to indicate nesting, but rather on the nesting relationship of tags. However, we have found that with good indentation, the code is easier to read. We recommend that everyone indent tags correctly.

In order to pursue the ultimate display speed, Baidu has no line breaks or indents (tabs) for all HTML tags. HTML has nothing to do with line breaks or tabs. The hierarchy of tags is still clear, but programmers cannot read it.

Blank folding phenomenon
All spaces, line breaks, and tabs between all text in HTML will be folded into one space for display.

Tags must be strictly closed
The result of unclosed tags is disastrous.

Basic and commonly used HTML tags

Title tag

Titles are defined using <h1> to <h6> tags. <h1> defines the largest title, and <h6> defines the smallest title. It has the align attribute, and the attribute value can be: left, center, right.

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1: American technology, standing tall in the world</h1>
<h2>H3: American technology, standing tall in the world</h2>
<h3>H3: American technology, standing tall in the world</h3>
<h4>H4: American technology, standing tall in the world</h4>
<h5>H5: American technology, standing tall in the world</h5>
<h6>H6: American technology, standing tall in the world</h6>
</body>
</html>

HTML comment

The format of HTML comment is as follows:

<!-- I am html comment -->

Paragraph tag p

Paragraph is the abbreviation of English “paragraph”.

Function: It can divide HTML documents into several paragraphs. If you want to display text in an orderly manner on a web page, you can’t do without paragraph tags. Just like we usually write articles, the entire web page can also be divided into several paragraphs.

Code example:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Attributes:

  • align="attribute value": alignment. Attribute values ​​include left center right.

HTML tags are hierarchical, and HTML divides all tags into two types:

  • Text level tags: p, span, a, b, i, u, em. Text level tags can only contain text, images, and form elements. (a and input cannot be placed in a tag)
  • Container level tags: div, h series, li, dt, dd. Anything can be placed in a container level tag.

From the first day of learning p, you must remember: p tag is a text-level tag, and only text, pictures, and form elements can be placed in p. Others are not allowed.

Wrong way of writing: (try to put h in p)

<p>
I am a small paragraph
<h1> I am a first-level title</h1>
</p>

The browser does not allow you to do this. We used Chrome’s F12 review element and found that the browser closed p by itself and did not allow you to wrap h1.

PS: Chrome browser is the browser with the best support for HTML5. It provides very good development tools, which is very suitable for us developers. The shortcut key for the review element function is F12.

Horizontal line tag hr

The pronunciation of the word horizontal: [ˌhɒrɪˈzɒntl].

Horizontal rule can visually separate the document into parts. In web pages, we often see some horizontal lines separating paragraphs, which makes the document structure clear and hierarchical.

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Since ancient times, deep love cannot be retained</p>
    <hr />
    <p>Always winning people's hearts with tricks</p>
</body>
</html>

Attribute introduction:

  • align="attribute value": Set the line position. The attribute value can be: left right center.
  • size="2": Set the line thickness. In pixels, the default value is 2.
  • width="500" or width="70%": Set the line length. It can be an absolute value (in pixels) or a relative value. If set to a relative value, the default value is 100%.
  • color="#0000FF": Set the line color.
  • noshade: Do not shade, that is, set the line to be displayed flat. If this attribute is not present, it means that the line has a shadow or is three-dimensional.

Line break tag <br />

If you want a paragraph of text to be displayed in a forced line break, you need to use a line break tag.

This <br/> is a para<br/>graph with line breaks

<div> and <span> tags

div and span are very important tags. The semantics of div is division “division”; the semantics of span is span “range, span”. You must have heard of the “div + css” layout.

Introduction to div and span

  • div tag: You can divide the content in the tag into independent blocks. It must occupy a separate line.
  • span tag: It has the same function as div, but does not wrap.

Attributes of div tag:

  • align="attribute value": Set the position of the block. The attribute value can be: left, right, center.

Difference between div and span
The only difference between <span> and <div> is that: <span> does not wrap, while <div> does.

If you insert these two elements into a web page separately, it will not have any effect on the page. These two elements are specially created to define CSS styles. In other words, DIV+CSS can achieve various styles.

In the browser, div will not add any effect by default, but the semantics have changed. All elements in div are a small area.
The div tag is a container-level tag, which can hold anything, even div itself.

Span is also a tag that expresses “small area, small span”, but it is only a text-level tag.
That is to say, only text, pictures, and form elements can be placed in span. P, h, ul, dl, ol, and div cannot be placed in span.

Span example:

<p>
Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction
<span>
    <a href="">Details</a>
    <a href="">Purchase</a>
</span>
</p>

Divid example:

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="guanggao"></div>
    <div class="dongxi"></div>
</div>
<div class="footer"></div>

We affectionately call this mode “div+css“: div tags are responsible for layout, structure, and block division, and css is responsible for style.

Content centering tag <center>

At this time, center represents a tag, not an attribute value. As long as the content in this tag is in the middle of the browser.

In HTML5, the center tag is not recommended. It is recommended to use CSS layout to achieve it.

Predefined (preformatted) tag <pre>

Meaning: All blank characters (spaces, line breaks) inside the tag will be retained, and the result will be output intact (tell the browser not to ignore spaces and blank lines).

Description: In the actual process of arranging web pages, the <pre> tag is almost useless.

Font tags

Special characters (escape characters)

  • &nbsp;: space (non-breaking spacing, keep typing spaces)
  • &lt;: less than
  • &gt;: greater than
  • &amp;: symbol &
  • &quot;: double quotes
  • &apos;: single quotes
  • &copy;: copyright ©
  • &trade;: trademark ™
  • &#32464;: text 绐. In fact, #32464 is the unicode encoding of the Chinese character 绐.

For example, if you want to display <p> as a text on the page, you definitely can’t write <p> directly, because it represents a paragraph tag, so you need to use escape characters here. It should be written like this:

This is a <p> tag in HTML language

In fact, we only need to remember the first three symbols, and check the others when needed. Moreover, in EditPlus software, you can directly click on these symbols to select:

Here is a table for easy query when needed:

Special charactersDescriptionCharacter code
Space&nbsp;
<Less than&lt;
>Greater than&gt;
&And&amp;
￥RMB&yen;
©Copyright&copy;
®Registered trademark&reg;
°Celsius&deg;
±Positive and negative&plusmn;
×Multiplication&times;
÷Division&divide;
²Square 2 (superscript 2)&sup2;
³Cube 3 (superscript 3)&sup3;

Underline, strikethrough, italics

  • <u>: underline mark
  • <s> or <del>: strikethrough mark (strikethrough)
  • <i> or <em>: italic mark

Bold tag <b> or <strong> (deprecated)

<b>Bold</b>

Font tag <font> (deprecated)

Attributes:

  • color="red" or color="#ff00cc" or color="new rgb(0,0,255)": set font color.
    Setting method: word \ #ff00cc \ rgb(0,0,255)
  • size: set font size. The value range can only be: 1 to 7. When taking a value, if the value is greater than 7, it will be calculated as 7, and if the value is less than 1, it will be calculated as 1. If you want a larger font, you can only solve it through css style.
  • face="Microsoft YaHei": Set the font type.

Example:

<font face="Microsoft YaHei" color="#FF0000" size="10">vae</font>

Superscript <sup> Subscript <sub>

Superscript and subscript are easy to confuse, how to remember? Remember like this: b means bottom: bottom

Example:

O<sup>2</sup> 5<sub>3</sub>

Hyperlinks have three forms, which are described below.

  1. External link: link to external file

Example:

<a href="02.html">Click to enter another file</a>

a is the English word anchor, which means “anchor”, just like this page throws an anchor to another page. It is a text-level tag.

Of course, we can also click on the link directly to visit a website. The code example is as follows:

<a href="http://www.google.com" target="_blank">click me</a>
  1. Anchor link

Anchor link: Give a name to the hyperlink, which is used to jump to different locations on this page or other pages. For example, there is an upward arrow at the bottom of the web page. Click the arrow to return to the top, which can be done with an anchor link.

First, we need to create an anchor point, that is, use the name attribute or the id attribute to give a name to that specific location. The effect is as follows:

The name of the top anchor is name1.
Then set a hyperlink at the bottom, and it will return to the top when clicked (at this time, #name1 also appears at the end of the url in the web page). Note: Don’t forget the # sign in the red box in the above picture, which means jumping to a specific location named name1. This is a rule. If the # sign is missing, after clicking, it will jump to the file name1 or the folder name1.

<a href="a.html#name1">Back to the top</a>

It means that after clicking, it will jump to the name1 anchor of the a.html page.

Note: The name attribute was used before HTML4.0, and the id attribute was used after HTML4.0. For forward compatibility, both name and id attributes must be written, and the values ​​are the same.

  1. Mail link

Code example:

<a href="mailto:xxx@163.com">Click to enter my mailbox</a>

Effect: After clicking, outlook will pop up, which is not very useful.

Hyperlink attributes

  • href: target URL
  • title: hover text.
  • name: mainly used to set the name of an anchor.
  • target: tells the browser how to open the target page. The target attribute has the following values:
  • _self: display in the same web page (default value)
  • _blank: open in a new window.
  • _parent: display in the parent window
  • _top: display in the top window

title attribute example:

<a href="09_img.html" title="very nice">wedding photo</a>

target attribute example:

<a href="1.html" title="hover text" target="_blank">link content</a>

blank means “blank”, which means creating a new blank window. Why is there a _? It is a rule, no explanation is needed.
That is to say, if target="_blank" is not written, it will be opened in the same tab page, and if target="_blank" is written, it will be opened in a new blank tab page.

Note 1: Distinguish the respective attributes of img and a tags

The differences are as follows:

<img src="1.jpg" />
<a href="1.html"></a>

Note 2: a is a text-level tag

For example, if all the text in a paragraph can be clicked, then p should wrap a:

<p>
    <a href="">paragraph paragraph paragraph paragraph paragraph paragraph</a>
</p>

Instead of a wrapping p:

<a href="">
    <p>
    paragraph paragraph paragraph paragraph paragraph paragraph
    </p>
</a>

The semantics of a is smaller than p, a can be treated as text, so p is equivalent to putting pure text.

Introduction to img tags

Introduction

img: The full English name is image, which represents a picture.

If you want to display an image on a web page, you can use the img tag, which is a single tag. The syntax is as follows:

<img src="URL of the image" />

Types of images that can be inserted

  • The types of images that can be inserted are: jpg(jpeg), gif, png, bmp, etc.
  • The image formats that cannot be inserted into web pages are: psd, ai, etc.

HTML pages do not insert images directly, but insert the reference address of the image, so the image must be uploaded to the server first.

The src attribute of the img tag

Here is an attribute of the image:

  • The src attribute: refers to the path of the image. The English name is source.

When writing the path of the image, there are two ways to write it: relative path and absolute path

Writing method 1: Relative path of the image

The path relative to the current page. The two tags . and .. represent the current directory and the previous directory.

Example 1:

<!-- Image in the current directory -->
<img src="2.jpg">
<img src=".\2.jpg">

<!-- Image in the previous directory -->
<img src="..\2.jpg">

Relative paths will not have this situation:

aaa/../bbb/1.jpg

Either ../ is not written or written at the beginning.

Example 2:

<img src="images/1.jpg">

The code above means that the current html page has a parallel folder images, and a picture 1.jpg is stored in the folder images

Question: If you want to insert 1.png into index.html, what is the corresponding img statement?

Analysis:

Now document is the largest folder, which contains two folders work and photo. There is another folder called myweb in work. There is index.html in the myweb folder. So index.html is in the myweb folder, the previous level is the work folder, and the previous two levels are the document folder. Using the document folder as a transit station, enter the photo folder and see 1.png.

Answer:

<img src="../../photo/1.png" />

Writing method 2: Absolute path of the image

Absolute paths include the following two types:

(1) Absolute path starting with a drive letter. Example:

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

(2) Network path. Example:

<img src="http://img.smyhvae.com/20200122_200901.png">

Open the link in the img above, you may be surprised.

Summary of relative path and absolute path

Benefits of relative path: No matter where the site is copied, the relative path relationship between the file and the image remains unchanged. There is a prerequisite for using relative path, that is, the web page file and your image must be on the same server.

Question: My web page is on the C drive, but the image is on the D drive. Can it be inserted?

Answer: You can’t use relative paths or absolute paths.

Note: You can use file:// to insert, but this method is meaningless! Because there is no so-called C drive or D drive on the server.

The following method is feasible, but it has no engineering significance, because the server has no drive letter, and the Linux system has no drive letter:

<img src="file://C:\Users\qianguyihao\Pictures\1.jpg" alt="" />

To sum up:

Whether in the a tag or the img tag, if you want to use a path, there are only two types of paths that can be used, namely relative paths and absolute paths:

  • Relative paths start from yourself and find others.
  • Absolute paths are paths starting with http:// or https://.
  • Files starting with file:// are absolutely not allowed, this is completely wrong!

Other attributes of the img tag

width, height attributes

  • width: The width of the image.
  • height: The height of the image.

The units of width and height in HTML5 are CSS pixels, and in HTML 4 they can be either pixels or percentages. You can specify only one value of width and height, and the browser will scale it according to the original image.

Important tips: If you want to ensure that the image is scaled proportionally, please only set one of width and height.

Alt attribute

  • alt: When the image is not available (cannot be displayed), the content displayed instead of the image. alt is the English word alternate, which means “alternative resource”.

As shown in the figure above: when the image src is not available, text is displayed. Doing so can at least let the user know what the image is about.

title attribute

  • title: prompt text. Text that appears when the mouse hovers.

The title attribute should not be used as a supplementary description of an image outside of alt. If an image needs a subtitle, use the figure or figcaption element.

The value of the title element is generally presented to the user as a tooltip, which is displayed after the cursor stops on the image. Although this does provide users with more information, you should not assume that the user can really see it: the user may only have a keyboard or a touch screen. If you want to provide users with particularly important information, you can choose one of the methods provided above to display it inline instead of using a title.

For example:

<img src="images/1.jpg" width="300" height="`188" title="This is a beauty">

align attribute

  • The align attribute of the image: The relative position of the image and the surrounding text. The attribute value can be: bottom (default), center, top, left, right.

If you want to achieve the effect of mixed text and image, please use the align attribute with a value of left or right.

Let’s take a look at the differences between these attribute values ​​of the align attribute.

  1. align="", the image and text are aligned at the bottom.
  2. align="center": The image and text are aligned horizontally in the center.
  3. align="top": The image is aligned with the top of the text.
  4. align="left": The image is on the left of the text.
  5. align="right": The image is on the right of the text. Other deprecated properties
  • Align (deprecated): refers to the horizontal alignment of the image. The property value can be: top, middle, bottom, left, center, right. This property is deprecated and replaced by the CSS property vertical-align.
  • border (deprecated): adds a border to the image. The unit is pixels. The default color of the border is black. This property is deprecated and replaced by the CSS property border.
  • Hspace (deprecated): refers to the left and right margins of the image.
  • Vspace (deprecated): refers to the top and bottom margins of the image.

List tags

List tags are divided into three types.

Unordered list <ul>, each item in the unordered list is <li>

The English word explanation is as follows:

  • ul: unordered list, meaning “unordered list”.
  • li: list item, meaning “list item”.

For example:

<ul>
    <li>Default 1</li>
    <li>Default 2</li>
    <li>Default 3</li>
</ul>

Note:

  • li cannot exist alone, it must be wrapped in ul; conversely, the “son” of ul cannot be anything else, only li.
  • We emphasize again here that the role of ul is not to add dots to the text, but to increase the “semantics” of the unordered list.

Attributes:

  • type="attribute value". The attribute value can be: disc (solid origin, default), square (solid square), circle (hollow circle).

Not only the <ul> tag has the type attribute, but also the <li> tag in the <ul> (although this writing method is rare).

Note: Bullet points can be images, which need to be achieved by setting the background image of the <li> tag through CSS (discussed in CSS).

Of course, lists can be nested. Let’s take an example. Code:

<ul>
<li><b>Beijing</b>
<ul>
<li>Haidian District</li>
<li>Chaoyang District</li>
<li>Dongcheng District</li>

</ul>

</li>

<li><b>Guangzhou</b>
<ul>
    <li>Tianhe District</li>
    <li>Yuexiu District</li>
</ul>
</li>

css attribute:

list-style-position: inside /* After setting this attribute to ul, the dot is included inside the li element */
  1. Ordered list <ol>, each item inside is <li>

English word: Ordered List.

For example:

<ol >
    <li>welcome</li>
    <li>welcome</li>
    <li>welcome</li>
</ol>

Attributes:

  • type="attribute value". Attribute values ​​can be: 1 (Arabic numerals, default), a, A, i, I. Combined with the start attribute to indicate start from.

For example:

<ol type="1">
    <li>welcome</li>
    <li>welcome</li>
    <li>welcome</li>
    <li>welcome</li>
</ol>

<ol type="a">
    <li>welcome</li>
    <li>welcome</li>
    <li>welcome</li>
</ol>

<ol type="i" start="4">
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ol>

<ol type="I" start="10">
<li>com</li>
<li>com</li>
<li>com</li>
</ol>

Like unordered lists, ordered lists can also be nested, so I won’t give similar examples here.

ol and ul have different semantics, but they are the same no matter how they are used.
ol can only contain li, and li must be wrapped by ol. li is a container level.

ol is not used much. If you want to express the order, you usually use ul. For example:

<ul>
    <li>1. welcome</li>
    <li>2. welcome to</li>
    <li>3. welcome two</li>
</ul>
  1. Definition list <dl>

Definition list is very useful.

<dl> is the English word: definition list, no attributes. The child elements of dl can only be dt and dd.

  • <dt>: definition title list title, this tag is required
  • <dd>: definition description list item, if it is not needed, it can be omitted

Note: dt, dd can only be in dl; dl can only contain dt, dd.

For example:

<dl>
    <dt>Article 1</dt>
    <dd>If you think you have the ability to play with me, Liangchen doesn't mind playing with me to the end</dd>
    <dd>I will make you understand that I never say empty words</dd>
    <dd>I am a local, I have a hundred ways to make you unable to stay; and you, there is nothing you can do</dd>

    <dt>Article 2</dt>
    <dd>Liangchen likes to attack those who think they are outstanding</dd>
    <dd>You can continue to do your own thing, but your life will not be very comfortable</dd>
    <dd>Just remember, my name is Ye Liangchen</dd>
    <dd>Don't mind playing with you</dd>
    <dd>Liangchen will definitely reward you handsomely</dd>

</dl>

As can be seen from the figure above, the semantics of the definition list expression is two-fold:

  • (1) It is a list that lists several dd items
  • (2) Each word has its own description item.

Note: dd describes dt.

The definition list is very flexible. You can use one dt with many dds:

<dl>
    <dt>Beijing</dt>
    <dd>National capital, political and cultural center</dd>
    <dd>Serious pollution, PM2.0 daily report</dd>
    <dt>Shanghai</dt>
    <dd>Magic City, with the Bund, Oriental Pearl Tower, Huangpu River</dd>
    <dt>Guangzhou</dt>
    <dd>China's southern gate, with the Pearl River and the Little Slender Waist</dd>
</dl>

You can also split it up so that there is only one dt and dd in each dl, which makes it clearer:

<dl>
    <dt>Beijing</dt>
    <dd>National capital, political and cultural center</dd>
    <dd>Serious pollution, PM2.0 daily report</dd>
</dl>

<dl>
    <dt>Shanghai</dt>
    <dd>Magic City, with the Bund, Oriental Pearl Tower, and Huangpu River</dd>
</dl>

<dl>
    <dt>Guangzhou</dt>
    <dd>China's southern gate, with the Pearl River and the Little Slender Waist</dd>
</dl>

The structure in the above picture is as follows:

<dl>
    <dt>Shopping Guide</dt>
    <dd>
        <a href="#">Shopping Process</a>
        <a href="#">Member Introduction</a>
        <a href="#">Life Travel/Group Purchase</a>
        <a href="#">Frequently Asked Questions</a>
        <a href="#">Large Appliances</a>
        <a href="#">Contact Customer Service</a>
    </dd>
</dl>
<dl>
    <dt>Delivery Method</dt>
    <dd>
        <a href="#">Pick Up at Home</a>
        <a href="#">211 Limited Time Delivery</a>
        <a href="#">Delivery Service Inquiry</a>
        <a href="#">Delivery Fee Standard</a>
        <a href="#">Overseas Delivery</a>
    </dd>
</dl>

Dt and dd are both container-level tags, and you can put anything you want. So, now you should know more clearly: what tag to use is not determined by appearance, but by semantics (semantics is essentially structure).

Table tag

The table tag is represented by <table>.
A table <table> is composed of each row <tr>, and each row is composed of each cell <td>.
So we have to remember that a table is composed of rows (rows are composed of columns), not rows and columns.
In the past, the only way to fix the position of a tag was a table. Now it can be achieved through the CSS positioning function. But now when making pages, tables still have some functions.

For example, a cell in one row:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

There is no text in the table above, so you can’t see anything in the generated web page.
For example, a cell with 3 rows and 4 columns:

<table>
    <tr>
        <td>Zhangsan</td>
        <td>23</td>
        <td>male</td>
    </tr>

    <tr>
        <td>Lisi</td>
        <td>29</td>
        <td>male</td>
    </tr>

</table>

It seems that there is no border in the table in the above picture. Don’t worry, let’s take a look at the attributes of the <table> tag.

Attributes of <table>:

  • border: border. Unit is pixel.
  • style="border-collapse:collapse;": The cell line and the table border line are merged (the two borders of the table are merged into one)
  • width: width. Unit is pixel.
  • height: height. Unit is pixel.
  • bordercolor: The border color of the table.
  • align: Table horizontal alignment. The attribute value can be filled in: left right center.
    Note: This is not to set the alignment of the content in the table. If you want to set the alignment of the content, you need to set the cell tag <td>)
  • cellpadding: The distance from the cell content to the edge, in pixels. By default, the text is next to the left line, that is, the default value is 0.
    Note that it is not the distance from the cell content to the four edges, but the distance to one edge. The default is the distance from the left line. If the attribute dir="rtl" is set, it refers to the distance from the content to the right line.
  • cellspacing: The distance between cells (margin), in pixels. The default value is 0
  • bgcolor="#99cc66": The background color of the table.
  • background="Path src/...": Background image.
    Background image has higher priority than background color.
  • bordercolorlight: The color of the top and left borders of the table, and the right and bottom borders of the cell
  • bordercolordark: The color of the right and bottom borders of the table, and the top and left borders of the cell
    The purpose of these two attributes is to set the 3D effect.
  • dir: Public attribute, the arrangement of cell content (direction). Possible values: ltr: from left to right (left to right, default), rtl: from right to left (right to left)
    Since dir is a common attribute, if this attribute is placed in any tag, it means that the position of this tag may be arranged from the right.

Note: How to create very thin table borders in a table using CSS:

style="border-collapse:collapse;"

<tr>: Row

A table is composed of rows.

Attributes:

  • dir: Public attribute, set the arrangement of the content of this row of cells. Possible values:
  • ltr: from left to right (left to right, default)
  • rtl: from right to left (right to left)
  • bgcolor: Set the background color of the cells in this row.

Note: There is no background attribute, that is: the background image of this row cannot be set. If you have to set it, you can use CSS to achieve it.

  • height: The height of a row
  • align="center": The content of a row is displayed horizontally in the center, the values ​​are: left, center, right
  • valign="center": The content of a row is vertically centered, the values ​​are: top, middle, bottom <td>: Cell

Attributes:

  • align: The horizontal alignment of the content. The attribute value can be filled in: left right center. If you want to center the content of each cell, this property is too troublesome. You can use CSS to solve it in the future.
  • valign: The vertical alignment of the content. The property value can be filled in: top middle bottom
  • width: Absolute value or relative value (%)
  • height: The height of the cell
  • bgcolor: Set the background color of this cell.
  • background: Set the background image of this cell. Cell merging

Cell properties:

  • colspan: Horizontal merging. For example, colspan="2" means that the current cell will occupy the position of two cells in the horizontal direction.
  • rowspan: Vertical merging. For example, rowspan="2" means that the current cell will occupy the position of two cells in the vertical direction. <th>: Bold cell. Equivalent to <td> + <b>
  • The property is the same as the <td> tag. <caption>: The title of the table. When used, it is parallel to the tr tag
  • Attribute: align, which indicates the position of the title relative to the table. The attribute value can be: left, center, right, top, bottom The <thead> tag, <tbody> tag, and <tfoot> tag of the table

The difference between having these three tags and not having them:

  • If they are written, the code order of these three parts can be arbitrary, and the browser will still display the content in the order of thead, tbody, and tfoot when displaying. If thead, tbody, and tfoot are not written, the browser will parse and display the table content from the top to the bottom of the code.
  • When the table is very large and has a lot of content, if thead, tbody, and tfoot tags are used, data can be displayed while being obtained. If they are not written, the table content must be fully obtained from the server before it can be displayed.

Example:

 <body>

<table border="1">

    <tbody>
        <tr>
            <td>Life No. 1</td>
            <td>23</td>
            <td>Male</td>
            <td>Huanggang</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Xu Song</td>
            <td>29</td>
            <td>Male</td>
            <td>Anhui</td>
        </tr>
    </tfoot>

    <thead>
        <tr>
            <td>Deng Ziqi</td>
            <td>23</td>
            <td>Female</td>
            <td>Hong Kong</td>
        </tr>
    </thead>

</table>

</body>

Frame tag

If we want to display multiple pages in a web page, the frame tag comes in handy.

  • Note that the frame tag cannot be placed in the <body> tag, because the <body> tag represents only one page, while the frame tag represents multiple pages. Therefore: <frameset> and <body> can only be selected one by one.
  • The collection of frames is represented by <frameset>, and then <frame> is placed one by one in the <frameset> collection

Supplement: frameset and frame have been deleted from the Web standard, and it is recommended to use iframe instead.

<frameset>: Collection of frames

A collection of frames can contain multiple frames or collections of frames. Attributes:

  • rows: Horizontal division, dividing the frame into upper and lower parts. There are two ways to write it:
  1. Absolute value writing: rows="200,*" where * represents the rest. There are actually two frames here: the upper frame occupies 200 pixels, and the lower frame occupies the rest.
  2. Relative value writing: rows="30%,*" where * represents the rest. There are actually two frames here: the upper frame occupies 30%, and the lower frame occupies 70%.

Note: If you want to divide the frame into multiple rows, just separate them with commas in the attribute value.

  • cols: Split vertically, dividing the frame into left and right parts. There are two ways to write it:
  1. Absolute value writing: cols="200,*" where * represents the rest. There are actually two frames here: the left frame occupies 200 pixels, and the right frame occupies the rest.
  2. Relative value writing: cols="30%,*" where * represents the rest. There are actually two frames here: the left frame occupies 30%, and the right frame occupies 70%.

Note: If you want to divide the frame into multiple columns, just separate them with commas in the attribute value.

<frame>: Frame

A frame displays a page.

Attributes:

  • scrolling="no": Whether a scroll bar is required. The default value is true.
  • noresize: The frame size cannot be changed. By default, the borders of a single frame can be dragged, so the frame size is not fixed. If this attribute value is used, the frame size will be fixed.

Example:

<frame src="top.html" noresize></frame>
  • bordercolor="#00FF00": Define the color of the frame border. This attribute also applies to the frame set <frameset>.

The color attribute works in IE browser, but not in Google Chrome. I don’t know why.

  • frameborder="0" or frameborder="1": Hide or show the border (frame line).
  • name: Give the frame a name.

Using the name attribute, we can hyperlink in the frame.

Inline frame

Inline frame is represented by <iframe>. <iframe> is a child tag of <body>.

Inline frame inner frame: A frame embedded in a page (only supported by IE and the new version of Google Chrome, and may be supported by other browsers, but I am not sure for the time being).

Attributes:

  • src="subframe/the_second.html": the embedded page
  • width=800: width
  • height="150: height
  • scrolling="no": whether scroll bar is needed. The default value is true.
  • name="mainFrame": window name. Public property.

Example of embedded frame: (switch to display different pressure surfaces in embedded page)

<body>
    <a href="text.html" target="myframe">Default display text page</a><br>
    <a href="pictrue.html" target="myframe">Click to enter the picture page</a><br>
    <a href="table.html" target="myframe">Click to enter the table page</a><br>

    <iframe src="text.html" width="400" height="400" name="myframe"></iframe>
    <br>
</body>

Form tag

Form tag is represented by <form>, which is used to interact with the server. The form is to collect user information, that is, for users to fill in and select.

Attributes:

  • name: the name of the form, used when JS operates or controls the form;
  • id: the name of the form, used when JS operates or controls the form;
  • action: specifies the handler for form data, usually PHP, such as: action=”login.php”
  • method: the submission method of form data, generally the value is: get (default) and post

Note: When the form and table are nested, the <table> tag is enclosed in the <form> tag.

The action attribute and method attribute in the form tag are explained to you in the “Ajax” course. Let me explain briefly: the action attribute indicates where the form will be submitted. The method attribute indicates what HTTP method is used for submission, there are two types: get and post.

The difference between get submission and post submission:

GET method:
Append the form data in the form of “name=value” to the back of the handler specified by action, and separate the two with “?”, and separate the “name=value” of each form with “&”.

Features: Only suitable for submitting a small amount of information, and not very safe (do not submit sensitive data), and the submitted data type is limited to ASCII characters.

POST method:
Send the form data directly (hidden) to the handler specified by action. The data sent by POST is invisible. The handler specified by Action can obtain the form data.
Features: It can submit massive amounts of information, which is relatively safe, and the submitted data format is diverse (Word, Excel, rar, img).

Enctype:
The encoding method (encryption method) of the form data, the value can be: application/x-www-form-urlencoded, multipart/form-data. Enctype can only be used in POST mode.

  • Application/x-www-form-urlencoded: Default encryption method, all data except uploaded files can be used
  • Multipart/form-data: When uploading attachments, this encoding method must be used. <input>: Input tag (text box)

Used to receive user input.

<input type="text" />

Attributes:

  • type="attribute value": Text type. Attribute values ​​can be:
  • text (default)
  • password: Password type
  • radio: Radio button, buttons with the same name are selected as a group (radio buttons are inherently non-mutually exclusive. If you want to be mutually exclusive, you must have the same name attribute. Name is “name”.
    ). It is very similar to the old radio. When you press a button, the others are lifted up. So it is called radio.
  • checkbox: Multiple-choice button, buttons with the same name attribute value are selected as a group.
  • checked: Sets the radio button or multiple-choice button to be selected by default. This attribute can be used when the <input> tag is set to type="radio" or type=checkbox. The attribute value is also checked and can be omitted.
  • hidden: A hidden box that contains information that you do not want users to see in the form
  • button: A normal button, used in conjunction with js code.
  • submit: A submit button that sends the data of the current form to the server or other program for processing. This button will automatically have the text “Submit” without writing a value. This button really has a submit function. After clicking the button, the form will be submitted to the page specified in the action attribute of the form tag.
  • reset: A reset button that clears the contents of the current form and sets it to the initial default value
  • image: An image button, which has the same function as the submit button, except that the image button can display images.
  • file: A file selection box.
    Tip: If you want to limit the type of uploaded files, you need to use JS to implement verification. Security check of uploaded files: first, check the extension name, and second, check the file data content.
  • value="content": default content in the text box (already filled in)
  • size="50": indicates that fifty characters can be displayed in the text box. One English or Chinese character is counted as one character.

Note that the unit of the size attribute value is not pixel.

  • readonly: the text box is read-only and cannot be edited. Because its attribute value is also readonly, the attribute value can be omitted.

After using this attribute, the cursor cannot click in the Google browser; in the IE browser, the cursor can click in, but the text cannot be edited.

  • disabled: the text box is read-only, cannot be edited, and the cursor cannot click in. The attribute value can be omitted.

Note: In HTML5, many more input types have been added (such as date and color, which we will talk about in HTML5).

Example:

<form>
    Name: <input value="lucy" >lucy</br>
    Nickname: <input value="Tom" readonly=""></br>
    Name: <input type="text" value="name" disabled=""></br>
    Password: <input type="password" value="pwd" size="50"></br>
    Gender: <input type="radio" name="gender" id="radio1" value="male" checked="">Male
    <input type="radio" name="gender" id="radio2" value="female" >Female<br>
    Hobbies: <input type="checkbox" name="love" value="eat">Eating
    <input type="checkbox" name="love" value="sleep">Sleeping
    <input type="checkbox" name="love" value="bat">Playing Doudou
</form>

Note that in the input tags of multiple radio buttons, the attribute value of name can be the same, but the attribute value of id must be unique**. We know that in HTML tags, the attribute value of id is unique.

Examples of four types of buttons:

<form>
    <input type="button" value="Normal button"></br>
    <input type="submit" value="Submit button"></br>
    <input type="reset" value="Reset button"></br>
    <input type="image" value="Image button 1"></br>
    <input type="image" src="1.jpg" width="800" value="Image button 2"></br>
    <input type="file" value="File selection box">
</form>

Front-end development engineers focus on the beauty, style, layout, and interaction of the page. As for the provision of data and heavier business logic, they are all done by backend engineers.

<select>: Drop-down list tag

Each item in the <select> tag is represented by <option>. select means “selection” and option means “option”.

The select tag is a group tag like ul, ol, and dl.

<select> tag attributes:

  • multiple: You can select multiple options in the drop-down list. The attribute value is multiple, or there is no attribute value. In other words, you can write multiple="" or multiple="multiple".
  • size="3": If the attribute value is greater than 1, the list is a scroll view. The default attribute value is 1, that is, a drop-down view.

<option> tag attributes:

  • selected: Pre-selected. No attribute value.

For example:

<form>
    <select>
        <option>Primary school</option>
        <option>Junior high school</option>
        <option>Senior high school</option>
        <option>University</option>
        <option selected="">Graduate</option>
    </select>
<br><br><br>

    <select size="3">
        <option>Primary school</option>
        <option>Junior high school</option>
        <option>Senior high school</option>
        <option>University</option>
        <option>Graduate</option>
    </select>
<br><br><br>

    <select multiple="">
        <option>Primary school</option>
        <option>Junior high school</option>
        <option selected="">Senior high school</option>
        <option selected="">University</option>
        <option>Graduate</option>
    </select>
<br><br><br>

</form>

<textarea> tag: multi-line text input box

text means “text”, area It means “area”.

Attributes:

  • rows="4": specifies the number of rows in the text area.
  • cols="20": specifies the number of columns in the text area.
  • readonly: read-only.

Example:

<form>
    <textarea name="txtInfo" rows="4" cols="20">
    1. A programmer who doesn't like photography and doesn't understand design is not a good product manager.
    </textarea>
</form>

Semanticization of forms

For example, when we register information on a website, some of it is required and some of it is optional. At this time, we can use the semanticization of the form.
Example:

<form>

<fieldset>
    <legend>Account information</legend>
    Name: <input value="Tom" >Tom</br>
    Password: <input type="password" value="pwd" size="50"></br>
</fieldset>

<fieldset>
    <legend>Other information</legend>
    Gender: <input type="radio" name="gender" value="male" checked="">Male
    <input type="radio" name="gender" value="female" >Female</br>
    Hobbies: <input type="checkbox" name="love" value="eat">Eating
    <input type="checkbox" name="love" value="sleep">Sleeping
    <input type="checkbox" name="love" value="bat">Playing Doudou
</fieldset>

</form>

<label> tag

Let’s look at the following code first:

<input type="radio" name="sex" /> Male
<input type="radio" name="sex" /> Female

For the radio button above, we can only select it by clicking the radio button (small circle), and we cannot select it by clicking the two words “male” and “female”; therefore, the label tag comes in handy.

In essence, the two words “male” and “female” have nothing to do with the input tag, and the label is to solve this problem. We can wrap the input and the Chinese characters as a whole through the label.

The solution is as follows:

<input type="radio" name="sex" id="nan" /> <label for="nan">Male</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">Female</label>

In the code above, let the for attribute value of the label tag be the same as the id attribute value of the input tag, then the label and input will have a binding relationship.

Of course, the checkbox also has a label: (any form element has a label)

<input type="checkbox" id="kk" />
<label for="kk">No login within 10 days</label>

Multimedia tags

Statement:
Multimedia includes: audio, video, Flash. The multimedia on the web page is basically in Flash format.
Video formats such as .wmv, .dat, .mob, and .rmvb cannot be played directly on web pages. You need to install a third-party plug-in to play them. Different browsers use different plug-in parameters for the above video formats.
The above video formats are generally large files, which are not conducive to network download and playback.
In general, other video formats are converted to Flash to play on the web page. Conversion software: Format Factory, etc.
Flash format video compatibility is very good, and Flash format files are very small.

<bgsound> tag: play background music

Attributes:

  • src="path to the music file"
  • loop="-1": The attribute value represents the number of times it is played, and -1 represents loop playback.

Example:

<body>
    <bgsound src="Faye Wong - Qingfeng Xulai.mp3"></bgsound>
</body>

Running effect:
After opening the web page, it plays normally in IE 8, and a blank screen appears on the web page during playback. Cannot play in Google Chrome.

<embed> tag: Play multimedia files (audio, video, etc.)

Mainly used in Netscape browser, it is not a W3C specification.

Note: Video formats can support mp4, wav, etc., but not all video formats are supported.

Attributes:

  • src="Multimedia file path"
  • loop="-1": The attribute value represents the number of times it is played, -1 represents loop playback.
  • autostart="false": Automatic playback is prohibited when the web page is opened. The default value is true.
  • volume="100": Set the default volume size. Testing found that this value does not seem to work.
  • width: refers to the width of the Flash file
  • height: refers to the height of the Flash file
  • quality: refers to the playback quality of Flash, the quality is high and low
  • pluginspage: If the specified Flash plugin does not exist, it is downloaded from the location specified by pluginspage.
  • type: specifies the file format type of Flash
  • wmode: refers to whether the background of Flash can be transparent, the value is: transparent is transparent

Example of playing audio with the <embed> tag:

<body>
    <embed src="xxx.mp3"></embed>
</body>

<object> tag: plays multimedia files (audio, video, etc.)

Mainly used in IE browser, it is a W3C specification.

Attributes:

  • classid: specifies the ID number of the Flash plug-in, which generally exists in the registry.
  • codebase: If the Flash plug-in does not exist, it is downloaded from the address specified by codebase.
  • The main function of the <param> tag: set specific detailed parameters.

Summary: When inserting Flash into a web page, in order to be compatible with multiple browsers at the same time, you need to use the <object> tag and the <embed> tag together, but the order of use is: nest the <embed> tag in <object>.

Example:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
  <param name="movie" value="images/banner.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

<marquee>: scrolling subtitle tag

If you set content in this tag, then when you open the web page, the content will automatically move like a bullet screen.

Attributes:

  • direction="right": the target direction of movement. The attribute value can be: left (moving from right to left, default value), right (moving from left to right), up (moving from bottom to top), down (moving from top to bottom).
  • behavior="slide": behavior. The attribute value can be: slide (moving only once), scroll (moving in a loop, default value), alternate (moving in a loop),.
    Both the alternate and scroll attribute values ​​are circular movement, the difference is: assuming that direction="right", behavior="scroll" means from left to right, from left to right, from left to right… behavior="alternate" means from left to right, from right to left, from left to right…
  • scrollamount="30": the speed of movement
  • loop="3": how many circles to loop. Negative value means infinite loop
  • scrolldelay="1000": how long to rest after each movement. The unit is milliseconds.

Example:

<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">I am here</marquee>

Introduction to obsolete html tags

HTML is now only responsible for semantics, not style. But when HTML first started, it also took care of style. These style tags have been abandoned.

Things before 2004:

<font size="9" color="red">Haha</font>

The following tags are CSS hooks, not their original meanings:

<b>Bold</b>
<u>Underline</u>
<i>Italic</i>
<del>Strikethrough</del>
<em>Emphasis</em>
<strong>Emphasis</strong>

These tags have a strong style effect and interfere with the role of CSS, so HTML abandoned them.

Similarly, there is the horizontal line tag:

<hr />

Line break tag:

<br />

However, 99.9999% of the time when a line break is needed on a web page, it is because a new paragraph is started, so use p instead of <br />. Don’t use the br tag unless it is absolutely necessary.

A standard div+css page will only use a few types of tags:

div p h1 span a img ul ol dl input

Know the special usage and attributes of each tag. For example, the a tag and the attributes of img.

HTML Knowledge Overview

HTML elements in the head area

HTML elements in the head area will not leave direct content on the page.

  • meta
  • title
  • style
  • link
  • script
  • base

Introduction to the base element:

<base href="/">

The base tag is used to specify the base path. After specifying, all a links are based on this path.

HTML elements (body area)

HTML elements in the body area will appear directly on the page.

  • div, section, article, aside, header, footer
  • p
  • span, em, strong
  • table elements: table, thead, tbody, tr, td
  • list elements: ul, ol, dl, dt, dd
  • a
  • form elements: form, input, select, textarea, button

div is the most common element. In most scenarios, you can use div (if it doesn’t work, wrap it with more divs). It can be seen that div is a more common element, which also determines that the semantics of div is not very clear.

Important attributes of common tags:

  • a[href,target]
  • img[src,alt]
  • table td[colspan,rowspan]. Set the number of rows and columns occupied by the current cell. It will be used when merging cells.
  • form[target,method,enctype]
  • input[type,value]
  • button[type]
  • selection>option[value]
  • label[for]

Outline of html document

When we write papers or other documents, we usually list the outline first and then write the specific content.

Similarly, html web pages can also be regarded as a kind of document, and they also have their own outline.

A common html document can have the following structure:

<section>
    <h1>First level title</h1>

    <section>
        <h2>Second level title</h2>
        <p>Paragraph content</p>
    </section>

    <section>
        <h2>Second level title</h2>
        <p>Paragraph content</p>
    </section>

    <aside>
        <p>Advertising content</p>
    </aside>
</section>

<footer>
    <p>Produced by a certain company</p>
</footer>

Tool for viewing web page outline

We can view the outline of a web page through the tool http://h5o.github.io/.

How ​​to use:

(1) Save the URL http://h5o.github.io/ to the bookmark bar
(2) Go to the target web page and click the URL in the bookmark bar to view the outline of the web page.

This tool is very useful. It can not only view the outline of a web page, but also view the structure of a markdown online document.

Classification of HTML elements

Classification by style:

  • Block-level elements
  • Inline elements
  • inline-block: For example, the form form element. It is an inline element to the outside (it will not occupy a single line), and a block-level element to the inside (width and height can be set).

Nested relationships of HTML elements

  • Block-level elements can contain inline elements.
  • Block-level elements may not contain block-level elements. For example, a div can contain a div, but a p tag cannot contain a div.
  • Inline elements generally cannot contain block-level elements. For example, span cannot contain div. But there is a special case: in HTML5, a tag can contain div.

Note: In HTML5, a > div is legal, and div > a > div is illegal; but in html 4.0.1, a > div is still illegal.

Default style of html elements and CSS Reset

For example, a more complex element such as a drop-down box has its own default style. If there is no default style, the element will not show anything on the page, which will inevitably increase the workload.

At the same time, the default style will also bring some problems: for example, some default styles are not needed; some default styles cannot even be removed.

If we don’t need the default style, we need to introduce a concept here: CSS Reset.

Common CSS Reset solutions

Solution 1:

CSS Tools: Reset CSS. Link: https://meyerweb.com/eric/tools/css/reset/

Solution 2:

Yahoo’s CSS Reset. Link: https://yuilibrary.com/yui/docs/cssreset/

We can import it directly through CDN:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

Solution 3: (more controversial)

*{
    margin: 0;
    padding: 0;
}

The above writing method is relatively concise, but also controversial. The controversial point is that it may cause performance problems of css selectors.

Normalize.css

The solution to the above css reset is to clear all default styles.

However, the idea of ​​Normalize.css is: since the browser provides these default styles, it makes sense. Since the default styles of different browsers are inconsistent, then Normalize.css sets these default styles to be consistent.

Common html interview questions

What is the meaning of doctype

  • Let the browser render in standard mode
  • Let the browser know the legality of the element

The difference between HTML, XHTML, and HTML5

  • HTML belongs to SGML
  • XHTML belongs to XML, which is the result of HTML strictifying XML
  • HTML5 does not belong to SGML, nor to XML (HTML5 has its own independent set of specifications), and is looser than XHTML.

What’s new in HTML5

  • New semantic elements
  • Form enhancements
  • New APIs: offline, audio and video, graphics, real-time communication, local storage, device capabilities, etc.

The difference between em and i

Similarities: Both are used to indicate italics.

Differences:

  • em is a semantic tag that indicates emphasis.
  • i is a pure style tag that indicates italics. It is not recommended in HTML5.

What is the meaning of semantics

  • Easy for developers to understand and maintain.
  • Machines (search engines, screen readers, etc.) can easily understand the structure
  • Helpful for SEO

Which elements can be closed and

No other elements can be embedded in closed and elements. And HTML5 requires a slash.

  • Form element input
  • Image img
  • br, hr
  • meta, link

The function of form

  • Submit the form directly
  • Use submit / reset button
  • Facilitate browser to save the form
  • Third-party libraries (such as jQuery) can get the value as a whole
  • Third-party libraries can perform form validation

So, if we submit form data through Ajax, it is also recommended to add form.

Course: Master HTML5 and CSS3: From Beginner to Advanced Developer
Share your love

Trending now

Exploring Web 3D Core Technologies Development
WebRTC Advanced Guide：Media, Transport & Architecture
WebSocket Deep Guide：Building High-Performance Realtime Systems
Micro Frontends & Serverless: Modular Web Development