布鸽の窝

Vibe Coding大神降临?鸽布咕咕不是鸽!

HTML基础备忘【基础/元素/属性】

作者: lolita | 发布时间: 2026-08-14 13:18:25


标题

通过 <h1> - <h6>标签来定义

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落

通过 <p>标签来定义

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

链接

通过标签 <a>来定义

<a href="https://www.runoob.com">这是一个链接</a>

图像

通过标签 <img>来定义

<img src="/images/logo.png" width="258" height="39" />

元素

HTML 文档由一系列 HTML 元素(Element)构成,是网页结构的基础。说人话就是开始标签(start tag)结束标签(end tag)之间的完整结构。比如 <p></p>

属性

元素可以设置属性,*属性可以在元素中添加附加信息, 属性一般描述于开始标签
比如,链接的地址在 href 属性中指定。
<a href="http://www.runoob.com">这是一个链接</a>
href就是属性,链接是属性值。属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

全局属性

所有 HTML 元素都可以使用的属性。

id:为元素指定唯一的标识符。

<div id="header">This is the header</div>

class:为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。

<p class="text highlight">This is a highlighted text.</p>

style:用于直接在元素上应用 CSS 样式。

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title:为元素提供额外的提示信息,通常在鼠标悬停时显示。

<abbr title="HyperText Markup Language">HTML</abbr>

data-*:用于存储自定义数据,通常通过 JavaScript 访问。

<div data-user-id="12345">User Info</div>

某些属性仅适用于特定的 HTML 元素。

href(用于 <a><link> 元素):指定链接的目标 URL。

<a href="https://www.example.com">Visit Example</a>

src(用于 <img>, <script>, <iframe> 等元素):指定外部资源的 URL。

<img src="image.jpg" alt="An example image">

alt(用于 <img> 元素):为图像提供替代文本,当图像无法显示时显示。

<img src="image.jpg" alt="An example image">

type(用于 <input><button> 元素):指定输入控件的类型。

<input type="text" placeholder="Enter your name">

value(用于 <input>, <button>, <option> 等元素):指定元素的初始值。

<input type="text" value="Default Value">

disabled(用于表单元素):禁用元素,使其不可交互。

<input type="text" disabled>

checked(用于 <input type="checkbox"><input type="radio">):指定复选框或单选按钮是否被选中。

<input type="checkbox" checked>

placeholder(用于 <input><textarea> 元素):在输入框中显示提示文本。

<input type="text" placeholder="Enter your email">

target(用于 <a><form> 元素):指定链接或表单提交的目标窗口或框架。

<a href="https://www.example.com" target="_blank">Open in new tab</a>

布尔属性

布尔属性是指不需要值的属性,它们的存在即表示 true,不存在则表示 false。

disabled:禁用元素。

<input type="text" disabled>

readonly:使输入框只读。

<input type="text" readonly>

required:指定输入字段为必填项。

<input type="text" required>

autoplay(用于 <audio><video> 元素):自动播放媒体。

<video src="video.mp4" autoplay></video>

自定义属性

HTML5 引入了 data-* 属性,允许开发者自定义属性来存储额外的数据。

data-*:用于存储自定义数据,通常通过 JavaScript 访问。

<div data-user-id="12345" data-role="admin">User Info</div>

事件处理属性

HTML 元素可以通过事件处理属性来响应特定的事件,如点击、鼠标悬停等。

onclick:当用户点击元素时触发。

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover:当用户将鼠标悬停在元素上时触发。

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange:当元素的值发生变化时触发。

<input type="text" onchange="alert('Value changed!')">