The basics of HTML

1) There is a serial table OL, consisting of multiple Li tags.

<ol>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ol>
Display the result with the serial number:

2) non-sequential list ul
<ul>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ul>
No ordinal in display result:

Two levels of unordered list nesting then the second layer of black dots becomes hollow:

3) definition list DL

<dl>
<dt> define the title of the list </dt>
<dd> define a description of the list </dd>
<dd> define a description of the list </dd>
<dd> define a description of the list </dd>
</dl>
Display results, the title is automatically shelf display, a list generally has only one title, but can be
To have multiple descriptive items.
4) Figure Combination label
Contains an IMG image, figcaption the title of the image, displayed directly below the picture
。

<figure>

<figcaption>
Icon
</figcaption>
</figure>
5) DIV partition tag
Used in conjunction with CSS, the page is divided into chunks, you can wrap a variety of labels.

<div style= "Background-color:blue; >
The text inside the DIV
</div>
6) Span Tag
Span tags are used to wrap text within a line, often with CSS using a modified text style.

Learning <span style= "color:red; font-size:50px; " > Front </span>

7) Em, I, strong, B tags
Both EM and I are slanted, and strong and B both represent bold.
Em and strong have an emphasis on meaning, emphasizing to the search engine to see. Strong's emphasis on Chengdu than EM
Higher.
Emphasis on the role: can let the search engine quickly crawl the focus of the page, the implementation of code
Semantic.

<em>em label, font tilt + accent </em><br/>
<strong>strong label, font bold + accent </strong><br/>
<i> is just tilting </i><br/>
<b> is only bold </b><br/>

8) <u> Underline labels </u>

9) Reference Tags: blockquote, q, cite.
BLOCKQUOTE: The display effect is an entire paragraph indent, which is used to refer to an entire paragraph label, which is the block level
Sign.
Q: Automatic quotation marks, which are used to quote a sentence, are row-level labels.
Cite: Font tilt often quoted work name, calligraphy and painting name.
<blockquote cite= "" > Reference Tags </blockquote>
<q cite= "www.baidu.com" > References, auto double quotes, short references </q>
<cite> reference, Font italic. References to the names of commonly used works </cite>

IMG Image label (row level label)
SRC: The path where the picture is located.
How the path is represented: ① network image address is not recommended;
② can use the absolute path of the picture, because
Using the FILE://protocol on the path, the Web page uses HTTP//protocol to open the unreachable
File protocol. Absolute path notation File:///C:/tupian.jpg
③ relative path, the only way to recommend it.
A. Picture in the next layer of the current file folder name
/Picture name ";
B. The picture is on the same level as the current file, write directly
Picture name;
C. On the previous floor, ".. /Picture name ", note picture
Must be included in the project to not exit the project root directory.
Width/height: Width Height property

Title: The text displayed when the mouse is placed on the image.
Alt: The text displayed when the picture cannot be loaded for various reasons.
Omitting ALT displays the name of the title by default.
Align: The text around the picture is arranged in relation to the picture. Top, center,
Bottom
Mark on the diagram
The text "alt=" picture displayed on the chip does not load "align=" center "/>

11) Hyperlink tag a
HREF: The address of a jump, which can be a network connection or a relative path to a local HTML file
Diameter.
Target: The location where the new page of the hyperlink opens. _self opens on the current page (default),
_blank opens in a new page.
Title: The mouse refers to the text displayed on the hyperlink.
Functional Hyperlinks:
mailto: Send mail to the specified mailbox
Tencent: Chat with the specified QQ.
Anchor Link: Click the hyperlink to jump to the specified location (anchor point) of the page.
A. Define an anchor point at the page location <a name= "Top" ></a>
B. Change the href attribute of the hyperlink to #锚点名称. <a href= "#top" >
Jump to a location </a>
C. How to jump to other pages to specify an anchor point. <a href= "Other pages of the ground
Address. Html#top "> A location on other pages </a>
12) Form table and related properties
TR: line; TD: Column; th: Each cell in the header of the first row is represented by th, with the default text bold
Center.
Border: Adds a border to each TD and the entire TABL of the table. If the value of Boder is >1, only
Has the outermost border bold, the TD border unchanged.
cellspacing: The spacing between cells and cells. A value of 0 o'clock, the adjacent border does not
Merge, but the width of the two border.
Table Border Merge:
Style= "Border-collapse:collapse;"
After you set the border merge, the CellSpacing property will be invalidated.
cellpadding: Cell padding, the distance between the text and the border in a cell.
Width/height: The width height of the table.
Align: The position of the table.
Bodercolor/bgcolor/background: The latter two exist simultaneously is the background map to take effect.
table row and column Properties：
Properties acting on a TR or TD:
1, Wide High
2, bgcolor. When the properties of a table conflict with the properties of a row and column, the priority takes the "
The principle of "near-priority": TABLE&LT;TD&LT;TR
3. Align/valign: Sets the horizontal alignment/vertical alignment of the text in the cell.
cross-row and cross-columns of tables:
1. Cross-column: colspan
2, cross-line: rowspan
3 H5 Smart Form

1) H5 gives us a way to associate input with a form with the forms. Just give the form a ID, and then add the form property to input outside the form, and point to that ID to bind the form to input.
2) H5 gives us a new type of input that has been added a lot.
3) H5 New input attribute:
①form: The ID of the association to develop the form.
②placeholder: Input Box prompt content
③required: Required.
④autofocus: Specifies the input box, which automatically gets the focus.
⑤autocomplete: Remember the input situation. Auto prompt. You can set the form label

1 Complete structure of the table
Caption: Table title, whether the <caption> tag is placed in the first row of the table, the table title
Always center directly above the table.
THEAD: The table head, always close to the top of the table.
Tbody: The body part, under THEAD, above the tfoot.
TFOOT: The tail, always at the bottom of the table.
2 form

1) Action: Which server address the form is submitted to;
Method: How the form submits data.
Get and Post differences:
①get uses URLs to pass data, all content is visible in the address bar, and is not secure.
Post data cannot be seen in the address bar, it is more secure.
The amount of data passed by ②get is limited, and only plain text can be passed. and host can pass
Deliver a large amount of data, and can transfer pictures, videos and other files.
③get transfer speed faster than post.
Get the URL format for passing Data:/HTTP//original address. html?
name1=value1&name2=value2;
Therefore, when input is used, the name attribute is necessary, and if name is missing,
Causes the data for the input box not to be passed to the background.
2) input common attribute (attribute name is same as value, value can be omitted)
①type: Represents the type of the current input box;
②name: Alias The input box, pass to the background, use the form of Name=value
Recursive
③value: Default value for current input
④placeholder: Input box prompt content, when the input box has value, prompt content
Eliminate.
⑤hidden: Hide the current input box, can be written as hidden= "hidden", can also omit
property value, write only <input type= "text" Hidden/> Hidden input box contents, depending on
You can then pass data to the background.
⑥disabled: Disables the current input box, displays but cannot be used. In the input box that is disabled
Data will not be passed back to the background.
3) Type of input:
①text
②password
③radio: Radio. Value cannot be omitted. With name is the same, the zone
Whether the split button is the same group. The same set of buttons can only be selected, and name must be the same.
Checked= "Checked" Setting radio button, selected by default.
④checkbox: Multi-select button, the other is the same as the radio button.
⑤file: File Upload box.
The Accept property allows you to restrict which types of files are uploaded. "*" means you can
All types of files, "image/*" can upload all types of pictures.
Multiple: Settings can upload multiple files.
⑥submit: Form Submit button.
⑦reset: The form reset button.
⑧image: Graphic Submit button, function with submit.
⑨button: No effect, only the button shape is displayed.
⑩hidden: The Hidden input box. The same effect as the text input box when using hidden.
4) Select drop-down selection block
① <option></option> for each item in this tab.
②name properties, learn to unload the select tag.
③option the value of value if any is passed in the tag, if not, pass the label middle
The text.
④option Add Property selected= "selected" To set the default check.
⑤selected property multiple, set the current drop-down control to multiple selections. Know
⑥option Add Property title, the text that appears when the mouse is pointing.
⑦select can use <optgroup></optgroup>, the tab groups the options, using the
The Lable property displays the grouping name.
5) TextArea Text field
① text field size is controlled with CSS.
② Setting the Text field size cannot be dragged when the page is displayed.
Style= "Resize:none;"
The ③ property readonly read-only. Text in a field cannot be changed when it is displayed in a Web page.
④ text out of range processing overflow style, you can set the text outside the area of the display side
Expression style= "Overflow:"
A.overflow:hidden; The word hiding beyond the region.
B.overflow:scroll: Displays horizontal & vertical scroll bars regardless of text
。
C.overflow:auto; default effect. Text more scroll bar, less text
Appear.
D.overflow-x/-y to modify the scroll bar in a direction individually.

3 H5 Smart Form
1) H5 gives us a way to associate input with a form with the forms. Only need to give
The form form forms an ID, and then adds the form property to input outside the form, pointing to the
ID, you can implement the binding of the form to input.
2) H5 gives us a new type of input that has been added a lot.
3) H5 New input attribute:
①form: The ID of the association to develop the form.
②placeholder: Input Box prompt content
③required: Required.
④autofocus: Specifies the input box, which automatically gets the focus.
⑤autocomplete: Remember the input situation. Auto prompt. You can give the form a label
Check the settings.

The basics of HTML