Front-End Interface (1) --- basic HTML definition and common tags, front-end --- html

Front-End Interface (1) --- basic HTML definition and common tags, front-end --- html

I haven't updated my blog for a long time. From today on, I want to continue on the way to learning. Let's just talk about it. Let's do it first:

Directory

1. HTML Definition

2. H tag

3. Img tag

4. P tag

5. A tag

6. unordered list

7. ordered list

8. Form

9. Text input box

10. Button submit Button

11. Single-choice button

12. Check button

13. Div tag

------------------------------------------- Golden line ------------------------------------------------

Content

1. HTML Definition

HTML is the abbreviation of Hyper Text Markup Language.

2. H tag

H1 is an HTML element, and h1 is short for header1, meaning a level-1 title.

Most elements have a start tag and an end tag.

Start tag like this:

The end tag is like this:

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

H is the abbreviation of an English header title. It is widely used in the fields of website structure, composition, and PPT. H1 is the primary title, h2 is the subtitle, and h3, h4, h5, and h6 decrease the font size in turn.

3. Img tag

Some labels do not end up. For example, you can use the img element to add images to your website and use the src attribute to point to the specific address of an image.

Example:

Note: The img element is a self-closing element and does not need to be ended.

The alt attribute, also known as alt text, is the alternative text displayed when the image cannot be loaded. The alt attribute is very important for blind or visually impaired users to understand the content depicted in an image. The search engine will also search for the alt attribute.

In short, each image should have an alt attribute!

You can add an alt attribute for the img element as in the following example:

4. P tag

P in the P label is the abbreviation of the English paragraph section, which is often used to create a paragraph. For example

<P> 123456454 </p>

5. A tag

Element a, also called anchor (anchor), can be used to link to an external address for page Jump, or to a part of the current page for internal navigation.

For example:

<P> Here's a <a href = "http://freecodecamp.cn"> link to FreeCodeCamp Chinese community </a> for you to follow. </p>

Nesting is to place one element in another, for example, to put element a into element p.

Sometimes you want to add an a element for your website, but you do not know where to link them. You can use a fixed link.

Replace the value of the href attribute of your a element with a #. Use the alias hash symbol to change it to a fixed link.

Example:

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

6. Unordered list

HTML has a special element used to create unordered lists (unordered list) or a list with a project symbol.

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

For example:

<Ul>
<Li> milk </li>
<Li> cheese </li>
</Ul>

A list of "milk" and "cheese" with the project symbol will be created.

7. Ordered list

HTML has a special element used to create ordered lists (ordered list) or number list.

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

For example:

<Ol>
<Li> Garfield </li>
<Li> Sylvester </li>
</Ol>

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

8. Form

Use HTML to construct a Web form (form) that can interact with the server, and add an action attribute to your form element to achieve this goal.

The value of the action attribute specifies the address at which the form is submitted to the server.

For example:

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

9. Text input box

Text input is an excellent way to obtain user input.

You can use the following method to create an instance:

<Input type = "text">

Note that the input element is self-disabled.

Placeholder text is the predefined text that is placed in the input box before you input anything in the input box.

You can create placeholders as follows:

<Input type = "text" placeholder = "this is placeholder text">

When designing a form, you can specify some options as required (required). Only when the user fills in this option can the user submit the form.

For example, if you want to set a text input field as required, you can add the required attribute to your input element. You can use:
<Input type = "text" required>

10. Button submit Button

Add a submit button for the form. Click this button, and the data in the form will be sent to the address specified by the action attribute.

The following is an example of the submit button:

<Button type = "submit"> this button submits the form </button>

Add a submit button for your form element and use "Submit" as the button text.

11. Radio button

Single choice means you can only select one of multiple options, just like you have many pursuers, but you can only choose one wedding.

Use the radio button (single-choice button) for multiple scenarios)

The single-choice button is only one type of input box.

Each single-choice button should be nested in its own label element.

Note: All associated radio buttons should use the same name attribute.

The following is an example of a Single-choice button:

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

12. Check button

When you select a course in a university, you have to choose a dozen or more courses because of your time and energy.

In this scenario, checkboxes (Check button) is used ).

The check button is another type of input box.

Each check button should be nested in the label element.

All associated check buttons should have the same name attribute.

The following is an example of the check button:

<Label> <input type = "checkbox" name = "personality"> Loving </label>

NOTE: With the checked attribute, you can set the check button and single-choice button to be selected by default.

Therefore, you only need to add the attribute checked to the input element.

<Input type = "radio" name = "test-name" checked>

13. Div tag

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

Therefore, you can use the inheritance relationship of CSS to pass the CSS on the div to all its child elements.

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

14. Note

The Start mark of the comment is <! --

The end mark is -->

Annotations have two functions:

1. You do not want to delete a piece of code that does not work.

2. Add instructions to the code so that you can work with the team or view the code on your own later, but you do not want to affect the code.