Web Front End Learning summary--html

Web three elements:

　Browser: initiates a request to the server, downloads a Web page (HTML) from the server, and then executes HTML to display the content

　　Server : Accept the browser request, send the corresponding page to the browser

　　HTTP protocol : The communication protocol between the browser and the server.

How HTML works:

HTML is a text file that is deployed on the server

According to the HTTP protocol, the browser makes a request to the server, the server responds, and returns an HTML to the browser

The browser interprets the execution of HTML. Thus displaying the content

HTML deployed on the server, running on the browser

Html

What is HTML?

HTML (Hypertext Markup Language): Hypertext Markup Language, a plain text type of language

Markup language used to design a Web page

A file written in that language, with a. html or. htm suffix

Interpreted by the browser execution

HTML pages, you can embed program segments written in the scripting language, such as: JavaScript

XML that can be understood as a label fixed

Mark:

HTML tags are also commonly referred to as HTML tags (html tag)

HTML tags are keywords surrounded by angle brackets, such as

HTML tags are usually paired up, such as <p> and </p>

The first label in the pair is the start tag, the second is the end tag

Comments:

The syntax for adding comments is as follows:

<!--the contents of the notes--

　　Annotations cannot be nested

HTML Document Type

　　<! Doctype> statement

There are several different versions of HTML, and only the exact HTML version used in the page is fully understood, and the browser is able to display the HTML page correctly. That's the use of it.

<! Doctype> is not an HTML tag, he provides the browser with a message (declaration) of what version of HTML is written

<! The doctype> statement helps the browser to display the Web page correctly.

HTML version

Since the early days of the Web, several HTML versions have been developed:

　　

HTML common declarations

　　

The role of

Elements within

The following tags can be added to the head section:

<title>,<meta>,<link>,<style>,<script>, etc.

<title> elements

The <title> element defines the title of the document to:

Define the title in the browser toolbar

Provides the title of the page when it is added to the Favorites folder

Page titles that appear in search engine results

<! doctypehtml > < HTML > < Head >    < title > HELLO html! </ title > </ Head > </ HTML >

<meta> elements

　　The <meta> element provides metadata about the HTML document

Metadata is not displayed on the page, but is readable for the machine

Used to specify the description of the page, keyword keywords, the author of the document, the last modified time, and other meta-data

　The commonly used properties are: Content,http_equiv,charset

Text elements

The role of text elements

Text is an important part of a Web page, and directly written text is displayed in the browser's default style

List of text elements

The text contained in the text element is displayed as a style owned by the element, and the text elements include:

1, Title Element

Title elements allow text to be displayed in an eye-catching manner, often used for the title of an article

Basic Syntax:

# = 1,2,3,4,5,6

from

2, paragraph element

<p> elements provide a way to structure text

The text in the <p> element is displayed in a separate paragraph

The text is wrapped and separated.

Add an extra amount of vertical white space, as a paragraph spacing

3, List elements

A list is the alignment of several lines of text that have similar characteristics or have a sequential order

　　　All lists are 甶 list types and list items

List type:

Ordered list

　　　　　　　　<ol> elements to write an ordered list of items in a specific order on the page

The <ol> element can also contain only list item elements <li>

Unordered list

　　　　　　　　<ul> elements represent unordered lists that list items on a page that do not have a specific order

The <ul> element can also contain only list item elements <li>

List item: <LI>, used to indicate specific list contents

List nesting:

<ol>    <Li>three elements of the web<ul>        <Li>Server</Li>        <Li>Browser</Li>        <Li>Tttp protocol</Li>    </ul>    </Li></ol>   

4, Partition element

Partition elements are used to group elements, often for page layouts

　　　　Block partition element:<div></div>

　　　　In-line distinguishing element:<span></span>

How elements are displayed

Block-level elements

By default, block-level elements will have a single line, meaning that the elements will wrap around

such as:<p>,<div>,

In-line elements

　　　　　　does not wrap, can be on the same line as other inline elements

such as:<span>,<a>

5, inline element

<span> elements are inline elements that can be used as a container for text

The <span> element does not have a specific meaning, and when used with CSS <span> can be used to set style properties for some text

<i> elements used to define italic font

<em> elements are used to define the emphasis font

<b> elements used to define bold text

<strong> elements are used to define text-focused

<del> elements used to define text with strikethrough

<u> elements are used to define underlined text

Space folding: By default, multiple spaces in HTML, multiple tabs, multiple line breaks are compressed into a single space, which shows only one space

<br> elements Create a manual line break anywhere

Entity references: The character entities commonly used in HTML are as follows:

　　　

Image

Image elements

Add an image to a page using the element

　　Required attribute: SRC

Common Properties: Width,height

Hypertext links

Hyperlink element

Use the <a> element to create a hyperlink with the following syntax:

<a href = "target =" "> Text </a>

　　href attribute: Link URL

Target property: Destination open mode, value is _blank,_self , etc.

Anchor Point

Anchor is a number of a line in a document

For linking to a location in a document

Defining anchor Points

　　<a name = "Anchorname1" > Anchor point--</a>

Link to Anchor point: Add # before the anchor Roll Call

　　<a href = "#anchomame1" > Back to Anchor Point--</a>

Form

The role of tables

Tables are often used to organize structured information

A table is a list of rectangles that are called cells that are arranged in a left-to-right, top-to-bottom order.

The table data is stored in the cell.

Create a table

Definition table: Using paired <table></table> tags

Create lines: Use paired <tr></tr> tags

Create columns (cells): Use paired <td></td> tags

Properties commonly used in tables

<table> elements

Border to set the thickness of a table border

Width/height setting the length of the table width

Align location

cellpadding: Spacing between cell borders and content

cellspacing: spacing between cells

<tr> elements

Align/valign

<td> elements

Align/valign/width/height/colspan/rowspan

Cross-line Properties

Cross-line RowSpan

Extends the current cell vertically, with a value of a positive integer representing the number of cells that the cell extends vertically

Cross-column Properties

Cross-column colspan

Extends the current cell horizontally, with a positive integer value representing the number of cells that the cell extends horizontally

Row grouping

Tables can be divided into three sections: table header, table body, and footer

Table header row Grouping:<thead></thead>

Table Body Row Grouping <tbody></tbody>

Footer Row Grouping <tfoot></tfoot>

Overview of Forms

What is a form?

Forms are used to display, gather information, and submit information to the server

Form two elements

from element

form controls

Forms are the means by which data is transferred from the browser to the server

Form elements

Define forms: Use paired <from></from> tokens to indicate data transfer to the server in the controls covered by this element

Main properties

　　Action: URL for form submission

　Method: Indicates how form data is submitted

GET: Default Value

The submitted data is appended to the request path, for example:/1.html?username=jack&password=1234, data format k/v append is used? link after each pair of data use & Link

Because the requested path length is limited, the data submitted by the GET request is limited

POST:

The submitted data is no longer requested to be appended on the path (that is, not displayed on the address bar)

Enctype: How the form data is encoded

form controls

Forms can contain many different types of form controls

A form control is an HTML element that is an information entry

form controls include:
INPUT element (with an unused appearance)

　　text box, Password box

Radio box, check box

Button

Hidden fields, text selection box

Other elements

　　tags, text fields, drop-down selection

<input> elements

text box <input type= "text"/>

Password box <input type= "Password"/>

Main properties

　　Value Property: Any text entered freely by the visitor

MaxLength attribute: Limit the number of characters entered

　　readonly Property: Set Text control read-only

Placeholder Properties: Help users enter information

Radio Box: <input type= "Radio"/>

check box: <input type= "checkbox"/>

Main properties:

Value: Text, when a form is submitted, if this radio button is selected, then value is sent to the server

Name: Used to implement grouping, a set of radio boxes or checkboxes must have the same name

Checked: Set selected

Button

　Submit button: <input type= "Submit"/>

Transfer form data to server-side or other program processing

　　Reset button: <input type= "Reset"/>

Empty the contents of the form and set all form controls to their original default values

Normal button: <input type= "button"/>d

Main properties:

Value: The name of the button

Hidden fields, File selection box

Hidden fields: <input type= "hidden"/>

Include information that you do not want users to see in the form

File selection box: <input type= "File"/>

Select a file to upload

Other elements

Label

Text in the form to set the display name for the control

　　Syntax: <label for= "control id" > Text </label>

Main properties:

For: Sets the IDof the control associated with the text, and The associated click Tag is equivalent to clicking the control

Text field

Equivalent to multiple lines of text box

Grammar:

<testarea> text </testarea>

Main properties

COLS: Specify the number of columns in the text area

Rows: Specify the number of lines in the text area

ReadOnly: Read-only

Drop-down selection

Drop-down Select content

Grammar:

　　

<Select> 　　 <optionvalue= "1">Java</option> 　　 <optionvalue= "2">Php</option> 　　 <optionvalue= "3">. Net</option></Select>

Web Front End Learning summary--html