我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记参考了HTML-千古前端图文教程和w3school - HTML

Tags

<a>

Attributes

target

  • _self: the current browsing context. (Default)
  • _blank: usually a new tab, but users can configure browsers to open a new window instead.
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
  • _top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.

使用 target="_blank" 时记得加上 rel="noreferrer" 则不会报错。

mailto:

可以用来发邮件，例如：

<a href="mailto:email@example.com">Send Email</a>

点击该链接可以向 email@example.com 发送邮件

properties

  • subject - for the subject line（主题）
  • cc - for sending a carbon copy（抄送）
  • bcc - for sending a blind carbon copy（密送）
  • body - for the message's body text（正文）

例如：<a href="mailto:email@example.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>

<button>

<button type="button">Click Me!</button>

Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).

This is not possible with a button created with the <input> element!

Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.

<nav>

The <nav> tag defines a set of navigation links.

1
2
3
4
5
<nav>
  <a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/python/">Python</a>
</nav>

<header>

The <header> element represents a container for introductory content or a set of navigational links.

1
2
3
4
5
<header>
  <h1>A heading here</h1>
  <p>Posted by Harris</p>
  <p>Some additional information here</p>
</header>

<article>

The <article> tag specifies independent, self-contained content.

1
2
3
4
<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

The <footer> tag defines a footer for a document or section.

1
2
3
4
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:123@qq.com">123@qq.com</a></p>
</footer>

<pre>

Preformatted text 预格式化的文本

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

1
2
3
4
5
6
7
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

编译后的文本还是保持写的那样，回车空格等

<input>

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

TypeDescription
<input type="text">Displays a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button

<input type="text">

The <input type="text"> defines a single-line input field for text input.

Example:

1
2
3
4
5
6
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<label>

The <label> tag defines a label for many form elements.

Notice the use of the <label> element in the example above.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes)

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

<input type="radio">

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example:

1
2
3
4
5
6
7
8
9
10
<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

<input type="checkbox">

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

1
2
3
4
5
6
7
8
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a motorbike</label>
</form>

<input type="submit">

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

Tip: If the name attribute is omitted（省略）, the input field's value will not be sent at all.

disabled

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control nor its form control descendants.

If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Browsers often grey out such controls and won't receive any browsing events, like mouse clicks or focus-related ones.

<input name="Date" type="date" disabled>

accept

The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.

1
2
3
4
5
<label for="movie">Choose a movie to upload:</label>
<input type="file" name="movie" accept="video/*" />

<label for="poster">Choose a poster:</label>
<input type="file" name="poster" accept="image/png, image/jpeg" />

Form

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

<form>

1
<form>...</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

attributes: action

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

Example:

On submit, send form data to "action_page.php":

1
2
3
4
5
6
7
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Tip: If the action attribute is omitted, the action is set to the current page.

attributes: target

The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have one of the following values:

ValueDescription
_blankThe response is displayed in a new window or tab
_selfThe response is displayed in the current window
_parentThe response is displayed in the parent frame
_topThe response is displayed in the full body of the window
framenameThe response is displayed in a named iframe

attributes: method

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

默认值：method="get"

Example: <form action="/action_page.php" method="get">

Notes on GET:

  • Appends the form data to the URL, in name/value pairs
  • NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
  • The length of a URL is limited (2048 characters)
  • GET is good for non-secure data, like query strings in Google
  • Useful for form submissions where a user wants to bookmark the result

Notes on POST:

  • Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
  • POST has no size limitations, and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked
  • Always use POST if the form data contains sensitive or personal information!

attributes: autocomplete 自动补全

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

默认值：autocomplete="on"

Example: <form action="/action_page.php" autocomplete="on">

attributes: novalidate

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

Example:

1
2
3
4
5
<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>

该例子中，email 格式错了不会被验证

<textarea>

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

The size of a text area is specified by the cols and rows attributes (or with CSS).

1
2
3
<textarea id="abc" name="abc" rows="4" cols="50">
...
</textarea>

property: resize

TODO

Global Attributes

tabindex

The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.

☕欲知后事如何，

且听下回分解🍵