HTML5

一、简介

HTML5 是超文本标记语言（HTML）的第五次重大修订，于 2014 年正式成为国际标准。作为现代网页开发的核心技术，它不仅是 HTML 的升级，还整合了 CSS3 和 JavaScript API，旨在提供更丰富的功能与更优的跨平台体验。

核心特性：

语义化标签：新增 <header>, <article>, <section> 等标签，提升内容结构化与 SEO 优化。
多媒体原生支持：直接嵌入 <video> 和 <audio> 元素，无需第三方插件。
图形与动画：通过 <canvas>、SVG 和 WebGL 实现动态 2D/3D 图形渲染。
离线与存储：支持本地存储（localStorage）、IndexedDB 数据库及 Service Workers 实现离线应用。
设备兼容性：集成地理位置、摄像头、陀螺仪等硬件访问接口。
响应式设计：通过媒体查询（Media Queries）和弹性布局适配多端设备。
性能优化：Web Workers 多线程处理，减少主线程阻塞。

HTML5 简化了跨平台开发流程，推动 Web 应用接近原生体验，成为构建网站、移动应用、游戏及企业级系统的基石，并逐步取代 Flash 等传统技术。其开放标准由 W3C 与 WHATWG 共同维护，持续演进以满足现代互联网需求。

‍

二、HTML 基本结构


<!-- DOCTYPE: 告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!-- head: 代表网页头部-->
<head>
    <!-- meta: 描述性标签，它用来描述我们网站的一些信息-->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="重新开始HTML5">

    <!-- title: 网页标题-->
    <title>Title</title>
</head>

<!-- body: 代表网页主体-->
<body>
Hello,World!
</body>
</html>

‍

三、网页基本标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!-- 水平线标签-->
<hr/>

<!-- 换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<!-- 字体样式标签-->
<h1>字体样式标签</h1>
粗体: <strong>I love you</strong>
斜体: <em>I love you</em>

<!-- 特殊符号-->
空格: 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
版权: &copy;版权所有Mia
<p>还有很多......</p>

</body>
</html>

‍

四、图像标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!-- img标签
src: 图片地址（相对地址、绝对地址）（必填）
alt: 图片名字（必填）
-->
<img src="../resources/image/Mia.png" alt="Mia头像" title="鼠标悬停文字" width="300" height="300">

</body>
</html>

‍

五、链接标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!-- 使用name作为锚标记-->
<a name="top">顶部</a>

<!-- a标签
href: 必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
    _blank 在新标签页中打开
    _self 在当前页面打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://zfile.miamia.top" target="_self">点击我跳转到zfile</a>
<br>
<a href="https://home.miamia.top">
  <img src="../resources/image/Mia.png" alt="Mia头像" title="鼠标悬停文字">
</a>

<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

<!-- 功能性链接
邮件标签: maito:
-->
<a href="mailto:2472838573@qq.com">点击联系我</a>

</body>
</html>

‍

六、行内元素和块元素

块元素
1. 无论内容多少，该元素独占一行
2. （p、h1-h6）
行内元素
1. 内容撑开宽度，左右都是行内元素的可以排在一行
2. （a、strong、em ... ）

‍

七、列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!-- 有序列表
应用范围: 试卷、问答
-->
<ol>
  <li>go</li>
  <li>python</li>
  <li>前端</li>
  <li>渗透</li>
  <li>应急</li>
  <li/>c/c++</li>
</ol>

<!-- 无序列表
应用范围: 导航、侧边栏
-->
<ul>
  <li>go</li>
  <li>python</li>
  <li>前端</li>
  <li>渗透</li>
  <li>应急</li>
  <li/>c/c++</li>
</ul>

<!-- 自定义序列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>go</dd>
  <dd>python</dd>
  <dd>前端</dd>
  <dd>渗透</dd>
  <dd>应急</dd>
  <dd>c/c++</dd>

  <dt>位置</dt>
  <dd>中国</dd>
  <dd>安徽省</dd>
  <dd>合肥市</dd>
</dl>

</body>
</html>

‍

八、表格


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!-- 表格table
行: tr
列: td
-->
<table border="1px">
  <tr>
    <!-- colspan 跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <!-- rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
</table>

</body>
</html>

‍

九、媒体


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体</title>
</head>
<body>

<!-- 音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="../resources/video/test.mp4" controls autoplay></video>
<audio src="../resources/audio/test.mp3" controls autoplay></audio>

</body>
</html>

‍

十、页面结构

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web 页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

‍

十一、iframe 内联框架


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!-- iframe内联框架
src: 地址
w-h: 宽度高度
-->
<iframe src="" name="Mia的主页" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://home.miamia.top" target="Mia的主页">点击跳转</a>

</body>
</html>

‍

十二、表单语法

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio 时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password 时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type 为 text 或 password 时，输入的最大字符数
checked	type 为 radio 或 checkbox 时，指定按钮是否是被选中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post、get 提交方式
readonly: 只读
hidden: 隐藏
disabled: 禁用
-->
<form action="1.我的第一个网页.html" method="get">
  <!-- 文本输入框: input type="text"-->
  <p>名字: <input type="text" name="username" placeholder="请输入用户名" required/></p>
  <!-- 密码输入框: input type="password"-->
  <p>密码: <input type="password" name="pwd" hidden/></p>

  <!-- 单选框标签
  input type="radio"
  value: 单选框的值
  name: 表示组
  -->
  <p>性别:
    <input type="radio" value="boy" name="sex" checked disabled/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>

  <!-- 多选框
  input type="checkbox"
  -->
  <p>爱好:
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby" checked/>代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
  </p>
  
  <!-- 按钮
  input type="button"
  input type="image"
  input type="submit"
  input type="reset"
  -->
  <p>按钮:
    <input type="button" name="btn1" value="点击变长"/>
  <!--  <input type="image" src="../resources/image/Mia.png"/>-->
  </p>
  
  <!-- 下拉框，列表框-->
  <p>下拉框:
    <select name="列表名称">
      <option value="China">中国</option>
      <option value="US">美国</option>
      <option value="ETH" selected>瑞士</option>
      <option value="Hindu">印度</option>
    </select>
  </p>
  
  <!-- 文本域
    cols="50" rows="10"
  -->
  <p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  </p>
  
  <!-- 文件域
  type="file" name="files"
  -->
  <p>
    <input type="file" name="files"/>
    <input type="button" value="上传" name="upload"/>
  </p>
  
  <!--邮箱验证-->
  <p>邮箱:
    <input type="email" name="email"/>
  </p>
  
  <!-- URL-->
  <p>URL:
    <input type="url" name="url"/>
  </p>
  
  <!-- 数字-->
  <p>数字:
    <input type="number" name="number" max="100" min="0" step="10"/>
  </p>
  
  <!-- 滑块
  input type="range"
  -->
  <p>滑块:
    <input type="range" name="voice" min="0" max="100" step="2"/>
  </p>
  
  <!-- 搜索框-->
  <p>搜索:
    <input type="search" name="search"/>
  </p>
  
  <!-- 增强鼠标可用性-->
  <p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark"/>
  </p>

  <p>自定义邮箱:
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
  </p>

  <p>
    <input type="submit"/>
    <input type="reset"/>
  </p>

</form>

</body>
</html>

‍

十三、总结

Markdown Mindmap

一、简介

二、HTML 基本结构

三、网页基本标签

四、图像标签

五、链接标签

六、行内元素和块元素

七、列表

八、表格

九、媒体

十、页面结构

十一、iframe 内联框架

十二、表单语法

十三、总结

相关帖子

前端开发

HTML5 （第一章 HTML 基础）

认识 HTML

重绘和重排

开屏广告毁了 iOS

手机和电脑都同步失败？

基于 Query&View 挂件实现的文档字数统计可视化功能

欢迎来到这里！