HTML常用标签总结


有换行属性的标签:

    1. ~大概也就是这些了,换行的都是块级元素

       

      学习前端开发,第一步要学习的绝对是HTML。

      什么是HTML?

      HTML 是(Hyper Text Markup Language)四个单词的缩写,翻译过来就是超文本标记语言 所以它不是一门编程语言,只是一门标记语言。

      学习html的第一步就是需要学习它的标签如何使用。这个没有什么技巧,全靠平时多练习多用,才能达到熟能生巧的境界。

      Html一共有一百一十多个标签(包含html5的新标签),如果想要全部掌握还真得费不少功夫,但是实际开发中经常用到的也就四五十个,有很多都是不常用的,如果一个不落的去学习反而浪费了宝贵的时间。

      以下就结合自己实际开发中经常用到的标签做一个说明和总结。如果对一些标签不是很理解,暂时可不必深究。我现在只是做一个标签的罗列,具体用法可查阅手册。

      1,基础标签

      基础标签是必须全部掌握的,因为在每个html网页中几乎都可以看到他们的身影。

          定义文档类型。请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。

         定义 HTML 文档。

         定义关于文档的信息。

       定义关于 HTML 文档的元信息。

          定义文档的标题。</p> <p><body> 定义文档的主体。</p> <p><h1>  一级标题</p> <p><h2> 二级标题</p> <p><h3>      三级标题</p> <p><p> 定义段落。</p> <p><!--...-->  定义注释</p> <p>2,格式标签</p> <p>格式标签现在用的不是很多,因为现在样式修饰都交给css去做了。</p> <p><b> 定义粗体文本。</p> <p><del> 定义被删除文本。</p> <p><em> 定义强调文本。</p> <p><i> 定义斜体文本。</p> <p><sup> 定义上标文本。</p> <p><sub> 定义下标文本。</p> <p><hr> 定义水平线。</p> <p><br> 定义简单的折行。</p> <p>3,多媒体链接</p> <p><img> 定义图像。</p> <p>注意其alt属性,title属性</p> <p><canvas> 定义图形。</p> <p><audio>    定义声音</p> <p><video>   定义视频</p> <p><a> 定义超链接</p> <p>a标签在实际应用中用的是相当多的</p> <p><link> 定义文档与外部资源的关系。</p> <p>4,列表</p> <p><ul> 定义无序列表。</p> <p><ol> 定义有序列表。</p> <p><li> 定义列表的项目。</p> <p><dl> 定义定义列表。</p> <p><dt> 定义定义列表中的项目。</p> <p><dd> 定义定义列表中项目的描述。</p> <p>5,表单</p> <p><form> 定义供用户输入的 HTML 表单。</p> <p><input> 定义输入控件。</p> <p>属性非常多,也很常用,详情请查阅手册。</p> <p><textarea> 定义多行的文本输入控件。</p> <p><button> 定义按钮。</p> <p><select> 定义选择列表(下拉列表)。</p> <p><option> 定义选择列表中的选项。</p> <p><label> 定义 input 元素的标注。</p> <p><datalist> 定义下拉列表。</p> <p>6,表格</p> <p><table> 定义表格</p> <p><caption> 定义表格标题。</p> <p><thead> 定义表格中的表头内容。</p> <p><tbody> 定义表格中的主体内容。</p> <p><tfoot> 定义表格中的表注内容(脚注)。</p> <p><th> 定义表格中的表头单元格。</p> <p><tr> 定义表格中的行。</p> <p><td> 定义表格中的单元。</p> <p>表格在现在的网站中用的倒不是很多了。</p> <p>7,其他常用标签</p> <p><div> 定义文档中的节。</p> <p><span> 定义文档中的节。</p> <p><Iframe>   定义文档的内联框架。</p> <p><style> 定义文档的样式信息。</p> <p><script> 定义文档中的脚本信息</p> <p><base> 定义页面中所有链接的默认地址或默认目标。</p> <p>以下标签为html5新增的语义化标签</p> <p><header> 定义 section 或 page 的页眉。</p> <p><footer> 定义 section 或 page 的页脚</p> <p><section> 定义 section。</p> <p><article> 定义文章。</p> <p><aside> 定义页面内容之外的内容。</p> <p>注意:html5新标签不被ie浏览器识别问题</p> <p>需要引入html5shiv包,使用条件注释解决</p> <p><!--[if lte IE 8]></p> <p class="pre"><script src="libs/html5shiv/html5shiv.js"></script></p> <p><![endif]--></p> <p>好吧,简单的HTML常用标签就这么多了,希望对前端新人有所帮助。</p> <p>至于HTML5的新特性后续再继续总结。</p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid263-0.html' class='tagbtn' target='_blank'>html</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566535.html">html标签</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561490.html">HTML表单</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558169.html">HTML5新增</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557384.html">Jmeter+ant实现自动生成基于HTML报告及自动发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555707.html">Python 发送HTML格式的邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555700.html">shell 拼接html table 发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555084.html">html入门-狂神学java</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552454.html">SAP导出报表格式XXl、XML、XLSX、MHTML选择</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-549821.html">HTML5手机APP开发入门(2)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548983.html">https://m.php.cn/vuejs/464077.html</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547475.html">HTML+CSS系列:登录界面实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>