HTML
Html is a hypertext markup language. It stipulates its own syntax rules to express richer meaning than "text", such as pictures, tables, links and so on. At present, most web pages on the Internet are written in HTML.
Structure of html
<!DOCTYPE HTML>
<!--Document declaration-->
<html>
<!--Labels, elements, tags-->
<!--There are start and end labels and must end-->
<head>
<!--If there is no label body in the label, it can be closed-->
<!--The tag can have one or more attributes in the format: key = value-->
<!--meta The tag is used to specify the encoding-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>First web</title>
</head>
<body>
<!--adopt<br/>Line feed-->
Hello java! <br/>
</body>
</html>
- <! DOCTYPE HTML >: document declaration for HTML5
- <html>: all HTML should have this tag to indicate the beginning and end of the document (root tag)
- < head >: used to store basic attribute information in html, such as title, code, etc
- <body>: used to store page data in html, which can be displayed in the page
- < title >: Specifies the title of the web page
- < meta charset = UTF-8 / >: Specifies the decoding format of the browser
HTML syntax
-
HTML is a markup language. Tags are also called elements or tags. Tags are divided into start tags and end tags. If there is nothing to modify in the tag, you can combine a self closing tag, such as < meta / > < br / > < HR / > < input / > < img / >
-
Note: <-- Note content -- >
-
Spaces & line breaks
- Because multiple consecutive white space characters in a web page will be displayed as a space, so
- Space label: & nbsp;
- Line feed label: < br / >
HTML tags
-
HTML documents can contain different content through different tags. Such as text, links, pictures, lists, tables, forms, etc.
-
Text label: < font > < / font >
- Attribute - size: size, ranging from 1 to 7; face: font; Color: color, in three forms (English, 16 colors, RGB - RGB color is not supported by some browsers)
-
Title label: < H1 > ~ < H6 >
- Title labels, decreasing from H1 to H6
- Attribute - align: the position of the text (left is the default, center is the center, and right is the right)
-
List label
- ul: define an unordered label
- Attribute type: indicates the shape in front of the list. The values are disc (default): solid circle, circle: hollow circle, square: square
- ol: ordered list
- li: defines the items in the list
- ul: define an unordered label
<!--Unordered list-->
<ul type = "circle">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<!--Ordered list-->
<ol>
<li>java</li>
<li>python</li>
<li>c++</li>
</ol>
- Picture label < img... / >
- Attribute - src: picture URL or path; Width: width, which can be pixel or percentage; Height: height; alt: alternative text of the image (text displayed when the picture cannot be displayed); Border: width of border px
<!--Picture label--> <img src="web.png" width="70%" height="" alt="web" />
- Hyperlink tags < a ></a>
- Attribute - href: used to specify the jump URL; title: the content displayed when the mouse moves to change the label; Target: where to open the target url (_self: the current page opens, _blank: the new page opens, _top: back to the top)
- If you need to return to the specified location, you need to add < a name = "place" / > at the specified location
<!--Hyperlinks--> <!--_self:The current page opens,_blank:A new page opens,_top:Back to the top--> <a name = "pic"></a> <!--Picture label--> <img src="web.png" width="70%" height="" alt="web" /> </br> <a href="https://www.baidu. com/" title="" target="_ Blank "> baidu.com < / a ></br> <!--Return to the specified position--> <a href="#Pic "> return to view pictures</a></br> <a href="#" title="" target="_ Top "> back to top</a></br>
-
Table label < Table > < tr > < td >
-
Table – used to define a table
Attribute - border: border; cellspacing: distance between cells; Cell adding: the distance between the border and the content; bgcolor: background color; Width: defines the width of the table; align: defines the location of the table
-
tr – used to define rows in the table
Attribute - bgcolor: background color; align: defines the location of the table
-
td – used to define the cells in the table
Attribute - bgcolor: background color; align: defines the position of the table; Width: defines the width of the cell; Height: defines the height of the cell; colspan: defines the number of columns that a cell spans; rowspan: defines the number of rows the cell spans vertically
-
th – used to define the header
<!--Table label--> <h2 align = "center">This is a 3*3 Table of</h2> <table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "400px"> <tr bgcolor = "#1BBCE0"> <th>First column</th> <!--Header--> <th>Second column</th> <th>Third column</th> </tr> <tr> <!--that 's ok--> <td>arr[1][1]</td> <td>arr[1][2]</td> <td>arr[1][3]</td> </tr> <tr> <!--that 's ok--> <td>arr[2][1]</td> <td>arr[2][2]</td> <!--rowspan Merge cells by row--> <td rowspan = "2" align = "center">merge</td> </tr> <tr> <!--that 's ok--> <!--colspan Merge cells by column--> <td colspan = "2" align = "center">arr[3][1] & arr[3][2] </td> </tr> </table> -
-
Form label < form >
-
There are two ways for the browser to send data to the server
-
Send data to the server through hyperlinks, such as
https://www.baidu.com/?user=zhangsan&password=123Pass after hyperlink? The splicing parameters bring the data to the server; Parameters and parameter values are separated by an equal sign (key = value); There can be multiple parameters, which are separated by &, and the name of the parameter can be repeated
-
Send data to the server through a form
Through form and form item labels, users can enter data through form items and send data to the server through submission form
-
-
form label
<form action="http://www.baidu.com" method="GET"></form>
-
The attribute that must exist in action is used to specify the destination address of form submission
-
method optional attribute, used to specify how to submit the form. If not specified, the default is GET submission
- The HTTP protocol specifies seven submission methods, of which five are not commonly used, and only GET and POST are used. Only when the form is used and the submission method is explicitly specified as POST, can it be submitted by POST, and other methods are submitted by GET
- The difference between GET and POST submission: the main difference lies in the different transmission processes of request parameters
-
GET submit:
-
Send data to the server by splicing parameters in the address bar
-
The data is displayed in the address bar, which is very unsafe
-
Send data through the address bar. The amount of data cannot be too large, not more than 1kb or 4kb
-
-
POST submission:
- Send data to the server through the underlying stream
- The data is not displayed in the address bar, which is relatively safer
- No data is sent through the address bar, and the amount of data is not limited in theory
-
-
Items in the form
-
There can be multiple input items in the form. The input item must have a name attribute before it can be submitted. If the input item does not have a name attribute, the form will ignore it when submitting
-
Common attributes:
-
readonly = "readonly": set the form item as read-only, which can only be read and cannot be written, but can be submitted
-
disabled = "disabled": set the form item to disabled and cannot be submitted
-
-
< input > input box
-
Type attribute: when the value of the type attribute is different, the function effect of the input tag is also different
type function text Text input box, set the width through size password Password box radio In the radio box, the value of the name attribute must be consistent, and the value when submitted is specified through the value attribute checkbox Check box (multiple check boxes) to specify the value when submitted through the value attribute submit The submit button is used to submit the form reset Reset button to reset the form item to its original state button Normal button file File upload item, you can select a file to upload hidden The hidden field is generally used to hide the user id when modifying information
-
-
< textarea > text field
<textarea cols="30" rows="5">Please enter your personal information</textarea>
-
cols sets the number of columns, that is, the width of the input box
-
Rows sets the number of rows, that is, the height of the input box
-
-
< Select > < option > tab
- select defines a drop-down box
- Name attribute – name specifies the name of the parameter when the item is submitted
- size attribute – specifies the number of visible options
- Multiple – specifies that multiple selections are supported
- option is used to define the options in the drop-down box
- select defines a drop-down box
Form example:
<body> <h2 align = "center">Registration form </h2> <!--get Submission will put all contents in the address bar--> <!--There are 7 kinds of requests, and the common ones are get and post--> <!--post Submit data through the underlying stream--> <form method="get" action="http://www.baidu.com"> <table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "500px"> <tr> <td>user name:</td> <td><input type="text" name="userName"/></td> </tr> <tr> <td>password:</td> <td><input type="password" name="psw"/></td> </tr> <tr> <td>Confirm password:</td> <td><input type="password" name="pswConfig"/></td> </tr> <tr> <td>mobile phone:</td> <!--Not specified nameļ¼Do not submit--> <td><input type="text" value = "+86" size = "1"/> <input type="text" name="phone"/></td> </tr> <tr> <td>Nickname?</td> <td><input type="text" name="nickName" value="" /></td> </tr> <tr> <td>Gender:</td> <!--name Need to be consistent--> <!--checked = "checked" Selected by default--> <td><input type="radio" name="gender" value="m" checked = "checked"/>male<input type="radio" name="gender" value="f" />female</td> </tr> <tr> <td>Hobbies:</td> <td> <input type="checkbox" name="hobby" value="Basketball" /> Basketball <input type="checkbox" name="hobby" value="football" /> Football <input type="checkbox" name="hobby" value=" baseball" /> Table Tennis </td> </tr> <tr> <td>one's native heath:</td> <td><select name="city"> <option value="beijing">Beijing</option> <option value="shanghai">Shanghai</option> <option value="xian">Xi'an</option> <option value="chengdu">Chengdu</option> <option value="guangzhou">Guangzhou</option> </select></td> </tr> <tr> <td>head portrait:</td> <td><input type="file" name="photo" value="Select Avatar" /></td> </tr> <tr> <td>Personal description:</td> <td><textarea name="dis" rows="5" cols="30"> </textarea></td> </tr> <tr> <td>Verification Code:</td> <td><input type="text" name="yzm" value="" /><img src="yzm.png" width="100" height="30" alt="Verification Code" /></td> </tr> <tr> <td colspan = "2" align = "center"><input type="submit" value="register" /> <input type="reset"/> </td> </tr> </table> </form> </body>
-
-
div span p label
-
These three tags can be regarded as a container that can be used to wrap other html content. The wrapped content forms a group, and the content of this group can be uniformly styled through css style
-
div: an exclusive line. Tags can divide the document into independent and different parts.
-
span: a line is not exclusive. Multiple spans will be arranged side by side until a line is full. Labels are used to combine inline elements in the document.
-
p: Exclusive line, but the element will automatically create some white space before and after it, which is a paragraph label.
-
Type of element:
- Block level element: an element that monopolizes one row by default, such as div p h1~h6 br hr
- Inline elements: by default, multiple inline elements can be on the same line. For example: span input font
-