html常用标签及其功能包括：1. 是网页根元素；2.
和定义头部信息和主体内容；3.
设置网页标题；4. <h1>到<h6>为标题标签；5. </h6>
</h1>
<p>和<br>用于段落和换行；6. </p>
<ul>、</ul>
<ol>和<li>用于列表；7. 创建链接；8. <table>、<tr>、<th>和</th>
<td>构建表格；9. <form>、<input>、<textarea>、<select>和<button>用于表单；10. <img alt="html中各种标签的作用 常用html标签功能速查手册" >、和<video>嵌入多媒体；11. <div>和<span>用于布局和样式化，这些标签帮助构建结构清晰的网页。<p><img src="https://www.onehaoka.com/content/uploadfile/202506/19281750051788.jpeg" alt="html中各种标签的作用 常用html标签功能速查手册"></p>
<p>在Web开发中，HTML标签是构建网页结构的基础。虽然HTML标签种类繁多，但掌握一些常用标签的功能可以帮助我们更高效地构建和理解网页。今天，我们就来聊聊这些常用的HTML标签及其作用。</p>
<p>让我们从最基本的标签开始，标签是网页的根元素，包裹了整个网页内容。紧接着是</p>和，分别用于定义网页的头部信息和主体内容。头部通常包含<title>标签，用于设置网页标题，这个标题会在浏览器的标签页上显示。<p>再来说说文本相关的标签。</p>
<h1>到<h6>是标题标签，用于设置不同级别的标题。</h6>
</h1>
<p>标签用于段落，而<br>标签用于换行。列表相关的标签有</p>
<ul>（无序列表）和</ul>
<ol>（有序列表），以及<li>（列表项）。链接的创建离不开标签，它的href属性指定链接的目标地址。<p><span>立即学习</span>“前端免费学习笔记（深入）”；</p>
<p>表格的构建需要用到</p><table>标签，<tr>定义表格行，<th>定义表格头部单元格，</th>
<td>定义表格数据单元格。表单的创建则依赖<form>标签，常见的表单元素有<input>（输入框）、<textarea>（多行文本输入框）、<select>（下拉列表）和<button>（按钮）。<p>多媒体内容的展示也离不开特定的标签。<img alt="html中各种标签的作用 常用html标签功能速查手册" >标签用于插入图片，src属性指定图片的URL。和<video>标签分别用于嵌入音频和视频内容。</video></p>
<p>最后，</p>
<div>和<span>是两个非常灵活的标签。<div>通常用于布局，创建块级元素，而<span>用于内联元素，通常用于文本的样式化。<p>通过这些标签，我们可以构建出结构清晰、功能丰富的网页。以下是一些常用标签的示例代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<br>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="https://www.example.com">Visit Example.com</a>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
<form>
<input type="text" name="username" placeholder="Username">
<textarea name="comment" placeholder="Comment"></textarea>
<select name="option">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button type="submit">Submit</button>
</form>
@@##@@
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<div style="background-color: lightgray;">
This is a div element.
</div>
<span style="color: red;">This is a span element.</span>
</body>
</html></pre><div class="contentsignin">登录后复制</div></div>
<aside class="x_nav_nav">
<div class="x_nav_icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="17" y1="10" x2="3" y2="10"></line>
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="21" y1="14" x2="3" y2="14"></line>
<line x1="17" y1="18" x2="3" y2="18"></line>
</svg>
<span class="x_nav_title">目录</span>
<!-- 新增位置切换按钮 -->
<div class="x_nav_position_btn">⚙️</div>
</div>
<!-- 位置选择菜单 -->
<div class="x_nav_position_menu">
<div class="x_nav_pos_opt" data-pos="left">左侧</div>
<div class="x_nav_pos_opt" data-pos="right">右侧</div>
</div>
</aside>
<div class="x_nav_page_toc">
<ul class="x_nav_anchor-list"></ul>
</div>
<div class="overlay"></div>
<style type='text/css'>
.x_nav_nav {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
padding: 0.5rem;
background-color: #ffffff;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
z-index: 100;
width: 60px;
border-radius: 0px 15px 15px 0px;
transition: opacity 0.2s ease;
}
.x_nav_icon {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 5px;
}
.x_nav_title {
color: #000000;
writing-mode: vertical-rl;
margin: 0.5rem 0;
}
.x_nav_page_toc {
position: fixed;
top: 50%;
left: 60px;
transform: translateY(-50%);
padding: 0.5rem;
background-color: #ffffff;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
z-index: 99;
width: 250px;
max-height: 0;
overflow-y: auto;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.3s ease;
border-radius: 15px;
display: none;
}
.x_nav_anchor-list {
list-style-type: none;
padding-left: 0;
margin: 0;
max-height: 450px;
overflow-y: auto;
}
.x_nav_anchor-list li {
margin-bottom: 0.3rem;
}
.x_nav_anchor-list a {
text-decoration: none;
color: #333333;
display: block;
padding: 0.2rem 0;
transition: color 0.3s ease;
position: relative;
padding-left: 15px;
}
.x_nav_anchor-list a::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: #2c9eff;
}
.x_nav_anchor-list a:hover,
.x_nav_anchor-list a:focus {
color: #007bff;
text-decoration: none;
}
.toc-h1 {
font-size: 15px;
font-weight: normal;
color: #333;
}
.toc-h2 {
font-size: 14px;
font-weight: normal;
color: #555;
margin-left: 10px;
}
.toc-h3 {
font-size: 13px;
font-weight: normal;
color: #777;
margin-left: 20px;
}
.toc-h4 {
font-size: 12px;
font-weight: normal;
color: #999;
margin-left: 30px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 0%);
z-index: 98;
display: none;
}
/* 位置切换按钮 */
.x_nav_position_btn {
cursor: pointer;
font-size: 12px;
margin-top: 0px;
padding: 0px; /* 增加点击区域 */
opacity: 0.6;
transition: opacity 0.2s;
position: relative;
}
.x_nav_position_btn:hover {
opacity: 1;
}
/* 位置选择菜单 */
.x_nav_position_menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 6px;
padding: 8px 0;
min-width: 60px;
display: none;
z-index: 101;
border: 1px solid #eee;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(-5px);
}
.x_nav_position_menu.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.x_nav_pos_opt {
cursor: pointer;
padding: 6px 16px;
font-size: 13px;
color: #333;
transition: all 0.2s;
}
.x_nav_pos_opt:hover {
background: #f8f9fa;
color: #007bff;
}
/* 位置菜单小箭头 */
.x_nav_position_menu::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
/* 右侧目录样式 */
.x_nav_nav[right] {
left: auto;
right: 2px;
border-radius: 15px 0 0 15px;
}
.x_nav_page_toc[right] {
left: auto;
right: 60px;
}
/* 调整位置菜单的右侧定位 */
.x_nav_nav[right] .x_nav_position_menu {
left: auto !important;
right: 50%;
transform: translateX(8px);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var className = ".markdown";
var selectors = [];
for (var i = 1; i <= 6; i++) {
selectors.push(className + ' h' + i);
}
var headings = document.querySelectorAll(selectors.join(', '));
var nav = document.querySelector('.x_nav_nav');
var tocContainer = document.querySelector('.x_nav_page_toc');
var anchorList = document.querySelector('.x_nav_anchor-list');
var overlay = document.querySelector('.overlay');
var currentHighlight = null;
if (headings.length === 0) {
nav.style.display = 'none';
return;
}
headings.forEach(function (heading, index) {
var level = parseInt(heading.tagName[1]);
var id = 'toc-' + level + '-' + (index + 1);
heading.id = id;
var listItem = document.createElement('li');
var anchor = document.createElement('a');
var number = document.createElement('span');
number.className = 'number-' + level;
anchor.innerHTML = heading.textContent;
anchor.insertBefore(number, anchor.firstChild);
anchor.href = '#' + id;
listItem.appendChild(anchor);
if (level === 2) {
anchor.insertAdjacentHTML('afterbegin', ' ');
} else if (level === 3) {
anchor.insertAdjacentHTML('afterbegin', ' ');
} else if (level === 4) {
anchor.insertAdjacentHTML('afterbegin', ' ');
}
anchor.classList.add('toc-h' + level);
anchorList.appendChild(listItem);
anchor.addEventListener('click', function (e) {
e.preventDefault();
if (currentHighlight) {
currentHighlight.classList.remove('highlighted');
}
listItem.classList.add('highlighted');
currentHighlight = listItem;
var targetId = this.getAttribute('href').substring(1);
var targetElement = document.getElementById(targetId);
if (targetElement) {
var header = document.querySelector("header"); // 替换为实际导航栏选择器
var headerHeight = header ? header.offsetHeight : 0;
var elementPosition = targetElement.offsetTop;
var offsetPosition = elementPosition - headerHeight;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
hideToc();
});
});
nav.addEventListener('click', function () {
if (tocContainer.style.display === 'block') {
hideToc();
} else {
showToc();
}
});
function showToc() {
tocContainer.style.display = 'block';
tocContainer.style.maxHeight = '500px';
tocContainer.style.opacity = '1';
overlay.style.display = 'block';
nav.style.opacity = '0';
nav.style.pointerEvents = 'none';
}
function hideToc() {
tocContainer.style.maxHeight = '0';
tocContainer.style.opacity = '0';
overlay.style.display = 'none';
setTimeout(() => {
tocContainer.style.display = 'none';
nav.style.opacity = '1';
nav.style.pointerEvents = 'auto';
}, 300);
}
overlay.addEventListener('click', function () {
hideToc();
});
});
document.addEventListener('DOMContentLoaded', function () {
// 初始化目录位置（读取本地存储）
const savedPos = localStorage.getItem('xNavPosition') || 'left';
setTocPosition(savedPos);
// 位置切换按钮点击事件
const posBtn = document.querySelector('.x_nav_position_btn');
const posMenu = document.querySelector('.x_nav_position_menu');
posBtn.addEventListener('click', function(e) {
e.stopPropagation();
posMenu.style.display = posMenu.style.display === 'block' ? 'none' : 'block';
posMenu.classList.add('show');
});
// 位置选择事件
document.querySelectorAll('.x_nav_pos_opt').forEach(opt => {
opt.addEventListener('click', function() {
const pos = this.dataset.pos;
setTocPosition(pos);
localStorage.setItem('xNavPosition', pos); // 保存偏好
posMenu.style.display = 'none';
posMenu.classList.remove('show');
});
});
// 点击其他地方关闭菜单
document.addEventListener('click', function() {
posMenu.style.display = 'none';
});
});
// 设置目录位置函数
function setTocPosition(pos) {
const nav = document.querySelector('.x_nav_nav');
const toc = document.querySelector('.x_nav_page_toc');
nav.removeAttribute('right');
toc.removeAttribute('right');
if (pos === 'right') {
nav.setAttribute('right', '');
toc.setAttribute('right', '');
}
// 添加右侧边界检查
const menu = document.querySelector('.x_nav_position_menu');
if (pos === 'right') {
const rect = menu.getBoundingClientRect();
if (rect.right > window.innerWidth) {
menu.style.transform = 'translateX('+(window.innerWidth - rect.right - 10) + 'px)';
}
}
}
</script>
<style>
/* 超小屏幕隐藏 */
@media (max-width: 768px) {
#qrcode-right {
display: none;
}
}
</style>
<div class="copyright-plugin" style="padding:10px; font-size:14px; display:flex; justify-content: space-between; align-items: center;">
<div>
文章作者：<a href="https://www.onehaoka.com/">磁力搜索</a><br />
文章标题：<a href="https://www.onehaoka.com/2353.html">html中各种标签的作用 常用html标签功能速查手册</a><br />
文章链接：<a href="https://www.onehaoka.com/2353.html">https://www.onehaoka.com/2353.html</a><br />
本站所有文章除特别声明外，均采用 <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' >CC BY-NC-SA 4.0</a> 许可协议，转载请注明来自<a href="https://www.onehaoka.com/">磁力搜索</a> ！
</div>
</div>
</br><div class="posts_related"><h3>📚 推荐阅读</h3><ul><li><a href="https://www.onehaoka.com/5681.html">PS怎样制作故障扫描线 扫描线效果的创意添加</a></li><li><a href="https://www.onehaoka.com/5668.html">html中href的用法 超链接href的5种参数写法</a></li><li><a href="https://www.onehaoka.com/5482.html">电影天堂lol 庆余年</a></li><li><a href="https://www.onehaoka.com/5282.html">电影天堂异形夺命舰</a></li><li><a href="https://www.onehaoka.com/4157.html">html中如何设置列表样式？列表美化方法详解</a></li></ul></div></br> <nav class="neighbor-log"> <span class="prev-log"><a href="https://www.onehaoka.com/2354.html">上一帖：原神雾切之回光怎么用-雾切之回光武器...</a></span>
<span class="next-log"><a href="https://www.onehaoka.com/2352.html">下一帖：仙剑世界攻略详细步骤有哪些-仙剑世界...</a></span>
</nav>
</article>
<div class="container log-con">
<div class="comment-header">还没收到回复</div>
<div id="pagenavi">
</div>
</div>
<footer class="blog-footer">
<div class="container footinfo small">
<div>
<div class="blog-footer-links">
<strong>友情链接：</strong>
<span><a href="http://m.qingmeilv.cn/" title="咖啡快讯网（m.qingmeilv.cn）是一个专注于商业、财经、科技及市场趋势的综合性资讯平台，致力于为企业家、投资者和职场人士提供及时、深度、有价值的行业动态与分析。我们聚焦全球经济、金融市场、科技创新、创业投资及消费趋势，帮助用户快速掌握关键信息，洞察商业先机。" target="_blank">咖啡快讯网</a></span>
</div>
</div>
<div><a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2023010212号-1</a></div> <script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c6d6f1bffa35e5a3a2e703df106c3619";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> </div>
</footer>
<script src="https://www.onehaoka.com/content/templates/minebbs/js/common_tpl.js?t=1749476557"></script>
<script src="https://www.onehaoka.com/content/templates/minebbs/js/zoom.js?t=1749476557"></script>
</body>
</html>