Learn html

2022-02-14 Study PV:

摘自 FreeCodeCamp,链接https://www.freecodecamp.org/learn/responsive-web-design/

<h1-h6>

This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.

Paragraph

<p>

Comment

1	<!-- and end with a -->

Main block

The main HTML5 tag helps search engines and other developers find the main content of your page.
Example usage, a main element with two child elements nested inside it:

<main>

 <h1>Hello World</h1>

 <p>Hello Paragraph</p>

</main>

Display a pic

1	<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

alt attribute is used when the pic failed to be displayed

Link to External Pages with Anchor Elements

You can use a (anchor) elements to link to content outside of your web page.

a elements need a destination web address called an href attribute. They also need anchor text. Here’s an example:

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

Then your browser will display the text this links to freecodecamp.org as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.

Link to Internal Sections of a Page with Anchor Elements

a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link’s href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.

Below is an example of an internal anchor link and its target element:

1
2
3

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

When users click the Contacts link, they’ll be taken to the section of the webpage with the Contacts heading element.

target="_blank" attribute: this causes the linked document to open in a new window tab.

Make Dead Links Using the Hash Symbol

Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.
For example: href=”#”

Create a Bulleted Unordered List

Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>.

For example:

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

Create an Ordered List

Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists are closed with the </ol> tag.

For example:

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

Input elements

1	<input type="text">

Note that input elements are self-closing.

Placeholder text is what is displayed in your input element before your user has inputted anything.

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

Create a Form Element

You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action attribute on your form element.
For example:

1
2
3

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

Submit button

Let’s add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form’s action attribute.
Here’s an example submit button:

1	<button type="submit">Text for display</button>

Require a field for input

You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.
you can just add the attribute required within your input element, like this:

1	<input type="text" required>

Create a Set of Radio Buttons

You can use radio buttons for questions where you want the user to only give you one answer out of multiple options. Radio buttons are a type of input.

Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

Proper use of labels with the elements above will benefit:

Screen reader users (will read out loud the label, when the user is focused on the element)
Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.

Here’s an example of a radio button:

1
2
3

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

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the related input element. For example:

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

We can also nest the input element within the label tags:

1
2
3

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

Create a Set of Checkboxes

Forms commonly use checkboxes for questions that may have more than one answer.Checkboxes are similar to radio bottons

Checkboxes are a type of input.

Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.

All related checkbox inputs should have the same name attribute.

It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.

Here’s an example of a checkbox:

1	<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

Use the value attribute with Radio Buttons and Checkboxes

When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type radio and checkbox report their values from the value attribute.

For example:

<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>

Here, you have two radio inputs. When the user submits the form with the indoor option selected, the form data will include the line: indoor-outdoor=indoor. This is from the name and value attributes of the “indoor” input.

If you omit the valueattribute, the submitted form data uses the default value, which is on. In this scenario, if the user clicked the “indoor” option and submitted the form, the resulting form data would be indoor-outdoor=on, which is not useful. So the value attribute needs to be set to something to identify the option.

Check Radio Buttons and Checkboxes by Default

You can set a checkbox or radio button to be checked by default using the checked attribute.
To do this, just add the word checked to the inside of an input element.
For example:

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

Nest Many Elements within a Single div Element

The div element, also known as a division element, is a general purpose container for other elements.

The div element is probably the most commonly used HTML element of all.

Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.

Declare the Doctype of an HTML Document

The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.

At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.

You tell the browser this information by adding the <!DOCTYPE ...> tag on the first line, where the ... part is the version of HTML. For HTML5, you use <!DOCTYPE html>.

The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.

Next, the rest of your HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.

Here’s an example of the page structure. Your HTML code would go in the space between the two html tags.

<!DOCTYPE html>
<html>

</html>

Define the Head and Body of an HTML Document

You can add another level of organization in your HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.

Metadata elements, such as link, meta, title, and style, typically go inside the head element.

Here’s an example of a page’s layout:

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