HTML入门教程

*声明：本文内容均来自“菜鸟教程”

简介

  • <!DOCTYPE html> 声明为HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

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

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

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

*只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML 基础

HTML 标题

HTML 标题（Heading）是通过<h1> – <h6> 标签来定义的。

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

HTML 段落

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

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

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

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

提示:在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

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

注意： 图像的名称和尺寸是以属性的形式提供的

HTML 元素

HTML 文档由一系列 HTML 元素（Element）构成，是网页结构的基础。

什么是 HTML 元素？

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

开始标签元素内容结束标签
<p>这是一个段落</p>
<a href=”default.htm”>这是一个链接</a>
<br>换行（空元素）无

说明：

  • 开始标签也称为 起始标签（opening tag）
  • 结束标签也称为 闭合标签（closing tag）
HTML 元素语法规则
  • 元素以开始标签开始，以结束标签结束
  • 元素内容位于开始标签与结束标签之间
  • 部分元素为空元素（empty element），没有内容
  • 空元素通常在开始标签中自闭合（如 <br />）
  • 大多数元素可以包含属性（Attributes）

提示：属性将在后续章节详细介绍。

HTML 元素的嵌套

HTML 元素可以相互嵌套，形成树状结构：

  • 一个元素可以包含其他元素
  • HTML 文档本质上是一个嵌套结构（DOM 树）
HTML 文档示例
<!DOCTYPE html>
<html>

  <body>
    <p>这是第一个段落。</p>
  </body>

</html>

该示例包含 3 个核心元素：html、body、p。

示例解析

<p> 元素（段落）

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

定义一个段落，包含文本内容。

<body> 元素（主体）

<body>
  <p>这是第一个段落。</p>
</body>

定义页面的主体内容，可以包含多个子元素。

<html> 元素（根元素）

<html>

  <body>
    <p>这是第一个段落。</p>
  </body>

</html>

整个 HTML 文档的根节点，所有内容都必须包含在其中。

关于结束标签

部分情况下，浏览器会自动补全缺失的结束标签：

<p>这是一个段落
<p>这是另一个段落

虽然可以正常显示，但不推荐依赖这种行为，可能导致：

  • 结构错乱
  • 样式异常
  • 兼容性问题
HTML 空元素

空元素是指没有内容的元素，例如：

  • <br>（换行）
  • <img>（图片）
  • <input>（输入框）

推荐写法：

<br />

这种写法兼容 HTML、XHTML 和 XML，更规范。

最佳实践：使用小写标签

HTML 标签不区分大小写，但推荐：

  • 提升代码可读性与一致性
  • 统一使用小写标签
  • 符合 W3C 规范

HTML 属性

属性是 HTML 元素提供的附加信息。

属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性总是以 name=”value” 的形式写在标签内，name 是属性的名称，value 是属性的值。

HTML 属性

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

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

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

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

使用双引号：

<a href="https://www.runoob.com">Link</a>

使用单引号：

<a href='https://www.runoob.com'>Link</a>

Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

或者：

<a href="https://www.runoob.com?q='search'">Link</a>

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 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.</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!')">

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

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

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个单行注释 -->
<p>这段文字会显示</p>

<!--
  这是一个多行注释
  可以说明复杂的代码块
-->
<div>内容</div>

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

HTML 折行

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

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

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML “计算机输出” 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

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

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注