以下代码是作者收集整理仅供参考，如有问题欢迎大家在留言区批评指正；版权所有，翻印必究，如有雷同纯属巧合，转载请注明出处。希望我的文章能帮助到您！
文本内容
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。以下是一些常用的HTML元素和它们的功能代码汇总：
基础结构
```html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
文本相关
```html
<h1>最大的标题</h1>
<h2>次大的标题</h2>
<!-- ... -->
<h6>最小的标题</h6>
<p>这是一个段落。</p >
<strong>粗体文本</strong>
<em>斜体文本</em>
<mark>高亮文本</mark>
<del>删除线文本</del>
<ins>下划线文本</ins>
<blockquote>
<p>这是一个长引用。</p >
</blockquote>
<q>这是一个短引用。</q>
<pre>
预格式化文本
保留空格和换行
</pre>
```
链接与图像
```html
链接文本
< img src="image.jpg" alt="图像描述" width="100" height="200">
```
列表
```html
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<!-- ... -->
</ul>
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<!-- ... -->
</ol>
<dl>
<dt>定义列表项</dt>
<dd>定义描述</dd>
<!-- ... -->
</dl>
```
表格
```html
<table>
<thead>
<tr>
<th>表头单元格</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<td>标准单元格</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
```
表单
```html
<form action="/submit-form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">
</form>
```
媒体
```html
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 元素。
</video>
```
元数据
```html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
```
分区相关
```html
<div>文档分区</div>
<span>行内元素分区</span>
<header>头部区域</header>
<nav>导航链接区域</nav>
<section>文档中的节或区段</section>
<article>独立的文章内容</article>
<aside>侧边栏或插入内容</aside>
<footer>底部区域</footer>
```
其他
```html
<br> 换行
<hr> 水平线
<iframe> 内联框架</iframe>
```
这些元素和功能代码是HTML的基础，通过它们可以构建起一个结构化的网页。在实际开发中，HTML通常与CSS（层叠样式表）和JavaScript一起使用，分别用于网页的样式设计和交互功能的实现。
链接和锚点
在HTML中，链接是通过`<a>`元素创建的，而锚点则允许用户跳转到网页内的特定部分。以下是一些关于链接和锚点的功能代码汇总：
基础链接
```html
<!-- 打开一个新网页的链接 -->
访问 Example 网站
<!-- 打开邮件客户端，发送邮件的链接 -->
<!-- 打开电话拨号器的链接 -->
拨打电话 +123456789
```
锚点链接
```html
<!-- 跳转到网页内的指定ID的元素 -->
跳转到第一部分
<!-- 指定ID的锚点元素 -->
<h2 id="section1">第一部分</h2>
```
目标属性
```html
<!-- 在新窗口或标签页中打开链接 -->
<!-- 在相同的框架或窗口中打开链接 -->
<!-- 在父框架集中打开链接 -->
<!-- 在整个窗口中打开链接，忽略任何框架 -->
```
download属性
```html
<!-- 当点击链接时，下载指定的文件 -->
下载 PDF 文件
```
链接样式
```html
<!-- 使用CSS类为链接添加样式 -->
<!-- 在CSS中定义链接的不同状态样式 -->
<style>
.link-style {
color: blue;
text-decoration: none;
}
.link-style:hover {
color: red;
}
.link-style:visited {
color: purple;
}
.link-style:active {
color: green;
}
</style>
```
锚点导航示例
```html
<!-- 在页面顶部创建锚点导航 -->
<nav>
<ul>
<li>第一部分</li>
<li>第二部分</li>
<!-- 更多锚点链接 -->
</ul>
</nav>
<!-- 页面内容，包含锚点 -->
<h2 id="section1">第一部分</h2>
<!-- 第一部分内容 -->
<h2 id="section2">第二部分</h2>
<!-- 第二部分内容 -->
<!-- 更多内容部分 -->
```
链接和锚点是HTML中用于导航的核心功能，它们使得用户能够在网页之间以及网页内部的不同部分之间轻松跳转。
列表
在HTML中，列表用于表示一组相关的项目，可以是有序的、无序的，或者是定义列表。以下是一些关于列表的功能代码汇总：
无序列表（Unordered List）
```html
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<!-- 更多列表项 -->
</ul>
```
有序列表（Ordered List）
```html
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<!-- 更多列表项 -->
</ol>
```
自定义列表（Description List）
```html
<dl>
<dt>术语 1</dt>
<dd>描述 1</dd>
<dt>术语 2</dt>
<dd>描述 2</dd>
<!-- 更多术语和描述 -->
</dl>
```
嵌套列表
```html
<ul>
<li>列表项 1</li>
<li>列表项 2
<ul>
<li>嵌套列表项 1</li>
<li>嵌套列表项 2</li>
<!-- 更多嵌套列表项 -->
</ul>
</li>
<li>列表项 3</li>
<!-- 更多列表项 -->
</ul>
```
列表样式
```html
<style>
ul {
list-style-type: circle; /* 圆圈 */
}
ol {
list-style-type: upper-roman; /* 罗马数字（大写） */
}
dl {
list-style-type: none; /* 无标记 */
}
</style>
```
自定义列表标记
```html
<ul style="list-style-image: url('image.png');">
<li>列表项 1</li>
<li>列表项 2</li>
<!-- 更多列表项 -->
</ul>
```
使用CSS类和ID
```html
<ul class="bullet-list">
<li id="item1">列表项 1</li>
<li>列表项 2</li>
<!-- 更多列表项 -->
</ul>
<style>
.bullet-list {
list-style-type: square; /* 方块 */
}
#item1 {
font-weight: bold; /* 加粗 */
}
</style>
```
使用`<li>`元素的属性
```html
<ul>
<li value="10">列表项 A</li>
<li value="20">列表项 B</li>
<!-- 更多列表项 -->
</ul>
```
使用`<nav>`元素创建导航列表
```html
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系方式</li>
<!-- 更多导航项 -->
</ul>
</nav>
```
列表是HTML中组织信息的重要方式，它们不仅用于显示数据，还常用于创建导航菜单、展示目录、项目列表等。通过CSS，可以进一步自定义列表的样式和布局。
图像和多媒体
在HTML中，图像和多媒体内容可以通过几个不同的元素来嵌入。以下是一些常用的功能代码汇总：
```html
<!-- 嵌入单个图像 -->
< img src="image.jpg" alt="图像描述" width="100" height="200">
```
图像地图
```html
< img src="map.jpg" alt="图像地图" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="0,0,100,100" href="link1.html" alt="区域1">
<area shape="circle" coords="200,200,50" href="link2.html" alt="区域2">
<!-- 更多区域 -->
</map>
```
嵌入视频
```html
<!-- 使用`<video>`元素嵌入视频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 元素。
</video>
```
嵌入音频
```html
<!-- 使用`<audio>`元素嵌入音频 -->
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
```
嵌入YouTube视频
```html
<!-- 使用`<iframe>`元素嵌入YouTube视频 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
```
嵌入Flash动画
```html
<!-- 注意：Flash已经不被现代浏览器支持 -->
<object width="320" height="240" data="animation.swf" type="application/x-shockwave-flash">
<param name="movie" value="animation.swf">
<param name="quality" value="high">
您的浏览器不支持 Flash 动画。
</object>
```
嵌入SVG图像
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```
响应式图像
```html
< img srcset="image-lg.jpg 1200w, image-md.jpg 800w, image-sm.jpg 400w"
sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, (min-width: 400px) 400px, 100vw"
src="image.jpg" alt="响应式图像">
```
图像样式和浮动
```html
<style>
.image-container {
float: left;
margin: 10px;
}
.image-caption {
font-size: 0.8em;
text-align: center;
}
</style>
<div class="image-container">
< img src="image.jpg" alt="图像描述" width="100" height="200">
<div class="image-caption">图像标题</div>
</div>
```
多媒体属性
```html
<video controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 元素。
</video>
```
资源预加载
```html
<link rel="preload" href="image.jpg" as="image">
```
媒体查询
```html
<style>
@media (max-width: 600px) {
img {
width: 100%;
height: auto;
}
}
</style>
```
这些代码示例展示了如何在HTML中嵌入不同类型的图像和多媒体内容。随着Web技术的发展，一些传统的方法（如Flash）已经逐渐被淘汰，而现代的HTML5元素（如`<video>`和`<audio>`）以及响应式图像技术得到了更广泛的应用。
表格
在HTML中，表格是通过`<table>`元素创建的，用于展示数据和信息。以下是一些关于表格的功能代码汇总：
基础表格
```html
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
</tr>
<!-- 更多行和列 -->
</table>
```
表格标题
```html
<table>
<caption>表格标题</caption>
<!-- 表格内容 -->
</table>
```
表格边框
```html
<table border="1">
<!-- 表格内容 -->
</table>
```
单元格跨度
```html
<table>
<tr>
<th colspan="2">跨两列的表头</th>
</tr>
<tr>
<td rowspan="2">跨两行的单元格</td>
<td>单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
</tr>
</table>
```
表格头部和主体
```html
<table>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<!-- 更多行和列 -->
</tbody>
</table>
```
表格底部
```html
<table>
<tfoot>
<tr>
<td>总计：</td>
<td>100</td>
</tr>
</tfoot>
</table>
```
表格单元格对齐
```html
<table>
<tr>
<th align="left">左对齐的表头</th>
<th align="center">居中对齐的表头</th>
<th align="right">右对齐的表头</th>
</tr>
<tr>
<td valign="top">顶部对齐的单元格</td>
<td valign="middle">垂直居中的单元格</td>
<td valign="bottom">底部对齐的单元格</td>
</tr>
</table>
```
表格样式
```html
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
```
表格布局
```html
<table style="table-layout: fixed;">
<!-- 表格内容 -->
</table>
```
可访问性
```html
<table>
<tr>
<th scope="col">列标题</th>
<th scope="col">列标题</th>
</tr>
<tr>
<td headers="column1">单元格内容</td>
<td headers="column2">单元格内容</td>
</tr>
<!-- 更多行和列 -->
</table>
```
使用`<colgroup>`和`<col>`设置列样式
```html
<table>
<colgroup>
<col span="1" style="background-color: #ccc;">
<col span="1" style="background-color: #fff;">
</colgroup>
<!-- 表格内容 -->
</table>
```
动态表格（使用JavaScript）
```html
<table id="dynamicTable">
<tr>
<th>列 1</th>
<th>列 2</th>
</tr>
<!-- 表格内容将通过JavaScript动态生成 -->
</table>
<script>
// 动态添加行和列的JavaScript代码
</script>
```
表格是HTML中用于展示数据的一种常见方式。通过CSS，可以进一步自定义表格的样式和布局，使其更加美观和易于阅读。随着Web技术的发展，虽然有了更多的数据展示方式（如CSS Grid和Flexbox），但表格仍然是处理 tabular 数据的有效工具。
表单
在HTML中，表单用于收集用户输入的数据，这些数据可以被发送到服务器进行处理。以下是一些关于HTML表单的功能代码汇总：
基础表单
```html
<form action="/submit-form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">
</form>
```
文本输入
```html
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<label for="url">网址:</label>
<input type="url" id="url" name="url">
```
数字和日期输入
```html
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="0" max="120">
<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate">
```
单选按钮和复选框
```html
<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<!-- 复选框 -->
<label><input type="checkbox" name="subscribe" value="newsletter"> 订阅新闻通讯</label>
```
下拉列表
```html
<label for="country">国家:</label>
<select id="country" name="country">
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="canada">加拿大</option>
<!-- 更多选项 -->
</select>
```
文本域
```html
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea>
```
文件上传
```html
<label for="file">上传文件:</label>
<input type="file" id="file" name="file">
```
隐藏字段
```html
<input type="hidden" name="hiddenField" value="someValue">
```
表单提交按钮
```html
<input type="submit" value="提交">
<button type="submit">提交</button>
```
表单重置按钮
```html
<input type="reset" value="重置">
```
表单属性
```html
<form action="/submit-form" method="post" enctype="multipart/form-data">
<!-- 表单元素 -->
</form>
```
表单字段集
```html
<fieldset>
<legend>个人资料</legend>
<!-- 表单元素 -->
</fieldset>
```
表单验证
```html
<input type="email" name="email" required>
<input type="password" name="password" pattern=".{8,}" title="密码至少8个字符">
```
自定义表单样式
```html
<style>
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0 20px 0;
border: 1px solid #ccc;
}
input[type="submit"],
input[type="reset"],
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover {
opacity: 0.8;
}
</style>
```
使用JavaScript处理表单
```html
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 处理表单数据
});
</script>
```
表单是HTML中用于与用户交互的重要部分。通过CSS和JavaScript，可以进一步自定义表单的样式和行为，以提高用户体验。
分区响应式设计
在HTML中，分区（也称为布局或区域）用于组织页面内容，而响应式设计则确保页面在不同设备上都能良好地展示。以下是一些关于HTML分区响应式设计的功能代码汇总：
基础分区
```html
<div class="container">
<!-- 页面内容 -->
</div>
```
响应式布局
```html
<div class="row">
<div class="col-md-8">左侧区域</div>
<div class="col-md-4">右侧区域</div>
</div>
```
响应式网格布局
```html
<div class="container">
<div class="row">
<div class="col-md-12">全宽区域</div>
</div>
<div class="row">
<div class="col-md-6">左侧区域</div>
<div class="col-md-6">右侧区域</div>
</div>
</div>
```
响应式列偏移
```html
<div class="container">
<div class="row">
<div class="col-md-8">左侧区域</div>
<div class="col-md-2">右侧区域</div>
</div>
</div>
```
响应式列排序
```html
<div class="container">
<div class="row">
<div class="col-md-4">左侧区域</div>
<div class="col-md-8">右侧区域</div>
</div>
</div>
```
响应式栅格系统
```html
<div class="container">
<div class="row">
<div class="col-md-12">全宽区域</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">左侧区域</div>
<div class="col-md-6 col-lg-4">中间区域</div>
<div class="col-md-6 col-lg-4">右侧区域</div>
</div>
</div>
```
响应式布局与列排序
```html
<div class="container">
<div class="row">
<div class="col-md-4">左侧区域</div>
<div class="col-md-4">中间区域</div>
<div class="col-md-4">右侧区域</div>
</div>
</div>
```
响应式列偏移
```html
<div class="container">
<div class="row">
<div class="col-md-8">左侧区域</div>
<div class="col-md-2">右侧区域</div>
</div>
</div>
```
响应式列排序
```html
<div class="container">
<div class="row">
<div class="col-md-4">左侧区域</div>
<div class="col-md-4">中间区域</div>
<div class="col-md-4">右侧区域</div>
</div>
</div>
```
响应式栅格系统
```html
<div class="container">
<div class="row">
<div class="col-md-12">全宽区域</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">左侧区域</div>
<div class="col-md-6 col-lg-4">中间区域</div>
<div class="col-md-6 col-lg-4">右侧区域</div>
</div>
</div>
```
响应式布局与列排序
```html
<div class="container">
<div class="row">
<div class="col-md-4">左侧区域</div>
<div class="col-md-4">中间区域</div>
<div class="col-md-4">右侧区域</div>
</div>
</div>
```
元数据和脚本
在HTML中，元数据用于提供关于网页的信息，而脚本用于添加交互性和动态功能。以下是一些关于HTML元数据和脚本的功能代码汇总：
元数据
字符集声明
```html
<meta charset="UTF-8">
```
视口设置
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
页面描述
```html
<meta name="description" content="页面描述">
```
关键词
```html
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
```
网页作者
```html
<meta name="author" content="作者名称">
```
搜索引擎索引控制
```html
<meta name="robots" content="index, follow">
```
网页重定向
```html
<meta http-equiv="refresh" content="5; url=http://www.example.com">
```
针对移动设备的元数据
```html
<meta name="format-detection" content="telephone=no">
```
针对视障人士的元数据
```html
<meta name="apple-mobile-web-app-capable" content="yes">
```
脚本
内联脚本
```html
<script>
// JavaScript 代码
</script>
```
外部脚本
```html
<script src="script.js"></script>
```
事件处理
```html
<button οnclick="myFunction()">点击我</button>
<script>
function myFunction() {
alert('按钮被点击了！');
}
</script>
```
表单验证
```html
<input type="text" οnblur="validateInput()">
<script>
function validateInput() {
var inputValue = document.getElementById('input').value;
if (inputValue === '') {
alert('输入不能为空！');
}
}
</script>
```
动态内容加载
```html
<div id="content"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('content').innerHTML = data.content;
}
};
xhr.send();
</script>
```
表单提交
```html
<form id="myForm">
<!-- 表单元素 -->
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var formData = new FormData(this);
fetch('/submit-form', {
method: 'POST',
body: formData
});
});
</script>
```
这些代码示例展示了如何在HTML中使用元数据和脚本来增强网页的功能和交互性。通过合理使用这些元素，可以创建更加动态和功能丰富的网页。
语义元素
HTML 语义元素（Semantic Elements）是一组HTML标签，它们被设计为表示文档的特定结构部分，而不是其内容。这些元素有助于提高网页的可读性，并为搜索引擎优化（SEO）提供帮助。以下是一些常用的 HTML 语义元素及其功能代码汇总：
头部（Header）
```html
<header>
<h1>页面标题</h1>
<nav>导航链接</nav>
</header>
```
主体（Main）
```html
<main>
<section>
<h2>章节标题</h2>
<p>章节内容</p >
</section>
<!-- 更多章节 -->
</main>
```
侧边栏（Sidebar）
```html
<aside>
<h2>侧边栏标题</h2>
<nav>侧边栏导航链接</nav>
</aside>
```
文章（Article）
```html
<article>
<h2>文章标题</h2>
<p>文章内容</p >
</article>
```
段落（Paragraph）
```html
<p>这是一个段落。</p >
```
引用（Blockquote）
```html
<blockquote>
<p>引用文本</p >
</blockquote>
```
列表（List）
```html
<ul>
<li>无序列表项 1</li>
<li>无序列表项 2</li>
<!-- 更多列表项 -->
</ul>
<ol>
<li>有序列表项 1</li>
<li>有序列表项 2</li>
<!-- 更多有序列表项 -->
</ol>
```
表格（Table）
```html
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<!-- 更多行和列 -->
</tbody>
</table>
```
表单（Form）
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<input type="submit" value="提交">
</form>
```
按钮（Button）
```html
<button>点击我</button>
```
输入（Input）
```html
<input type="text" placeholder="请输入">
```
文本域（Textarea）
```html
<textarea placeholder="请输入"></textarea>
```
选择（Select）
```html
<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<!-- 更多选项 -->
</select>
```
标签（Label）
```html
<label for="input">输入框：</label>
```
进度条（Progress）
```html
<progress value="50" max="100"></progress>
```
音频（Audio）
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
```
视频（Video）
```html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
```
嵌入（Embed）
```html
<embed src="embed.swf" width="100" height="100">
```
图像（Image）
```html
< img src="image.jpg" alt="描述">
``
