HTML常用元素

目录

元素大全

    <html>：定义HTML文档的根元素。

    <head>：包含关于文档的元数据，如标题、样式表和脚本等。

    <title>：定义文档的标题，通常出现在浏览器的标签栏中。

    <body>：定义文档的主体，包含所有可见内容。

    <h1> - <h6>：定义标题，从大到小六级标题。

    <p>：定义段落。

    <a>：定义链接，可以链接到其他页面或同一页面内的锚点。

    <img>：定义图像，可以显示图片。

    <ul>：定义无序列表。

    <ol>：定义有序列表。

    <li>：定义列表项。

    <table>：定义表格。

    <tr>：定义表格中的行。

    <td>：定义表格中的单元格。

    <form>：定义表单，用于收集用户输入的信息。

    <input>：定义表单中的输入控件，如文本框、单选框、复选框、提交按钮等。

    <textarea>：定义多行文本输入框。

    <select>：定义下拉菜单。

    <option>：定义下拉菜单中的选项。

    <button>：定义按钮。

    <div>：用于将文档分隔成独立的区域，可用于布局和组织页面内容。

    <span>：类似于<div>，但它通常用于标记文本的一部分，而不是整个区域。

    <header>：定义文档或区域的页眉。

    <footer>：定义文档或区域的页脚。

    <nav>：定义导航链接的区域。

    <section>：定义文档中的一个区块，通常由一个标题和一些内容组成。

    <article>：定义独立的文章或内容块。

    <aside>：定义一个与页面主要内容相关但可以独立存在的部分，如侧边栏。

    <audio>：定义音频内容。

    <video>：定义视频内容。

    <canvas>：定义用于绘图和动画的画布。

    <iframe>：定义内嵌框架，用于在网页中嵌入其他网页或内容。

    <blockquote>：定义长引用，通常用于引用其他人的言论。

    <cite>：定义引用的来源，通常用于引用书籍、文章或其他作品。

    <code>：定义计算机代码。

举例说明

title - 定义文档的标题，通常出现在浏览器的标签栏中。

点击查看代码 
<head>
  <title>My Web Page</title>
</head>

h1 - h6 - 定义标题，从大到小六级标题。

点击查看代码 
<h1>My Heading</h1>
<h2>My Subheading</h2>

p - 定义段落。

点击查看代码 
<p>This is a paragraph of text.</p>

a - 定义链接，可以链接到其他页面或同一页面内的锚点。

点击查看代码 
<a href="https://www.example.com/">Visit Example.com</a>
<a href="#section2">Jump to Section 2</a>

img - 定义图像，可以显示图片。

点击查看代码 
<img src="image.jpg" alt="An example image">

ul - 定义无序列表。

点击查看代码 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ol - 定义有序列表。

点击查看代码 
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

li - 定义列表项。

点击查看代码 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

table - 定义表格。

点击查看代码 
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

tr - 定义表格中的行。

点击查看代码 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

td - 定义表格中的单元格。

点击查看代码 
<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

form - 定义表单，用于收集用户输入的信息。

点击查看代码 
<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

input - 定义表单中的输入控件，如文本框、单选框、复选框、提交按钮等。

点击查看代码 
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
  <input type="checkbox" id="subscribe" name="subscribe" value="1">
  <label for="subscribe">Subscribe to newsletter</label>
</form>

textarea - 定义多行文本输入框。

点击查看代码 
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

select - 定义下拉菜单。

点击查看代码 
<label for="color">Select a color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

option - 定义下拉菜单中的选项。

点击查看代码 
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

button - 定义按钮。

点击查看代码 
<button>Click me!</button>

div - 用于将文档分隔成独立的区域，可用于布局和组织页面内容。

点击查看代码 
<div>
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</div>
<div>
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</div>

span - 类似于div，但它通常用于标记文本的一部分，而不是整个区域。

点击查看代码 
<p>
  The <span style="color:red">red</span> apple is ripe.
</p>

header - 定义文档或区域的页眉。

点击查看代码 
<header>
  <h1>My Web Page</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

footer - 定义文档或区域的页脚。

点击查看代码 
<footer>
  <p>&copy; 2023 My Web Page</p>
</footer>

nav - 定义导航链接的区域。

点击查看代码 
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

section - 定义文档中的一个区块，通常由一个标题和一些内容组成。

点击查看代码 
<section>
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</section>
<section>
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</section>

article - 定义独立的文章或内容块。

点击查看代码 
<article>
  <h2>My Article</h2>
  <p>This is the content of my article.</p>
</article>

aside - 定义一个与页面主要内容相关但可以独立存在的部分，如侧边栏。

点击查看代码 
<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/related-link-1">Related Link 1</a></li>
    <li><a href="/related-link-2">Related Link 2</a></li>
  </ul>
</aside>

audio - 定义音频内容。

点击查看代码 
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

video - 定义视频内容。

点击查看代码 
<video controls width="320" height="240">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

canvas - 定义用于绘图和动画的画布。

<canvas id="myCanvas" width="200" height="100"></canvas>

iframe - 定义内嵌框架，用于在网页中嵌入其他网页或内容。

<iframe src="https://www.example.com/" width="100%" height="400"></iframe>

blockquote - 定义长引用，通常用于引用其他人的言论。

点击查看代码 
<blockquote>
  "It does not matter how slowly you go as long as you do not stop."
  <cite>Confucius</cite>
</blockquote>

cite - 定义引用的来源，通常用于引用书籍、文章或其他作品。

点击查看代码 
<p>
  According to <cite>The Oxford English Dictionary</cite>, the word "computer" was first used in 1613.
</p>

code - 定义计算机代码。

点击查看代码 
<p>
  The following code snippet shows how to print "Hello, world!" in Python:
  <code>print("Hello, world!")</code>
</p>

总结

一个个试试，哪有问题再去上网搜下怎么解决问题，不保证代码可用。

posted @ 2023-03-23 21:38  淦丘比  阅读(137)  评论(0)  编辑  收藏  举报