常见的HTML标签有哪些？
2023-11-01 15:21:36
1298
来源：互联网
HTML（Hypertext Markup Language）是用于创建网页结构的标记语言，它使用一系列标签来定义网页的不同部分。以下是一些常见的HTML标签：
1. ：定义HTML文档的根元素。
2.
：定义文档的头部区域，包含了文档的元数据。
3.
：定义文档的标题，显示在浏览器的标题栏或标签页上。<br />
4. <body>：定义文档的主体部分，包含了网页的可见内容。<br />
5. <h1>到<h6>：定义标题，从大到小分为六个级别。<br />
6. <p>：定义段落。<br />
7. <a>：定义超链接，用于创建链接到其他页面或文档的锚点。<br />
8. <img>：定义图像，用于在网页中插入图片。<br />
9. <ul>：定义无序列表，用于显示项目的列表。<br />
10. <ol>：定义有序列表，用于显示按顺序排列的项目列表。<br />
11. <li>：定义列表项，在无序列表或有序列表中使用。<br />
12. <div>：定义文档中的一个区块或容器，用于组织和样式化内容。<br />
13. <span>：定义文档中的行内元素，用于对文本进行样式化或标记。<br />
14. <table>：定义表格，用于展示数据。<br />
15. <tr>：定义表格中的行。<br />
16. <td>：定义表格中的单元格。<br />
17. <form>：定义表单，用于用户输入和提交数据。<br />
18. <input>：定义输入字段，如文本框、复选框、按钮等。<br />
19. <textarea>：定义多行文本输入字段。<br />
20. <button>：定义按钮。</p>
<p>这只是一小部分常见的HTML标签，HTML还有许多其他标签可以用于不同的目的。开发人员可以根据需要选择适当的标签来构建网页的结构和内容。</p>
域名注册价格：<br><a style="color:blue;" target="_blank" href="https://m.juming.com/regym.htm?t=seo_adyd1">https://m.juming.com/regym.htm?t=seo_adyd1</a><br>域名一口价交易：<br><a style="color:blue;" target="_blank" href="https://m.juming.com/ykj/?t=seo_adyd2">https://m.juming.com/ykj/?t=seo_adyd2</a><br> </div>
<div class="breif">
<div class="keywords">
<span>关键词：</span>
<a target="" class="keys" title="HTML标签" href="/zx/tag/HTML标签.html" >HTML标签</a><a target="" class="keys" title="HTML" href="/zx/tag/HTML.html" >HTML</a> </div>
</div>
</div>
<div class="sj_news bdb20">
<h3>常见问题相关文章</h3>
<ul class="news_content">
<li class="clear">
<div class="item">
<a href="/zx/21251.html" class="title">html缓存机制是什么？ html缓存机制有哪些</a>
<p class="txt">HTML缓存机制是指在Web开发中，对HTML文件进行缓存以提高网页加载速度和减少网络流量的一种机制。HTML缓存机制可以在客户端（浏览器）和服务器端进行，以实现不同的缓存策略和控制。</p>
<div class="tag flex">
<span>浏览量：1554</span>
<span>时间：340天前</span>
</div>
</div>
</li>
<li class="clear">
<div class="item">
<a href="/zx/21035.html" class="title">常见的HTML标签有哪些？</a>
<p class="txt">HTML（Hypertext Markup Language）是用于创建网页结构的标记语言，它使用一系列标签来定义网页的不同部分。以下是一些常见的HTML标签：</p>
<div class="tag flex">
<span>浏览量：1298</span>
<span>时间：355天前</span>
</div>
</div>
</li>
<li class="clear">
<div class="item">
<a href="/zx/20210.html" class="title">html css javascript三者关系讲解？</a>
<p class="txt">HTML、CSS和JavaScript是构建现代网页的三种核心技术，它们各自承担不同的角色和功能。</p>
<div class="tag flex">
<span>浏览量：1692</span>
<span>时间：420天前</span>
</div>
</div>
</li>
<li class="clear">
<div class="item">
<a href="/zx/20208.html" class="title">什么是html5？html5和html的区别有哪些？</a>
<p class="txt">HTML5是HTML（超文本标记语言）的第五个版本，它是Web标准的最新进展。HTML5引入了许多新的功能和语义化元素，旨在提供更好的用户体验和更丰富的多媒体支持。</p>
<div class="tag flex">
<span>浏览量：1309</span>
<span>时间：420天前</span>
</div>
</div>
</li>
<li class="clear">
<div class="item">
<a href="/zx/18898.html" class="title">什么是html5、html?两者有什么区别？</a>
<p class="txt">关于HTML5相关介绍
HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。随着时间的推移，HTML已经出现了许多更新，目前最新的HTML版本是HTML5。它仍然是一种标记语言，但它为原始的HTML添加了许多功能，并且消除了XHTML中存在的一些严格性。它大大的改善了用户体验。</p>
<div class="tag flex">
<span>浏览量：1867</span>
<span>时间：482天前</span>
</div>
</div>
</li>
<li class="clear">
<div class="item">
<a href="/zx/18551.html" class="title">html是什么意思?</a>
<p class="txt">HTML是英文Hypertext Markup Language的缩写，即“超文本标记语言”的意思。它是一种用于创建网页的标准标记语言，是Web页面中最基本的构建块。HTML通过标记文本来描述Web页面的结构和语义，并提供了各种标记和元素，使得用户可以添加文字、图像、音频、视频、表格、超链接等各类富媒体内容，实现了Web上的各种多媒体效果。</p>
<div class="tag flex">
<span>浏览量：1610</span>
<span>时间：497天前</span>
</div>
</div>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/common/mobile/css/poster.css">
<script src="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/common/mobile/js/html2canvas.min.js"></script>
<script src="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/common/mobile/js/qrcode.min.js"></script>
<button class="share" id="schaibao_btn" style="display: none">
<svg t="1584523687012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4141">
<path d="M652.189 114.635s-55.86-22.614-140.234-22.614c-84.37 0-140.23 25.903-140.23 25.903l280.549 285.449-0.085-288.738z"
fill="#FB5453" p-id="4142"></path>
<path d="M811.202 217.796c-61.928-58.727-121.8-79.649-121.8-79.649l-2.06 392.072 210.411-199.332c0 0.085-24.535-54.364-86.55-113.09z"
fill="#6468F1" p-id="4143"></path>
<path d="M906.498 368.778L617.205 645.535h292.667s22.95-55.119 22.95-138.419c-0.087-83.215-26.324-138.338-26.324-138.338z"
fill="#5283F0" p-id="4144"></path>
<path d="M696.62 887.697s56.813-22.842 118.033-80.602c61.223-57.757 83.1-113.488 83.1-113.488l-409.132-1.946L696.62 887.697z"
fill="#00B2FE" p-id="4145"></path>
<path d="M371.806 911.213s55.864 22.61 140.234 22.61c84.455 0 140.234-25.902 140.234-25.902l-280.548-285.45 0.08 288.742z"
fill="#66D020" p-id="4146"></path>
<path d="M224.484 808.047c61.934 58.732 121.806 79.65 121.806 79.65l2.057-392.072-210.411 199.33c0.084-0.08 24.619 54.365 86.548 113.092z"
fill="#9AD122" p-id="4147"></path>
<path d="M114.134 368.778s-22.956 55.107-22.956 138.378c0 83.276 26.244 138.379 26.244 138.379l289.372-276.672h-292.66v-0.085z"
fill="#FFC71A" p-id="4148"></path>
<path d="M339.07 138.147s-56.814 22.843-118.034 80.6c-61.222 57.758-83.1 113.494-83.1 113.494l409.132 1.942L339.07 138.147z"
fill="#FF7612" p-id="4149"></path>
</svg>
分享朋友圈
</button>
<div class="back-item">
<div id="h-poster">
<div class="h-logo"><img src="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/common/mobile/images/mo-logo.png"/></div>
<div class="poster-box">
<div class="poster-time">2023-11-01 15:21:36</div>
<div class="poster-main">
<div class="poster-tit">常见的HTML标签有哪些？</div>
<div class="poster-con">
HTML（HypertextMarkupLanguage）是用于创建网页结构的标记语言，它使用一系列标签来定义网页的不同部分。以下是一些常见的HTML标签：1.：定义HTML文档的根元素。2.：定义文档的头部区域，包含了文档的元数据。3.：定义文档的标题，显示在浏览器的标题栏或标签页上。4.：定义文档的主体部分，包含了网页的可见内容。5.到：定义标题，从大到小分为六个级别。6.：定义段落。7.：定义超链接，用于创建链接到其他页面或文档的锚点。8.：定义图像，用于在网页中插入图片。9.：定义无序列表，用于显示项目的列表。10.：定义有序列表，用于显示按顺序排列的项目列表。11.：定义列表项，在无 ...
</div>
</div>
<div class="poster-bottom">
<img class='ercode' src="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/common/images/haibao/21035.png">
<div class="poster-bottom-right">
<h3>长按识别查看完整新闻</h3>
<p>网址：www.juming.com</p>
<p>电话：400-997-2996</p>
</div>
</div>
</div>
<div style="width:100%;height:.5rem;"></div>
</div>
</div>
<a class="share_login" style="display:none;position: fixed;left: 0;bottom: 0;width: 100%" target="_blank" href="https://m.juming.com/ykj/?t=seo_wz">
<img src="https://juming-zx.oss-cn-hangzhou.aliyuncs.com/style/img/zc_pop1.png" width="100%" alt="">
</a>
<div class="finalDiv">
<img src="" id="finalImg"/>
<div class="mo-save">长按图片保存，分享朋友圈！</div>
</div>
<div class="mo-mask"></div>
<div class="mo-draw">绘制海报中</div>
<div class="mohb-zz"></div>
<div class="sj_footer" style="padding-bottom: 40px">
<p>Copyright © 2019 <br>
ALL rights reserved 皖B2-20190026-19 <br>
聚名网版权所有</p>
</div>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>
<script>
var cloneDom = null;
var clientH = $(window).height();
//获取需要截取DOM宽高
var height = $("#h-poster")[0].clientHeight;
var width = $("#h-poster").width();
function takeScreenshot(callback) {
var canvas = document.createElement("canvas")
canvas.setAttribute('id', 'thecanvas');
const scaleSize = 2;
canvas.width = width * scaleSize;
canvas.height = height * scaleSize;
canvas.style.width = width / 100 + "rem";
canvas.style.height = height / 100 + "rem";
//获取设备宽度
let clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas font字体的占比进行设置
let fontWidth = clientWidth * 3 * 12.5 / 750;
//设置自适应的字体大小
canvas.font = fontWidth + "px sans-serif";
var context = canvas.getContext("2d");
context.scale(scaleSize, scaleSize);
var rect = cloneDom.get(0).getBoundingClientRect(); //获取元素相对于视察的偏移量
context.translate(0, -rect.top);
html2canvas(cloneDom, {
canvas: canvas,
allowTaint: false,
useCORS: true,
x: 0,
y: scrollTop, // 用网页滚动的高度定位y轴顶点
height: height,
width: width,
onrendered: function (canvas) {
document.body.appendChild(canvas);
callback();
cloneDom.remove(); //清空克隆的内容
},
});
};
function canvastoImg(canvas, id) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
$("#thecanvas").remove();
$('.mo-draw').hide();
$("#" + id).attr('src', image.src);
$('.finalDiv').show();
return image;
}
//滚动高度获取
var scrollTop = 0;
$(window).scroll(function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
})
$(function () {
$.ajax({
url: '/user_zh/islogin',
dataType: 'json',
type: 'get',
success: function (res) {
if(res.uid != 0){
$("#schaibao_btn").show();
} else {
$(".login_pop1,.login-mask").show();
}
}
})
$(".logo_close").click(function (e) {
e.preventDefault()
e.stopPropagation();
$(".login_pop1,.login-mask").hide();
})
$('.mohb-zz').on('click', function () {
$('.finalDiv').hide();
$(this).hide();
$('#finalImg').prop("src", "");
cloneDom.css({
"marginTop": "-99999999px",
});
});
//点击触发绘制海报
$("#schaibao_btn").click(function () {
//克隆节点，默认为false，即不复制方法属性，为true是全部复制。
cloneDom = $("#h-poster").clone(true);
cloneDom.css({
"background-color": "linear-gradient(to bottom, #09004e 0%,#0f007e 100%)",
"position": "absolute",
"top": "0",
"marginTop": "-99999999px",
"z-index": "-2",
"height": height,
"width": width
});
$("body").append(cloneDom);
//遮罩，提示框展示
$('.mohb-zz,.mo-draw').show();
//
$('.mo-mask').css({
"height": clientH
});
//克隆DOM置顶
cloneDom.css({
"marginTop": "0"
});
//页面返回顶部
if (scrollTop > 5) {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
//延迟绘制海报，防止图片未绘制完成。
setTimeout(function () {
takeScreenshot(function () {
canvastoImg(document.getElementsByTagName("canvas")[0],
'finalImg');
})
}, 2000);
});
});
</script>
