HTML5常用标签

最新推荐文章于 2025-03-21 10:16:47 发布

原创最新推荐文章于 2025-03-21 10:16:47 发布 · 490 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了HTML中的基础标签使用方法，包括标题、段落、换行等文本展示标签，以及表格、列表、图片、表单等富媒体标签，并通过实例展示了各标签的应用场景。

标题：h1、h2、h3、h4、h5、h6
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr(行)、td(列)
列表：ul(无序)、ol(有序)、li
图片：img
表单：input
超链接：a

HTML常用标签用法

标题标签

  <h1>标题1</h1>
  <h2>标题2</h2>
  ......
  <h6>标题6</h6>

段落标签

<p>《诗经》是中国古代诗歌开端，最早的一部诗歌总集。</p>
<p>搜集了公元前11世纪至前6世纪的古代诗歌305首.</p>

换行标签

《离骚》是战国诗人屈原创作的文学作品。<br/>“离骚”，东汉王逸释为：“离，别也；骚，愁也。”

容器标签

<div style="background-color: red">我是一个div</div>
测试div的拼接

<span style="background-color: greenyellow">我是一个span</span>
测试sapn的拼接

表格标签

<table border="2">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
    </tr>

</table>

列表标签

<!-- 无序列表 -->
<ul>
    <li>盖伦</li>
    <li>皇子</li>
    <li>武器大师</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>牛头</li>
    <li>石头人</li>
    <li>布隆</li>
</ol>

图片标签

<img src="http://img1.3lian.com/2015/w7/98/d/22.jpg" width="300" height="300" />

表单标签

<form>
  姓名 : <input type="text" placeholder="请输入用户名和密码" /> <br/>
  密码 : <input type="password" />
</form>

表单中的单选和多选

<form>
  爱好 <input type="checkbox" />篮球 <input type="checkbox" />足球 <input type="checkbox" />羽毛球 <br/>
  性别 <input type="radio" name="sex" />男 <input type="radio" name="sex" />女 <input type="radio" name="sex" />妖
</form>

超链接标签(a标签)

<a href="http://www.baidu.com">百度一下,你也不知道(当前网页中打开) </a>
<br/>
<br/>
<a href="http://www.baidu.com" target="_blank">百度一下,你也不知道(新网页中打开) </a>