Front-end HTML knowledge point sorting: HTML knowledge point sorting

Front-end HTML knowledge point sorting: HTML knowledge point sorting

I,Html Overview

Htyper text markup language (Hypertext markup language)

Hypertext: a page can contain images, links, music, programs, and other non-text elements.

Markup Language: the language of a tag.

Webpage = HTML document, which is parsed by the browser for display

Static webpage: static resources, such as xxx.html

Dynamic Web page: html code is dynamically generated by a development language based on user requests.

The tree structure of the html file is as follows:

　　

　　Label Concept:

• Is composed of a pair of words enclosed by Angle brackets. For example,
• Tags are case insensitive.
• The tag is divided into two parts: the start tag <a> and the end tag </a>. The part between the two labels is called the TAG body.
• Some labels are simple. You can use a tag. These tags are called auto-closing and tags. For example: <br/>
• Labels can be nested, but cannot be cross-nested. <a> <B> </a> </B>

　　Tag attributes:　　

• Usually in the form of key-value pairs. For example, name = "alex"
• The attribute can only appear in the start tag, auto-closing tag, or tag.
• Attribute names are all lowercase. * attribute values must be enclosed in double quotation marks or single quotation marks, for example, name = "alex"
• If the attribute value is the same as the attribute name, you can directly write the attribute name. For example, readonly

II. Introduction to head labels

　　

• <Meta> composition of meta Tags: meta tags have two attributes: http-equiv and name. different attributes have different parameter values, these different parameter values enable different webpage functions.

 

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

 

<Meta name = "keywords" content = "meta summary, html meta, meta attributes, meta jump">

 

<Meta name = "description" content = "the old boy training institution was created by an old boy">

 

2 as the name suggests, http-equiv is equivalent to an http File Header. It can return useful information to the browser to help display the webpage content correctly and accurately, the corresponding property value is content, and the content in content is actually the variable value of each parameter.

 

<Meta http-equiv = "Refresh" content = "2; URL = https://www.baidu.com"> // (note the quotation marks, before the second and after the URL, respectively)

 

<Meta http-equiv = "content-Type" content = "text/html; charset = UTF8">

 

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">

 

• <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 big to small. Used to indicate the title.

 

<P>: paragraph label. The content of the package is wrapped in a line break, and there is a blank line between the upper and lower content.

 

<B> <strong>: bold label.

 

<Strike>: adds a midline to the text.

 

<Em>: The text is italic.

 

<Sup> and <sub>: two-dimensional and two-dimensional tables.

 

<Br>: line feed.

 

<Hr>: horizontal line

 

<Div> <span>

　　

Block-level labels and inline labels

Block-level labels: <p>

Inline label: <a> <input> <sub> <sup> <textarea> <span>

Features of block elements
① Always start on a new line;

　　
② Height, row height, and outer and inner margins can 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
① And other elements are on one row;
② High, the row height, outer margin, and inner margin cannot be changed;
③ The width of the text or image cannot be changed.
④ Inline elements can only contain text or other inline Elements

Note the following for line elements:
The width setting is invalid.
The height setting is invalid. You can use line-height to set the height.
Only the left and right margin values are valid when you set margin.
When padding is set, only the left and right padding are valid, and the up and down are invalid. Note that the element range is increased, but it does not affect the content around the element.

 

Special characters:

& Lt; & gt; & quot; & copy; & reg;

　Graphical labels :　　

Src: Path of the image to be displayed.

Alt: prompt when the image is not loaded successfully.

Title: The prompt message when the mouse is suspended.

Width: The image width.

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

　　Hyperlink tag <a>:　

Href: the format of the resource path to connect is as follows: href = "http://www.baidu.com"

 

Target: _ blank: opens a hyperlink in a new window. Frame name: opens the connection content in the specified frame.

 

Name: defines the bookmarks of a page.

 

Used to jump to href: # The Name Of The bookmarks.

 

　List tags:　　

<Ul>: unordered list

<Ol>: ordered list

<Li>: each item in the list.

<Dl> definition list

<Dt> List title

<Dd> list items

　Table label <table>:
　　

Border: Table border.

Cellpadding: padding

Cellspacing: margin.

Width: pixel percentage (it is best to set the length and width through css)

<Tr>: table row

<Th>: table head cell

<Td>: table data cell

Rowspan: number of rows in the vertical span of a cell

Colspan: the number of columns that a cell spans (that is, merging cells)

<Th>: table header <tbody> (not commonly used): partitions tables.

　　Form tag <form>

　　

Form is used to transmit data to the server.

A form can contain input elements, such as text fields, check boxes, single quotes, and submit buttons.

The form can also contain textarea, select, fieldset, and label elements.

1. Form attributes

HTML forms are used to receive different types of user input. When a user submits a form, the user transmits data to the server to realize 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 pointing to a program on the server side, the program receives the data submitted by the form (that is, the form Element value) for the corresponding processing, such as https://www.sogou.com/web

Method: Form submission method. The default value of post/get is get (envelope)

Get: 1. Submitted key-value pairs. placed behind the url in the address bar. 2. Relatively poor security. 3. limited length of submitted content.

Post: 1. Submitted key-value pairs are not in the address bar. 2. Relatively high security. 3. Theoretically unlimited length of submitted content.

Get/post are two common request methods.

2. form elements

　　

<Input> type: text input box

Password Input box

Radio single queue

Checkbox multiple selection box

Submit button

What is the difference between a button (which must be used with js) and a button and a submit?

File: The form must contain the attribute enctype = "multipart/form-data"

　　

1 def index (request): 2 print request. POST 3 print request. GET 4 print request. FILES 5 for item in request. FILES: 6 fileObj = request. FILES. get (item) 7 f = open (fileObj. name, 'wb ') 8 iter_file = fileObj. chunks () 9 for line in iter_file: 10 f. write (line) 11 f. close () 12 return HttpResponse ('OK ')View Code

Name: Key of the Form submission item. note: The name attribute is the name used to communicate with the server, and the id attribute is the name used by the browser. This attribute is mainly used to facilitate client programming.

Used in css and javascript.

Value: the value of the Form submission item. For different input types, the value attribute is used differently:

Type = "button", "reset", "submit"-define the text displayed on the button

Type = "text", "password", "hidden"-defines the initial values of input fields

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: it is applicable to the input used.

 

<Select> drop-down label attributes:

Name: Key of the Form submission item.

Size: number of options

Multiple: multiple

<Option> Each attribute selected in the drop-down list: value of the Form submission item. selected: selected drop-down list: selected by default.

<Optgroup> Add a group for each item

　　

<Textarea> text field name: Key of the Form submission item. cols: default number of columns in the text field rows: default number of rows in the text field

<Label>

<Label for = "www"> name </label>
<Input id = "www" type = "text">

<Fieldset>

<Fieldset>
<Legend> log on. </legend>
<Input type = "text">
</Fieldset>