HTML
HTML notes
HTML
Basic Elements
Getting Started
Use <html lang="language"></html> to begin
<!DOCTYPE html> specifies the latest version of HTML<html lang="zh"> use Chinese as the page language</html>Defining Headings
Use <h1> </h1> to define multi-level headings
<h1>Level 1 Heading</h1><h2>Level 2 Heading</h2><h3>Level 3 Heading</h3>…Similarly, HTML only has 6 levels of headingsParagraphs
Use <p> </p> to define a paragraph; if you don’t need a line break, you can just type directly
<p>This is a paragraph, it will wrap automatically</p>In fact, it's not really useful…It’s worth mentioning that there is a slight difference between two <p> </p> tags depending on whether there’s a line break or not:
<p>Para One</p><p>Para Two</p>In this case, if both take 50% width they will wrap (there's a small gap between the two elements)
<p>Para One</p><p>Para Two</p>This case won't (no small gap between the two elements)Sections
Use <section></section> to group content into independent regions within a web page or application, usually containing a heading. A section is a subsection.
Fieldsets
Use <fieldset></fieldset> to group blocks within a web page, and <legend></legend> can name the block
<fieldset> <legend>Block Name</legend> This is a block</fieldset>Example:
Articles
The <article></article> element represents independent, complete content within a document, page, or application that can be referenced externally on its own
Grouping
Use <div id="id"></div> to group content into independent regions within a web page or application, mainly to work with CSS
Separators
The <hr> element defines a separator, equivalent to markdown’s *****:
Hyperlinks
Use <a href="link"> link text </a> to define a hyperlink
<p><a href="https://baidu.com"> Baidu </a> is a search engine</p>Example:
Baidu is a search engine
src and href
href（Hypertext Reference） src（Source）
href points to the location of a network resource, establishing a connection with the current element (anchor) or current document (link). When requesting a src resource, it downloads the resource it points to and applies it to the document, such as JavaScript scripts and img images;
href is used to establish a relationship between the current document and the referenced resource; src is used to replace the current content;
- src: used for resources that need to be embedded, such as images, scripts, audio, and video, etc.
- href: used to define hyperlinks or reference external resources, such as CSS files or navigation links.
Images
Used Alone
Use <img src="image URL" alt="image description"> to define an image. Note that the img tag has no closing tag. alt is displayed when the image fails to load
<img src="/pic.png" alt="image description">Used with figure
<figure></figure> is used to represent a piece of independent content, containing a <figcaption> description </figcaption> element. It’s typically used for images, illustrations, code snippets, or quotes
Use <figure> <img src="image URL" alt="image description"> <figcaption> image caption </figcaption> </figure> to define an image
Example:
Lists
Unordered Lists
Use <ul> <li> </li> </ul> to define an unordered list
<ul> <li>Item 1</li> <li>Item 2</li></ul>equivalent to * Item OneExample:
- Item 1
- Item 2
Ordered Lists
Use <ol> <li> </li> </ol> to define an ordered list
<ol> <li>Item 1</li> <li>Item 2</li></ol>equivalent to 1. Item OneExample:
- Item 1
- Item 2
Forms
Use <form action = "destination URL"></form> to define a form, in which you can set:
<input type="input type" name="input name" id="id" placeholder="placeholder" value="preset value"> to define an input box (if it contains the required keyword, the input is required; if it contains the checked keyword, it’s selected by default). The input tag also has no closing tag
When type is radio, it’s a radio button; when type is checkbox, it’s a checkbox. Multiple radio/checkbox buttons sharing the same name are treated as a group, and typically name and value are submitted, where value can be set to a fixed value. Usually <label><input type="radio">radio button</label> is used to bind the radio button with text
<button type="what to do on click">button</button>
A dropdown is defined using <select name="select name"> <option value="option value">option text</option> </select>, where <option> can have the selected attribute to select an option by default.
<form action="https://somesite.com"> <fieldset> <legend>Is your cat an indoor or outdoor cat?</legend> <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> </fieldset> label can also be bound using the for=id form <fieldset> <legend>What's your cat's personality?</legend> <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label> <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label> <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label> </fieldset> <input type="text" name="catphotourl" placeholder="cat photo URL" required> <select name="pets" id="pet-select"> <option value="">--Please choose an option--></option> <option value="dog">Dog</option> <option value="cat">Cat</option> </select> <button type="submit">Submit</button></form>Example:
Head
Use <head></head> to define the head
Within it you can:
Use <title></title> to set what the browser displays in the page’s title bar or tab;
<meta charset ="utf-8"> sets the encoding format for parsing this HTML. Note that meta is a single tag with no closing tag
Use <style></style> + CSS to import styles. For CSS, see this blog
Equivalent to: <link href="CSS file" rel="stylesheet"/>
<head> <title>Title</title> <meta charset="utf-8"></head>Footer
Use <footer> </footer> to define the footer
Others
Line Break
Use <br> to define a line break
<p>this element<br/>is equivalent to \n</p>Example:
this element
is equivalent to \n
Emphasis
Use <em> emphasize </em> or <strong> emphasize </strong> to define emphasis
<em>italic emphasis</em><strong>bold emphasis</strong>Example: emphasis emphasis