Front end _HTML – one week hot

HTMLDefinition

Hypertext Markup Language (HTML) is also a markup language to create web pages.
Essentially browser-recognizable rules, we write web pages according to rules, browsers render our web pages according to rules, for different browsers, the same tag may have different interpretations (compatibility issues)
Web file extension:.Html/.htm (the latter is not commonly used)
Hypertext: refers to the page can contain pictures, links, and even music, programs and other non text.
Markup Language: the language of tags (labels).
Web page ==HTML document, resolved by browser, used to display

webService essence

 1 import socket
 2 
 3 sk = socket.socket()
 4 sk.bind(("127.0.0.1", 8080))
 5 sk.listen(5)
 6 
 7 while True:
 8     conn, addr = sk.accept()
 9     data = conn.recv(8096)
10     conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
11     conn.send(b"<h1>Hello world!</h1>")
12     conn.close()

Note: HTML is a markup language, not a programming language.

　　HTMLUsing tags to describe Web pages

Label definition

It’s a pair of words wrapped in angle brackets, such as & lt; HTML & gt; all the words in the label can’t start with numbers
Tags are not case sensitive < html> and < HTML> both can be recommended, and lowercase is recommended.
The tag has two parts, the start tag & lt; A & gt; and the end tag & lt; / A & gt; – the part between the two tags we call the tag body
Some tags are simple enough to use a single tag, which is called auto-closing and tagging, such as: & lt; br / & gt; & lt; HR / & gt; & lt; input / & gt; and & lt; img / & gt;
Tags can be nested, but not cross-nested, such as: & lt; A & gt; A & lt; B & gt; B & gt; lt; / A & gt; & lt; / B & gt; – this is not possible

Label attributes

Usually occurs with key value pairs, such as name =’alex’.
Attributes can only appear in start tags or self closing and tags.
Property names must be all lowercase, and property values must be wrapped in double or single quotes, such as name = alex’
If the attribute name and the property value are the same, you can write the attribute name directly.

headLabel

1. nameAttribute is mainly used to describe Web pages, and the corresponding attribute value is content. Content in content is mainly used to facilitate search engine robots to find and classify information.

Note: For Chinese web pages you need to use & lt; meta charset = “utf-8” & gt; declarative encoding, otherwise there will be random code. Some browsers will set the default to GBK, which needs to be set to < meta charset= “GBK” &gT;
<!doctype html> Declared as HTML5 document (case insensitive)
<meta charset=”Coded format: > character format in head declaration.

2. http-equivAs the name implies, it is equivalent to http file header function, it can send back some useful information to the browser to help correct and accurate display of web page content, the corresponding attribute value is content, content is actually the variable value of each parameter.

<title>Baidu, you know < /title> define the title of the web page and display it in the browser’s title bar.

bodyLabel

1.Basic label

 1 <hn>:nThe value range is 1~6.,From large to small, used to denote titles. 2 <p>:Paragraph labels, the contents of the package are changed, and there is a blank line between the upper and lower contents. 3 <b>:Coarse label 4 <s>:Delete, add a central line to the text. 5 <em>:Italic 6 <i>:Italic 7 <sup>And < sub>:Upper and lower corner markers 8 <br>:Change line 9 <hr>:Level10 Block level labels and inline Tags11 Block level tags are: < p> < hn> < table> < ol> < ul> < ul>12 Inline tags: & lt; A & gt; lt; input & gt; lt; img & gt; lt; sub & gt; lt; sup & gt; lt; textarea & gt; and & lt; span & gt;13 　　　　　　
14 block（The characteristics of block elements:15 ① Always on the new line.16 ② Height, row height, outer margin and inner margin can be controlled.17 ③ The default width is 100% of its container.，Unless you set a width.18 ④ It can contain inline elements and other block elements.19 inlineThe characteristics of elements are:20 ① And other elements are on one line.21 ② The height, height, distance and inner margin are not changed.22 ③ Width is the width of its text or picture, and it can not be changed.23 ④ Inline elements can only contain text or other inline elements.24 The elements inside the line need to be noted as follows.25 Setting width width is invalid.26 Setting height height is invalid and can be passed through line-.heightSet it up.27 Setting margin is valid only around margin, invalid up and down.28 Setting padding is valid only around padding, and up and down is invalid. Note that the range of elements is increased, but it has no effect on the contents of the elements.29 Special characters:30 Content correspondence code31 Space &nbsp;
32 >           &gt;
33 <           &it;
34 &           &amp;
35 ￥          &yen;
36 Copyright &copy;
37 Registered & reg;

2.Graphic labels < img&gt:;

src:To display the address of the picture
alt:Pictures were not loaded when prompted.
title:Prompt information when mouse passes
width:The width of the picture
height:The height of the picture (width and height can be automatically proportional to zoom in only one).

3.Hyperlink label < a&gt:;

herf:The resource path to connect, for example, href= “http://www.baidu.com”.
target: _blank : Open a hyperlink in a new window. Frame name: Open the connection content in the specified frame. (If not written, it defaults to self and goes directly to another page on this page)
name:A bookmark that defines a page

4.List label

<ol>:Ordered list
<ul>:Disordered list
　　<li>:Each item in the list
<dl>:Definition list
　　<dt>:List title
　　<dd>:List item

5.Tabbed tabs

border:border
cellpadding:padding
cellspacing:Margin
width:Pixels 100% (preferably set in CSS)
<tr>: table row(Table row)
<th>: table head cell(Table head)
<td>: table data cell(Table contents)
rowspan:How many rows does the cell span?
colspan:The number of columns across cells; that is, merge cells.

6.form

Form is used to transmit data to database.
The form can contain input elements, such as text fields, check boxes, check boxes, submit buttons, etc.
The form can also include textarea, select, fieldset and label elements.

6.1form properties
HTMLForms are used to receive different types of user input. When a user submits a form, he transmits data to the server, thereby enabling the user to interact with the web server.
action:Where a form is submitted generally points to a program on the server side. The program receives the data submitted by the form (that is, the form element value) and processes it accordingly.
method:The way to submit forms, post/get, is get by default.
　　get:1.Submitted key values are placed after URLs in the address bar. 2. Relatively unsafe. 3. Limited length of submitted content
　　post:1.The key value of the submitted pair is not relatively high in the address bar.2…3. has no limitation on the length of the submitted content.
　　get/postAre the two most common ways of asking.
6.2Form Elements
<input>　　
type:text　　 Text input box
password　　Cipher input box
　　radio　　Radio
　　checkbox Checkbox
　　submit　　Submission button
　　button　　Button (need to cooperate with JS)
　　file　　　 The file form form needs to be added with the attribute enctype = “multipart/form-data”.
　　name:Key to form submission. Note the difference between the name attribute and the ID attribute: the name attribute is the name used to communicate with the server; and the ID is the name used on the browser side, mainly to facilitate client-side programming
　　value:The value of the form submit item:
　　For different input types, the usage of the value attribute is also different.
　　type = “button”,”reset”,”submit” – Defining realistic text on a button
　　type = “text”,”password”,”hidden” – Defining initial values of input fields
　　type = “checkbox”,”radio”,”image” – Define values associated with input
　　checked:radioAnd checkbox are selected by default.
　　readonly:Read only.Txt and password
　　disabled:All input is good.

<select> Drop-down label property:
　　name:Keys for form submission entries
　　size:Number of options
　　multiple:multiple
　　<option>:Each attribute in the drop-down selection: the value of the value: form submission item. The selected: drop-down option is selected by default.
　　<optgroup>:Add a grouping to each item.
　　<textarea> Text field name: Key for form submission. cols: Default number of columns for text field. rows: Default number of rows for text field

Leave a Reply Cancel reply