I met the HTML

What is HTML

HTML (Hyper Text Markup Language) is a standard Markup Language used to create web pages. HTML is a fundamental technology that, along with CSS and JavaScript, is often used to design the interfaces of web pages, web applications, and mobile applications…..

Web browsers can read HTML files and render them as visual web pages.

HTML describes the structural semantics of a website as clues are presented, making it a markup language rather than a programming language.

HTML elements are the building blocks of a website. HTML allows you to embed images and objects, and can be used to create interactive forms, which are used to structure information — headings, paragraphs, lists, etc. — and to describe the appearance and semantics of a document to some extent.

HTML takes the form of HTML elements wrapped in Angle brackets. Browsers use HTML tags and scripts to interpret the content of a web page, but do not display them on the page.

HTML is a scripting language that can be embedded, such as JavaScript, that affects the behavior of HTML pages. Web browsers can also reference cascading styles (CSS) to define the look and layout of text and other elements.

The World Wide Web Consortium (W3C), the organization that maintains HTML and CSS standards, encourages people to use CSS instead of some HTML elements for presentation

W3C standards include

  • Structured Standard Languages (HTML, XML)
  • Presentation Standard Language (CSS)
  • Behavior standards (DOM, ECMAScript)

Create the first HTML file using IDEA

<! Specification: Tell the browser we want to use the HTML specification -->
<! DOCTYPEhtml>
<! -- The default language is English -->
<html lang="en">
<! -- Page header -->
<head>
    <! Use utF-8 encoding to describe some information about our website.
    <meta charset="UTF-8">
    <! - the title -- -- >
    <title>The title</title>
</head>
<! -- Page body -->
<body>The main content</body>
</html>
Copy the code

This is the HTML file generated by IDEA by default, and we have added the body content to it. This HTML looks like this when opened in a web page:

Use Google Chrome’s check source function to get all the content in our HTML files

There are many different tags in the HTML file, tag is a knowledge point we need to master, we need to understand it, and familiar with common tags.

HTML common basic tags

The title tag

Headings like those in Markdown are defined using the form
for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<h1>Primary title</h1>
<h2>The secondary title</h2>
<h3>Level 3 title</h3>
<h4>Level 4 titles</h4>
<h5>Five titles</h5>
<h6>Six levels of headings</h6>
</body>
</html>
Copy the code

The effect displayed on the page is as follows:

Paragraph tags

The string we write in the tag is not segmented by default, and it sometimes doesn’t look good on a web page.

Using the paragraph tag (

) we can segment.

Body and page effects without paragraph tags

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>My name is Strangu and I am 18 years old</body>
</html>
Copy the code

Clearly there is a use of carriage return, so that the segment can be put in the same row on the page.

Let’s use the P (segment) tag and see what it looks like

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<p>My name is stranger</p>
<p>I am 18 years old</p>
</body>
</html>
Copy the code

After using the segmented label, this is what we want.

Wrap the label

This tag also allows us to do a line break on our string, but it’s different from the P tag, which is obvious on a web page.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<p>My name is stranger</p>
<p>I am 18 years old</p>
    
<! -- Newline tag -->My name is stranger<br>I am 18 years old</body>
</html>
Copy the code

Observe the difference in the browser

Horizontal label

The label is straightforward and easy to use.

Use horizontal line tags in HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<p>My name is stranger</p>
<p>I am 18 years old</p>

<! -- Horizontal label -->
<hr/>My name is stranger<br/>I am 18 years old</body>
</html>
Copy the code

Effect in the browser

Font tags

This tag is also very simple, just wrapping the string with a specific tag to achieve the desired font effect.

The bold tag is

The italics are

Use in HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>Font style tag<br/>Bold:<strong> HTML </strong>
<br/>Italics:<em>HTML</em>
</body>
</html>
Copy the code

Effects in the browser

It's a very simple and useful label

Image label

HTML elements are the building blocks of a website. HTML allows images and objects to be embedded and can be used at…….

<img></img>The tag is the first tag we’ve seen where you can define attributes within the tag.

To define which attributes we can use, we define a tag in the Html file of IDEA and hit a space once

As you can see, the tag has a large number of attributes that you can define. You can’t use all of these attributes, just the most common ones.

We first try to insert the image and display it in the web page

This shouldn’t be too difficult, as long as the path is written correctly. You can write a relative path, you can write an absolute path.

View the image in your browser

If the image is displayed, it means that we have successfully inserted the image into the HTML file

Now let’s pair up<img>Some common attributes of the tag are introduced and demonstrated

  • altattribute
    • Image substitute text, the string defined by this property to display if our image is not accessible.

We have the HTML file<img>The image name of the tag is modified so that it cannot read the image, and the Alt attribute is added

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<img src=".. / resources/images/the. JPG" alt="Picture wrong (my heart was taken from me by Lacey and there may be no more joy and sorrow)" >
</body>
</html>
Copy the code

Display in web pages

  • titleattribute
    • This property allows us to display text while hovering over the image

We add this attribute to the HTML

<img src=".. / resources/images/grey. JPG" alt="Picture error" title="Fujimoto tree you have no heart!!" >
Copy the code

How it looks on a web page

  • width attribute
    • This property defines the width of the image

We add this attribute to the HTML

<img src=".. / resources/images/grey. JPG" alt="Picture error" title="Fujimoto tree you have no heart!!" width="500" >
Copy the code

How it looks on a web page

The image looks a little weird when we zoom in, but it looks normal when we zoom in.

  • heightattribute
    • This property defines the length of the image

When we scale the HTML in terms of length and width, the image doesn’t look weird.

<img src=".. / resources/images/grey. JPG" alt="Picture error" title="Fujimoto tree you have no heart!!" width="500" height="836">
Copy the code

Effects in web pages

Other image attributes are not detailed, you can go to other blogs if you are interested

Hyperlink tag

This tag is important but simple; it is defined in the form , so it is more often referred to as the A tag

The function of this tag is to let us click the tag to jump to the specified web page or HTML file.

We write an A tag in IDEA

<body>
<a href=""></a>
</body>
Copy the code

When you complete the TAB, it has a mandatory property called href, which defines the page to jump to.

For example, if I wanted to go to my nuggets home page using this TAB, I would write:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
    <! -- href is my gold digging home page -->
<a href="https://juejin.cn/user/2726398217452807">Click here to jump to my Nuggets home page</a>
</body>
</html>
Copy the code

It looks like this on the page:

It did take me to my nuggets home page

Of course, this is the more basic a tag application.

In addition to writing a paragraph of text in the body of the A tag, we can also nest a layer of tags inside.

This way, we can click on the picture to jump to the specified page.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<a href="https://juejin.cn/user/2726398217452807">
    <img src=".. / resources/images/grey. JPG" title="Click on me to go to the nuggets home page." width="231" height="399">
</a>
</body>
</html>
Copy the code

We used a ready-made ressel.jpg and scaled it to make it look better on the web.

The following is what the page looks like:

We can also click the picture to jump to the specified page.

In addition to the<img>Tag with an existing image in the project, we can also do this.

  1. We used screenshots software to capture the profile picture and signature information of my gold digger homepage

  1. Upload the image to my chart and save the link

  2. Place the link in our tag

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<a href="https://juejin.cn/user/2726398217452807">
    <! The link in the img tag SRC attribute is the address of the image in the map bed -->
    <img src="https://gitee.com/moluuu/pic/raw/master/img/Snipaste_2020-11-10_21-12-35.png" title="Click on me to go to the nuggets home page.">
</a>
</body>
</html>
Copy the code

How it looks in the browser:

  • targetattribute
    • This property determines how to jump to the page. The default is_self, that is, open on the current page.

We can also set it to _blank to open it on a new page

<a href="https://juejin.cn/user/2726398217452807" target="_blank">
Copy the code

The test is nothing good test, interested can test to play.

A tag has another play, called anchor chain

We can use the name attribute to give a tag a name (similar to making a tag), and use # get the tag name (get the tag) in another TAG. We can jump to the tag location by clicking on the tag a.

<body>
<! Define a tag with name 'top' -->
<a name="On top"></a>
<h1>At the top of the</h1>


<p>--</p>
<p>--</p>
<p>--</p>.<! Insert a large number of P tags into the HTML file, do a padding function -->.<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>


    <! Insert a <img> tag into the name of the tag.
<a href="# top">
    <img src="https://gitee.com/moluuu/pic/raw/master/img/Snipaste_2020-11-10_21-28-43.png" title="Click back to the top">
</a>

</body>
Copy the code

The effect on the page is:

At the top of the

At the bottom of the

By clicking on the image, we can jump to the top

A list of tags

There are three types of lists: unordered lists, ordered lists and custom lists.

These three lists also have tags in HTML

An ordered list

Ordered lists are defined using the < OL >
tag, and we wrap each column with

  • We define an ordered list in an HTML file

    <ol>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
    <li>java</li>
</ol>
Copy the code

    The effect on the page is:

    Unordered lists are defined using the

      tag, with each column still wrapped in

    • . 

      <ul>
    <h1>Unordered list</h1>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
    <li>java</li>
</ul>
Copy the code

      The page looks like this:

      Custom lists are defined using the < DL >
      tag, and the tag body can define the

      and < DD > tags.

      is the name of the list, and
      is all the columns under the name of the list

      We add a custom list to the HTML file

      <body>
<dl>
    <h1>Custom labels</h1>
    <dt>3 big</dt>
    <dd>HTML</dd>
    <dd>Css</dd>
    <dd>JavaScript</dd>
    <p></p>
    <dt>SSM framework</dt>
    <dd>Spring</dd>
    <dd>SpringMVC</dd>
    <dd>MyBatis</dd>
</dl>
</body>
Copy the code

      Effect in the browser

      Table label

      To define a table, we use the

      tag, which can also include and < TD > tags.

      represents rows and < TD > is a column.

      We tried to write a simple table in an HTML file

      <table>
    <tr>
        <td>First row, first column</td>
        <td>First row, second column</td>
        <td>First row, third column</td>
    </tr>
    <tr>
        <td>Second row, first column</td>
        <td>Second row, second column</td>
        <td>Second row, third column</td>
    </tr>
</table>
Copy the code

      How it looks on a page:

      The effect is not very good, the spacing between rows and columns is not so obvious.

      • borderattribute
        • This property is generally defined in<table>In the label
        • This property allows you to add borders to the table to make it look better

      We append this property to the

      tag of the HTML file
      <table border="1px">
Copy the code

      After setting the border property:

      The results are much better

      • colspanattribute
        • This property is generally defined in<td>Tag to implement a cross-column operation.
      <table border="1px">
    <tr>
        <! Make the column span three columns
        <td colspan="3">First row, first column</td>
    </tr>
    <tr>
        <td>Second row, first column</td>
        <td>Second row, second column</td>
        <td>Second row, third column</td>
    </tr>
</table>
Copy the code
      • rowspan
        • This property is generally defined in<td>Tag to implement a cross-line operation

      Since there are cross-columns and there are cross-rows, we append a cross-line operation to the HTML file

      <table border="1px">
    <tr>
        <! Make the column span three columns
        <td colspan="3">First row, first column</td>
    </tr>
    <tr>
        <! Make the column span two rows -->
        <td rowspan="2">Second row, first column</td>
        <td>Second row, second column</td>
        <td>Second row, third column</td>
    </tr>
    <tr>
        <td>Third row, first column</td>
        <td>Third row, second column</td>
    </tr>
</table>
Copy the code

      How it looks in the browser:

      With these three attributes added, our HTML table looks a bit like that

      Media elements

      Media elements generally refer to audio and video, but we can also insert audio or video in an HTML file.

      audio

      Audio is usually defined as
      , with a mandatory SRC property that is the location of our audio.

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<audio src=".. /resources/audio/"></audio>
</body>
</html>
Copy the code

      If we only define the location of the media resource, we will not be able to click on the web page to play the audio. We also need to write a controls property to add the console to it.

      <audio src=".. /resources/audio/" controls></audio>
Copy the code

      How it looks on a page:

      When an HTML file is opened from a web page, the audio is in an unplayed state. We need to manually click play, we can also set aautoplayProperty to play automatically when an HTML file is opened. Try switching browsers.)

      Video, like audio, is defined using the <video></video> tag and also has a mandatory SRC attribute. You can also add the corresponding controls and Autoplay properties

      An inline frame

      The tag enables our HTML file to be embedded in a web page when opened

      After defining this tag, there is a SRC attribute, which I don’t need to tell you what this attribute does.

      We’re trying to find<iframe></iframe>Tag embedded in my Nuggets home page

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<iframe src="https://juejin.cn/user/2726398217452807" frameborder="0"></iframe>
</body>
</html>
Copy the code

      How it looks on a page:

      After the embedded page size is a little less than ideal, we try to use<height>and<width>The label makes it what we want it to be.

      <iframe src="https://juejin.cn/user/2726398217452807" frameborder="0" height="1000" width="800"></iframe>
Copy the code

      After modifying the height and width, the embedded web page effect is more ideal.

      <iframe></iframe>In addition to simply embedding web pages in HTML, tags can also be associated withLabels are used together.

      Similar to the use of anchor chains, we can also add a name attribute to the tag.

      After a tag gets the name, it can realize the effect that the page in a tag can be embedded in the web page after clicking a tag. It’s a little bit confusing, so let’s do it

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<iframe name="hello" src="" frameborder="0" height="800" width="800"></iframe>

<a href="https://juejin.cn/user/2726398217452807" target="hello">
    <img src="https://gitee.com/moluuu/pic/raw/master/img/%E6%97%A0%E6%A0%87%E9%A2%98.png" title="Click to embed the gold digger homepage in the web page.">
</a>
</body>
</html>
Copy the code

      • We first clear out the SRC attribute in the tag

        • Add a name attribute, and fill in the value of the name attribute as you like.

      • I’m going to write an A tag, and then I’m going to put my gold digger address in the href attribute, and target is going to get the name value in the

        • Nested one in the A tag<img>Tag, whose SRC property is a little red dot I drew myself.

      Effects in web pages:

      It's blank except for a little red dot that will prompt you if you hover over it. (I have to say, the little red dot is really ugly.)

      After the click:

      This little red dot is really ugly

      In addition to the basic tags, there are many special symbols in HTML that need to be understood

      Special symbols

      • The blank space
      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<! -- Special symbol -->Empty,</body>
</html>
Copy the code

      We inserted a lot of Spaces between the empty and lattice strings, but on a web page, only one of these Spaces is actually displayed.

      To insert multiple Spaces, it is not useful to simply press the space bar between strings. We need to use the escape character  

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<! -- Special symbol -->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"</body>
</html>
Copy the code

      Effect in the browser

      As you can see, using an escape character is the correct way to open it, whereas hitting the space bar, even if broken, will only show you a space.

      Let’s talk about greater than and less than

      Tags in our HTML files are usually written in <> Angle brackets, which are our greater-than and less-than signs.

      Then there are some conflicting issues, which we can still resolve by using escape characters.

      The escape characters for greater than and less than signs are as follows:

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<! -- Greater than -->
&gt;<br/>
<! -- Less than sign -->
&lt;<br/>
</body>
</html>
Copy the code

      Effects in the browser:

      What about these special symbols? There’s no way to memorize all of them, and there’s no point in memorizing them. A search on the browser can also be found out a large list, and in the IDEA of a & is able to preview these special symbols, there is no need to remember.

      The form

      We usually use the login function in the web page, the pop-up login page or login box is actually a form.

      We can also use some tags in HTML to write out the effect of a rudimentary login box

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<h3>Please log in</h3>
<form action="success.html" method="get">
    <p>User name:<input type="text" name="username"></p>
    <p>&nbsp;&nbsp;&nbsp;Password:<input type="text" name="pwd"></p>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="submit" value="Login">
        <input type="reset" value="Empty">
    </p>
</form>
</body>
</html>
Copy the code

      The form tag is the key tag that defines the form

      • In the codeactionProperty, where the form data will be submitted
        • The location I wrote is another HTML file.
        • Form submission can be an HTML file, a web page, or even a request.
      • methodProperties are forms submitted in get and POST.
        • Get is less secure, but it’s efficient. Post is the opposite of that

      The input tag is the core element in the form

      • In the codetypeAttribute is the type of the input tag.
        • This type can be a text entry field, an image, a message, a slider, a search box, a single/multiple check box, or even a button……. There are so many types
      • nameThe attribute is the name of the input tag, which we usually define for coding purposes.

      Let’s see what the HTML code looks like in a web page:

      Emmmm, sparrow is a little bit of a login box

      But is there nothing wrong with this login box? The answer is yes.

      As you can see, the password column is displayed directly. The password section of the normal login box should be blocked, and we can also modify the HTML code to achieve this effect.

      <p>&nbsp;&nbsp;&nbsp;Password:<input type="password" name="pwd"></p>
Copy the code

      For changing the passwordtypeAttribute to password

      After modifying the effect in the web page also becomes reasonable

      After I click login, the form data is submitted to another HTML file THAT I wrote

      However, we can see our submitted form data (login information) in the URL, which is not secure. Imagine that you log in to a web page and it puts your username and password in the URL……

      At this point we can use post submission, which does not place our form information on the URL

      However, this method can not achieve absolute security, we can still capture the post submitted parameters by the way of packet capture.

      Careful friends may have found that there is a prompt message in the normal login page, but we have not written. We put the prompt in front of the input field, which is a bit inelegant

      To optimize it we need to recognize a propertyplaceholder

      <h3>Please log in</h3>
<form action="success.html" method="get">
    <p><input type="text" name="username" placeholder="Username"></p>
    <p><input type="password" name="pwd" placeholder="Password"></p>
    <p>
        <input type="submit" value="Login">
        <input type="reset" value="Empty">
    </p>
</form>
Copy the code

      In this property, we can fill in a prompt, which will be displayed in the input field and will automatically disappear when the user enters the parameter.

      Effects in web pages:

      It’s much more elegant, and you don’t have to type as many escape characters to make it look neat.

      Input Label Type attribute

      As we mentioned above, the Type attribute in the input tag is very large. In addition to the text boxes, passwords, and submit buttons used above, there are a few simple types that need to be covered.

      • radio Radio buttons
        • This type allows us to define one or more checkboxes in a form
      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<h3>Choose your gender</h3>
<form action="success.html" method="post">
    <p>
        <input type="radio" value="Male">male<input type="radio" value="Female">female</p>
</form>
</body>
</html>
Copy the code

      Effects on the page:

      Defining a checkbox like we did above is actually a bit nonstandard because the name attribute is not written.

      Although both are wrapped together with the P tag, they are actually two relatively independent checkboxes, which means we can check both.

      This does not fit the definition of a checkbox, so how to implement a checkbox in the real sense (or meet our requirements)? It’s easy, just use the name attribute and put them in the same group.

      <input type="radio" value="Male" name="sex">male<input type="radio" value="Female" name="sex">female<! Select * from 'group'; select * from 'group';
Copy the code

      Use the name attribute to put them in the same group, so that the two checkboxes are two checkboxes in the same group. We can only choose one of the two boxes, which will realize the single box function in the real sense.

      And we didn't group them before, so they're not one group, they're different groups, so it's not surprising that they can all be checked.

      • checkbox Boxes,
        • This type allows us to define one or more checkboxes in a form
      <h3>Choose your hobby</h3>
<form action="success.html" method="post">
    <p>
        <input type="checkbox" value="game" name="hobby">The game<input type="checkbox" value="read" name="hobby">reading<input type="checkbox" value="code" name="hobby">code<input type="checkbox" value="girl" name="hobby">The girl<input type="checkbox" value="music" name="hobby">music</p>
</form>
Copy the code

      From our previous experience, when we defined the checkboxes, we added the name attribute to all of them and put them all in the same group.

      Effects on the page:

      It is not surprising that all boxes can be checked

      We can also make it tick by default

      You can do that using checked properties :(same thing with checkboxes)

      <input type="checkbox" value="girl" name="hobby" checked>The girlCopy the code

      • buttonbutton
        • We can also define a button in the form that does nothing.
        • We wrote it earliersubmitandresetIt’s a kind of button, and they all have their own functions.
      <h3>Define the button</h3>
<form action="success.html" method="post">
    <p>
        <input type="button" value="点我" >
    </p>
</form>
Copy the code

      Effects in web pages:

      Of course, it doesn't do anything when you click on it.

      Drop – down boxes and text fields

      We can also define dropdown boxes and text fields in HTML files using < SELECT >
      and tags, respectively.

      A drop-down box

      • Drop down box to use<select></select>Tags defined
        • The suboption is used<option></option>Tag, which is generally defined in the<select></select>The body of the tag

      We use it in HTML<select></select>Tags and multiple<option></option>The TAB defines a drop-down box function

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<h3>Choose your country</h3>
<select>
    <option value="China">China</option>
    <option value="America">The United States</option>
    <option value="Japan">Japan</option>
    <option value="England">Britain</option>
</select>
</body>
</html>
Copy the code

      Effects in web pages:

      The default suboption is the contents of the first

      <select>
    <option value="China" >China</option>
    <option value="America">The United States</option>
    <option value="Japan">Japan</option>
    <option value="England" selected>Britain</option>
</select>
Copy the code

      Text field

      • Text field is simply understood as multi-line text, using<textarea></textarea>Tag definition.
        • We can define its row and column values using the rows and CLOs attributes

      Add a text field based on the drop – down box to receive user feedback

      <h3>Choose your country</h3>
<select>
    <option value="China" >China</option>
    <option value="America">The United States</option>
    <option value="Japan">Japan</option>
    <option value="England" selected>Britain</option>
</select>

<p>
<h5>Feedback bar:</h5>
<textarea name="textarea" id="1" cols="30" rows="5" placeholder="A country without you? Feedback here.">
</textarea>
<p/>

<p><input type="submit" value="Submit feedback" name="submit">
    <input type="reset" value="Clear the feedback bar." name="reset">
</p>
Copy the code

      How it looks on a page:

      You look good

      Simple validation and slider functionality

      When we mentioned the tag earlier, we said that the type attribute can be a mailbox.

      If the type attribute is set to Email, it will be wrong to enter a non-email string in the input field. This will provide a simple parameter verification effect.

      Of course, Email is not the only type that can perform simple parameter verification

      Define a type email in the HTML file<input>The label

      <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The title</title>
</head>
<body>
<form action="success.html" method="get"></form>
<p>Enter your email address:<input type="email" name="email"></p>
<p><input type="submit" value="Submit"></p>
</body>
</html>
Copy the code

      Try typing a non-mailbox string into a web page:

      Will give us an error requiring an at sign

      As you can see, this is a very low level of verification. I’m just checking to see if there’s an at sign in there.

      In addition to email, we can also define a type url<input></input>The label

      <p>Enter a url:<input type="url" name="url"></p>
Copy the code

      Of course, this check is also low level. It only checks if you have input: and if there are strings before and after it.

      We can also make<input></input>Verify the numbers we entered.

      <p>Input age:<input type="number" name="num" max="150" min="0" step="5"></p>
Copy the code

      Number check, it is quite practical.

      In the code above we defined a maximum value of 150 and a minimum value of 0. Fits our age check

      How it looks on a page:

      In addition to this validation, we can also define a slider and of course the slider that we write directly doesn’t have any function, right

      Type of the slider isrange

      <p>Adjust the volume<input type="range" name="voice" min="0" max="100" step="2"></p>
Copy the code

      How it looks on a page:

      Instead of dragging it with the mouse, we can use the arrow keys to make it +2 or -2. (Because we defined step as 2)

      Tag general attributes

      • readonlyread-only
        • We can’t write to the tag that defines this attribute.

      Such as:

      <p>Enter your age:<input type="text" value="18" readonly>
</p>
Copy the code

      How it looks on a page:

      Because it is read-only, we can only see that it is set to default values and cannot modify or delete it. If you're interested, try it

      • disableddisable
        • The tag that defines this attribute is not really allowed to do anything
      <p>
    <input type="checkbox" value="moyu" name="hobby" disabled>Touch the fish<input type="checkbox" value="code" name="hobby">coding<input type="checkbox" value="girl" name="hobby">The girl<input type="checkbox" value="music" name="hobby">music</p>
Copy the code

      Effects in web pages:

      • hiddenhidden
        • The tag that defines the attribute is hidden, but its key remains.
      <p>
    <input type="checkbox" value="moyu" name="hobby" disabled hidden>Touch the fish<input type="checkbox" value="code" name="hobby">coding<input type="checkbox" value="girl" name="hobby">The girl<input type="checkbox" value="music" name="hobby">music</p>
Copy the code

      Effects in web pages:

      The multiple checkboxes are hidden

      • requiredJudge not empty
        • The input field in which this property is defined cannot be empty
      <h3>Enter your name</h3>
<form action="success.html">
    <input type="text"  name="name">
    <input type="submit" value="Submit" name="sb">
</form>
Copy the code

      We write a simple form, but this way we can submit it even if we don’t enter anything.

      We can add the required attribute so that it must have parameters to allow the commit.

      As I mentioned when I wrote validation above, its native validation is low-level and has fewer type attributes to provide validation. So how to solve the problem of low level validation and little extension?

      We can do this by usingpatternProperty to enforce validation, and extend the type of validation

      • patternThis property allows us to define a regular expression

      Regular expressions are very painful to memorize, and there is no need to memorize them. They’re all over the web

      Let’s demonstrate this with mailbox validation, in HTML codepatternProperty and copy the mailbox validation regular expression you just found

      <h3>Enter your email address</h3>
<form action="success.html">
    <input type="text"  name="name" placeholder="Please enter your email address" 
           pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    <input type="submit" value="Submit" name="sb">
</form>
Copy the code

      When the HTML is written like this, we can’t fool around with:, we have to enter a correct email address to pass the validation.

      Although it has the effect of mailbox verification, this way is just a little advanced. Due to the difference of regular expressions, misjudgment may occur

      For example, if I type my Gmail into the input box, it will show me that it is not formatted correctly.

      Of course, this is because of regular expression problems, just replace. We don’t have to worry about that.

      Other verification is the same, as long as we write the corresponding regular expression, we can achieve different verification effect, relatively advanced.

      Relax your eyes

      Smuggle (no

      Original picture P station address

      Painters home page