Summary of HTML knowledge points for the front end (recommended)

1. HTML Overview

htyper text markup language Hypertext markup language

Hypertext: It means that a web page can contain pictures, links, and even non-text elements such as music and programs.

Markup language: A language composed of tags.

Web page == HTML document, parsed by the browser for display

Static web pages: static resources, such as xxx.html

Dynamic web pages: HTML code is dynamically generated by a certain development language based on user requests

The following is a tree structure diagram of the html file

The concept of label:

•It is composed of a pair of words enclosed in angle brackets, for example: <html> *Words in all tags cannot start with a number.

• Tags are not case sensitive. <html> and <HTML>. Lowercase is recommended.

•A tag consists of two parts: the opening tag <a> and the closing tag </a>. The part between the two tags is called the tag body.

•Some tags are simpler in function. You can use just one tag. This kind of tag is called a self-closing tag. For example: <br/> <hr/> <input /> <img />

• Tags can be nested, but not cross-nested. <a><b></a></b>

The attributes of the tag:

•Usually appears in the form of key-value pairs. For example, name="alex"

•Attributes can appear only in a start tag or a self-closing tag.

• Attribute names are all lowercase. * Attribute values must be enclosed in double quotes or single quotes, for example, name="alex"

•If the attribute value and attribute name are exactly the same, just write the attribute name. For example, readonly

2. Introduction to main head tags

•<meta>Composition of the meta tag: The meta tag has two attributes, namely the http-equiv attribute and the name attribute. Different attributes have different parameter values, and these different parameter values realize different web page functions.

1 The name attribute is mainly used to describe the web page. The corresponding attribute value is content. The content in content is mainly used to facilitate search engine robots to find and classify information.

2 http-equiv, as the name implies, is equivalent to the file header of http. It can transmit some useful information back to the browser to help display the content of the web page correctly and accurately. The corresponding attribute value is content. The content in content is actually the variable value of each parameter.

•<title>Old Boy</title>

•<link rel="icon" href="http://www.jd.com/favicon.ico">

3. Body tag

Basic tags:

<hn>: The value range of n is 1~6; from large to small. Used to indicate the title.

<p>: Paragraph tag. The content wrapped is wrapped in a new line. There is also a blank line between the upper and lower content.

<b> <strong>: bold tags.

<strike>: Add a center line to the text.

<em>: Makes the text italic.

<sup> and <sub>: superscript and subscript tables.

<br>: Line break.

<hr>: horizontal line

Block-level and inline tags

Block-level tags: <p><h1><table><ol><ul><form><p>

Inline tags: <a><input><img><sub><sup><textarea><span>

Features of block elements

① Always start on a new line;

② Height, line height, margins and padding can all be controlled;

③ The default width is 100% of its container unless a width is set.

④ It can accommodate inline elements and other block elements

Features of inline elements

① It is on one line with other elements;

② Height, line height, margins and padding cannot be changed;

③ The width is the width of the text or image and cannot be changed

④ Inline elements can only contain text or other inline elements

For inline elements, please note the following

Setting width has no effect.

Setting the height is invalid, you can set it through line-height.

When setting margin, only left and right margins are valid, not top and bottom.

When setting padding, only left and right padding are valid, while top and bottom padding are invalid. Note that the element range is increased, but the content around the element is not affected.

Special characters:

< >"©®

Graphics tag <img>:

src: The path to the image to be displayed.

alt: The prompt when the image is not loaded successfully.

title: The tooltip displayed when the mouse is hovering.

width: the width of the image

Height: The height of the image (using only one of the width and height attributes will automatically scale proportionally.)

Hyperlink tag <a>:

href: The resource path to be connected is in the following format: href="https://www.jb51.net"

target: _blank : Open the hyperlink in a new window. framename: Open the link content in the specified frame.

name: defines a bookmark for a page.

Used to jump href: #Bookmark name.

List Tags:

<ul>: Unordered list

<ol>: ordered list

<li>: Each item in the list.

<dl> Definition List

<dt> List title

<dd> List item

Table tag <table>:

border: table border.

cellpadding: inner margin

cellspacing:

outer

margin.

width: percentage of pixels. (It is best to set the length and width through CSS)

<tr>: table

row <th>: table head cell

<td>: table data cell

rowspan: the number of rows a

cell spans vertically colspan: the number of columns a cell spans horizontally (i.e. merged cells)

<th>: table header <tbody> (not commonly used): partition the table

Form tag <form>

Forms are used to transfer data to a server.

A form can contain input elements such as text fields, checkboxes, radio buttons, submit buttons, and so on.

Forms can also contain textarea, select, fieldset, and label elements.

1. Form properties

HTML forms are used to receive different types of user input. When a user submits a form, data is transmitted to the server, thereby enabling interaction between the user and the Web server. Form tag, all content to be submitted should be in this tag.

action: where the form is submitted. Generally points to a program on the server side, and the program receives the data submitted by the form (that is, the form element value) and processes it accordingly, such as https://www.sogou.com/web

method: the form submission method post/get. The default value is get (envelope)

get: 1. The submitted key-value pair is placed after the url in the address bar. 2. The security is relatively poor. 3. There is a limit on the length of the submitted content.

post: 1. The submitted key-value pair is not in the address bar. 2. The security is relatively high. 3. There is no limit on the length of the submitted content in theory.

get/post are two common request methods.

2. Form element

<input>
type:
text text input boxpassword

password input boxradio

single selection

boxcheckbox multiple selection

boxsubmit submit

buttonbutton (needs to be used with js.) What is the difference between button and submit?

file Submit file: form needs to add attribute enctype="multipart/form-data"

XML/HTML CodeCopy content to clipboarddef

index(request):
print request.POST
print request.GET
print request.FILES
for item

in request.FILES:

fileObj = request.FILES.get (item)
f = open (fileObj.name, 'wb')
iter_file = fileObj .chunks()
for line in iter_file:
f.write(line)
f.close()
return HttpResponse('ok')

name: the key of the form submission item. Note the difference with the id attribute: the name attribute is the name used when communicating with the server; the id attribute is the name used by the browser. This attribute is mainly

used in CSS and JavaScript to facilitate client-side programming.

value: the value of the form submission item. The value attribute is used differently for different input types:

type="button", "reset", "submit" - defines the text displayed on the button

type="text", "password", "hidden" - defines the initial value of the input field

type="checkbox", "radio", "image" - defines the value associated with the input

checked: radio and checkbox are selected by default

readonly: read-only. text and password

disabled: works for all inputs.

<select> drop-down selection tag attributes:

name: the key of the form submission item.

size: the number of options

multiple: multiple

<option> attributes of each item selected in the drop-down: value: the value of the form submission item. selected: the selected drop-down selection is selected by default

<optgroup> adds groups for each item

<textarea> text field name: the key of the form submission item. cols: the default number of columns in the text field rows: the default number of rows in the text field

<label>

The above summary of front-end HTML knowledge points (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<: Implementation of element input box automatically getting focus

>>: Brief Analysis of MySQL B-Tree Index

Using better-scroll component in Vue to realize horizontal scrolling function

Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database

Phenomenon: After MySQL version 5.7, the default ...

Summary of HTML knowledge points for the front end (recommended)

Using better-scroll component in Vue to realize horizontal scrolling function

Docker uses the nsenter tool to enter the container

Detailed graphic explanation of mysql query control statements

MySQL calculates the number of days, months, and years between two dates

Detailed explanation of the hierarchical relationship problem caused by CSS positioning

Sample code for implementing interface signature with Vue+Springboot

Solve the problem of running hello-world after docker installation

JS realizes the effect of Baidu News navigation bar

Skin change solution based on Vue combined with ElementUI

Detailed explanation and summary of the use of Linux scheduled task Crontab command

Recommend

How to rename the table in MySQL and what to pay attention to

Introduction to the B-Tree Insertion Process

CSS3 realizes the mask barrage function

VMware and CentOS system installation method to reset the root password

Vue keeps the user logged in (various token storage methods)

Detailed explanation of MySQL 5.7 MGR single master determination master node method

Detailed explanation of Linux command unzip

Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database

Detailed explanation of mysql filtering replication ideas

The use of anchor points in HTML_PowerNode Java Academy

IDEA uses the Docker plug-in (novice tutorial)

Detailed explanation of mysql basic operation statement commands

CSS transparent border background-clip magic

Tutorial on deploying nginx+uwsgi in Django project under Centos8

Limiting the number of short-term accesses to a certain IP based on Nginx