This is the 27th day of my participation in Gwen Challenge

Search “Program Yuan Xiaozhuang” on wechat, and you will get a full set of Python full stack tutorials, as well as the constantly updated e-books and interview materials prepared by Xiaozhuang

preface

This article mainly introduces what is HTML and HTML language commonly used tags, through THE HTML language can provide a skeleton for us to build a website, right-click the mouse on the web page to choose to view the source code can see the page HTML source code oh ~

What is HTML

HTML is full name for Hypertext Markup Language (HTML), a Markup Language used to create web pages. It should be noted that HTML is a Markup Language, not a programming Language. Use tags in HTML to describe web pages.

HTML comments

Although HTML is not a programming language, it does have comments, and the HTML code looks like this:

<! -- Single-line comment -->
<! -- Multiline comment -->
Copy the code

Because HTML code is very messy, and very much, so it is customary to use comments to delimit the page area to facilitate subsequent search, such as:

<! -- Navigation bar start -->All HTML code in the navigation bar<! -- End of navigation bar -->

<! -- Left menu bar start -->Left menu bar all HTML code<! -- Left menu bar code end -->
Copy the code

HTML Document structure

HTML file suffix are generally. HTML, the file suffix is actually to the user, but for different file suffix have different software to deal with, and add a lot of features, HTML code format, can be written on one line is no problem, just use indentation as far as possible to improve the readability of the code.


<! DOCTYPEhtml>  <! -- Declare HTML5 document -->
<html lang="zh-CN">  
    <head></head> <! -- Tags in the head are not for the user, but to define some configuration mainly for the browser.
    <body></body> <! -- Inside the body tag, the browser will render what is written and the user will see what is written -->
</html>

Copy the code

Two ways to open an HTML file

First, find the location of the HTML file, right-click it and choose Browser to open it.

The second one inherits the ability to automatically invoke the browser within PyCharm by clicking on it, provided that the appropriate browser is installed on the computer.

Introduction to HTML Tags

①HTML tags are keywords surrounded by Angle brackets, such as < HTML >, , etc.

②HTML tags usually come in pairs, such as < HTML >
, the first tag is the start tag, the second tag is the end tag, the end tag will have a left slash;

③ There are also some single tags, such as

,

, etc., encountered remember it can be;

④ The tag may or may not contain various attributes.

Here is the syntax of the HTML tag, divided into single tag and double tag:

<! -- Single label -->< tag name Attribute 1=" Attribute value 1" Attribute 2=" Attribute value 2".... /><! -- Double label -->< tag name Attribute 1=" Attribute value 1" Attribute 2=" Attribute value 2"... > Content </ tag name >Copy the code

A block-level label occupies an exclusive line, while a block-level label occupies the space of its own text. Common inline labels include I, U, S, B, and SPAN, while block-level labels include H, P, and DIV.

The differences between block-level labels and inline labels are as follows:

(1) The length and width of block-level labels can be modified, but the length and width of inline labels cannot be modified.

(2) the block-level tags can be nested within any block-level tags and inline tags, but p tags are block-level tags, but it can only be nested inline tags, block-level tags cannot be nested If set, the problem also is not big, the browser will automatically unlock nested, because the browser is directly to the user, not an error easily, even if an error users also feel not to come out.

③ Inline labels cannot nest block-level labels, but can nest inline labels.

Common HTML tags

Common labels in the head tag

<title>The page title</title>
<style>Internally write CSS code</style>
<script src='External JS file'>Write JS code internally, or import external JS files</script>
<link rel="stylesheet" href="mycss.css">  <! Import external CSS files -->
<meta charset='UTF-8'>  <! -- Specify page character code -->
<meta name='keywords' content=' '>  <! -- When you use the browser to search as long as you input the keywords specified after the keywords so the web page may be baidu search out to show to the user -->
<meta name="description" content="">  <! -- Page description -->
Copy the code

Common tags within the body tag

Basic label


<body>
    <! -- There are 6 levels of title tags from H1-H6 -->
    <h1>Primary heading label</h1>
    <b>Text bold</b>
    <i>italics</i>
    <s>Delete the line</s>
    <p>The paragraph</p>
    <br>A newline<hr>Horizontal dividing line</body>

Copy the code

Common special symbol

&nbsp;The blank space&gt;More than no.&lt;Less than no.&amp;   &
&yen;   ¥
&copy;	©
&reg;® Registered trademarkCopy the code

Div tag & SPAN tag

Div tags are block-level tags, and SPAN is in-line tags. These two tags have no practical meaning. However, the layout of a page usually uses div and SPAN tags first and then adjusts the style. Div you can think of it as a single area which means that you use div to specify all the areas ahead of time, and then you fill in that area instead of normal text with a SPAN tag.

Img image tag

<img src="" alt="" title="" height="" width="">
<! - attribute: SRC, image path (local) | network, also can be a url, will automatically get request to the url to get the data Alt, when images load out descriptive information to the picture title, when the mouse is suspended to the image after automatically display the tooltip height | width, width is high, the unit is the px. Modify one, equal scale scaling; Modify two, the picture may be distorted -->

<! - sample - >
<img src="https://w.wallhaven.cc/full/g7/wallhaven-g75r7d.jpg" alt="Why doesn't it load..." title="I'm the subtitle of the picture and it only shows when the mouse is over the picture.">
Copy the code

A Link tag

<a href="" target="" id="">Links to describe</a>
<! Href: href: $href: $href: $href: $href: $href: $href: $href: $href: $href: $ 2, put the ID value of other labels, click to jump to the corresponding label position (back to the top is to use this principle oh ~). Target: 1. If target='_self', the jump will be completed on the current page. Id: the id of the tag. The id of the tag cannot be repeated in the same HTML page. Each tag has an ID attribute -->

<! -- Example: anchor point function of a tag -->
<body>
    <a href="https://www.baidu.com" id="d1">At the top of the baidu</a>
    <h1 id="d111">hello world</h1>
    <div style="height: 1000px; background-color: red"></div>
    <a href="" id="d2">In the middle</a>
    <div style="height: 1000px; background-color: greenyellow"></div>
    <a href="#d1">At the top of the</a>
    <a href="#d2">Back to the middle</a>
    <a href="#d111">Back to the middle</a>
</body>
Copy the code

A list of tags

Although list tags are ugly, they are used in page layout as long as a few lines of data are formatted identically. There are three types of list tags: ordered list, unordered list, and header list.

<! -- Unordered list -->
<ul>
        <li>The first item</li>
        <li>The second</li>
        <li>The second</li>
        <li>The second</li>
</ul>

<! -- Ordered list -->
<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<! -- Title list -->
<dl>
    <dt>Title 1</dt>
    	<dd>The content of 1</dd>
    <dt>Title 2</dt>
    	<dd>Content of the 2</dd>
    <dt>Title 3</dt>
    	<dd>The content of 3</dd>
</dl>

<! -- List tag type attribute -->1 Number list, default value A Uppercase letter A Lowercase letter ⅰ Uppercase Rome ⅰ Lowercase RomeCopy the code

Table label

The table TAB displays the data as follows:

username password hobby
python 111 Life is short. I use Python
go 000 let’s go! 
<! -- Table attributes border: table border cellPadding: inside spacing cellPadding: outside spacing width: percentage of pixels (CSS is best) rowSPAN: how many rows the cell spans vertically colspan: How many columns do cells span (i.e., merge cells) -->

<table border='2'>
    <thead>
        <tr>
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
        </tr>
    </thead>
   
    <tbody>
        <tr>
            <td>python</td>
            <td>111</td>
            <td>Life is short. I use Python</td>
        </tr>
        <tr>
            <td>go</td>
            <td>000</td>
            <td>Let 's go!</td>
        </tr>
    </tbody>
</table>
Copy the code

Two important attributes of the tag

Each tag has two very important attributes, id and class. Id is used to identify unique identity. The ID of a tag in an HTML page cannot be repeated.

Tags can have either default attributes or custom attributes.

<p id="first-one" class="orange" username="python" password="none">Username and Password are user-defined attributes</p>
Copy the code

Highlight – form labels

The Flask framework is simple to use

Flask is a Python web framework that will be discussed in more detail in a later article. The Flask framework is very simple, so I will use the Flask framework in conjunction with the form tag to implement the front and back end interaction

PIP install Flask if flask is not installed
import flask

Instantiate the object
app = flask.Flask(__name__)

# back-end routing interface
@app.route('/')  # / indicates the address to access, and the code decorated with this decorator is executed when the browser accesses this address
def index() :
    return 'hello world'

if __name__ == '__main__':
    Run flask locally, default port 5000, host 127.0.0.1
    # access 127.0.0.1:5000/index to access the above routing interface
    app.run()
Copy the code

Form tag

The form label can be used to transfer data to the back end, so as to realize the interaction between the front end and the back end. The form label can contain a series of labels, such as input series labels such as text fields, check boxes, checkboxes and submit buttons, etc. The form label can also contain labels such as Lable and SELECT.

The form tag is usually used for mobile users to enter information. The form tag works as follows: Visitors to browse a web page form, fill in the required information and then click the button to submit, this information will be transmitted via the Internet to the backend server, the server has a special program to deal with the data, if there is an error is returned error information and requires correct mistakes, if the information is correct, will also return the information of operation to complete.

The basic use of form tags is as follows:

<form action="" method="post" enctype="multipart/form-data"></form>
<! All user data written inside the form tag will be submitted back to the form tag.
<! -- action: controls the back-end path of data submission (to which server data is submitted) The default is to submit data to the URL of the current page. 2 Write full path :https://www.baidu.com Submit three write path suffixes action='/index/' to the Baidu server. The IP address and port of the current server are automatically identified and joined to the front. Host :port/index/ encType: specifies the encoding format of the data to be submitted. Method: specifies the request mode. The default value is get.
Copy the code

The input tag

The input tag is similar to the front-end transformers in that it can be transformed with different types of attributes. Input also has other attributes, as shown in the following code:

<! Placeholder attributes: placeholder values -->
username:<input type="text" name="" id="" placeholder="">

<! -- password: encrypted text -->
password:<input type="password" name="" id="">

<! -- date: select a date -->
birth:<input type="date" name="" id="">

<! -- submit: specifies the value to be displayed on the form.
<input type="submit" value="Registered">

<! -- Botton: Normal button. It doesn't have any function, but it's the most useful. You can customize it after learning JS.
<input type="button" value="I have no function.">

<! -- Reset: reset function -->
<input type="reset" value="I can erase all the data I put in.">

<! -- Radio: checked=checked =checked -->
gender:
     <input type="radio" name="gender" checked>male<input type="radio" name="gender">female<! -- checked is checked by default -->
hobby:
    <input type="checkbox" name="hobby" checked>read
    <input type="checkbox" name="hobby" checked>play
    <input type="checkbox" name="hobby" checked>sleep
    <input type="checkbox" name="hobby" checked>tea

<! -- file: get local file, can get multiple muliple at once -->
myfile:<input type="file" multiple>

<! -- Hidden: Hidden input box -->Fishing:<input type="hidden">

<! -- INPUT tag attribute summary name: when the back end gets the front-end data, it's the dictionary key, and the dictionary value is the user input placeholder: Default value displayed in the input box value: value of the corresponding item when the form is submitted Type ="button", "reset", "submit" is the text year content displayed on the button when type="text","password","hidden", Type ="checkbox", "radio", "file". Checked: radio and checkbox are selected by default. Readonly: text and password are set to read-only. Disabling all input applies -->
Copy the code

Lable label

<! Input is a closed tag. Input and lable tags are inline tags.Username:<input type="text">

<! If you don't click username, the cursor will appear in the input box.There are two ways to achieve this effect. The first is to write the input box directly inside the label<label for="d1">
       username:<input type="text" id="d1">
 </label>The for attribute binds the Lable tag to the input tag via id linking without nesting<label for="d1">username</label>
<input type="text" id="d1">Note: Input is not associated with lableCopy the code

The select tag

The default option is single, and you can add mutiple to multiple options. The default option is selected=”selected”

<! -- Hold down CTRL key for multiple selection -->
<! --select TAB attribute description multiple options disabled selected value specifies the value of the submission options -->

province:
   <select name="" id="">
        <option value="">Shanghai</option>
        <option value="">Beijing</option>
        <option value="">shenzhen</option>
   </select>

<select name="" id="" multiple>
     <option value="" selected>apple</option>
     <option value="" selected>Egg tart</option>
      <option value="">The cake</option>
</select>
Copy the code

Select tags can also be grouped. You need to use the optGroup tag inside the select tag:

address:
<select name="" id="">
    <optgroup label="Shanghai">
          <option value="">xuhui</option>
          <option value="">zhangjiang</option>
    </optgroup>
    
    <optgroup label="Shenzhen">
         <option value="">longgang</option>
         <option value="">Lo wu</option>
    </optgroup>
    
    <optgroup label="Beijing">
        <option value="">changping</option>
        <option value="">The rising sun</option>
    </optgroup>
</select>
Copy the code

Textarea tag – large text box

Personal Profile:<textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
<! -- maxlength: limit the number of input characters -->
Copy the code

The Flask framework validates form data submission

Take the user registration function as an example to realize the front and back end interaction.

The front page

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <h1>The sign-up page</h1>
    <form action="http://127.0.0.1:5000/register/" method="post" enctype="multipart/form-data">
        <p>
            <label for="username">User name:</label>  <! -- Label and input are bound by id -->
            <input type="text" name="username" placeholder="Please enter user name" id="username">
        </p>                                     <! --placeholder input box default value -->
        <p>
            <label for="password">Password:</label>
            <input type="password" name="password" placeholder="Please enter your password" id="password">
        </p>
        <p>
            <label for="birthday">Birthday:</label>
            <input type="date" name="birthday" id="birthday">
        </p>
        <p>
            <! -- For the tag selected by the user, the user does not need to enter the content, but you need to add the content to the tag in advance.
            <label>Gender:</label>
            <input type="radio" name="gender"  value="male" checked>male<! --checked by default -->
            <input type="radio" name="gender"  value="female" >female<input type="radio" name="gender"  value="security">A secret</p>
        <p>
            <label>Hobbies:</label>
            <input type="checkbox" name="hobby" value="read" checked>Reading a book<input type="checkbox" name="hobby" value="outdoors">outdoor<input type="checkbox" name="hobby" value="movie">The movie<input type="checkbox" name="hobby" value="others">other</p>
        <p>
            
            <label for="homeland">Hometown:</label>
            <select name="homeland" id="homeland" multiple >   <! -- Multiple Settings -->
                <option value="AH" selected>anhui</option>        <! --selected Defaults to select -->
                <option value="HB" selected>hubei</option>
                <option value="BJ">Beijing</option>
            </select>
        </p>
        <p>
            <label for="avatar">Head:</label>
            <input type="file" name="avatar" id="avatar">
        </p>
        <label for="self_info">Self-introduction:</label>
        <p>
            <textarea name="self_info" id="self_info" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="submit" value="Registered">
        </p>
    </form>

</body>
</html>
Copy the code

Flask backend

from flask import Flask, request

app = Flask(__name__)


@app.route('/register/', methods=['GET'.'POST'])  # method Specifies the request type
def register() :
    print(request.form)     Get the non-file data submitted from the form, like a dictionary
    for item in request.form:
        print(item)
    avatar_obj = request.files.get('avatar')  Get file, similar to dictionary
    avatar_obj.save(avatar_obj.name)    Save the file to the current path of the py file
    return 'Registration successful'


if __name__ == '__main__':
    app.run()
Copy the code

rendering

A small summary

Button group:

Input label Type Buttons generated by different attributes

Submit: Trigger the form to submit data, refresh the page, submit data

Button: ordinary button, no function, but is the most useful, after learning JS can give it custom functions

Reset: Resets all contents in the input box

Triggers the form to submit data and refresh the page

All tags that take user input should have a name attribute. The reason is that the data is submitted to the back end, and there should be a variable name to receive the value entered by the user, and the name is like the dictionary key, and the data entered by the user is like the dictionary value.

<p>gender:
           <input type="radio" name="gender">male<input type="radio" name="gender">female<input type="radio" name="gender">other</p>
Copy the code

conclusion

The article was first published on the wechat public account Program Yuan Xiaozhuang, and synchronized with nuggets and Zhihu.

The code word is not easy, reprint please explain the source, pass by the little friends of the lovely little finger point like and then go (╹▽╹)