哈基鹏的HTML之路
HTML
HTML（Hyper Text Markup Language）是用来描述网页的一种超文本标记语言。它使用标记标签来描述网页。
HTML的标记标签通常被称为HTML标签（HTML tag）
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML简单的示例：
1 |
|
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset=”utf-8”> 定义网页编码格式为 utf-8。
- 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
HTML 属性
属性是 HTML 元素提供的附加信息。
属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。
属性总是以 name=”value” 的形式写在标签内，name 是属性的名称，value 是属性的值。
例如：HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
下面列出了适用于大多数HTML元素的属性：
| 属性名 | 适用元素 | 说明 |
|---|---|---|
| id | 所有元素 | 为元素指定唯一的标识符 |
| class | 所有元素 | 为元素指定一个或多个类名，用于CSS或JavaScript选择 |
| style | 所有元素 | 直接在元素上应用 CSS 样式。 |
| title | 所有元素 | 为元素提供额外的提示信息，通常在鼠标悬停时显示 |
| data-* | 所有元素 | 用于存储自定义数据，通常通过 JavaScript 访问。 |
| href | <a>, <link> |
指定链接的目标 URL。 |
src |
<img>, <script>, <iframe> |
指定外部资源（如图片、脚本、框架）的 URL。 |
alt |
<img> |
为图像提供替代文本，当图像无法显示时显示。 |
type |
<input>, <button> |
指定输入控件的类型（如 text, password, checkbox 等）。 |
value |
<input>, <button>, <option> |
指定元素的初始值。 |
disabled |
表单元素 | 禁用元素，使其不可交互。 |
checked |
<input type="checkbox">, <input type="radio"> |
指定复选框或单选按钮是否被选中。 |
placeholder |
<input>, <textarea> |
在输入框中显示提示文本。 |
target |
<a>, <form> |
指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。 |
readonly |
表单元素 | 使输入框只读。 |
required |
表单元素 | 指定输入字段为必填项。 |
autoplay |
<audio>, <video> |
自动播放媒体。 |
onclick |
所有元素 | 当用户点击元素时触发 JavaScript 事件。 |
onmouseover |
所有元素 | 当用户将鼠标悬停在元素上时触发 JavaScript 事件。 |
onchange |
表单元素 | 当元素的值发生变化时触发 JavaScript 事件。 |
全局属性
全局属性是所有 HTML 元素都可以使用的属性。
id：为元素指定唯一的标识符。
<div id=”header”>This is the header</div>
class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
<p class=”text highlight”>This is a highlighted text.
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。
alt（用于 <img> 元素）：为图像提供替代文本，当图像无法显示时显示。
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
布尔属性
布尔属性是指不需要值的属性，它们的存在即表示 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>
自定义属性
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!’)”>
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
例如：
1 | <h1>这是一个标题。</h1> |
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
1 | <p>这是一个段落。</p> |
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下：
1 |
