Image tag
Enter img + enter, and will pop up. src is the file address, and alt is the text displayed when the file cannot be loaded.
Image see code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- src writes/specifies where the image is saved and what is its name -->
<img src="./Nexus.png" >
<!-- . is the symbol of Linux terminal command, indicating the current directory -->
<img src="./Diga.png">
<img src="./女1.png">
<img src="./女2.png">
<img src="./zaoyou.gif" alt="zaoyou">
</body>
</html>
There are various attributes in the image tag. Here is a brief introduction to the commonly used title (prompt text, hover the mouse over the image to display the text)
Width and height: The width and height of the image. The value is a number. Unitless visual code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- alt text The text displayed when the image cannot be displayed to prevent slow network speed and the image cannot be loaded -->
<img src="./女1.png" alt="This is a beauty">
<!-- title prompt text, the text will be displayed when the mouse is hovering over the picture -->
<img src="./女2.png" title="This is Beauty No. 2">
<!-- width The width of the image. The value is a number without unit -->
<!-- Browser images are scaled proportionally by default -->
<img src="./Diga.png" width="1025" title="Diga!!!">
<!-- height The height of the image. The value is a number without unit -->
<img src="./Nexus.png" height="1025" title="Nexus Start!!!">
</body>
</html>
Hyperlink tag
Press a + enter to pop up . . . Herf writes the address of the link, and “…” writes the name displayed in the link (Note: Some of the following code links are valid)
There is an attribute called target in the hyperlink tag, as shown below, which is used to jump to the page in a new window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Hyperlink tag a -->
<!-- target="_blank" New window jump page -->
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
<br>
<a href="https://www.miyoushe.com/ys/" target="_blank">Miyoushe</a>
<br>
<a href="https://www.luogu.com.cn/" target="_blank">Luogu</a>
<br>
<a href="https://oi-wiki.org/" target="_blank">IO-WIKI</a>
<a href="./07-Line breaks and horizontal line labels.html">Line breaks and horizontal line labels</a>
<a href="./06-paragraph tag.html">Paragraph tag</a>
<br>
<img src="./zaoyou.gif" alt="zaoyou" title="Well done">
<!-- In the early stages of development, if you don’t know the jump address of the hyperlink, just write # and it won’t jump -->
</body>
</html>
Audio & amp;Video tags
Audio tag audio + enter: Similarly, the address is placed in src, and the name of the failed loading is placed in “…”. The audio tag contains the contronls attribute: display the audio control panel; the loop attribute: loop playback; the autoplay attribute: automatic playback.
Video tag video + enter: , put the address in src, and put the name of the loading failure in “…”. The attributes are almost the same as the audio tag, but there is an additional “muted playback” muted, and autoplay must be used in conjunction with muted. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- src audio URL contronls display audio control panel loop loop playback autoplay automatic playback -->
<img src="C:\Users\bai\Pictures\Camera Roll\screenshot20231103.png" alt="Audio Tag">
<!-- In HTML-5, when attribute name = attribute value, the abbreviation is controls="controls"-->
<audio src="" controls loop autoplay>nnn</audio>
<!-- Video tag -->
<video src="./studio_video_1698744006211.mp4" controls width="900">Genshin Impact</video>
<!-- src video URL controls display video control panel loop loop playback muted mute playback autoplay automatic playback must be muted -->
<img src="./zaoyou.gif" alt="zaoyou">
</body>
</html>
The effect is as follows
List tag
List tags include unordered lists, ordered lists, and definition lists, which are ul ol dl respectively.
ul：
ol:
These tags contain sub-tags
“…” is placed in the tag content, but the dl:
tag is different. Its sub-tags are dt and dl. dt is the title and dl is the content. The following is the code and effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- List: an area where the layout content is neatly arranged -->
<!-- Unordered list Ordered list Definition list -->
<img src="C:\Users\bai\Pictures\Camera Roll\screenshot20231104.png" alt="Unordered list ordered list definition list" title="Unordered list has Sequence list definition list" width="500">
<!-- Unordered tags -->
<ul>
<li><a href="./13-Audio &Video Tag.html" target="_blank">13-Audio &Video Tag.html</a></li>
<li><a href="./12-Hyperlink Label.html" target="_blank">12-Hyperlink Label.html</a></li>
</ul>
<!-- Ordered list -->
<ol>
<li>Time to go home and read Weibo with you</li>
<li>That engraving pattern</li>
<li>Metal button battery comparison</li>
</ol>
<!-- Definition list -->
<dl>
<dt>Not giving a speech</dt>
<!-- <dt>zkndckjnsjk</dt> -->
<dd>Recover to crisis within time</dd>
<dd>What does milk powder mean?</dd>
<dt>It depends on you</dt>
<dd>skmdvflrnj</dd>
</dl>
</body>
</html>
Table tag
, containing the attribute border=”1″, (border=”1″) means adding a border line, and the thickness of the border line is 1px (1 pixel). The table has a sub-child named tr (row), one row and one label, tr also has sub-sections, th and td, th is the header label, one th is a header cell, td is the content label, each td is a content cell, the size of the table increases with the increase in content big.
In order to distinguish the head (table header), body (main content), and feet (additional content), the tr tag recognizes 3 fathers, and the table tag has 3 more children (the tr tag becomes a grandson), which are heads: thead , body: tbody, foot: tfoot. See code and effects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- table table // tr row // th header cell // td content cell -->
<!-- border="1" Add border line, pixel is 1 -->
<table border="2">
<!-- First line -->
<tr>
<!-- Header -->
<th>Name</th>
<th>Language</th>
<th>Mathematics</th>
<th>Total score</th>
</tr>
<!-- Second line -->
<tr>
<!-- Content -->
<td>Zhang San</td>
<td>98</td>
<td>89</td>
<td>187</td>
</tr>
<tr>
<!-- The table is automatically expanded -->
<td>qqqqqqqqqqqqqqqqqqqqq</td>
<td>qqqqqqqqqqqqqqqqqqqqq</td>
<td>qqqqqqqqqqqqqqqqqqqqq</td>
</tr>
<!-- Make the table structure clearer and the semantics clearer
thead table header table header content
tbody table body main content area
tfoot bottom of table summary content area
-->
</table>
<strong><u>Make the table structure clearer and the semantics clearer, but there is no difference to the human eye</u></strong>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
<th>Mathematics</th>
<th>Total score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zhang San</td>
<td>98</td>
<td>89</td>
<td>187</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>First in the school</td>
<td>First in the school</td>
<td>First in the school</td>
<td>First in the school</td>
</tr>
</tfoot>
</table>
</body>
</html>
Okay, I’ll share the content here first. See you next time. Bye.