This is the 14th day of my participation in the August Text Challenge.More challenges in August

digression

preface

Be a qualified backend developer

The basics of the front end also need to be understood

1. The web page

W3C specifies that a web page consists of three parts: structure, presentation, and behavior. Structure refers to HTML presentation refers to CSS behavior refers to JavaScript and these are the three parts of a web page that are regulated by the W3C, the World Wide Web consortium. In this video we’re going to look at HTML, the structure of a web page.

1.1 What is the structure, presentation and behavior of a web page

  • Structure HTML is used to represent the structure of a web page
  • Presentation CSS is used to control the style of elements on a page
  • Behavior JavaScript is used in response to user actions

1.2 What is HTML

HTML (Hypertext Markup Language) is the Hypertext Markup Language. Strictly speaking, HTML is not a programming language. It is a form of markup that identifies different parts of a web page. Why is HTML not a programming language? Because HTML doesn’t have an interpreter, the code written can be viewed directly in a browser, without downloading JDK, Python, etc., or configuring the environment.

1.3 Running/writing HTML

Because HTML is a hypertext markup language, we can write it directly from a notepad

Or you can use Notepad++, which supports highlighting

So once the notepad code is done, change the suffix to.html and then the higher-ups can see what our code looks like in action

2. HTML based

2.1 the label

Tags are enclosed in Angle brackets <> and are used to describe web pages

2.2 elements

A complete tag, called an element, has a beginning, an end, and content

  • HTML elements start with an opening tag (<>) and close with an ending tag ()
  • The element content is the content between the start tag and the end tag.
  • Some HTML elements have empty content
  • The empty element is closed in the start tag

2.3 attributes

Attributes can be set by < tag a = “attribute “></ tag >. Attributes attach attributes to HTML elements

Attributes are in the form of key-value pairs

Common tags are demonstrated below

2.4 HTML的Hello World

<DOCTYPE html>
<html>
<head>
    <title>The first HTML</title>
</head>
<body>
hello world!
</body>
</html>
Copy the code

So, change the file name to hello.html and double-click to open it, and you’ll see Hello World.

2.5 Label Nesting

Most tags support nesting

<p>This is the paragraph<p>This is the first paragraph in the paragraph</p>
    <p>This is the second paragraph in the paragraph</p>
</p>
Copy the code

Page display:

This is the paragraph

This is the first paragraph in the paragraph

This is the second paragraph in the paragraph

3. Common HTML tags

3.1 the title

Headings are realized by H + digital tags, with six levels of headings

<h1>Primary title</h1>
<h2>The secondary title</h2>
<h6>Six levels of headings</h6>
Copy the code

3.2 the link

Links are implemented with the A tag

<a str = "www.baidu.com">Here's a link</a>
Copy the code

Here is the page showing this is a link

Paragraph 3.3

The paragraph is implemented with the P tag

<p>Boy, boy, this is the first paragraph</p>
<p>Boy, boy, this is the second paragraph</p>
Copy the code

Below is the web page display

<p> Dude, dude, that's the first paragraph </p> <p> Dude, dude, that's the second paragraph </p>Copy the code

3.4 the picture

The image is implemented with the IMG tag

<img src = "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg">caption</img>
Copy the code

Below is the web page display

caption

3.5 a newline

Line breaks are represented with <br> tags

This is a<br>The effectCopy the code

Below is the page showing this is the effect

3.6 list

  1. Set up an ordered list
<ol>
    <li>The first one</li>
    <li>The second</li>
</ol>

Copy the code

Display result:

  1. The first one
  2. The second

  1. Set up an unordered list

    <ul>
    <li>The first one</li>
    <li>The second</li>
</ul>
Copy the code

    Display result:

  • The first one
  • The second

Table 3.7

Create a table:

<table>
    <tr>
    	<td>id</td>
    	<td>age</td>
    	<td>name</td>
        <td>sex</td>
	</tr>
</table>
Copy the code

Display result:

id age name sex

Multi-line display:

<table>
    <tr>
    	<td>id</td>
    	<td>age</td>
    	<td>name</td>
        <td>sex</td>
	</tr>
    <tr>
        <td>1001</td>
        <td>20</td>
        <td>The tiny zen</td>
        <td>men</td>
    </tr>
</table>
Copy the code
id age name sex
1001 20 The tiny zen men

Don’t ask why, that’s the label, there’s no why, that’s the rule, right

Of course, the table is not quite right, so if we want to define the first row, we need to use this tag

3.8 annotations

As the name suggests, it’s a tag that explains our code

Comments are not recognized by the computer, that is, they do not affect the results of the run

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
<! -- Here is a comment -->
</body>
</html>
Copy the code

As such, here is the result of the above code:

3.9 blocks

What is a block?

We define an HTML block with

, and we can style the entire div block in the same way that the CSS assigns attributes to the div block.

Code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
<! -- Here is a comment -->
<div style="color: antiquewhite">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
</body>
</html>
Copy the code

Effect:

This is a header

This is a paragraph.

some text.some other text.

some text.some other text.

The tag is used to combine inline elements in the document.

Wrap a particular part of a row element

Code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
<! -- Here is a comment -->
<div style="color: antiquewhite">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
<p class="text1"><span style="color: bisque">some text.</span>some other text.</p>
<p>some text.some other text.</p>
</body>
</html>
Copy the code

Effect:

This is a header

This is a paragraph.

some text.some other text.

some text.some other text.

3.10 the form

The form is set with the

tag

What’s the use of forms? Receives information entered by the user

Like the account number and password we fill out on the web page, that’s a form

The label of the null input text box is the tag, and it can accept many forms of content

Text is plain text, visible

Password is the password text and is not visible

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <label>Account:<input name="user" type="text"><br>Password:<input name="password" type="password">
    </label>
</form>
</body>
</html>
Copy the code

The effect is this:

Of course, we usually have a login/register button

This requires the Submit attribute of the tag

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <label>Account:<input name="user" type="text"><br>Password:<input name="password" type="password"><br>
        <input name="login" type="submit" value="Login">
        <input name="register" type="submit" value="Registered">
    </label>
</form>
</body>
</html>
Copy the code

The effect is this:

And sometimes our forms are more than that

You know, like, you know, choosing your career, your gender, whatever

This will require the

tag

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Personal Information Collection</h1>
<form>
    <label>Account:<input name="user" type="text"><br>Password:<input name="password" type="password"><br>Gender: Male<input name="sex" type="radio">The girl<input name="sex" type="radio"><br>Occupation: Student<input name="work" type="radio">The teacher<input name="work" type="radio">workers<input name="work" type="radio">farmers<input name="work" type="radio"><br>
        <input name="login" type="submit" value="Login">
        <input name="register" type="submit" value="Registered">
    </label>
</form>
</body>
</html>

Copy the code

Effect:

What would you do with a login?

Will submit your message, which requires an action property

The default is to submit to the current page, and only data with the name attribute will be submitted

Of course, we can set this now, anyway, the server will not receive

I wrote an empty HTML file here

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Personal Information Collection</h1>
<form action="Submit HTML".>
    <label>Account:<input name="user" type="text"><br>Password:<input name="password" type="password"><br>Gender: Male<input name="sex" type="radio">The girl<input name="sex" type="radio"><br>Occupation: Student<input name="work" type="radio">The teacher<input name="work" type="radio">workers<input name="work" type="radio">farmers<input name="work" type="radio"><br>
        <input name="login" type="submit" value="Login">
        <input name="register" type="submit" value="Registered">
    </label>
</form>
</body>
</html>

Copy the code

Effect:

Personal Information Collection






















Because the submission method is GET (the default), clicking on login will redirect you to that blank HTML, and the URL will display all of your data with the Name attribute

And how do you get around that?

One attribute is required: method

Do not set the default to GET requests

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Personal Information Collection</h1>
<form action="Submit HTML". method="post">
    <label>Account:<input name="user" type="text"><br>Password:<input name="password" type="password"><br>Gender: Male<input name="sex" type="radio">The girl<input name="sex" type="radio"><br>Occupation: Student<input name="work" type="radio">The teacher<input name="work" type="radio">workers<input name="work" type="radio">farmers<input name="work" type="radio"><br>
        <input name="login" type="submit" value="Login">
        <input name="register" type="submit" value="Registered">
    </label>
</form>
</body>
</html>
Copy the code

This will not display the data with the name attribute when you click submit

conclusion

Interest is the best teacher, persistence is the invariable truth. Learn not to be impatient, one step at a time, step forward steadily. Make a little progress every day, and over a long period of time, you will find that you have become very strong.

I am Bu Xiaochan, a cute new self-study, follow me every day a little bit of progress!