HTML Study Notes

HTML Study Notes

Taking notes in English is just for practicing my English ability. :-)

---

Content

• List
  
  • Unordered List
  • Ordered List
• Image
• Anchor
• Link
• Text Field
• Form
• Button
  
  • Radio Button
  • Checkbox

---

• Create a Bulleted Unordered List

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

---

• Create an Ordered List

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

---

• Add Images to your Website
  alt attributes: When the picture is not loaded, the alternative text will be displayed

<img src="https://www.your-image-source.com/your-image.jpg" 
alt="Alternative text">

---

• Link to External Pages with Anchor Elements

<p>
Here's a 
    <a href="http://freecodecamp.cn"> 
        link to FreeCodeCamp中文社区 
    </a> 
for you to follow.
</p>

1. You can use a element to link to an external address to achieve page skip function.
2. You can also link to a part of the current page to achieve internal navigation function.
3. You can nested it into other elements.
4. Both text and pictures can be linked.
5. You can use # to represent an empty connection, like this

<a href=#>The Link Name</a>

---

• Using link to import files that are placed elsewhere

<link href="https://fonts.gdgdocs.org/css?family=Lobster" 
rel="stylesheet" type="text/css">

---

• Create a Text Field

<input type="text" >

a. You can use placeholder to predefine text in the input box brfore the user enters the information.

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

b. You can use required attribute to specify certain options as required, and only when the user fills in the option can the user submit the form.

<input type="text" required>

---

• Create a Form Element
  The value of the action attribute specifies the address to which the form is submitted to the server.

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

---

• Add a Submit Button

<button type="submit">button name</button>

And you can nested it in the form.

---

• Create a Set of Radio Buttons

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

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

---

• Create a Set of Checkboxes

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

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

---

With the checked attribute, you can set the check button and the radio button to be selected by default.

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

---

To be continued…