【HTML】常用标签及属性 ⟳
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一个表，翻译了其对应的英文。
HTML⟳
路径⟳
相对路径⟳
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./：代表文件所在的目录（可以省略不写），一般相对前边有这么一个./表示“当前目录”，但是可以省略不写。如page/index和./page/index是一样的效果。../：代表文件所在的父级目录../../：代表文件所在的父级目录的父级目录/：代表文件所在的根目录
值得注意的是，（/：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。
绝对路径⟳
绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。
标签⟳
| 标签分类 | 标签名 | 英文 | 英文含义 | 标签类型 | 备注 |
|---|---|---|---|---|---|
| HTML页面结构 | <html> | HyperText Markup Language | 超文本标记语言 | ||
| <head> | head | 头部 | |||
| <title> | title | 网页标题 | |||
| <body> | body | 主体 | |||
| 常用标签 | <h1>~<h6> | head1~6 | 子标题 | 块标签 | |
| <p> | Paragraph | 段落 | 块标签 | ||
| <font> | fort | 字体 | |||
| <a> | Anchor | 锚(超链接) | |||
| <img> | image | 图像 | 空标签 | ||
| <br> | Barter Rabbet | 换行 | 空标签 | ||
| <hr> | Horizontal Rule | 水平线 | 空标签、块标签 | ||
| <marquee> | marquee | 选取框(文字滚动) | |||
| 格式化标签 | <b> | bold | 粗体 | ||
| <big> | big | 大号字 | |||
| <em> | EMphasize | 着重 | |||
| <i> | Italic | 斜体 | |||
| <small> | small | 小号字 | |||
| <strong> | strong | 加重语气 | |||
| <sub> | SUBscript | 下标 | |||
| <sup> | SUPerscript | 上标 | |||
| <u> | Underline | 下划线 | |||
| 列表标签 | <ul> | Unorder List | 无序列表 | 块标签 | |
| <ol> | Order List | 有序列表 | 块标签 | ||
| <li> | LIst | 列表项目 | 块标签 | ||
| <dl> | Define List | 定义列表 | 块标签 | ||
| <dt> | Define Title | 定义标题 | 块标签 | ||
| <dd> | Define Describtion | 定义描述 | 块标签 | ||
| 表格相关 | <table> | 表格 | 块标签 | ||
| <tr> | Table Row | 表行 | 块标签 | ||
| <td> | Table Data cell | 单元格 | |||
| <th> | Table Head | 表头 | |||
| <caption> | caption | 标题 | |||
| <thead> | Table head | 表头部分 | |||
| <tbody> | Table body | 主体部分 | |||
| <tfoot> | Table foot | 底部业脚部分 | |||
| 表单相关 | <form> | form | 表单 | ||
| <input> | input | 表单元素 (输入框) |
空标签 | ||
| <select> | select | 选择(下拉框) | |||
| <option> | option | 选项(下拉列表项) | |||
| <textarea> | text area | 文本域 | |||
| 框架相关 | <frameset> | frame set | 框架集 | ||
| <frame> | frame | 框架 | 空标签 | ||
| <iframe> | iframe | 内嵌框架 | |||
| 容器 | <div> | division | 分隔(容器标签 (块)) |
||
| <span> | span | 跨度(容器标签 (行内)) |
属性⟳
| 属性名 | 英文 | 英文含义 | 取值 | 应用场景 | 备注 |
|---|---|---|---|---|---|
| src | SouRCe | 资源位置 | 资源的路径 | ||
| border | border | 边框 | 数字(像素) | ||
| size | size | 尺寸 | 数字(像素) | ||
| width | width | 宽度 | 数字(像素) | ||
| height | height | 高度 | 数字(像素) | ||
| bgcolor | BackGround COLOR | 背景颜色 | 颜色值：red或#ffffff | ||
| background | background | 背景图片 | 图片路径 | ||
| list-style | list-style | 设置列表的所有属性 | 列表 | ||
| list-style-image | list-style-image | 将图像设置为列表项标记 | None url |
列表 | |
| list-style-type | list-style-type | 设置列表项标记的类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) |
列表 | |
| line-height | line-height | 行高(行间距) | 数字(像素) | 布局多行文本 | |
| text-align | text-align | 对齐方式 | Left、right、center | 各种元素对齐 | |
| letter-spacing | letter-spacing | 字符间距 | 数字(像素) | 加大字符间间隔 | |
| text-decoration | text-decoration | 文本修饰 | Underline、none | 加下划线、中划线等 | |
| margin-top (right、bottom、left) |
margin | 外边距 | 数字(像素) | ||
| padding-top (right、bottom、left) |
padding | 内边距（填充） | 数字(像素) | ||
| display | display | 改变块级元素与行内元素的默认显示方式 | block(行变块) inline(块变行) none(该元素不显示在网页中) |
||
| position | position | 定位 | static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定定位) |
用于定位 | |
| float | float | 浮动 | None、left、right | ||
| clear | clear | 处理浮动塌陷 | left(清除左边浮动) right(清除右边浮动) both(清除两边浮动) none(不清除浮动) |
||
| type | type | 列表类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) |
用于列表 | |
| align | align | 对齐 | Left、right、center top、middle、bottom |
段落内容水平对齐文字与图片垂直对齐 | |
| type | type | 表单元素类型 | text(文本) checkbox(复选) radio(单选) password(密码) file(文件) submit(提交) reset(重置) button(按钮) image(图片按钮) hidden(隐藏) |
表单元素 | |
| method | method | 表单数据的提交方式 | get post |
||
| alt | alter | 改变、替换(图片不显示时提示信息) | 图片 | ||
| cellpadding | cell padding | 单元格内边距 | 数字 | 表格 | |
| cellspacing | cell spacing | 单元格之间距离 | 数字 | 表格 | |
| href | Hypertext REFerence | 超文本引用(跳转到文件位置) | |||
| rel | RELationship | 关系(用于定义链接的文件和HTML文档之间的关系) | StyleSheet样式表 | link链接一个文件时 | |
| target | target | 目标(网页打开的位置) | _blank(新窗口打开) _self(自身窗口打开) _top(以整个浏览器作业作为窗口显示新页面) _parent(在父窗口中打开新的页面) |
||
| colspan | COLumn span | 单元格跨列 | 数字(跨的列数) | 表格 | |
| rowspan | row span | 单元格跨行 | 数字(跨的行数) | 表格 | |
| readonly | read only | 只读 | |||
| value | value | 输入框的初始值 | |||
| maxlength | max length | 最大长度 | |||
| scrolldelay | scroll delay | 滚动延时 | <m arquee> | ||
| direction | direction | 方向(滚动方向) | <m arquee |
常用属性⟳
下面列出了适用于大多数 HTML 元素的属性：
id: 给元素一个唯一的标识符，可以用于 CSS 选择器或 JavaScript 操作。
<div id="header">This is a header</div>
class: 给元素指定一个或多个类名，方便通过 CSS 或 JavaScript 操作。
<p class="text-muted">This is a paragraph.</p>
style: 直接为元素定义 CSS 样式。
<span style="color: red;">This text is red.</span>
href: 用于 <a> 标签，指定链接目标。
<a href="https://www.example.com">Visit Example</a>
src: 用于 <img> 和 <script> 标签，指定资源的路径。
<img src="image.jpg" alt="Description">
alt: 用于 <img> 标签，提供图片的替代文本。
<img src="logo.png" alt="Company Logo">
title: 提供关于元素的额外信息，通常在鼠标悬停时显示。
<button title="Click me">Submit</button>
name: 在 <input>, <form>, <select> 等表单元素中使用，定义元素的名称。
<input type="text" name="username">
value: 定义表单元素的值。
<input type="text" value="Default text">
target: 用于 <a> 标签，指定链接的打开方式（如 _blank 在新窗口中打开）。
<a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>
type: 指定表单元素的类型（如 text, password, submit）。
<input type="password" name="password">
placeholder: 为 <input> 和 <textarea> 提供一个占位符文本。
<input type="text" placeholder="Enter your name">
块级标签⟳
<div>、<h1>~<h6>、<p>、<hr>、
<ul>、<li>、<ol>、<dl>、<dt>、
<dd>、<table>
行级标签⟳
<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>
请你务必，一而再，再而三，三而不竭，千次万次，毫不犹豫地救自己于这世间水火。
笔者将不定期更新【考研或就业】的专业相关知识以及自身理解，希望大家能【关注】我。
如果觉得对您有用，请点击左下角的【点赞】按钮，给我一些鼓励，谢谢！
如果有更好的理解或建议，请在【评论】中写出，我会及时修改，谢谢啦！
笔者将不定期更新【考研或就业】的专业相关知识以及自身理解，希望大家能【关注】我。
如果觉得对您有用，请点击左下角的【点赞】按钮，给我一些鼓励，谢谢！
如果有更好的理解或建议，请在【评论】中写出，我会及时修改，谢谢啦！
本文来自博客园，作者：Nemo&
转载请注明原文链接：https://www.cnblogs.com/blknemo/p/10553021.html
顶
关注
评论
收藏
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！