This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

1.htm L Introduction & specification

1.1 introduction

HTML refers to Hyper Text Markup Language, a computer Language that specializes in making web pages. Ordinary Text is English words, just like English letters. Hypertext means that there are words or letters that are given special rights in the world of web browsers. For example, we are all ordinary people, but after some people are selected by the country and put on police uniform, they are endowed with special rights to enforce the law. Ordinary people have no right to enforce the law. The letter IM G is just an ordinary letter, with no special meaning. Angle brackets, in the web world, are used to display images.

1.2 Develop the first web page using Notepad

In any location on the computer, create a blank notepad key: the file suffix must be “HTM” or “HTML”, right-click the file, select “notepad” as the opening mode, enter the following code

<html>
<head>
<title>123 I have</title>
</head>
<body >Must be a fire! </body > </html >Copy the code

Save the file, double-click the file and it will run in your computer’s default browser, and your first web page will be ready! Note:

1. HTML tag This represents that the current page is an HTML
2. In the head tag, you can declare information about the HTML page
3. The body tag is mainly used to display page information
4. Labels have a beginning, an end, and pairs
4. The start and end labels contain the contents of the labels. If there is no label content, the labels can be automatically closed
5. Most tags have attributes whose values are enclosed in quotes.
6.HTML itself is case insensitive.

1.3 Download and install VSCode

1.3.1 Download Address

code.visualstudio.com/

1.3.2 Initial Chinese Settings

After vsCode is installed, select Install Chinese plug-in on the left side of the screen.

Click install, the lower right corner will pop up a restart window

1.3.3 Creating a Project

Vscode itself does not have the option to create a new project, so create an empty folder like this: Open vscode and select File -> Open Folder in VScode. Right-click the Folder and create a subdirectory, lagou-htm L. Create a File under the lagou-htm L directory. Type test1.htm l In the code editing area, type at the top! Hit the car. That’s the miracle

1.3.4 Running the Page

Need to install the plug-in “Open in Browser”

After installing the plug-in, right-click the page file you want to run, or use the shortcut Alt + B

Install chrom e and change the default browser: home page Settings

Add code

" open- i n- br ows er . def aul t " : " chr ome"
Copy the code

Once saved, you can use the default browser to open the page, but you can change it to your favorite browser, for example

2. The use of HTML

2.1 File Labels

HTML tag: Indicates that an HTML document is being written
The head TAB: stores some important information on this page that it will not display
Title tag: This is used to define the title of the page
The body tag: The written content is displayed
Text tag: Used to set the text color
Bgcolor tag: Used to set the background color of the page
Background tag: Used to set the background image of the page

2.2 Typesetting Labels

2.2.1 HTM L note

<! -- -->
Copy the code

2.2.2 Newline Labels

The br tag is a newline (carriage return) tag, and the/in the tag is optional. There is/is HTM L standardization, but HTM L is a less rigorous language

2.2.3 Paragraph labels

The contents of the P tag will produce a blank line between the beginning and the end, and it will wrap automatically. The common attribute align is used to set the alignment of the content in the paragraph. It can be left, right, or center

2.2.4 Horizontal label

The HR tag produces a horizontal line on the page. For the HR tag, it has common attributes:

Align: indicates the horizontal line position
Size: represents the thickness of the horizontal line.
Width: indicates the width of the horizontal line
Color: the color of the horizontal line

Unit: size=”5″, 5 is the default unit of “pixel “/” pixel”, pixel is the smallest unit of computer picture! You can also use percentages, size=”50%”

2.2.5 Partition Labels

Div is a block tag that is used for layout. Ordinary divs have no effect and are invisible to the naked eye, but when div is combined with CSS, it is better for layout

Div and span are both containers.

-div will wrap, and we'll call that block-level element. -span tag it won't wrap, we'll call that inline elementCopy the code

Div: Blocks as a whole

Span: local division

2.3 Font Labels

2.3.1 Font Labels

The font tag allows you to set the font, size, and color of the word. Common attributes:

Face: Used to set the font, such as Song Style, Official script, and regular script
Size: used to set the size of the word (the default size is 1-7, 7 is the largest, if you want to be larger, learn CSS later)
Color: Used to set the color of the word

2.3.2 Heading tags

Give a paragraph a heading

<h1> ----- <h6>
Copy the code

H1 is the largest, h6 is the smallest, and they represent the title. Wrap, bold, create a certain distance between headings

Note: Tags are allowed to be nested in HTML, but are generally wrapped, not cross-nested

2.3.3 Formatting Labels

B: Bold font
I: Font slant
Del: deletes a line
U: Underline

2.5 Image Labels

Img allows us to introduce an image to a web page.

SRC represents the path to the image
Width Indicates the width of the image
Height Height of the image
Border sets the border of the image
Alt Specifies the text message to be displayed by default if the image cannot be displayed
Title Default text information displayed when you hover over an image
Align Indicates the alignment of the text in the image attachment. The value can be
Left: Align the image to the left
Right: Align the image to the right
Middle: Align the image with the center
Top: Align the image with the top
Bottom: Align the image with the bottom (default)

2.6 Hyperlink Labels

A tag, you can jump to other pages.

Hyperlink content can be not only text, but also images and other commonly used information attributes:

Href is the path we want to jump to
The target property specifies where to open the linked document. The value can be:
- Blank opens the page in a new window
- The self by default. Open the page in this window

Functional connection:

1. The email

<ahr ef =" mailto: [email protected]" ></ a>Copy the code

2.QQ chat window

<ahr ef =" tencent://message/? uin=19998539&Menu=yes" >
<img	border ="0"	src=" http://wpa.qq.com/pa?p=1:615050000:7" / >
</ a>
Copy the code

Table 2.7

2.7.1 Table: Defines a table

Border: border. The value is in pixels
Width indicates the width of the table
Align represents the alignment of the table; The values
Left Align the table left
Right Right-align the table
Center the table
Cellspacing: cellspacing (usually set to 0 for single-line tables)

2.7.2 TR: Table Row

Align represents the alignment of the table; The values
Left Left-align content (default)
Right Right align content
Center aligned content (default for th element)

2.7.2 TD: Table DataCell

Colspan indicates the merge of columns
Rowspan indicates the merge of rows

<tabl e	border ="1"	width=" 400px "	align=" center " cellspacing="0" >
<tr align=" center" >
<td colspan="3" >Project Statistics </ t d></tr>
<tr >
<td	rowspan="3" >Amount of income </ t d><td>5</td>
<td>6</td>
</tr>
<tr >
<td>8</td>
<td>9</td>
</tr >
<tr >
<td>11</td>
<td>12</td>
</tr >
</table>
Copy the code

2.8 Form Labels

Forms allow us to carry input information to the server. Simply put, a form allows you to submit data to a specified location. But one by one submission, inconvenient. The form solves this problem by putting all the data together and submitting it to the server.

2.8.1 For M Attribute

Action: The destination for the entire form submission
Method: indicates the form submission method
Get: The amount of data to be transmitted is small (ordinary text information will fail to be transmitted), and plaintext submission (URL in the browser)
Submitted data will be displayed later, not suitable for login)
Post: a large amount of data (text or image) is transmitted during submission. Ciphertext submission (the submission cannot be seen after the URL of the browser
The data)

2.8.2 Elements (Controls) in the Form

The Type attribute of the input element
Text: Default value, plain text input field
Placeholder property: hint text
Maxlength property: The maximum number of characters that can be entered
Password: password input box
Checkbox: checkbox/checkbox
Checked: Checked
Radio: Radio button
File: uploads files
Reset: Resets the button
Subm it: Submit button
Button: common button
Select: drop-down list/drop-down box
Option: indicates the item in the list
Selected: Selected

Textarea: Text field (multi-line text box)

- You can specify the size of a textarea using the COLs and Rows attributes, but it is better to use the CSS height and width attributes.Copy the code

Button, button

In the form form, the same function as subm it is not in the form form, just a normal button (with later javascript, more extensibility)

Matters needing attention:

All elements in the form must have names (otherwise, after submission to the server, the server will not be able to distinguish between multiple elements

2. If you want to select one single box at a time, you must have the same nam e value. All check boxes are in groups, and each check box within a group should have the same nam e value

2.9 Frame Labels

The HTML page layout can be customized with and frame tags. Can be understood as: with multiple pages assembled into a page.

Notice that the frame tag and the body tag do not coexist. “You without me, I without you.”

<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<frameset rows="13% 10%, *,">
<frame src="top.html"></frame>
<frameset cols="15%, *">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
<frame src="foot.html"></frame>
</frameset>
</html>
Copy the code

2.10 Other Labels and Special Characters

2.10.1 meta tags

Meta tags must be written between the head tags.

<meta	char set =" UTF- 8" >
<meta	name=" viewport" content =" width=device-width,initial-scale=1. 0" >
<meta	http-equiv="X-UA-Compatible"	content ="ie=edge" >
Copy the code

The character code of the current page is GBK: Simplified Chinese
Content =”width=device-width, initial-Scale =1.0″, the width of the client’s screen. The initial ratio of text to graphics displayed is 1.0
In order to be compatible with all versions of IE, the document is rendered in the highest standard mode supported by the current version. The meta tag is used to set the page to jump to the specified page at the specified time after loading

<meta	http-equiv="refresh"	content ="5; url =http://www.111.com" >
Copy the code

Note: in HTM L, if we jump to the website resources on the Internet, then we must take the protocol path when writing path.

2.10.2 link tag

We will use the link tag to import CSS later. Note: The link tag must also be written in the tag.

3.HTM L5 new features

3.1 Differences between HTM L4 and HTM L5

H5 contains the h4

1. Case insensitive
- (1) tag
- (2) attributes
- (3) Value of attribute
1. Quotation marks can be omitted
1. The closing tag is omitted

3.2 Adding semantic labels

Html4, 95% of all container tags use divs. If there are too many divs, it is difficult to distinguish them from each other by adding many semantic tags, so that divs “know their meaning by name”.

Section tags: Represent content areas, sections, and body parts of a page
Article tag: article
Aside from the content of the article
Header: the header, the top of a page
Hgroup tag: a combination of content and title
Nav TAB: Navigation
Figure label: Illustrated and illustrated
Foot: footer, the bottom of a page

3.3 Media Labels

To play a video on a web page, use video. The properties are:

SRC: indicates the location of the media resource file
Controls: Control panel
Autoplay: Autoplay (Google disabled, 360 browser available)
Loop: indicates a loop

3.4 New form controls

Input, modify the type attribute:
Color: color palette
Calendar date:
The month: calendar
Week: week
Num ber: indicates the number range
Min: minimum value (default is 1)
Max: maximum value (default value has no upper limit)
Step: increasing amount
Range: the slider
Search: search box (marked with x, you can delete the content in the box with one click)
Progress: the progress bar
Mark: highlight
Datalist: Associative input box (fuzzy query)
Option: option

HTML Basics