Front Desk Interface (1)---HTML basic definition and common tags

has been a long time no update blog, starting today to continue to walk on the road of learning, words do not say, first to dry:

Directory

1. HTML Definitions

2. H Tag

3. IMG Tag

4. P Label

5. A Label

6. unordered list

7. Sequence list

8. Form Form

9. Text Input textbox

Button Submit

One-click Radio button

A. Check button

Div Tags

-------------------------------------------the Golden dividing line------------------------------------------------

Content

1. HTML definition

HTML is an abbreviation for the English Hyper Text Markup Language (Hypertext Markup Language).

2. H Tag

H1 is an HTML element ,H1 is a shorthand for header1, meaning a first- level title.

most elements have a start Tag and a end Tag .

start tag like this:

end tag like this:

the only difference between the start and end tags is that the end tag is one more /.

H is the initials of the header of the English header , the title is everywhere, it is widely used: website structure, writing text,ppt and so on. H1 is the main title, H2 is the subtitle, H3, H4, H5, H6 descending the size of the font in turn.

3. Img Tags

There are also some tags that do not have an end tag, such as using the IMG element to add a picture to your site, using the SRC attribute to point to the specific address of a picture.

Examples are as follows:

Note: the img element is a self-closing element and does not require a closing tag.

The Alt attribute, also known as alt text, is the alternate text that is displayed when the picture cannot be loaded. The Alt attribute is important for people who are blind or visually impaired to understand what is depicted in a picture, and search engines will also be searching for alt attributes.

in short, each picture should have an alt attribute!

You can add an ALT attribute to an IMG element as in the following example :

4. P label

P in the P tag is an abbreviation for the English paragraph paragraph and is often used to create a paragraph . As

<p>123456454</p>

5. A label

A element, also called a anchor (anchor) element, can be used to link to an external address to implement a page jump function, or to link to a section of the current page to implement an internal navigation function.

as :

<p>here ' s a <a href= "http://freecodecamp.cn" > Link to freecodecamp Chinese community </a> for your to follow.</p >

Nesting (nesting) is the placing of an element in another element , such as placing a element in the P element .

Sometimes you want to add an a element to your site , but at this point you don't know where to link it to, you can use a permalink.

Replace the value of the href attribute of your a element with a #, an alias hash (hash) symbol, and turn it into a fixed link.

Examples are as follows:

<a href= "#" ></a>

6. unordered list

HTML has a special element for creating unordered lists (unordered table) or bulleted lists.

The unordered list starts with the <ul> element and contains one or more <li> elements.

For example:

<ul>
<li>milk</li>
<li>cheese</li>
</ul>

a bulleted list of "milk" and "cheese" will be created.

7. list with sequence

HTML has a special element for creating ordered lists (with sequence tables), or a numbered list.

The ordered list starts with the <ol> element and contains one or more <li> elements.

For example:

<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>

A list of numeric numbers containing "Garfield" and "Sylvester" will be created .

8. form form

Use HTML to build a Web form that can interact with the server, by adding an Action property to your form element for this purpose.

the value of the Action property specifies the address that the form submits to the server.

For example:

<form action= "/url-where-you-want-to-submit-form-data" ></form>

9. Text input textbox

The text input box is a great way to get user input.

You can create it in the following ways:

<input type= "Text" >

Note thatthe input element is self-closing.

placeholder (placeholder text) is a predefined text that the user places in the input box before entering anything in the input box .

You can create placeholders in the following ways:

<input type= "text" placeholder= "This is placeholder text" >

When you design the form, you can specify that certain options are required (required), the user is only able to submit the form if the user fills out the option.

For example, if you want to set a text input field to be required, add the required attribute to your INPUT element , and you can use:
<input type= "Text" required>

10. button Submit submission Buttons

to Add a submit button to the form form , click on the button and the data in the form will be sent to the address you specified through the Action property.

Here is An example of the Submit button:

<button type= "Submit" >this button submits the form</button>

Add a submit button for your form element with "submit" as the button text.

11. radio Button

The single choice is you can only choose one of several options, like you have a lot of suitors, but only choose a marriage.

multi-Select a scene with radio button (radio buttons)

The radio button is just a type of input box.

each radio button should be nested within its own label (label) element.

NOTE: All associated radio buttons should use the same name property.

Here is an example of a radio button:

<label><input type= "Radio" name= "indoor-outdoor" > Indoor</label>

12. Check button

When you choose a class in college, face hundreds of courses, and because of time and energy, you can only choose from the teenagers.

This scenario is used checkboxes (the check button).

The check button is Another type of input box for input.

each check button should be nested inside a label element.

all associated check buttons should have the same name property.

Here is an example of a check button:

<label><input type= "checkbox" name= "Personality" > loving</label>

Note: using The Checked property, you can set the Check button and radio button to be selected by default.

to do this, simply add the attribute in the input element checked

<input type= "Radio" name= "Test-name" checked>

13. Div Tags

A div element, also known as a division (layer) element, is a generic container for other elements.

so you can use The inheritance of CSS passes the CSS on the div to all its child elements.

You can use <div> to mark the beginning of a DIV element, and then use </div> to mark the end of a DIV element.

14. Notes

the start tag of the comment is <!--

end tag is --

Note has two features:

1, want to let a piece of code does not work, but you do not want to delete this piece of code.

2, is to add some instructions to the code, convenient for team work or later to view, but do not want to affect the code itself.

Front Desk Interface (1)---HTML basic definition and common tags