这篇文章主要介绍html常用标签及属性有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联专注于网站建设|
企业网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖
成都活动板房等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身设计品质网站。
HTML中的标签及属性
HTML页面结构
| 标签 | 描述 |
|---|
| 定义文档类型。 |
| 定义 HTML 文档。 |
| </td><td width="438">定义文档的标题。</td></tr><tr><td width="372"><body></td><td width="438">定义文档的主体。</td></tr><tr><td width="372"><h2> to <h7></td><td width="438">定义 HTML 标题。</td></tr><tr><td width="372"><p></td><td width="438">定义段落。</td></tr><tr><td width="372"><br></td><td width="438">定义简单的折行。</td></tr><tr><td width="372"><hr></td><td width="438">定义水平线。</td></tr><tr><td width="372"><!--...--></td><td width="438">定义注释。</td></tr></tbody></table><p><strong>表单</strong></p><table width="811"><thead><tr><th width="254">标签</th><th width="556">描述</th></tr></thead><tbody><tr><td width="254"><form></td><td width="556">定义供用户输入的 HTML 表单。</td></tr><tr><td width="254"><input></td><td width="556">定义输入控件。</td></tr><tr><td width="254"><textarea></td><td width="556">定义多行的文本输入控件。</td></tr><tr><td width="254"><button></td><td width="556">定义按钮。</td></tr><tr><td width="254"><select></td><td width="556">定义选择列表（下拉列表）。</td></tr><tr><td width="254"><optgroup></td><td width="556">定义选择列表中相关选项的组合。</td></tr><tr><td width="254"><option></td><td width="556">定义选择列表中的选项。</td></tr><tr><td width="254"><label></td><td width="556">定义 input 元素的标注。</td></tr><tr><td width="254"><fieldset></td><td width="556">定义围绕表单中元素的边框。</td></tr><tr><td width="254"><legend></td><td width="556">定义 fieldset 元素的标题。</td></tr><tr><td width="254"><datalist></td><td width="556">定义下拉列表。</td></tr><tr><td width="254"><keygen></td><td width="556">定义生成密钥。</td></tr><tr><td width="254"><output></td><td width="556">定义输出的一些类型。</td></tr></tbody></table><p><strong>框架</strong></p><table width="811"><thead><tr><th width="225">标签</th><th width="585">描述</th></tr></thead><tbody><tr><td width="225"><frame></td><td width="585">定义框架集的窗口或框架。</td></tr><tr><td width="225"><frameset></td><td width="585">定义框架集。</td></tr><tr><td width="225"><noframes></td><td width="585">定义针对不支持框架的用户的替代内容。</td></tr><tr><td width="225"><iframe></td><td width="585">定义内联框架。</td></tr></tbody></table><p><strong>图像</strong></p><table width="811"><thead><tr><th width="232">标签</th><th width="578">描述</th></tr></thead><tbody><tr><td width="232"><img></td><td width="578">定义图像。</td></tr><tr><td width="232"><map></td><td width="578">定义图像映射。</td></tr><tr><td width="232"><area></td><td width="578">定义图像地图内部的区域。</td></tr><tr><td width="232"><canvas></td><td width="578">定义图形。</td></tr><tr><td width="232"><figcaption></td><td width="578">定义 figure 元素的标题。</td></tr><tr><td width="232"><figure></td><td width="578">定义媒介内容的分组，以及它们的标题。</td></tr></tbody></table><p><strong>链接</strong></p><table width="811"><thead><tr><th width="198">标签</th><th width="612">描述</th></tr></thead><tbody><tr><td width="198"><a></td><td width="612">定义锚。</td></tr><tr><td width="198"><link></td><td width="612">定义文档与外部资源的关系。</td></tr><tr><td width="198"><nav></td><td width="612">定义导航链接。</td></tr></tbody></table><p><strong>列表</strong></p><table width="811"><thead><tr><th width="208">标签</th><th width="602">描述</th></tr></thead><tbody><tr><td width="208"><ul></td><td width="602">定义无序列表。</td></tr><tr><td width="208"><ol></td><td width="602">定义有序列表。</td></tr><tr><td width="208"><li></td><td width="602">定义列表的项目。</td></tr><tr><td width="208"><dir></td><td width="602">不赞成使用。定义目录列表。</td></tr><tr><td width="208"><dl></td><td width="602">定义定义列表。</td></tr><tr><td width="208"><dt></td><td width="602">定义定义列表中的项目。</td></tr><tr><td width="208"><dd></td><td width="602">定义定义列表中项目的描述。</td></tr><tr><td width="208"><menu></td><td width="602">定义命令的菜单/列表。</td></tr><tr><td width="208"><menuitem></td><td width="602">定义用户可以从弹出菜单调用的命令/菜单项目。</td></tr><tr><td width="208"><command></td><td width="602">定义命令按钮。</td></tr></tbody></table><p><strong>表格</strong></p><table width="811"><thead><tr><th width="239">标签</th><th width="571">描述</th></tr></thead><tbody><tr><td width="239"><table></td><td width="571">定义表格</td></tr><tr><td width="239"><caption></td><td width="571">定义表格标题。</td></tr><tr><td width="239"><th></td><td width="571">定义表格中的表头单元格。</td></tr><tr><td width="239"><tr></td><td width="571">定义表格中的行。</td></tr><tr><td width="239"><td></td><td width="571">定义表格中的单元。</td></tr><tr><td width="239"><thead></td><td width="571">定义表格中的表头内容。</td></tr><tr><td width="239"><tbody></td><td width="571">定义表格中的主体内容。</td></tr><tr><td width="239"><tfoot></td><td width="571">定义表格中的表注内容（脚注）。</td></tr><tr><td width="239"><col></td><td width="571">定义表格中一个或多个列的属性值。</td></tr><tr><td width="239"><colgroup></td><td width="571">定义表格中供格式化的列组。</td></tr></tbody></table><p><strong>样式/节</strong></p><table width="811"><thead><tr><th width="239">标签</th><th width="571">描述</th></tr></thead><tbody><tr><td width="239"><style></td><td width="571">定义文档的样式信息。</td></tr><tr><td width="239"><div></td><td width="571">定义文档中的节。</td></tr><tr><td width="239"><span></td><td width="571">定义文档中的节。</td></tr><tr><td width="239"><header></td><td width="571">定义 section 或 page 的页眉。</td></tr><tr><td width="239"><footer></td><td width="571">定义 section 或 page 的页脚。</td></tr><tr><td width="239"><section></td><td width="571">定义 section。</td></tr><tr><td width="239"><article></td><td width="571">定义文章。</td></tr><tr><td width="239"><aside></td><td width="571">定义页面内容之外的内容。</td></tr><tr><td width="239"><details></td><td width="571">定义元素的细节。</td></tr><tr><td width="239"><dialog></td><td width="571">定义对话框或窗口。</td></tr><tr><td width="239"><summary></td><td width="571">为 <details> 元素定义可见的标题。</td></tr></tbody></table><p><strong>员信息</strong></p><table width="811"><thead><tr><th width="173">标签</th><th width="637">描述</th></tr></thead><tbody><tr><td width="173"><head></td><td width="637">定义关于文档的信息。</td></tr><tr><td width="173"><meta></td><td width="637">定义关于 HTML 文档的元信息。</td></tr><tr><td width="173"><base></td><td width="637">定义页面中所有链接的默认地址或默认目标。</td></tr><tr><td width="173"><basefont></td><td width="637">不赞成使用。定义页面中文本的默认字体、颜色或尺寸。</td></tr></tbody></table><strong>属性</strong><table width="778"><thead><tr><th width="105">属性名</th><th width="107">英文</th><th width="218">英文含义</th><th width="193">取值</th><th width="169">应用场景</th></tr></thead><tbody><tr><td width="105">src</td><td width="107">SouRCe</td><td width="218">资源位置</td><td width="193">资源的路径</td><td width="169"><br/></td></tr><tr><td width="105">border</td><td width="107">border</td><td width="218">边框</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">size</td><td width="107">size</td><td width="218">尺寸</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">width</td><td width="107">width</td><td width="218">宽度</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">height</td><td width="107">height</td><td width="218">高度</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">bgcolor</td><td width="107">BackGround COLOR</td><td width="218">背景颜色</td><td width="193">颜色值：rea或#ffffff</td><td width="169"><br/></td></tr><tr><td width="105">background</td><td width="107">background</td><td width="218">背景图片</td><td width="193">图片路径</td><td width="169"><br/></td></tr><tr><td width="105">list-style</td><td width="107">list-style</td><td width="218">设置列表的所有属性</td><td width="193"><br/></td><td width="169">列表</td></tr><tr><td width="105">list-style-image</td><td width="107">list-style-image</td><td width="218">将图像设置为列表项标记</td><td width="193">None<br/>url</td><td width="169">列表</td></tr><tr><td width="105">list-style-type</td><td width="107">list-style-type</td><td width="218">设置列表项标记的类型</td><td width="193">Disc(实心圆)<br/>Cirle(空心圆)<br/>Square(实心方块)</td><td width="169">列表</td></tr><tr><td width="105">line-height</td><td width="107">line-height</td><td width="218">行高(行间距)</td><td width="193">数字(像素)</td><td width="169">布局多行文本</td></tr><tr><td width="105">text-align</td><td width="107">text-align</td><td width="218">对齐方式</td><td width="193">Left、right、center</td><td width="169">各种元素对齐</td></tr><tr><td width="105">letter-spacing</td><td width="107">letter-spacing</td><td width="218">字符间距</td><td width="193">数字(像素)</td><td width="169">加大字符间间隔</td></tr><tr><td width="105">text-decoration</td><td width="107">text-decoration</td><td width="218">文本修饰</td><td width="193">Underline、none</td><td width="169">加下划线、中划线等</td></tr><tr><td width="105">margin-top<br/>(right、bottom、left)</td><td width="107"><br/></td><td width="218">外边距</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">padding-top<br/>(right、bottom、left)</td><td width="107"><br/></td><td width="218">内边距</td><td width="193">数字(像素)</td><td width="169"><br/></td></tr><tr><td width="105">display</td><td width="107">display</td><td width="218">改变块级元素与行内元素的默认显示方式</td><td width="193">block(行变块)<br/>inline(块变行)<br/>none(该元素不显示在网页中)</td><td width="169"><br/></td></tr><tr><td width="105">position</td><td width="107">position</td><td width="218">定位</td><td width="193">static(静态定位)<br/>relative(相对定位)<br/>absolute(绝对定位)<br/>fixed(固定定位)</td><td width="169">用于定位</td></tr><tr><td width="105">float</td><td width="107">float</td><td width="218">浮动</td><td width="193">None、left、right</td><td width="169"><br/></td></tr><tr><td width="105">clear</td><td width="107">clear</td><td width="218">处理浮动塌陷</td><td width="193">left(清除左边浮动)<br/>right(清除右边浮动)<br/>both(清除两边浮动)<br/>none(不清除浮动)</td><td width="169"><br/></td></tr><tr><td width="105">type</td><td width="107">type</td><td width="218">列表类型</td><td width="193">Disc(实心圆)<br/>Cirle(空心圆)<br/>Square(实心方块)</td><td width="169">用于列表</td></tr><tr><td width="105">align</td><td width="107">align</td><td width="218">对齐</td><td width="193">Left、right、center<br/>top、middle、bottom</td><td width="169">段落内容水平对齐文字与图片垂直对齐</td></tr><tr><td width="105">type</td><td width="107">type</td><td width="218">表单元素类型</td><td width="193">text(文本)<br/>checkbox(复选)<br/>radio(单选)<br/>password(密码)<br/>file(文件)<br/>submit(提交)<br/>reset(重置)<br/>button(按钮)<br/>image(图片按钮)<br/>hidden(隐藏)<br/></td><td width="169">表单元素</td></tr><tr><td width="105">method</td><td width="107">method</td><td width="218">表单数据的提交方式</td><td width="193">get<br/>post</td><td width="169"><br/></td></tr><tr><td width="105">alt</td><td width="107">alter</td><td width="218">改变、替换(图片不显示时提示信息)</td><td width="193"><br/></td><td width="169">图片</td></tr><tr><td width="105">cellpadding</td><td width="107">cell padding</td><td width="218">单元格内边距</td><td width="193">数字</td><td width="169">表格</td></tr><tr><td width="105">cellspacing</td><td width="107">cell spacing</td><td width="218">单元格之间距离</td><td width="193">数字</td><td width="169">表格</td></tr><tr><td width="105">href</td><td width="107">Hypertext REFerence</td><td width="218">超文本引用(跳转到文件位置)</td><td width="193"><br/></td><td width="169"><br/></td></tr><tr><td width="105">rel</td><td width="107">RELationship</td><td width="218">关系(用于定义链接的文件和HTML文档之间的关系)</td><td width="193">StyleSheet样式表</td><td width="169">link链接一个文件时</td></tr><tr><td width="105">target</td><td width="107">target</td><td width="218">目标(网页打开的位置)</td><td width="193">_blank(新窗口打开)<br/>_self(自身窗口打开)<br/>_top(以整个浏览器作业作为窗口显示新页面)<br/>_parent(在父窗口中打开新的页面)</td><td width="169"><br/></td></tr><tr><td width="105">colspan</td><td width="107">COLumn span</td><td width="218">单元格跨列</td><td width="193">数字(跨的列数)</td><td width="169">表格</td></tr><tr><td width="105">rowspan</td><td width="107">row span</td><td width="218">单元格跨行</td><td width="193">数字(跨的行数)</td><td width="169">表格</td></tr><tr><td width="105">readonly</td><td width="107">read only</td><td width="218">只读</td><td width="193"><br/></td><td width="169"><br/></td></tr><tr><td width="105">value</td><td width="107">value</td><td width="218">输入框的初始值</td><td width="193"><br/></td><td width="169"><br/></td></tr><tr><td width="105">maxlength</td><td width="107">max length</td><td width="218">大长度</td><td width="193"><br/></td><td width="169"><br/></td></tr><tr><td width="105">scrolldelay</td><td width="107">scroll delay</td><td width="218">滚动延时</td><td width="193"><br/></td><td width="169">< m arquee></td></tr><tr><td width="105">direction</td><td width="107">direction</td><td width="218">方向(滚动方向)</td><td width="193"><br/></td><td width="169">< m arquee</td></tr></tbody></table><br/> <br>
本文名称：html常用标签及属性有哪些-创新互联 <br>
网站链接：<a href="http://whjierui.cn/article/dgepjd.html">http://whjierui.cn/article/dgepjd.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/cjidde.html">云虚拟主机与云服务器的区别有什么</a>
</li><li>
<a href="/article/cjidio.html">phppregmatch用法是什么</a>
</li><li>
<a href="/article/cjides.html">北斗智簿大K售799大可乐情何以堪？大K域名14岁</a>
</li><li>
<a href="/article/cjidsi.html">PHP如何实现git部署</a>
</li><li>
<a href="/article/cjidej.html">如何解决apachephp配置报错问题</a>
</li> </ul>
</div>
</div>
<footer>
<div class="foot-top">
<ul>
<li>
<div class="title">关于美图云海</div>
<div class="tbox">
<div class="txt">
美图云海专注于网站建设、小程序开发，
<br /> 用心做好每一个网站，懂您所需、做您所想！
<br /> 我们比其他网络公司做的更好、做的更多，
<br /> 为客户创造更大的价值，让客户更省心!
</div>
<a rel="nofollow" href="javascript:;" class="more">MORE</a>
</div>
</li>
<li>
<div class="title">相关专题</div>
<div class="tbox">
<a href="javascript:;" class="link">企业官网定制</a>
<a href="javascript:;" class="link">小程序开发</a>
<a href="javascript:;" class="link">品牌网站设计</a>
<a href="javascript:;" class="link">网站建设标签</a>
<a href="javascript:;" class="link">乐山网站建设</a>
<a href="javascript:;" class="link">高端网站设计</a>
<a href="javascript:;" class="link">公司做网站</a>
</div>
</li>
<li>
<div class="title">凭什么选择我们</div>
<div class="tbox">
<a class="link">专业设计团队</a>
<a class="link">快速响应服务</a>
<a class="link">7个软件著作权</a>
<a class="link">已服务3000+客户</a>
<a class="link">项目检测具体全面</a>
<a class="link">技术研发能力强劲</a>
<a class="link">深度符合SEO优化</a>
<a class="link">15项设计奖项</a>
<a class="link">完善的制作流程</a>
<a class="link">售后服务让您省心</a>
</div>
</li>
<li>
<div class="title">网站设计案例</div>
<div class="tbox">
<ul>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/gebaili.jpg" alt="哥百利" />
</div>
<div class="tboxs">
<div class="t1">哥百利</div>
<div class="t2">家具研发、设计、生产、服务为一体的专业实木家具订做企业</div>
</div>
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/cdshujin.jpg" alt="蜀锦在线" /></div>
<div class="tboxs">
<div class="t1">蜀锦在线</div>
<div class="t2">汽车行业网站建设</div>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="foot-center">
<ul>
<li>
<div class="f-ewm"><img alt="美图云海微信公众号" src="/Public/Home/images/ewm.jpg" /></div>
<div class="tbox ewm">
<div class="t1">扫一扫关注</div>
<div class="t2">专业团队为您解答</div>
</div>
</li>
<li>
<div class="tbox tel">
<div class="t1">电话/邮箱</div>
<div class="t2">400-028-6601 / 028-86922220<br>631063699@qq.com</div>
</div>
</li>
<li>
<div class="tbox sz">
<div class="t1">成都（总部）</div>
<div class="t2">成华区 双林路22号仁禾商务楼5F<br> 大客户专线：13518219792
</div>
</div>
</li>
<li>
<div class="tbox gz">
<div class="t1">网站建设（乐山站）</div>
<div class="t2">
乐山市市中区瑞祥路一段1507号
<br /> 028-86922220
</div>
</div>
</li>
</ul>
</div>
<div class="foot-button">
<div class="link-box" style="width:100%;float:none;">
<div class="a-box"></div>
<div style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;">
业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。
<br>服务区域包括成都市锦江区、青羊区、武侯区、金牛区、成华区、龙泉驿、温江、新都、高新区、成都市以及全国各地接受异地服务商的公司企业或者机构。
<br>
<div class="a-box"><span><b>友情链接</b></span>
<a href="https://www.cdcxhl.cn/
" title="php主机" target="_blank">php主机</a><a href="http://m.cdcxhl.com/" title="网站建设推广" target="_blank">网站建设推广</a><a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="成都温江机房" target="_blank">成都温江机房</a><a href="http://www.gtmaxf.com/" title="四川国泰民安消防" target="_blank">四川国泰民安消防</a><a href="http://www.baozgs.com/" title="成都食品包装设计" target="_blank">成都食品包装设计</a><a href="http://m.cdcxhl.cn/qiye/
" title="企业网站建设" target="_blank">企业网站建设</a><a href="http://www.nzjike.com/" title="沙滩旗帜" target="_blank">沙滩旗帜</a><a href="http://www.jyruizhi.cn/" title="jyruizhi.cn" target="_blank">jyruizhi.cn</a><a href="http://www.guanghanfdj.com/" title="广汉柴油发电机" target="_blank">广汉柴油发电机</a><a href="https://www.cdcxhl.com/gaiban/" title="网站改版" target="_blank">网站改版</a> </div>
</div>
<div class="copyright">©2025 青羊区美图云海设计工作室（个体工商户）乐山站 蜀ICP备19037934号</div>
</div>
</div>
</footer>
<div class="fixed-contact-wrap show">
<ul class="item-list clearfix">
<li class="phone">
<a rel="nofollow" target="_blank" href="tel:028-86922220"><i
class="icon"></i><strong>028-86922220</strong></a>
</li>
<li class="qq">
<a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><i
class="icon"></i><strong> 244261566</strong></a>
</li>
<li class="back-top">
<a href="#" rel="nofollow" class="back-to-top"><i class="icon"></i><strong> 回到顶部</strong></a>
</li>
</ul>
</div>
<script type="text/javascript">
//右侧联系我们悬浮窗
$(".fixed-contact-wrap").hover(function () {
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
})
function show_phone_menu() {
$(".right-side ul").toggle();
}
</script>
</body>
</html>
<script>
$(".con img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script> |
