菜鸟教程学习笔记——html（二）

鸢惜2026-06-06 13:48

示例

html 复制代码

<!DOCTYPE html>  
<html>  
  <head>
	  
  </head>
  <body>
    <br/>
    <!-- 这是一个换行 -->
    <p>这是第一个段落。</p>
    <hr/>
    <!-- 这是一个水平线 -->
    
  </body>  
  
</html>

HTML元素

从开始标签（start tag） 到 结束标签（end tag） 之间的完整结构。

复制代码

<body> </body>
<!-- 元素（主体）：定义页面的主体内容 -->
<html> </html> 
<!-- 元素（根元素）：整个 HTML 文档的根节点 -->

HTML属性

在元素中起到再定义的附加内容。

一般是小写。

全局属性

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

html 复制代码

<div id="header">This is the header</div>
<!-- id：为元素指定唯一的标识符。 -->
<p class="text highlight">This is a highlighted text.</p>
<!-- class：为元素指定一个或多个类名，用作选择标识符 -->
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>
<!-- style：用于直接在元素上应用 CSS 样式。 -->

特定属性

仅适用于特定的 HTML 元素。

html 复制代码

<a href="https://www.example.com">Visit Example</a>
<!-- href：指定链接的目标URL -->
<img src="image.jpg" alt="An example image">
<!-- src：指定外部资源的URL。 alt：为图像提供替代文本，当图像无法显示时显示。 -->

布尔属性

存在即表示 true，不存在则表示 false。

html 复制代码

<input type="text" disabled>
<!-- disabled：禁用元素。-->
<input type="text" readonly>
<!-- readonly：只读。-->
<input type="text" required>
<!-- required：必填。-->
<video src="video.mp4" autoplay></video>
<!-- autoplay（用于<audio>和 <video> 元素）：自动播放。-->

自定义属性

HTML5 引入了 data- 属性，自定义属性来存储额外的数据。

html 复制代码

<div data-user-id="12345" data-role="admin">User Info</div>
<!-- data-*：用于存储自定义数据，通常通过 JavaScript 访问。-->

事件处理属性

通过事件处理属性来响应特定的事件。

html 复制代码

<button onclick="alert('Button clicked!')">Click Me</button>
<!-- onclick：当用户点击元素时触发。-->

更多标准属性说明： HTML 标准属性参考手册。