网页元素工具栏
文档结构
<!DOCTYPE html>
<!DOCTYPE html>
html
<html lang="en"> </html>
head
<head> <meta charset="UTF-8"> <title>Page Title</title> </head>
body
<body> <h1>Welcome</h1> </body>
头部元素
meta
<meta charset="UTF-8">
title
<title>My Website</title>
link
<link rel="stylesheet" href="styles.css">
style
<style> body { margin: 0; } </style>
script
<script src="script.js"></script>
布局元素
div
<div id="container" class="box"> Content </div>
section
<section> <h2>Section Title</h2> <p>Section content.</p> </section>
header
<header> <h1>Website Header</h1> </header>
footer
<footer> <p>© 2023 My Site</p> </footer>
nav
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav>
main
<main> <article>Main content here.</article> </main>
article
<article> <h2>Article Title</h2> <p>Article text.</p> </article>
aside
<aside> <p>Sidebar content.</p> </aside>
文本元素
a
<a href="https://example.com" target="_blank">Visit Example</a>
p
<p>This is a paragraph of text.</p>
span
<span class="highlight">Inline text</span>
h1
<h1>Main Heading</h1>
h2
<h2>Subheading</h2>
h3
<h3>Third-level heading</h3>
h4
<h4>Fourth-level heading</h4>
h5
<h5>Fifth-level heading</h5>
h6
<h6>Sixth-level heading</h6>
ul
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
li
<li>List item</li>
ol
<ol> <li>First item</li> <li>Second item</li> </ol>
b
<b>Bold text</b>
i
<i>Italic text</i>
u
<u>Underlined text</u>
hr
<hr>
媒体元素
img
<img src="image.jpg" alt="Description" width="300" height="200">
video
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
source
<source src="audio.mp3" type="audio/mpeg">
svg
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
embed
<embed src="animation.swf" type="application/x-shockwave-flash">
track
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
audio
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
表单元素
form
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button> </form>
input
<input type="text" placeholder="Enter your name">
button
<button type="button">Click Me</button>
label
<label for="email">Email:</label>
表格元素
table
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
tr
<tr> <td>Row data</td> </tr>
td
<td>Table cell</td>
th
<th>Table header</th>
代码编辑区
提示： 点击左侧工具栏元素，代码将插入到当前光标位置。您也可以直接在此编辑代码。