codepen.io编辑平台
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建和结构化网页内容的标记语言。

标记语言：HTML 通过使用标签来定义网页内容的各个部分。每个标签用尖括号 < > 包围，通常是成对的标签（一个开始标签和一个结束标签）。例如：

1

结构化文档：HTML 为网页提供了层次化结构，例如：

  • <head> 标签用于包含网页的元数据，如标题（<title>）、字符集、样式表等。
  • <body> 标签用于包含网页的主要内容，如文本、图片、链接等。

2

超链接功能：HTML 可以通过 标签创建超链接，使用户能够在不同的页面之间导航。例如：

<a href="https://www.example.com">点击这里访问示例网站</a>

嵌入多媒体元素：HTML 允许嵌入图像、视频、音频等多媒体内容，例如：

<img src="image.jpg" alt="描述文本">
<video src="video.mp4" controls></video>

表单：HTML 提供了创建表单的功能，用于用户输入数据，例如：

<form>
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个 HTML 示例页面。</p>
    <a href="https://www.example.com">访问示例网站</a>
</body>
</html>

基本标签

<!--注释-->
  • 标题标签h
  • 段落标签p
  • 换行标签
  • 水平线标签
  • 粗体strong、斜体em

图片标签

3
4

链接标签

5
6

  • 页面间链接
  • 功能链接
  • 锚链接

块元素和行内元素

块：p，h1-h6
行内：strong、em

列表标签

7
ol、ul、dl

表格标签

table tr（行）td（列） 跨行rowspan跨列rowspan
7

媒体元素

video audio

页面结构

8

iframe内联框架

9

表单post和get(form)

表单（Form）是指一种用于收集和提交数据的界面元素
10

文本框text和单选框radio

11

按钮button和多选框checkbox

列表框select和文本域textarea和文件域file

搜索框滑块和简单验证

表单应用

隐藏域 hidden 只读readonly 禁用disabled

表单初级验证

placeholder（提示信息）
required（必须填写）
pattern（正则表达式）