Home > Developer > Web Develop
HTML refers to Hypertext Markup Language (Hyper Text Markup Language), a markup language used to describe a language of a Web page.
First, the basic structure of HTML
1. HTML tag (HTML tag), keywords surrounded by angle brackets (such as appear in pairs , such as <b> ( start tag ) and </b> ( end tag ).
2, the HTML title (Heading) is defined by the
3, the HTML paragraph is defined by the label <p>.
4. HTML links are defined by tags <a>. Such as:
<a href= "http://www.runoob.com" > This is a link </a>
tip: Specify the address of the link in the href attribute.
5, the HTML image is defined by the label . Such as:
Note: The name and dimensions of the image are provided in the form of an attribute.
6. Tip: Use lowercase tags.
Second, the basic content
1. HTML empty elements: HTML elements with no content are called empty elements. The empty element is closed in the Start tab. <br/> is the empty element without closing the label (the <br/> tag defines a newline).
2. HTML attributes:
① commonly used Tag properties:
② Common Properties:
3. HTML title:
The ① title (Heading) defines the maximum caption by,
②html horizontal:
③html Annotation Format Example:<!-- This is a comment -->; the browser ignores comments and does not display them.
4. HTML Paragraph
The ① paragraph is defined by the <p> tag. Such as:
<p> This is a paragraph </p>
Note: The browser automatically adds blank lines to and from the paragraph. (</p> is a block-level element)
②html polyline
Line wrap (new line) without creating a new paragraph, using the <br/> tag.
<p> This <br> paragraph <br> demonstrates the effect of a branch </p>
③, HTML output-use reminders: When the page is displayed, the browser removes extra spaces and blank lines from the source code. All contiguous spaces or blank lines are counted as a single space. Note that all consecutive empty lines (line breaks) in the HTML code are also displayed as a single space.
5. The html6. HTML text formatting
| label | Description |
|---|---|
| <b> |
Define bold text |
| <em> | Define text-focused |
| <i> | Defining italic characters |
| <small> |
Define Small words |
| <strong> |
Define the aggravating tone |
| <sub> | Define the subscript Word |
| <sup> |
defining superscript words |
| <ins> |
Defining Insert Words |
| <del> |
Define Delete words |
7. HTML style
① Tags:
② Properties:
③ three ways to insert style sheets:
<style type= "Text/css" >
Body {"style=" margin-left:60px; >p{margin-left:20px}
</style>
8. HTML link
① Link Data:
② Properties:
③img Tag Properties:
1 <! DOCTYPE html> 29. HTML table
| label | Description |
|---|---|
| <table> | Defining tables |
| <th> | Table header for defining tables |
| <tr> | Define rows for a table |
| <td> | Defining table Cells |
| <caption> | Defining table Headings |
| <colgroup> | Define Groups for table columns |
| <col> | Define properties for a table column |
| <thead> | Define a header for a table |
| <tbody> | Defining the body of a table |
| <tfoot> | Define a footer for a table |
10. HTML List
| label | Description |
|---|---|
| <ol> | Defining an ordered list |
| <ul> | Defining unordered Lists |
| <li> | Defining list Items |
| <dl> | Definition List |
| <dt> | customizing list items |
| <dd> | Define a description of a custom list item |
① unordered List
Using tags:<ul>, <li>
Properties: Disc, Circle, Square
② ordered list
Using tags:<ol>, <li>
Properties: A, a, I, I, start
③ nested lists
Using tags:<ul>, <ol>, <li>
④ a custom list
Using tags:<dl>, <dt>, <dd>
11. HTML Block
①html block Element
When a block element is displayed, it usually starts with a new line
such as:
②html inline elements
Inline elements typically do not start with a new line
such as:<b>, <a>,
③html<div> elements
The <div> element is also known as a block element, which is primarily a container for combining HTML elements
④html<span>
The <span> element is an inline element and can be used as a container for text
⑤ Example:
1 <! DOCTYPE html> 2 {9 color: Red; }11 </style>12 12. HTML Layout
①div layout
1 <! DOCTYPE html> 2 {8 margin: 0px; 9}10 #container{One width: 100%; height: 640px; Background-color: Darkgray; 14}15 #heading{width: 100%; height: 10%; Background-color: Aqua; 19}20 #conten_menu {width : 30% ; height : 80% ; Background-color : Aquamarine , float : left ; }26 #conten_body {width : 70% ; height : 80% ; Background-color : Blueviolet ; + float : Left ; }32 #footing {33 Width : 100% ; height : 10% ; Background-color : Black ; + Clear : both ; PNS }38 </style>39 Display effect:
②table layout
1 <! DOCTYPE html> 2 left menu <ul>15 <li>ios</li>16 <li>android</li> <li>html5</li>18 </ul>19 </td>20 <td width= "60%" height= "80%" style= "" ></td>21 <td width= "20%" height= "80%" style= "" ></td>22 </tr>2 3 <tr>24 <td colspan= "3" width= "100%" height= "10%" style= "" style= "Color:rgb (0, 0, 255);" >> This is the bottom </td>25 </tr>26 </table>27 </body>28
Display effect:
13. HTML form
① forms for getting different types of user input
② commonly used form tags:
| label | Description |
|---|---|
| <form> | Define a form for user input |
| <input> | Defining input fields |
| <textarea> | Define a text field (a multiline input control) |
| <label> | Defines the label for the <input> element, typically the input title |
| <fieldset> | Defines a set of related form elements and uses the outer box to contain them |
| <legend> | Defines the title of the <fieldset> element |
| <select> | A list of drop-down options is defined |
| <optgroup> | Defining an option group |
| <option> | Define options in the drop-down list |
| <button> | Define a click button |
| <datalist> |
Specify a predefined list of input control options |
| <keygen> |
Defines the key pair generator field for the form |
| <output> |
Define a calculation result |
③ code Example:
1 <! DOCTYPE html> 2 User name: <input type= "Text" >11Password: <input type= "password" >13 <br/>14 like the fruit there? <br/>16 Apple <input type= "checkbox" >17 fragrant pear <input type= "checkbox" >18 Banana <input type= "checkbox" >19 <br/>20 please opt-in: 21 male <input type= "Radio" name = "Sex" >22 female <input type= "Radio" name= "Sex" >23 <br/>24 Please select your favorite website: 25 <select>26 <option>jikexueyuan.com</option>27 <option>www.google.co m</option>28 <option>www.iwen.org</option>29 </select>30 <INP UT type= "button" value= "buttons" >31 <input type= "Submit" value= "Submit" >32 </form>33 <texta Rea cols= "rows=" > Please fill in your personal information here </textarea>34 </body>35
14. HTML Framework
① Frame Tags: frames are a great part of the design of a page.
② frame Label (<frameset>) (superseded):
Frames and tags define how to split a window into a frame
Each frameset defines a series of rows or columns
The ROWS/COLSDE value specifies the area of the screen that each row or column occupies
③ Common Tags:
④ Inline frame (more useful)
Iframe
15. HTML Background
① Background Tags: Background
② Background color: Bgcolor
③ Color:
The color is defined by a hexadecimal symbol, which is made up of red, green, and blue values (RGB)
Minimum value of color value: 0 (#00)
Color value Max: 255 (#FF)
Red: #FF0000
Green: #00FF00
Blue: #0000FF
16. HTML Entities
In HTML, some characters are reserved and must be replaced with character entities. The less than sign (<) and greater than sign (>) cannot be used in HTML because the browser mistakenly considers them to be labels.
If you want to display reserved characters correctly, we must use the character entity (character entities) in the HTML source code. The character entity looks like this:
&entity_name;entity_number;
To display the less than sign, we must write:< or & #60; & #060;
HTML Basic Learning Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
