htyper text markup language i.e. hypertext markup language
Hypertext: It means that the page can contain non-text elements such as pictures, links, and even music, programs.
Markup language: a language composed of marks (labels).
Web page ==HTML document, parsed by the browser, used to display
Static web page: static resources, such as xxx.html
Dynamic web page: HTML code is dynamically generated by a development language based on user requests.
The following is the tree structure diagram of the html file
Tag concept:• It is composed of words wrapped by a pair of angle brackets. For example: <html> *The words in all tags cannot start with numbers.
•Tags are case-insensitive.<html> and <HTML>. Lowercase is recommended.
•The tag is divided into two parts: the start tag <a> and the end tag</a>. The part between the two tags is called the tag body.
•Some tag functions are relatively simple. Just use one tag. This tag is called autism and tags. For example: <br/> <hr/> <input /> <img />
•Tags can be nested. But they cannot be cross-nested. <a><b></a></b>
Properties of tags:• Usually it appears in the form of key-value pairs. For example, name=alex
•Properties can only appear in the Start Tag or Autism and Tags.
•Attribute names are all lowercase. *Attribute values must be wrapped 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 directly. For example, readonly
2. Introduction to the main tags of head•<meta> composition of meta tags: There are two attributes in the meta tag, name attribute, respectively, 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 a web page, and the corresponding attribute value is content. The content in the content is mainly used by search engine robots to find information and classify information.
<meta name=keywordscontent=meta summary,html meta, meta attribute, meta jump>
<meta name=descriptioncontent=Old boy training institution is created by an old boy>
2 http-equiv, as the name suggests, is equivalent to the file header of http. It can pass back some useful information to the browser to help display the web page content correctly and accurately. The corresponding attribute value is content. The content in the content is actually the variable value of each parameter.
<meta http-equiv=Refreshcontent=2;URL=https://www.VeVb.com> //(Note the quotes afterwards, which are before the seconds and after the URL respectively)
<meta http-equiv=content-Typecontent=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 tags Basic tags:<hn>: The value range of n is 1~6; from large to small. Used to represent the title.
<p>: Paragraph tag. The content of the package is wrapped in line. There is also a blank line between the upper and lower contents.
<b> <strong>: Bold tag.
<strike>: Add a midline to the text.
<em>: The text becomes italic.
<sup> and <sub>: upper corner markers and lower corner tables.
<br>:Brand line.
<hr>:Horizontal line
<p><span>
Block-level and inline tags
Block-level tag: <p><h1><table><ol><ul><form><p>
Inline tags: <a><input><img><sub><sup><textarea><span>
Characteristics of block elements① Always start on a new line;
② Height, line height, outer margin and inner margin 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
Characteristics of inline elements① and other elements are on the same line;
② Height, the line height, outer margin and inner margin cannot be changed;
③ The width is the width of its text or picture and cannot be changed
④ Inline elements can only accommodate text or other inline elements
For elements within the line, please pay attention to the following
Setting width width is invalid.
Setting height is invalid, you can set it through line-height.
Setting margin only margins are valid, but upper and lower parts are invalid.
Setting padding Only left and right padding is valid, but up and down is invalid. Note that the range of elements has increased, but it has no effect on the content around the elements.
Special characters:<>"©®
Graphic tag <img>:
src: The path to display the image.
alt: The prompt when the image is not loaded successfully.
title: prompt message when the mouse is suspended.
width: the width of the picture
height: The height of the picture (only one of the two properties of width and height will automatically scale equally.)
Hyperlink tag <a>:
href: The resource path to connect to is as follows: href=https://www.VeVb.com
target: _blank : Opens the hyperlink in a new window. Frame name: Opens the connection content in the specified frame.
name: Defines the bookmark of 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 Items
Table tag <table>:
border: table border.
cellpadding: inner margin
cellpacing: 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: How many rows do cells span vertically
colspan: How many columns a cell spans (i.e. merge cells)
<th>: table header <tbody> (not commonly used): Partition the table
Form tag <form>
The form is used to transfer data to the server.
The form can contain input elements, such as text fields, check boxes, radio boxes, submission buttons, etc.
The form can also contain textarea, select, fieldset, and label elements.
1. Properties of the formHTML forms are used to receive different types of user input. When the user submits the form, data is transmitted to the server, thereby realizing the interaction between the user and the web server. Form tags, everything to submit should be in that tag.
action: Where to submit the form. Generally, it points to a program on the server. The program receives the data submitted by the form (i.e. the form element value) for corresponding processing, such as https://www.sogou.com/web
method: The form is submitted by post/get. The default value is get (envelope)
get: 1. Submitted key-value pairs. Place after the URL in the address bar. 2. Relatively poor security. 3. There are restrictions 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 theoretical limit on the length of the submitted content.
get/post are two common request methods.
2. Form elements<input>
type:
text text input box
password password input box
radio radio box
checkbox Multiple selection boxes
submit button
button button (need to be used with js.) What is the difference between button and submit?
file submit file: form form needs to add attribute enctype=multipart/form-data
XML/HTML Code Copy content to clipboard