元素特有属性

HTML元素特有属性是针对特定标签设计的属性，不同元素有各自的专属属性。

链接属性(a标签)

核心属性

HTML

<a href="https://example.com" target="_blank" rel="noopener">
    外部链接
</a>

属性	说明	值
`href`	链接地址	URL / 锚点 / 协议
`target`	打开方式	`_self` / `_blank` / `_parent` / `_top`
`rel`	链接关系	`noopener` / `nofollow` / `sponsor`
`download`	下载文件	文件名

rel属性值

HTML

<a href="url" rel="noopener">安全打开新窗口</a>
<a href="url" rel="nofollow">不传递权重</a>
<a href="url" rel="noopener noreferrer">双重安全</a>

图像属性(img标签)

核心属性

HTML

<img src="image.jpg" alt="描述文字" width="300" height="200" loading="lazy">

属性	说明
`src`	图片路径（必填）
`alt`	替代文本（推荐填写）
`width`	宽度
`height`	高度
`loading`	懒加载：`lazy` / `eager`

图片加载优化

HTML

<!-- 懒加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

<!-- 响应式图片 -->
<img
    src="small.jpg"
    srcset="small.jpg 480w, large.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px"
    alt="响应式图片"
>

表单属性(form标签)

form核心属性

HTML

<form action="/submit" method="POST" enctype="multipart/form-data">
    <!-- 表单内容 -->
</form>

属性	说明
`action`	提交地址
`method`	提交方式：`GET` / `POST`
`enctype`	编码类型
`novalidate`	禁用表单验证

enctype值

值	用途
`application/x-www-form-urlencoded`	默认，普通表单
`multipart/form-data`	文件上传
`text/plain`	纯文本

输入属性(input标签)

核心属性

HTML

<input type="text" name="username" value="默认值" placeholder="提示文字"
       required minlength="2" maxlength="20" autofocus>

属性	说明
`type`	输入类型
`name`	提交时的字段名
`value`	默认值
`placeholder`	占位提示
`required`	必填
`disabled`	禁用
`readonly`	只读
`autofocus`	自动聚焦

类型相关属性

HTML

<!-- 数值类型 -->
<input type="number" min="0" max="100" step="1">

<!-- 文本类型 -->
<input type="text" pattern="[A-Za-z]{3}" title="3个字母">

<!-- 文件类型 -->
<input type="file" accept="image/*" multiple>

视频音频属性

video标签

HTML

<video src="video.mp4" controls autoplay muted loop poster="cover.jpg">
    您的浏览器不支持视频播放
</video>

属性	说明
`src`	视频地址
`controls`	显示控制条
`autoplay`	自动播放
`muted`	静音
`loop`	循环播放
`poster`	封面图
`preload`	预加载策略

audio标签

HTML

<audio src="music.mp3" controls autoplay loop>
    您的浏览器不支持音频播放
</audio>

表格属性

table属性

HTML

<table border="1" cellpadding="10" cellspacing="0">
    <!-- 表格内容 -->
</table>

td/th属性

HTML

<!-- 合并列 -->
<td colspan="2">合并两列</td>

<!-- 合并行 -->
<td rowspan="2">合并两行</td>

<!-- 表头单元格 -->
<th scope="col">列标题</th>
<th scope="row">行标题</th>

要点总结

必填属性：img的src、form的action、input的type
安全属性：外部链接使用rel="noopener"
可访问性：img必须设置alt属性
懒加载：使用loading="lazy"优化性能

📝 发现内容有误？点击此处直接编辑