html常用标签及属性有哪些-创新互联
这篇文章主要介绍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://kswjz.com/article/dgepjd.html">http://kswjz.com/article/dgepjd.html</a>
</div>
<div class="view-qrocde cl">
<div class="m z"><img src="/Public/Home/images/ew.jpg"/></div>
<div class="text">
<h6>扫二维码与项目经理沟通</h6>
<p>我们在微信上24小时期待你的声音</p>
<p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p>
</div>
</div>
<div class="othernews cl">
<h3>其他资讯</h3>
<ul>
<li><a href="/article/dicshis.html">发动机电脑板过热故障(汽车发动机电脑板发热)</a></li><li><a href="/article/dicshsi.html">安卓平台ios开发教程 安卓平台ios开发教程视频</a></li><li><a href="/article/dicsppc.html">html5网页播放器代码 html简单播放器</a></li><li><a href="/article/dicshig.html">html5泡泡上升 泡泡生成器怎么做</a></li><li><a href="/article/dicshec.html">mysql慢查询怎么排查 mysql查询太慢 数据量大 怎么优化</a></li> </ul>
</div>
</div>
</div>
<div class="sidebar">
<div class="tuijian">
<a href="#">
<h2 class="cl"><span>行业动态</span></h2>
<h3>企业网站建设的重要性！</h3>
<p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p>
</a>
</div>
<div class="ser sidesub">
<h2>服务项目</h2>
<ul class="ebox">
<li class="sub sub-1">
<div>
<h3>网站建设</h3>
<p></p>
<a class="btn" href="/serve/website/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>移动端/APP</h3>
<p></p>
<a class="btn" href="/serve/moblie/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>微信/小程序</h3>
<p></p>
<a class="btn" href="/serve/small/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>技术支持</h3>
<p></p>
<a class="btn" href="/serve/tech/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>其它服务</h3>
<p></p>
<a class="btn" href="/serve/othe/">查看详情</a>
</div>
</li>
<li class="sub sub-5">
<div>
<h3>更多服务项目</h3>
<p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p>
<a class="btn" href="/serve/">获取更多</a>
</div>
</li>
</ul>
</div>
<div class="contact" id="fix">
<h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2>
<h3>电话：13518219792</h3>
<p>如遇占线或暂未接听请拨：136xxx98888</p>
<div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div>
</div>
</div>
<script>
//固定滚动
(function () {
var oDiv = document.getElementById("fix");
var H = 120,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function ()
{
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "contact fixed";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "contact ";
}
};
}
})();
</script>
</div>
<div class="footer">
<div class="wp">
<div class="wpss cl">
<dl class="about">
<dt>网站设计</dt>
<dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="网站设计公司">网站设计公司</a></dd><dd><a href="https://www.cdxwcx.com/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.cqcxhl.com/" target="_blank" title="重庆网站设计">重庆网站设计</a></dd><dd><a href="http://www.cdkjz.cn/" target="_blank" title="高端网站设计">高端网站设计</a></dd> </dl>
<dl class="about">
<dt>网站制作</dt>
<dd><a href="http://www.36103.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://chengdu.kswjz.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://www.kswsj.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://www.kswcd.com/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd> </dl>
<dl class="contact">
<dt>联系我们</dt>
<dd>电话：13518219792</dd>
<dd>邮箱：631063699@qq.com</dd>
<dd>地址：成都青羊区锦天国际1002号</dd>
<dd>网址：www.kswjz.com</dd>
</dl>
<dl class="about" style="margin-left:50px;width:235px;">
<dt>网站建设</dt>
<dd><a href="http://www.cqcxhl.com/service/ds.html" target="_blank" title="重庆电商网站建设">重庆电商网站建设</a></dd><dd><a href="https://www.cdcxhl.com/qiye.html" target="_blank" title="成都企业网站建设">成都企业网站建设</a></dd><dd><a href="http://chengdu.cdcxhl.cn/" target="_blank" title="成都网站建设">成都网站建设</a></dd><dd><a href="http://www.cqwzjz.cn/" target="_blank" title="重庆网站建设">重庆网站建设</a></dd> </dl>
<dl class="flow">
<dt></dt>
<div class="ma cl">
<div class="m"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</div>
</dl>
</div>
</div>
<div class="footer-link wp">
<ul class="wpss cl">
<li class="fisrt">友情链接</li>
<li><a href="https://www.cdcxhl.com/" title="设计网站" target="_blank">设计网站</a></li><li><a href="http://www.cdhuace.com/" title="户外广告设计" target="_blank">户外广告设计</a></li><li><a href="https://www.cdcxhl.com/case/zkhuaxiang.html" title="成都花箱厂家" target="_blank">成都花箱厂家</a></li><li><a href="http://chengdu.cdcxhl.com/seo/" title="网站排名" target="_blank">网站排名</a></li><li><a href="https://www.cdcxhl.com/sosuo.html" title="网站排名优化" target="_blank">网站排名优化</a></li><li><a href="https://www.cdxwcx.com/400/" title="成都400电话办理" target="_blank">成都400电话办理</a></li><li><a href="https://www.cdcxhl.com/mianfei/jianzhan/chengdu.html" title="成都免费建站" target="_blank">成都免费建站</a></li><li><a href="http://www.4006tel.net/yingxiao/" title="网络营销" target="_blank">网络营销</a></li><li><a href="http://chengdu.kswsj.cn/" title="高端网站设计推广" target="_blank">高端网站设计推广</a></li><li><a href="https://www.cdxwcx.com/jifang/zongshu.html" title="棕树数据中心" target="_blank">棕树数据中心</a></li> </ul>
</div>
</div>
<div class="bot-footer">
<div class="wp">
<p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em>
</p>
<p class="wpss" style="line-height:30px !important;"> </p>
</div>
</div>
<div class="footer-kefu">
<ul>
<li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a>
</li>
<li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li>
<li class="wx"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</li>
<li class="m"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>移动版官网</p>
</div>
</li>
<li class="top"><em></em></li>
</ul>
</div>
<script src="/Public/Home/js/all.js"></script>
</body>
</html>
<script>
$(".cont 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> |
