HTML基础标签

最新推荐文章于 2025-08-19 15:18:40 发布

Gen邓艮艮

最新推荐文章于 2025-08-19 15:18:40 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/2302_76363587/article/details/128916499

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML中的一些基本标签，包括meta标签的charset、keywords和description属性，a标签的链接与锚点功能，img标签的src、alt和title属性，table标签的表格结构及属性，以及form标签用于表单提交的元素如input、select、textarea和button。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

meta标签

是一个自结束标签，可以提供网页相关信息、元数据

属性说明：

<meta charset="UTF-8" />：中文网页的声明编码，否则会出现乱码
<meta name="keywords" content="关键字" />：提供网页的关键字，关键字用,隔开
<meta name="description" content="描述信息" />：描述网页的信息

a标签

用法

跳转：<a href="https://www.baidu.com">跳转百度</a>
锚点：
	<a href="#index3">锚点跳转标题3</a>
    <h3>
      标题1
      <p>Lorem 忽略600字</p>
    </h3>
    <h3>
      标题2
      <p>Lorem 忽略600字</p>
    </h3>
    <h3 id="index3">
      标题3
      <p>Lorem 忽略600字</p>
    </h3>

target属性

_blank：打开新的浏览器标签

img标签

常用属性

src：图片路径

alt：图片加载失败或加载时显示的文字

title：悬浮在图片上面显示的文字

<img
  src="https://profile.csdnimg.cn/6/1/7/2_2302_76363587"
  alt="加载失败提示"
  title="图片"
/>

点击图片跳转：a标签嵌套img标签

<a href="https://www.baidu.com">
  <img src="https://profile.csdnimg.cn/6/1/7/2_2302_76363587" />
</a>

table标签

用法

table：HTML表格

th：表头

tr：表格行

td：单元格

常用属性

border：边框

cellspacing：单元格之间的空白

cellpadding：单元格边沿与其内容之间的空白

colspan：合并列

rowspan：合并行

示例

<table border="1" cellspacing="10" cellpadding="10">
  <tr>
    <th>姓名</th>
    <th>省</th>
    <th>市</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td colspan="2">湖北武汉</td>
    <td rowspan="2">男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>广东</td>
    <td>广州</td>
  </tr>
</table>

ul、ol、dl标签

有序列表

<ol>
    <li>内容</li>
</ol>

无序列表

<ul>
    <li>内容</li>
</ul>

定义列表

<dl>
    <dt>人</dt>
    <dd>一种哺乳动物</dd>
</dl>

form标签

使用场景：提交信息到服务端（前后端联调）

input：核心元素

label：提高交互体验

select：下拉框

textarea：文本域

button：按钮

form：表单元素，提交每个表单项内容

示例

<form action="">
    文本框：<input type="text" /><br />
    单选框：<label><input type="radio" name="sex" value="1" checked /> 男</label>
    <label><input type="radio" name="sex" value="2" /> 女</label><br />
    复选框：<input type="checkbox" name="love" value="sing" />唱歌
    <input type="checkbox" name="love" value="dance" />跳舞<br />
    下拉框：<select name="city">
    <option value="HB">湖北</option>
    <option value="GD">广东</option></select><br />
    文本域：<textarea name="text" cols="30" rows="10">文本</textarea><br />
    <input type="button" value="普通按钮" /><br />
    <input type="submit" value="提交按钮" /><br />
</form>