Html basic learning

Learning website: freeCodeCamp

1. Title element h

<h1> Primary title </h1>
<h2> Secondary title </h2>
.......

2. Paragraph element p

<p> paragraph </p>

By convention, all HTML tags should be lowercase

3. Notes

<!--
	I am html Notes for
-->
<p>
	There are notes on it
</p>

4. Html5 element

HTML5 introduces many more descriptive HTML elements, including main, header, footer, nav, video, article, section, etc. these elements make HTML easier to read and help search engine optimization and accessibility. The main element allows search engines and developers to quickly find the main content of the web page.

<h1>
 Hello, html!
</h1>
<main>
	<p>
		hello, world!
	</p>
	<p>
		my name is Li Hua!
	</p>
</main>

5. Add pictures to the web page

You can use the IMG element to add pictures to your website, where the src attribute points to the address of the picture. IMG element has no end tag. All img elements must have an alt attribute. The attribute value of ALT has two functions. The first function is to let the screen reader know the content of the picture, which will greatly improve the accessibility of the web page; Another function is the alternative text that the page needs to display when the picture cannot be loaded.

<img src="www.???.com" alt="???">

6. Use a to realize the jump between web pages

A needs a href attribute to point to the destination of the jump. At the same time, it should also have content.

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

7. Use a to realize the internal jump of web page

The a (anchor) element can also be used to create internal links and jump to different parts of the web page. To create an internal link, you need to set the href attribute value of the link to a hash symbol # plus the id of the element you want to link internally, usually the element at the bottom of the web page. Then you need to add the same id attribute to the element you link to. id is an attribute that describes a web page element. Its value is unique in the whole page.

<a href="#lol">jump to target</a>
<p> this is a paragraph </p>
<p id="lol"> lol </p>

The target="_blank" attribute from the anchor label causes the linked document to open in a new window label.

<a href="www.???.com" target="_blank"> jump to target </a>

8. Nest a in a paragraph

<p> Welcome to<a href="https://www.???. com" target="_ Blank "> the homepage of so and so < / a ></p>

result:

Welcome to[so-and-so](https://www.???.com)

9. Create link placeholders with # numbers

Sometimes you want to add an a element to your website, but you're not sure where to link it. In this case, you can set the href attribute to # placeholder.

<a href="#"> I don't know where I'm going</a>

10. Add a link to the picture

If we want to nest the picture into the a element, we can write as follows:

<a href="#"><img src="xxx.jpg" alt="xxx"></a>

11. Create an unordered list

Unordered list to

• Start with one or more
• Element, and finally

end.

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

12. Create a sequence table

There is a sequence table to

1. Start with one or more
2. Element. Finally

end.

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

13. Create an input box

The input box allows you to easily get the user's input.

<input type="text">

Note that the input field has no end tag.

14. Add placeholder text to the input box

Placeholder text the predefined text before the user enters anything in the input box.

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

15. Create a form

We can only use HTML to realize the form that sends data to the server. We only need to add the action attribute to the form element.

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

16. Add submit button to the form

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

17. Add a required field to the form

When you design a form, you can specify some fields as required. The form can be submitted only after the user fills in this field.

If you want to make the text input box mandatory, just add the required attribute to the input element.

<input type="text" placeholder="xxxx" required>

18. Create a set of radio buttons

radio buttons are like multiple-choice questions. There is only one correct answer.

A radio button is a type of input selection box.

Each radio button should be nested in its own label element. In this way, we are equivalent to establishing a corresponding relationship between the input element and the label element wrapping it.

All associated radio buttons should have the same name attribute. Create a set of radio buttons. Select one button and the others will be displayed as unchecked to ensure that the user provides only one answer.
Here is an example of a radio button:

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

The best practice is to set the for attribute on the label element so that its value is the same as the id attribute of the associated input radio button. This enables assistive technology to establish an association between tags and related input elements. For example:

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

We can also embed the input element in the label tag:

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

19. Create a set of check boxes

checkboxes are like multiple-choice questions with multiple correct answers.

A check box is a type of input selection box.

Each check box should be nested within its own label element. In this way, we are equivalent to establishing a corresponding relationship between the input element and the label element wrapping it.

All associated checkboxes should have the same name attribute.

The best practice for associating input with label is to set the for attribute on the label element so that its value is the same as the id attribute value of the associated input check box.

<label for="personality1">
	<input id="personality1" type="checkbox" name="personality">personality1
</label>
<label for="personality2">
	<input id="personality2" type="checkbox" name="personality">personality2
</label>
<label for="personality3">
	<input id="personality3" type="checkbox" name="personality">personality3
</label>

20. Use the value attribute of radio boxes and check boxes

When submitting the form, the selected value will be sent to the server. The value attribute values of radio and checkbox determine the actual content sent to the server.

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

There are two radio boxes. When a user submits a form, if the indoor option is selected, the form data will include: Indoor Outdoor = indoor. That is, the name and value attribute values of the selected item.

If the value attribute value is not specified, the default value will be used as the form data submission, that is, on. In this case, if the user selects the "indoor" option and submits the form, the form data will contain indoor outdoor = on. Such form data doesn't seem intuitive enough, so it's best to set the value attribute value to something meaningful.

21. Add default selections to radio buttons and check boxes

Use the checked property to set the first check box and radio button to be selected by default.
Add the word checked to an input element. For example:

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

22. Element nesting

div element, also known as content partition element, is a general container for wrapping other elements.

It is also the most frequent element in HTML.

Like other common elements, you can use

To mark the end of a div element.

23. Declare the document type of HTML

The previous challenges covered some HTML elements and their usage. In addition, some elements provide the overall structure of the page, which should be present in every HTML document.
At the top of the document, we need to tell the browser the version of HTML used by the web page. Html is a developing language. Most browsers support the latest standard of HTML, that is, HTML5. Most mainstream browsers support the latest HTML5 specification. However, some old web pages may use old versions of HTML.
You can tell the browser the HTML version used on the page through the "..." part is the version number. The corresponding is HTML5.
! And uppercase DOCTYPE are important, especially for older browsers. But html can be in both uppercase and lowercase.
All HTML code must be in HTML tags. Where after, at the end of the page.
This is a list of web page structure. Your HTML code will be between two HTML tags.

<!DOCTYPE html>
<html>

</html>

Definition of HTML document and 24. head

The structure of html is mainly divided into two parts: head and body. The description of the web page should be put into the head tag, and the content of the web page (displayed to users) should be put into the body tag.
For example, link, meta, title and style should all be placed in the head tag.
This is an example of a web page layout:

<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

So far, Basic HTML and HTML5 have been completed.