The contents of the notes are reproduced from AcWing's web application class handouts, course link: AcWing Web Application Class .
MDN official documentation: MDN Web Docs .
CONTENTS
1. VS Code environment configuration
(1) Since Live Server
is usually deployed on Linux when writing a website, this plug-in can simulate a terminal, which is equivalent to simulating a real development environment (backend).
(2) Auto Rename Tag
When modifying HTML tags, automatically modify the corresponding tag pairs.
(3) Auto Format Check
in , so that the code will be automatically formatted when saving the code.Setting-Text Editor-FormattingFormat On Save
2. Basic HTML tags
2.1 HTML file structure
All HTML tags have a tree structure, and generally have a start tag and an end tag. The tags between the start tag and the end tag are child nodes, and the tags at the same level are sibling nodes, for example:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Application Lesson</title>
</head>
<body>
<h1>First Class</h1>
</body>
</html>
(1) <html>The tag
represents the root (top-level element) of an HTML document, so it is also called the root element. All other elements must be descendants of this element.
(2) <head>Label:
specifies the configuration information (metadata) related to the document, including the title of the document, referenced document styles and scripts, etc.
(3) <body>Label:
Indicates the content of the document. document.bodyAttributes provide easy access to bodyscripting elements of the document.
(4) <title>Label:
Define the title of the document, displayed on the title bar or tab page of the browser. It should only contain text, and if it does contain tags, any tags it contains will be ignored.
(5) <meta>Tag: Indicates any metadata information
that cannot be represented by one of the other HTML meta-related elements ( <base>, <link>, <script>, <style>or ).<title>
Common properties:
charset: This attribute declares the character encoding of the document. If this attribute is used, its value must be "utf-8" which is ASCII case-insensitive.name:nameandcontentattributes can be used together名 - 值to provide metadata to the document in a paired manner, wherenameit is the name of the metadatacontentand the value of the metadata.
(6) linkLabel:
specifies the relationship between the current document and external resources. This element is most commonly used in linked style sheets, but can also be used to create site icons <icon>, for example:
<link rel="icon" href="/Web Application Lesson/images/logo.png">
(7) <!-- 多行注释 -->
There are only multi-line comments in HTML, no single-line comments.
A comprehensive example follows:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is the description of web page.">
<meta name="keywords" content="This is the keywords when searching.">
<title>Web Application Lesson</title>
<link rel="icon" href="/Web Application Lesson/images/logo.png">
</head>
<body>
<h1>First Class</h1>
<!--
This is first annotation sentence.
This is second.
...
-->
</body>
</html>
2.2 Text labels
Although there are many text tags, most of them can be regarded as sums of predetermined <div>styles <span>.
(1) <div>Label:
<div>element (or HTML document section element) is a general-purpose flow content container, without CSS, it has no effect on content or layout. Other block-level tags such as: <h1>, <p>, <pre>, <ul>, <ol>, <table>. divIt is convenient to set the style for a certain piece of content later, and each can be operated in JS . That is to logically classify a certain piece of code into one category.
(2) <span>Label:
<span>The element is a generic in-line container for phrase content without any special semantics. It can be used to group elements to achieve a certain style intent (by using classes classor idattributes), or these elements have common attributes, eg lang. It should only be used when there are no other suitable semantic elements. Similar <span>to element, but a block element instead of an inline element . Other inline tags such as: .<div><div><span><i>, <b>, <del>, <ins>, <td>, <a>
(3) <h1> - <h6>Label:
The HTML title (Heading) element presents six different levels of titles, <h1>the highest level and <h6>the lowest level.
(4) <p>Tags:
HTML <p>elements (or HTML paragraph elements) represent a paragraph of text. The element usually appears as a whole block of text separated from adjacent text, either separated by vertical whitespace or indented by the first line. In addition, <p>it is a block-level element.
(5) <pre>Labels:
HTML <pre>elements represent pre-formatted text. The text in this element is usually displayed in a monospaced font according to the arrangement in the original file, and blank characters (such as spaces and line breaks) in the text will be displayed. (Newlines immediately <pre>following the opening tag are also omitted)
(6) <br>Tags:
HTML <br>elements generate a newline (carriage return) symbol in the text. This element is useful when writing poems and addresses, where line breaks are important.
(7) <hr>Tags:
HTML <hr>elements that represent topical transitions between paragraph-level elements (for example, a change in a scene in a story, or a change in the theme of a chapter).
In earlier versions of HTML, it was a horizontal line. It still appears as a horizontal line in the visual browser, but is currently defined semantically rather than presentationally. So if you want to draw a horizontal line, please use the appropriate CSSstyle to modify it.
(8) <i>Labels:
HTML elements <i>are used to express a series of texts that need to be distinguished from ordinary texts for some reasons. For example, technical terms, foreign phrases, or the thinking activities of characters in novels, etc., its content is usually displayed in italics.
(9) <b>Labels:
The HTML Bring Attention To element <b>is used to attract readers' attention to the content of the element (if there is no special emphasis). This element used to be considered a boldface (Boldface) element, and most browsers still display the text as bold. Nonetheless, you should not use <b>the element to display bold text; the alternative is to use the attribute CSSin font-weightto create bold text.
(10) <del>Tags:
HTML <del>tags represent some text content that has been removed from the document. For example, you can use this tag when you need to display modification records or source code differences. <ins>Tags do the exact opposite: represent content added to the document.
(11) <ins>Tags:
HTML <ins>elements define the text that has been inserted into the document.
2.3 Pictures
HTML <img>element to embed an image into a document. Defaults to inline elements, ie display: inline.
(1) srcAttribute:
This attribute is required , and it contains the file path of the picture you want to embed.
(2) altAttribute:
This attribute contains a text description of the image, which is not mandatory, but it is very useful for accessibility. A screen reader reads these descriptions to those who need to use the reader, letting them know what the image means. Or normal browsers will also display altthe alternate text in the properties on the page if the image cannot be loaded for some reason: for example, when there is a network error, when the content is blocked, or when the link expires.
(3) heightAttribute:
the height of the image, the unit in HTML5 is CSSpixel, and it can be either pixel or percentage in HTML4. You can only specify a value in widthand height, and the browser will scale according to the original image ratio.
(4) widthAttribute:
The width of the image, the unit in HTML5 is CSSpixel, and it can be either pixel or percentage in HTML4.
2.4 Audio and Video
(1) <audio>Tags:
HTML <audio>elements are used to embed audio content in documents. <audio>The element can contain one or more audio resources, which can be described using srcattributes or elements: the browser will choose the most appropriate one to use. <source>You can also use MediaStreamthis element for streaming media.
- Play with
srcproperties:
<audio controls src="/Web Application Lesson/audios/bgm.mp3">
Your browser does not support this audio element.
</audio>
<audio>With multiple<source>elements:
This example contains multiple<source>elements. If it can be played, the browser will try to load the firstsourceelement; if not, it will fall back to load the second element.
<audio controls>
<source src="/Web Application Lesson/audios/bgm1.mp3" type="audio/mpeg">
<source src="/Web Application Lesson/audios/bgm2.mp3" type="audio/mpeg">
Your browser does not support this audio element.
</audio>
(2) <video>Tags:
HTML <video>elements are used to embed media players in HTML or XHTML documents to support video playback within the documents. You can also use <video>tags for audio content, but <audio>elements may be more user-experience appropriate. The label is used in the <audio>same way as .
<video controls width="800" src="/Web Application Lesson/videos/mv.mp4">
Your browser does not support embedded videos.
</video>
2.5 Hyperlinks
An HTML element (or anchor element) can create hyperlinks to other web pages, files, locations within the same page, email addresses, or any other URL <a>through its attributes. The content in should indicate the intent of the link. If the attribute is present, it will be activated when the Enter key is pressed while the element is focused. If you click a link to open a new tab page, you need to add the attribute: .href<a>href<a>target="_blank"
<a href="https://www.baidu.com" target="_blank">Baidu</a>
<a href="https://www.acwing.com" target="_blank">
<img height="200" src="/Web Application Lesson/images/logo.png" alt="logo">
</a>
2.6 Forms
(1) <form>Label:
The HTML <form>element represents an area in the document that contains interactive controls for submitting information to the Web server.
(2) <input>Labels:
HTML <input>is used to fill in the content, common types are:
<input type="text">: Creates a basic single-line text box.<input type="number">: Used to let the user enter a number. It includes built-in validation to reject non-numeric input. Browsers may choose to provide stepping arrows, allowing the user to increase and decrease the entered value with the mouse, or simply tap with their fingertips.<input type="email">: An input box element with the "email" type tag (<input>) enables the user to enter or edit a single email address, and, ifmultiplethe attribute is specified, the user can enter multiple email addresses. Before the form is submitted, the input box will automatically verify whether the input value is one or more valid e-mail addresses (non-null value and conforming to the e-mail address format) pseudo-label and can be automatically appliedCSSafter:validverification:invalid.<input type="password">:<input>There is a value called "password" in the element, which gives us a way for users to enter passwords more securely. This element is rendered as a one-line plain text editor control, where the text is obscured from reading, usually by replacing each character with a symbol such as an asterisk ( )*or a dot ( ).•Which one this symbol will display depends on the user's browser and operating system.<input type="radio">:<input>The "radio" type element is rendered as a small circle chart by default, and the fill is activated, similar to the checkbox (checkbox) type. Radio buttons allow you to select a single value to submit the form.nameThe same attribute is a set of "radio".
Common attributes are:
name:nameid: Unique IDmaxlength:The maximum lengthminlength: minimum lengthrequired: Is it required?placeholder: When the form control is empty, the content displayed in the control
A comprehensive example follows:
<form>
<label for="username">账号：</label>
<input type="text" name="username" id="username" placeholder="Please input username">
<br>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="Please input password">
<br>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<br>
<label for="age">年龄：</label>
<input type="number" name="age" id="age">
<br>
<label for="cpp">C++</label>
<input type="radio" name="lang" value="cpp" id="cpp">
<label for="java">Java</label>
<input type="radio" name="lang" value="java" id="java">
<label for="py">Python</label>
<input type="radio" name="lang" value="py" id="py">
<br>
</form>
(3) <textarea>Label:
The HTML <textarea>element represents a multi-line plain text edit control, which is useful when you want the user to enter a fairly long, unformatted text, such as a comment in a comment or feedback form. The parameter rowsspecifies the initial number of rows and colsspecifies the initial number of columns.
<label for="feedback"></label>
<textarea name="feedback" id="feedback" cols="50" rows="10"></textarea>
(4) <select>With <option>label:
The HTML <select>element represents a control that provides a menu of options.
<label for="pet_select">选择宠物：</label>
<select name="pet_select" id="pet_select">
<option value="Cat">Cat</option>
<option selected value="Dog">Dog</option>
<option value="Fish">Fish</option>
<option value="Bird">Bird</option>
</select>
(5) <button>Label:
The HTML <button>element represents a clickable button, which can be used in forms or documents where simple standard buttons are required. By default, the display style of the HTML button is close to user agentthe button of the host system platform (user operating system), but you can use CSSto change the appearance of the button.
<button type="subimt">Submit</button>
2.7 list
(1) <ul>and <li>tags:
The HTML <ul>element (or HTML unordered list element) represents an unordered list or bulleted list that can contain multiple elements.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
(2) <ol>With <li>tags:
The HTML <ol>element represents an ordered list, usually rendered as a numbered list.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
(3) <dl>, <dt>and <dd>tags:
HTML <dl>element (or HTML description list element) is a list containing term definitions and descriptions, usually used to display vocabulary or metadata (key-value pair list).
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
<dd>Orange</dd>
</dl>
2.8 Form
(1) <table>Labels:
HTML tableelements represent tabular data, that is, information represented by a two-dimensional data table.
(2) <thead>Labels:
HTML <thead>elements define a set of rows that define the column headers of a table.
(3) <tbody>Labels:
HTML <tbody>elements define a set of data rows.
(4) <tr>Labels:
HTML <tr>elements define the rows in the table. <td>Both and elements can appear on the same line <th>.
(5) <th>Labels:
HTML <th>elements define the header cells in the table.
(6) <td>Label:
The HTML <td>element defines a table cell that contains data.
(7) <caption>Label:
The HTML <caption>element (or HTML table title element) displays the title of a table. It usually <table>appears as the first child element of the table and is displayed at the front of the table content. However, it can also be CSSstyled, so , which can also appear anywhere relative to the table.
Comprehensive example:
<table>
<caption>My Table</caption>
<thead>
<tr>
<th>name</th>
<th>score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>80</td>
</tr>
<tr>
<td>Bob</td>
<td>70</td>
</tbody>
</table>
2.9 Semantic Labels
(1) <header>:
HTML <header>elements are used to display introductory content, and usually contain a set of introductory or practical elements to assist navigation. It may contain some header elements, but it may also contain other elements such as a logo, search box, author name, and so on.
(2) <nav>:
An HTML <nav>element represents a part of a page whose purpose is to provide navigation links in the current document or in other documents. Common examples of navigational parts are menus, tables of contents, and indexes.
(3) <section>:
The HTML <section>element represents an independent part included in the HTML document, which has no more specific semantic elements to represent, and generally includes a title.
(4) <figure>:
An HTML <figure>element represents an independent piece of content, often <figcaption>used in conjunction with a description (caption), and serves as an independent reference unit. When it belongs to the main content flow (main flow), its position is independent of the body. This tag is often used to refer to pictures, illustrations, tables, code snippets, etc. in the main text, when this part is transferred to the appendix or other pages without affecting the main body.
(5) <figcaption>:
The HTML <figcaption>element is the description/title of the image associated with it, which is used to describe <figure>other data in its parent node element. This means being the first or last in the block <figcaption>. <figure>At the same time, the HTML Figcaption element is optional; without this element, the parent node's picture will just have no description/title.
(6) <article>:
An HTML <article>element represents an independent structure in a document, page, application, or website that is intended to be an independently assignable or reusable structure, e.g. it might be a forum post, magazine or news article, blog, user submission comments, interactive components, or other stand-alone content items.
(7) <aside>: An
HTML <aside>element represents a part that is almost irrelevant to the rest of the page content, is considered to be a part independent of the content and can be split separately without affecting the whole. These usually appear as sidebars or call-out boxes.
(8) <footer>:
The HTML <footer>element represents the content of the latest chapter or the footer of the root node (sectioning root) element. A footer usually contains information such as the chapter author, copyright data, or links to documentation.
Comprehensive example:
<body>
<header>
<h1>Header</h1>
<nav>
<h2>Content</h2>
<ul>
<li><a href="https://www.baidu.com" target="_blank">Baidu</a></li>
<li><a href="https://www.bilibili.com" target="_blank">Bilibili</a></li>
<li><a href="https://www.acwing.com" target="_blank">AcWing</a></li>
</ul>
</nav>
</header>
<hr>
<section>
<h2>Image</h2>
<figure>
<img width="300" src="/Web Application Lesson/images/image1.png" alt="image1">
<figcaption>image1</figcaption>
<img width="300" src="/Web Application Lesson/images/logo.png" alt="image2">
<figcaption>image2</figcaption>
</figure>
</section>
<hr>
<section>
<h2>Article</h2>
<article>
<h3>Article1</h3>
<p>paragraph1</p>
<p>paragraph2</p>
</article>
<article>
<h3>Article2</h3>
<p>paragraph1</p>
<p>paragraph2</p>
</article>
</section>
<hr>
<footer>
©2018-2022 AsanoSaki 版权所有
</footer>
</body>
2.10 Special symbols
<: <, less than sign or display mark;>:>, greater than sign or display mark;&: &, can be used to display other special characters;":",quotation marks;®: ®, registered;©: ©, copyright;™: ™, trademark; : Space.