HTML5常用标签总结

H5核心标签精讲

最新推荐文章于 2024-09-30 21:15:00 发布

原创最新推荐文章于 2024-09-30 21:15:00 发布 · 510 阅读

3 ·

CC 4.0 BY-SA版权

本文深入解析H5中常用的文本修饰、排版、列表、图像、超链接、浮动框架、表格、表单、音视频等关键标签的使用方法及属性，助力前端开发者掌握H5页面构建技巧。

## H5常用标签

1. 文本的修饰：
   <b>           粗体文字的显示效果
   <strong>   强调文字的加粗效果
   <i>           斜体文字显示效果
   <em>       强调文字的斜体显示效果
   <sup>       将文字作为上标显示
   <sub>       将文字作为下标显示

2. 文本的排版：
   <br>       换行标签，将文本换行显示
   <p>       段落标签，p标签包含的内容为一个段落
   <h1>~<h6>   标题标签，将文本作为标题显示

3. 文字列表：
       无序列表ul：
           <ul>       定义一个无序列表，必须与<li>标签成对使用。
           <li>       列表的行
       有序列表ol：
           <ol>       定义一个有序列表，必须与<li>标签成对使用
           <li>       列表的行
       自定义列表dl:
           <dl>       定义一个自定义列表，必须与<dt>标签成对使用
           <dt>       列表的行

4. 网页中的图像：
   <img>   在网页中插入一张图像
       alt           text           定义有关图形的短描述
       src           URL           要显示的图像的url地址或路径
       height       pixels%   定义图像的高度
       ismap       URL           把图像定义为服务器端的图像映射
       usemap   URL           把图像定义为客户端的图像映射
       vspace       pixels       定义图像顶部和底部的空白
       width       pixels%   设置图像的宽度

5. 超链接
       <a>       将一些文字、图片或其他网页元素作为超链接
           href=url           链接到其他网站
           href=路径       链接到各种文件
           href=”mailto:邮箱地址”       发送邮件
           href=”#值”       在当前页面跳转，跳转到id值相等的标签处。

6. 浮动框架
<ifram src=”路径”> 在当前网页中嵌入另一个html文档

7. 表格
   <table>   声明一个表格，必须与<tr>列标签<td>行标签配合使用
       <tr>           列标签，表格中的一列
       <td>           行标签，表格中的一行
       <th>           表格的表头
       <tfoot>       表格的脚注
       <caption>   表格的标题
   合并单元格:
       colspan属性       合并左右单元格
       rolspan属性       合并上下单元格

8. 表单
       <form>   定义一个表单对象
           <input>   创建表单输入控件
                   type=”text”               创建一个当行文本输入框
                   type=”textarea”       创建一个多行文本输入框
                   type=”password”       创建一个密码框
                   type=”button”           创建一个普通按钮
                   type=”reset”               创建一个重置按钮
                   type=”submit”           创建一个提交按钮
                   type=”radio”               创建一个单选框
                   type=”checkbox”       创建一个复选框
                   type=”file”               创建一个文件对象
                   type=”image”           创建一个图片对象
                   type=”url”                网址输入框，用户验证网址输入是否正确
                   type=”email”            邮箱输入框，用于验证邮箱输入是否正确
                   type=”data”                用于选取年月日
                   type=”number”        用于输入数字
                   type=”range”           滑条控件

9. 音视频
   <audio>   音频标签
       autoplay       立即播放音频
       controls       由用户播放音频
       loop               重复播放音频
       preload       加载音频
       src               音频的路径
   <video>   视频标签（支持ogg,webm,mpeg4格式）
       autoplay       视频就绪立即播放
       controls       由用户点击播放
       loop       循环播放
       preload       加载视频
       src           视频路径
       width       视频宽度
       height       视频高度
       poster       视频缓存不足时链接到一张图片