The image tag
-
<img src="" art=""/>Properties:
- Ismap server side image mapping (mouse click somewhere, browser will send click location (x, y) to the server, only when
<img />The element belongs to one with a valid href attribute<a>The ismap attribute is allowed only when the descendant of the element.
<a href="">
<img src="" ismap />
</a>
Copy the code- Longdesc points to a page with an image description similar to Art
- Usemap and
<map></map>The id of the associated
<map></map>Define a client image map<area />Clickable region of the image map, nested in<map>
<img SRC ="" usemap="#planetmap" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="100,100,50" href="" alt="Venus" /> </map>Copy the code<canvas></canvas>Graphic container, canvas<figure></figure>Make an image for the illustration in the document<figcaption></figcaption>Tags defined<figure></figure>The title of the element,
<p> <figure> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b3c0ee9b2674647883e88b5ca411999~tplv-k3u1fbpfcp-zoom-1.image" Width ="304" height="228"> </figure Caption >Copy the codeA paragraph of text.
Audio/Video
<audio></audio>Custom voice
Properties:
- Autoplay =”autoplay” automatically plays after loading
- Controls =” Controls “browser default control
- Loop =”loop” after the end of the playback from the beginning
- Muted by default
- Preload =”auto” page load loads audio
<source />Define media sources, specifying interchangeable video/audio files
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Copy the code<track />Text track in media player (subtitles)
Kind: text type
- Captions Brief description of the display
- Chapters, Navigation media resources
- Descriptions Content not playable or not visible
- Metadata Specifies the content used by the script
- Subtitles are displayed in the video
Srclang: When kind=” 弹 幕 “is set, srclang must be set
<video width="320" height="240" controls="controls">
<source src="" type="video/mp4" />
<track kind="subtitles" src="" srclang="zh" label="Chinese">
</video>
Copy the code<video></video>Define the video
- Autoplay =”autoplay” automatically plays after loading
- Controls =” Controls “browser default control
- Loop =”loop” after the end of the playback from the beginning
- Muted by default
- Preload =”auto” page load loads
The link label
<a></a>hyperlinks
Properties:
- Download The hyperlink target that was downloaded
- Hreflang =”” What language is the link open
- Target =”view_window” a separate window target=”_blank” opens the linked document in a new window target=”_self” opens the linked document in the same frame.
<link />Define the relationship between documents and external resources<nav></nav>Defining navigation links
<nav>
<a href="">Home</a> |
<a href="">Previous</a> |
<a href="">Next</a> |
</nav>
Copy the code Home
Previous
Next
A list of tags
<ol></ol>An ordered list
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
Copy the code- Coffee
- Tea
- Milk
<ul></ul>Unordered list
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
Copy the code- Coffee
- Tea
- Milk
<li></li>List items<dl></dl>The list of<dt></dt>List items<dd></dd>List Item Description
Computer < dl > < dt > < / dt > < dd > used to calculate the instrument 1 < / dd > < dd > instruments used to calculate 2 < / dd > < / dl >Copy the code- The computer
- Instrument for calculation 1
- Instruments for calculation 2
form
<table></table>Define the form<caption></caption>Defining table titles<th></th>Define table header cells<tr></tr>Defining table rows<td></td>Define table cell properties:
- Colspan =”number” number of cells across
- Rowspan =”number” Number of rows across
- Valign = Vertical arrangement of “top” cell content (Top Middle Bottom Baseline)
<thead></thead>Defining table headers<tbody></tbody>Define table body<tfoot></tfoot>Define table footnotes<col />Attribute values for one or more columns<colgroup></colgroup>A group of columns in a table for formatting
<table border="1" style="height:200px"> < p style=" color:pink" /> <col span="1" style="background-color:yellow" /> </colgroup> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td valign="top">January</td> <td valign="bottom">$100</td> </tr> <tr> <td valign="top">February</td> <td valign="bottom">$80</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Sum $180</td> </tr> </tfoot> </table>Copy the code
Style and semantic tags
<style></style>Style information for the document<div></div>Sections in a document<span></span>Sections (inline elements) in a document<header></header>Defines the header of a section or page<footer></footer>Defines the footer of a section or page<main></main>The main contents of the document<section></section>Define a section<article></article>Define articles that specify independent self-contained content<aside></aside>Define articles outside of the page content,Use as a sidebar to an article<details></details>Element details<dialog></dialog>Dialog box or window<summary></summary>为<details>The element defines the visible title<data></data>Adds a machine-readable translation of the given content
<style> * { padding: 0; margin: 0; } </style> <div style="border: 1px solid black; width: 200px; height:200px;" > <header style="background:green; width: 200px; Height :20px"> <span style=" font-size: 10.0pt; line-height :20px; width: 200px;" > <aside style="width: 30px; height: 160px; float: left; </aside> <p>article</p> <details> <summary> <p> Details,summary</p> </details> <dialog open> </dialog> </article> </main> <footer style="background:yellow; width: 200px; height:20px;" > footer </footer> </div>Copy the code
Meta information label
<head></head>Information about the document<meta />Meta information about the HTML document<base></base>The default address or target for all links on the page
programming
<script></script>Client script<noscript></noscript>Alternate content when the script is not executed
<noscript>Your browser does not support VBScript! </noscript>Copy the code