HTML Basic Notes (Recommendations)

Time:2019-6-24

First, web infrastructure:

XML/HTML CodeCopy content to clipboard
  1. <html>  
  2.     <head>  
  3.                 <title>My first web page</title>  
  4.     </head>  
  5.     <body>  
  6. This is my first web page.
  7.     </body>  
  8. </html>  

Note: In HTML, tags appear mostly in pairs. There’s a beginning and there’s an end.

If the label does not appear in pairs, add / indicate the end of the label.

II. Basic Labels

1. H1-h6 Title Label
2. EM italics
3. Strong bold
4. HR cutting line
5. br newline
6. P Paragraph Label
7. & nbsp; special symbols, spaces
8, & gt; special symbols, >
9, & lt; special symbols,<
10, & quot; special symbols.
11. & copy; special symbols, copyright symbols
12,<!–> Notes
13. IMG picture label

Attribute: src: Path of the picture, alt: Text displayed when the picture cannot be found
Title: Text displayed by mouse hover
Usage:
<img src=”…” alt=”…” title=”…”/>

14. a hyperlink label
Attribute: href: Where to link
Usage:
<a src=”…”> link</a>
Anchor Link
Write <a name=”?”> in one place first.</a>
Then write <a href=”?”> in another place.</a>
Click on this link and you’ll find this? Location

Usage:
<a name=”?”> link here</a>
<a href=”?”> From this link</a>

15. ul-li unordered list
Usage:
<ul>
<li> List Item 1</li>
…….
<li> List item n</li>
</ul>

Note: Without order, each Li is a line.
By default, there is a solid dot in front of each Li

16. ol-li ordered list
Usage:
<ol>
<li> List Item 1</li>
…….
<li> List item n</li>
</ol>
That’s to change the solid dots of the unordered list into serial numbers.

17. dl-dt-dd Definition List
Usage:
<dl>
<dt>Title 1</dt>
Content 1 </dd>
<dt>Title 2</dt>
Content 2 </dd>
</dl>

Achieving results:
Title 1
Content 1
Title 2
Content 2

18. Form Elements
A, text single line text box
B, password password box
C, radio radio radio buttons
D, file file selector
E, checkbox check box
F, select drop-down list
G, submit submit button
Reset reset button
I. Textarea text field

Usage:
<textarea cols=”50″ rows=”20″>
12345678941515641
</textarea>

J, form label submission label
Grammar:
<form method=”submission method” action=”where to submit”>

</form>
If action is empty, it means submitting to the current page
Method optional attributes: post, get
Post is highly secure and the submitted information will not be displayed in the address bar
Get is less secure, and the submitted information is displayed in the address bar
If you do not write the method attribute, the default is get

K, input tag optional value: form element A-I

L, select drop-down list

Usage:
<select>
<option>2016</option>
<option>2015</option>
<option>2014</option>
</select>

M, < label > name: < input type = text /> < / label > associated form

Function: Click on the word name, and the mouse will focus on the text box behind the name.

3. Attention:
1. Label names should be lowercase
2. HTML tags should be closed (closed)
3. Labels should be nested correctly

Form attributes
1. Readonly= “readonly” read-only
2. Disabled= “disabled” disabled

V. TABLES
1. What is a form?
The simplest is the queue, between tables, where you can write things.

2. How to use the form?
Draw a big box first, then every row, then every column.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

3. Data or elements can be placed in TD

4. Some attributes of table:
Width: Set width
Border: The thickness of the border
Align: align, most commonly, center, horizontal alignment
Valign: Alignment, the most common, center, up and down alignment
Cellspacing= “20”: The distance between the lattice and the lattice, default value is 0
Cellpadding= “20”: Distance between content and grid, default value is 0
Bgcolor: Change the background color

5. Merger:
Colspan= “2”: Merge cells, merge sideways
Rowspan= “2”: Merge cells vertically

The above HTML basic note (recommendation) is all the content shared by the editor. I hope to give you a reference, and I hope you will support developpaer more.

Original address: http://www.cnblogs.com/w13248223001/archive/2016/07/21/5693437.html

Recommended Today

Angular cli Ultimate Guide

Read the latest tutorial of angular 6 / rxjs, please visit the front-end fairy Road What is angular cli? Angular cli is a command line interface, which is used to realize the automatic development workflow. It allows you to do the following: Create a new angular application Running withLiveReloadSupported development servers to preview applications during […]