One of the basic components of HTML is paragraphs. Use "<p>" and "</p>" tags to define paragraphs. For example:
<p>This is a paragraph. </p>
A hyperlink is a link to another page or site. Use the "<a href=''>" and "</a>" tags to create hyperlinks, where the href attribute specifies the URL of the link. For example:
<a href="https://www.jb51.net">This is a link</a>
Images can enhance the visual impact of a page and convey more information. Insert images using the "<img src='' alt=''/>" tag, where the src attribute specifies the path to the image file and the alt attribute contains alternative text that is displayed when the image cannot be displayed. For example:
<img src="image.jpg" alt="A beautiful picture">
Tables are a primary way of presenting data on web pages. Use the "<table>", "<tr>" and "<td>" tags to define tables, rows and cells respectively. For example:
<table> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr> </table>
Use the "<ul>" or "<ol>" tags to create an unordered or ordered list, and then use the "<li>" tag to define the list items. For example:
<ul> <li>List item 1</li> <li>List item 2</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> </ol>
Forms are components used to collect user input. Use the "<form>" tag to create the form and the "<input>" tag to define the input fields. For example:
<form action="submit.php" method="post"> <label for="username">Username:</label> <input type="text" name="username" id="username"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <input type="submit" value="Submit"> </form>
CSS can be used to control the appearance and layout of web pages. CSS styles can be added to HTML documents using the "<style>" tag. For example:
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
text-align: center;
}
</style>The above code snippet is just the tip of the iceberg in the HTML language. However, they can help you build basic web page structure and style, and provide you with inspiration for more learning. Now, try to create your own website using these HTML codes!
HTML5 Documentation Statement
<!DOCTYPE html>
The above code block is an HTML5 document declaration, stating that the current web page is written in accordance with HTML5 standards.
When writing a web page, be sure to write the HTML5 document declaration at the top of the web page. If you do not write a document declaration, some browsers will enter a weird mode. After entering the weird mode, the browser will parse the page and the page will not be displayed normally. Therefore, in order to avoid entering this mode, you must write a document statement.
Commonly used document declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Note: <!DOCTYPE> is not an HTML tag. It provides the browser with information (a statement) about what version of the HTML was written.
In order to be compatible with some old pages, the browser has set two parsing modes:
Standards Mode Standards Mode
Quirks Mode weird mode
Weird modes will produce some unpredictable behavior when parsing web pages, and we should avoid the occurrence of weird modes.
File type <HTML></HTML> (placed at the beginning and end of the file)
Document title <TITLE></TITLE> (must be placed in the "Header" block)
Header <HEAD></HEAD> (descriptive information, such as "topic")
Style <BODY></BODY> (document body)
Title <H?></H?> (from 1 to 6, there are six levels of choices)
Alignment of title <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Distinguish <DIV></DIV>
Differentiated alignment <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Citation block <BLOCKQUOTE></BLOCKQUOTE> (usually indented)
Emphasis <EM></EM> (usually shown in italics)
Special emphasis on <STRONG></STRONG> (usually shown in bold)
Citation <CITE></CITE> (usually shown in italics)
Code <CODE></CODE> (for displaying source code)
Sample<SAMP></SAMP>
Keyboard input<KBD></KBD>
Variable<VAR></VAR>
Define <DFN></DFN> (not provided by some browsers)
Address<ADDRESS></ADDRESS>
Large characters<BIG></BIG>
Small print<SMALL></SMALL>
Bold<B></B>
italics<I></I>
Bottom line <U></U> (some browsers still don’t provide it)
Strikethrough <S></S> (some browsers still do not provide it)
Subscript<SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (displayed in single space font)
Predetermined format <PRE></PRE> (preserves the size of spaces in the file)
The width of the preformatted format <PRE WIDTH=?></PRE> (in characters)
Align it with <CENTER></CENTER> (both text and pictures are acceptable)
Shine <BLINK></BLINK> (the most mocked tag ever)
Font size <FONTSIZE=?></FONT> (from 1 to 7)
Change font size <FONTSIZE=+|-?></FONT>
Base font size <BASEFONTSIZE=?> (from 1 to 7; defaults to 3)
Font color<FONTCOLOR="#$$"></FONT> ($$ is the color code)
1) Picture: <img src="image address">
2) Join the link: <a href="Related address to be connected">Write the words you want to write</a>
3) Open the link in a new window: <a href="Related address" target="_blank">Write the words you want to write</a>
4) Mobile font (marquee): <marquee>Write the words you want to write</marquee>
5) Bold font: <b>Write the words you want to write</b>
6) Font italics: <i>Write the words you want to write</i>
7) Font underline: <u>Write the words you want to write</u>
8) Font strikethrough: <s>Write the words you want to write</s>
9) Increase the font size: <big>Write the words you want to write</big>
10) Font size control: <h1>Write the words you want to write</h1> (the font size can be from h1-h5, h1 is the largest, h5 is the smallest)
11) Change the font color: <font color="#value">Write the words you want to write</font> (the value is between 000000 and ffffff (16-bit hexadecimal)
12) Eliminate the underline of the connection: <a href="Related address" style="text-decoration:none">Write the words you want to write</a>
13) Post music: <embed src="Music address" width="Width" height="Height" autostart=false>
14) Paste flash: <embed src="flash address" width="width" height="height">
15) Paste video files: <img dynsrc="file address" width="width" height="height" start=mouseover>
16) Line break:<br>
17) Paragraph: <p>Paragraph</p>
18) Original text style: <pre>Text</pre>
19) Change post background: <body background="background image address">
20) Fixed post background not scrolling with the scroll bar: <body background="Background image address" bodybgproperties=fixed>
21) Customize the post background color: <body bgcolor="#value">(see 10 for value)
22) Post background music: <bgsound="Background music address" loop=infinite>
23) Post the web page: <iframe. src="Related Address" width="Width" height="Height"></iframe>