HTML

[TOC]

HTML

文章内容大部分来自菜鸟教程，仅供入门参考

HTML的含义：HTML 是用来描述网页的一种语言，全称是HyperText Markup Language，它并不是一种编程语言，而是一种标记语言[标记语言就是一套标记标签]，HTML使用标记标签来描述网页，包含了标签和文本内容。HTML文档也被称为web页面

自己再想例子有点麻烦，我直接应用原文的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

差不多看这两个就能懂了

HTML标签

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

**web浏览器：**读取HTML文件将其作为网页显示

HTML的可视化结构

申明

1	`<!DOCTYPE html>`

doctype的声明是不区分大小写的，所以以下方式均可

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

**中文编码：**目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK

一些相关辅助工具

由于我目前一般都是用vscode，这里只介绍VScode上面的插件

1.Live Preview

可以用来实时预览写的HTML代码

2.Fitten Code

ai助手，帮助更高效地编写代码，但是我觉得可能通义灵码也可能有类似地效果，它的功能还是比较完善的，也没什么好介绍，试了就会用，很简单。

HTML基础

简单理解一下上面的范例

标题

HTML 标题（Heading）是通过

-

标签来定义的

1
2
3

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

段落

HTML 段落是通过标签

来定义的

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

链接

HTML 链接是通过标签来定义的

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

在href属性中指定的链接的地址

图像

HTML 图像是通过标签来定义的

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

HTML元素

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。HTML 文档由相互嵌套的 HTML 元素构成。

[ 由于文章由md格式编写，所以为了显示出这个元素中间加了空格，但是实际上是没有空格的，自行辨别 ]

< p > 元素:

定义了一个段

< body > 元素：

定义了HTML的主体

< html > 元素：

定义了整个 HTML 文档。

HTML空元素：

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

< br > 就是没有关闭标签的空元素

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 < br > 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。

注意不要忘记结束标签，还是因为格式原因不便标注

HTML对大小写不敏感，但是万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=”value”。

属性实例：

HTML 链接由 < a > 标签定义。链接的地址在 href 属性中指定：

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

**HTML属性常引用属性值：**一般都用双引号，不过单引号也问题不大，当属性值含有双引号或单引号时就用另一种包含以示区别，

HTML元素参考表

全局属性：

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

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

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

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

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

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

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

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

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

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

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

特定元素的属性

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

href（用于 <a> 和 <link> 元素）：指定链接的目标 URL。

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

src（用于 <img>, <script>, <iframe> 等元素）：指定外部资源的 URL。

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

alt（用于 <img> 元素）：为图像提供替代文本，当图像无法显示时显示。

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

type（用于 <input> 和 <button> 元素）：指定输入控件的类型。

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

value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。

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

disabled（用于表单元素）：禁用元素，使其不可交互。

1	`<input type="text" disabled>`

checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。

1	`<input type="checkbox" checked>`

placeholder（用于 <input> 和 <textarea> 元素）：在输入框中显示提示文本。

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

target（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。

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

布尔属性

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

disabled：禁用元素。

1	`<input type="text" disabled>`

readonly：使输入框只读。

1	`<input type="text" readonly>`

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

1	`<input type="text" required>`

autoplay（用于 <audio> 和 <video> 元素）：自动播放媒体。

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

自定义属性

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

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

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

事件处理属性：

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

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

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

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

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

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

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

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

HTML 标题：

标题（Heading）是通过 < h1 > - < h6 > 标签进行定义的。

< h1 > 定义最大的标题。 < h6 > 定义最小的标题。

1
2
3

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

HTML水平线

< hr > 标签在 HTML 页面中创建水平线。用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML注释

1	`<!-- 这是一个注释 -->`

开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

参考标签

HTML 段落

段落是通过 < p > 标签定义的。

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br > 标签

1	`<p>这个<br>段落<br>演示了分行的效果</p>`

参考标签

HTML 文本格式化

参考标签

HTML文本格式化标签

HTML “计算机输出标签”

HTML 引文, 引用, 及标签定义

范例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>

<b>这个文本是加粗的</b>

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含
<sub>下标</sub>

<br />

这个文本包含
<sup>上标</sup>

</body>
</html>

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引用实例</title>
</head>
<body>
    <h1>引用</h1>
<p>在这个示例中，第一个和第二个引用使用了 blockquote 标签，因为它们较长，需要独立的块来展示；而第三个引用使用了 q 标签，因为它比较短，可以内联显示。
</p>  
	<blockquote>
        <p>Life is what happens when you're busy making other plans.</p>
        <footer>— John Lennon</footer>
    </blockquote>

    <blockquote>
        <p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p>
        <footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer>
    </blockquote>

    <p>
        In his famous quote, Einstein said: <q>E=mc²</q>
    </p>
</body>
</html>

项目开发实践

HTML

http://example.com/HTML/

作者

briteny-pwn

发布于

2025年3月31日

许可协议

二进制文件上一篇

Vue 下一篇

HTML

HTML

一些相关辅助工具

HTML基础

简单理解一下上面的范例

标题

-

标签来定义的 123<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>

段落

链接

图像

HTML元素

< p > 元素:

< body > 元素：

< html > 元素：

HTML空元素：

HTML属性

全局属性：

特定元素的属性

布尔属性

自定义属性

事件处理属性：

HTML 标题：

HTML水平线

HTML注释

参考标签

HTML 段落

参考标签

HTML 文本格式化

参考标签

标签来定义的

1
2
3
`<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>`