简述html的常用标签及其作用

格式：docx
大小：36.66 KB
文档页数：2

简述html的常用标签及其作用

HTML（Hypertext Markup Language）是用于创建网页的标准标记语言，它使用标签来定义网页的结构和内容。以下是HTML中一些常用的标签及其作用：

1. ``：定义HTML文档的根元素。

2. ``：定义文档的头部内容，包括页面的标题、字符编码等。

3. ``：定义文档的标题，显示在浏览器的标题栏或标签上。 </p><p>4. `<body>`：定义文档的主体部分。 </p><p>5. `<h1>` - `<h6>`：定义标题，根据重要性和级别递减。 </p><p>6. `<p>`：定义段落。 </p><p>7. `<a>`：定义超链接，用于链接到其他页面或文档。 </p><p>8. `<img>`：定义图像，用于在网页中显示图片。 </p><p>9. `<ul>`：定义无序列表。 </p><p>10. `<ol>`：定义有序列表。 </p><p>11. `<li>`：定义列表项。 </p><p>12. `<div>`：定义文档中的分割或部分。用于组织网页布局。 </p><p>13. `<span>`：定义文本的行内元素容器，用于设置特定部分的样式。 </p><p>14. `<table>`：定义表格。 </p><p>15. `<tr>`：定义表格的行。 </p><p>16. `<td>`：定义表格的单元格。 </p><p>17. `<form>`：定义表单，用于收集用户输入的数据。 </p><p>18. `<input>`：定义表单中的输入字段。 19. `<textarea>`：定义表单中的多行文本输入字段。 </p><p>20. `<button>`：定义按钮。 </p><p>21. `<select>`：定义下拉列表。 </p><p>22. `<option>`：定义下拉列表中的选项。 </p><p>23. `<label>`：定义表单元素的标签。 </p><p>24. `<br>`：定义换行。 </p><p>25. `<hr>`：定义水平分割线。 </p><p>这仅是HTML中的一些常用标签，HTML还有很多其他的标签可以用于创建丰富多样的网页内容和布局。 </p> </div> </div> </article> </div> </div> <div class="recommended"> <div class="theme-pd-hj"> <div class="hd-main"> <div class="hd-main-pd"> <div class="header hd-position"> <div class="title"> <h3>合集下载</h3> <i class="bg bg-4"></i> </div> </div> </div> </div> <div class="container-article"> <div class="article-ul"> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/00f79633bdd126fff705cc1755270722192e59d8.webp" alt="HTML（5）常用的格式标签"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="00f79633bdd126fff705cc1755270722192e59d8" data-did="119934280">HTML（5）常用的格式标签</h2> <div class="module-content-item"> <div class="item-overflow"> <p>HTML（5）常⽤的格式标签</p><p>⼀、基本⽂字格式</p><p>1.标题</p><p> HTML定义</p><p>⼩。 Heading标签需要注意的是：a.浏览器会⾃动地在标题的前后添加空⾏。因为Heading标签属于块级元素，⽽在默认</p><p>情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏（）。b.标题对整个页⾯来说很重要,应该将HTML heading 标签只⽤于标</p><p>题，⽽不要仅仅是为了产⽣粗体或⼤号的⽂本⽽使⽤标题。因为Heading标签对SEO是很友好的，搜索引擎使⽤标题为您的⽹页的结构和内</p><p>容编制索引，⽽且⽤户则以通过标题来快速浏览您的⽹页，所以⽤标题来呈现⽂档结构是很重要的。应该将 </p><p>的），其后是 </p><p> 1 </p><p> 2 </p><p> 3 中国⼀</p><p> 4 </p><p> 5 中国⼆</p><p> 6 </p><p> 7 中国三</p><p> 8 </p><p> 9 中国四</p><p>10 </p><p>11 中国五</p><p>12 </p><p>13 中国六</p><p> 效果如下图，字体⼤⼩由⼤到⼩：</p><p>2.换⾏、不换⾏和分段</p><p> 关于HTML中的换⾏标签和分段标签的区别是，换⾏标签只是回车，则是分段。因为</p><p>标签属于块级元素，</p><p>它的前后会有⽐较⼤的空⽩（⾃动添加），⽽标签属于⾏级元素，它只是简单的换⾏，前后没有空⽩。有⼀个与相对的标签</p><p>，它表⽰不换⾏，通常⽤于防⽌浏览器将程序代码等不需要换⾏的地⽅⾃动换⾏。</p><p> 1 </p><p> 2 </p><p> 3 这是第⼀段 </p><p> 4 ⽤到了换⾏标签</p><p> 5 请看效果</p><p> 6 很容易理解</p><p> 7 </p><p> 8 这是第⼆段</p><p> 9 </p><p>10 这是第三段</p><p>11 </p><p>12 </p><p>13 int i =0,j=10;</p><p>14 </p><p>15 </p><p>3.⽔平线标签</p><p> </p><p>height，这两个属性⼜分别有像素和百分⽐的表⽰⽅式。此外，</p><p> 1 </p><p> 2 </p><p> 3 </p><p> 4 </p><p> 5 </p><p> 6 </p><p> 7 </p><p> 8 </p><p> 9 </p><p>10 </p><p>11 </p><p>12 </p><p>13 </p><p>14 </p><p>15 </p><p>16 </p><p>17 </p><p>18 </p><p>19 </p><p>20 </p><p>21 </p><p>22 23 </p><p>24 </p><p>25 </p><p>4.⽂本格式化标签</p><p> 1 </p><p> 2 博客园居中显⽰</p><p> 3 Hello，World！粗体，推荐使⽤标签。</p><p> 4 斜了吧斜体。</p><p> 5 我是⼀个下划线标签带下划线。</p><p> 6 强调，斜体</p><p> 7 2下标，如：H2O</p><p> 8 2上标，如：102</p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/59acd5d676a20029bd642d34.webp" alt="HTML的tr和td标签"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="59acd5d676a20029bd642d34" data-did="511655504">HTML的tr和td标签</h2> <div class="module-content-item"> <div class="item-overflow"> <p> 网页制作用的较多的就是这些常用的标签，现在将tr和td分析如下： </p><p> 1.HTML tr 标签 </p><p>tr 标签 -- 代表HTML表格中的一行 </p><p>* tr标签是成对出现的,以开始,结束 </p><p>* 属性 </p><p> o Common -- 一般属性 </p><p> o align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) </p><p> o valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | </p><p>baseline(基线对齐))(此属性应该使用CSS实现) </p><p>* tr是table row的缩写 </p><p>2.HTML td 标签 </p><p> td 标签 -- 代表HTML表格中的一个单元格 </p><p> * td标签是成对出现的,以开始,结束 </p><p> * 属性 </p><p> o Common -- 一般属性 </p><p> o abbr -- 代表表头的简写 </p><p> o axis -- 对单元格在概念上分类 </p><p> o colspan -- 一行跨越多列 </p><p> o headers -- 连接表格的数据与表头 </p><p> o rowspan -- 一列跨越多行 </p><p> o scope -- 定义行或列的表头 </p><p> o align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) </p><p> o valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | </p><p>baseline(基线对齐))(此属性应该使用CSS实现) </p><p> * td是table data cell的缩写 </p><p>3.</p><p> 代表表格中的一行 </p><p> 代表表格中的一列 </p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/d69edd0ffd4ffe4733687e21af45b307e971f957.webp" alt="一、HTML中常用标签及属性"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="d69edd0ffd4ffe4733687e21af45b307e971f957" data-did="919427856">一、HTML中常用标签及属性</h2> <div class="module-content-item"> <div class="item-overflow"> <p>⼀、HTML中常⽤标签及属性</p><p>⼀、HTML基础语法</p><p> ---> 单标签、双标签、块级元素、⾏内元素</p><p> 单双标签其实就是HTML⽂档中标签书写的格式，页⾯中最常见的是双标签；</p><p> 单标签就是只有⼀个标签，也就是⼀个空元素：meta、img、hr、br</p><p> 双标签有开始标签和结束标签</p><p> 块级元素：独占⼀⾏，对宽⾼的属性值⽣效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）</p><p> 例如：div p ul h1~h6 .....</p><p> ⾏内元素：对宽⾼属性值不⽣效，完全靠内容撑开宽⾼，可以跟其他标签存在⼀⾏</p><p> 例如：span b strong em a img input ......</p><p> ⾏内块元素：结合⾏内和块级元素的特点，不仅对宽⾼的属性值⽣效，还可以跟多个标签存在⼀⾏</p><p> 例如：input img</p><p>⼆、HTML中常⽤标签 ---> ⽂档头部</p><p></p><p></p><p></p><p></p><p> </p><p> </p><p> </p><p> </p><p> Document</p><p> </p><p> </p><p> </p><p> </p><p></p><p></p><p></p><p></p><p>三、HTML中常⽤标签 ---> ⽂本标签级属性</p><p></p><p></p><p></p><p> </p><p> </p><p> Document</p><p></p><p></p><p> </p><p> </p><p> </p><p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p></p><p></p><p>四、HTML中常⽤标签 ---> 超链接</p><p></p><p></p><p></p><p> </p><p> </p><p> Document </p><p></p><p></p><p> </p><p> 我是⼀个链接</p><p> </p><p> </p><p> </p><p> 页⾯顶部</p><p> </p><p> </p><p> 回到顶部</p><p></p><p></p><p>五、HTML中常⽤标签 ---> 列表标签</p><p></p><p></p><p></p><p> </p><p> </p><p> 列表标签 </p><p></p><p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p></p><p></p><p>六、HTML中常⽤标签 ---> form表单</p><p></p><p></p><p> </p><p> </p><p> form表单 </p><p></p><p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> 登陆</p><p> </p><p></p><p></p><p>七、HTML中常⽤标签 ---> 表格（table）</p><p></p><p></p><p></p><p> </p><p> </p><p> 表格 </p><p></p><p></p><p> </p><p> </p><p> </p><p> 1</p><p> 2</p><p> 3</p><p> 4</p><p> 5</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p></p><p></p><p></p> </div> </div> </div> </div> </div> </div> <div class="module"> <div class="module-pd"> <div class="ralative-content"> <div class="left-a"> <img src="https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/2fdc60ee9b89680203d8254b.webp" alt="HTML标签"> </div> <div class="module-content"> <h2 class="rt-a text-overflow" data-doc-id="2fdc60ee9b89680203d8254b" data-did="98258235">HTML标签</h2> <div class="module-content-item"> <div class="item-overflow"> <p>HTML语言基础： </p><p>1）HTML </p><p> 网页在本质上是由HTML(超文本标记语言）代码构成的。HTML代码由一系列的标签组成，这些标签是对页面的元素如文字、图片、声音、动画、超链接等进行描述、说明。 </p><p>HTML标签的结构：头部、主体。....<./html>是告诉浏览器该文件是一个html文件；文件头部：.......<./head>是用来说明整个文件的标题或公共属性，不出现在浏览器的正文中。......不出现在浏览器的正文中，会出现在浏览器的标题栏中，是文档的主题。......是在浏览器中主要显示的，也是HTML主要的标签所在。 </p><p>HTML标签的分类：单表签和多标签。 </p><p>单表签只需单独使用就可表达完整的意思，其语法结构是...内容..如；多标签必须同时使用始标签和尾标签才能表达完整的意思，其语法结构是....内容....,是告诉浏览器从始标签处开始执行该标签代表的功能，并且在尾标签时结束，如......。标签属性指的是在始标签内对表签添加的一些属性，其语法结构是...内容... 内容指的是对表签施加的作用。注释内容指的是在文档的代码中对某段代码的文字说明，注释内容只会在查看源代码时才会被显示，而在浏览器运行HTML文档时会被忽略，其语法结构是或注释内容 2）HTML头部标签中的标签 </p><p>；多标签必须同时使用始标签和尾标签才能表达完整的意思，其语法结构是....内容....,是告诉浏览器从始标签处开始执行该标签代表的功能，并且在尾标签时结束，如......。 </p><p>标签属性指的是在始标签内对表签添加的一些属性，其语法结构是...内容... </p><p>内容指的是对表签施加的作用。 </p><p>注释内容指的是在文档的代码中对某段代码的文字说明，注释内容只会在查看源代码时才会被显示，而在浏览器运行HTML文档时会被忽略，其语法结构是或注释内容 </p><p>2）HTML头部标签中的标签 </p><p> </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="recommended" id="downtip"> <div class="tag"> <ul class="tag-header"> <li> <a href="javascript:;" title="下载提示" data-tab-target="tip" class="" id="onTagDownload"> 下载提示 <i class="iconfont icon-you bottom"></i> </a> </li> </ul> <div class="tab-items"> <div class="tab-item tip" data-tab-item="tip"> <div class="list"> <ol> <li>1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。</li> <li>2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。</li> <li>3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。</li> </ol> </div> </div> </div> </div> </div> <div class="recommended"> <div class="article-box"> </div> </div> </div> <div class="temp-rg" id="target-element"> <div class="relevant-box temp-mg"> <div class="content" id="side-list"> <div class="header hd-bm hd-scollor"> <div class="title"> <h3>文档推荐</h3> <i class="bg bg-1"></i> </div> </div> <ul class="container-ul"> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/1923341987.html" target="_blank" title="html标签及用法" class="ul-doc-a text-overflow-clamp">html标签及用法</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:2</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pdf"></i> <div class="cont-rg flex-column"> <a href="/doc/2119522619.html" target="_blank" title="HTML 常用标签总结" class="ul-doc-a text-overflow-clamp">HTML 常用标签总结</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:5</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/2419567092.html" target="_blank" title="html标签的常见用法" class="ul-doc-a text-overflow-clamp">html标签的常见用法</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:1</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/3220777668.html" target="_blank" title="html常用标记以及用法" class="ul-doc-a text-overflow-clamp">html常用标记以及用法</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:3</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/6419307870.html" target="_blank" title="HTML常用标签及属性" class="ul-doc-a text-overflow-clamp">HTML常用标签及属性</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:5</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/6221789442.html" target="_blank" title="HTML常用标签及属性" class="ul-doc-a text-overflow-clamp">HTML常用标签及属性</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:7</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pptx"></i> <div class="cont-rg flex-column"> <a href="/doc/7a19648509.html" target="_blank" title="HTMl常用标签" class="ul-doc-a text-overflow-clamp">HTMl常用标签</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:16</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pdf"></i> <div class="cont-rg flex-column"> <a href="/doc/8d20224760.html" target="_blank" title="HTML常用基本标签" class="ul-doc-a text-overflow-clamp">HTML常用基本标签</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:3</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pdf"></i> <div class="cont-rg flex-column"> <a href="/doc/9519427856.html" target="_blank" title="一、HTML中常用标签及属性" class="ul-doc-a text-overflow-clamp">一、HTML中常用标签及属性</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:3</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pdf"></i> <div class="cont-rg flex-column"> <a href="/doc/9719427864.html" target="_blank" title="html常用标记以及用法" class="ul-doc-a text-overflow-clamp">html常用标记以及用法</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:2</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-docx"></i> <div class="cont-rg flex-column"> <a href="/doc/9919458721.html" target="_blank" title="HTML常用标签的使用及属性" class="ul-doc-a text-overflow-clamp">HTML常用标签的使用及属性</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:1</em> </div> </div> </div> </div> </li> <li> <div class="ul-doc flex-start"> <i class="icon-pdf"></i> <div class="cont-rg flex-column"> <a href="/doc/9019458729.html" target="_blank" title="HTML常用标签及其属性" class="ul-doc-a text-overflow-clamp">HTML常用标签及其属性</a> <div class="bottom"> <div class="left"> <div class="star star-5"></div> <em>页数:2</em> </div> </div> </div> </div> </li> </ul> </div> </div> <div class="relevant-box"> <div class="content"> <div class="header hd-bm"> <div class="title"> <h3>最新文档</h3> <i class="bg bg-4"></i> </div> </div> <ul class="container-ul"> <li class="new-down-li"> <i class="icon-docx"></i> <a href="/doc/2019522558.html" target="_blank" class="new-li-a text-overflow">简述html的常用标签及其作用</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2910610558.html" target="_blank" class="new-li-a text-overflow">重点小学英语课文新五年级下册(教育科学出版社)</a> </li> <li class="new-down-li"> <i class="icon-ppt"></i> <a href="/doc/2010776430.html" target="_blank" class="new-li-a text-overflow">航海学§3 英版《潮汐表》与潮汐推算</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/291005089.html" target="_blank" class="new-li-a text-overflow">第二章第一节导学案</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2e12594285.html" target="_blank" class="new-li-a text-overflow">融合教育88分试题 2015 6月6日最新做的</a> </li> <li class="new-down-li"> <i class="icon-docx"></i> <a href="/doc/2712861363.html" target="_blank" class="new-li-a text-overflow">客服部主管及物业管理员岗位职责</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2811859344.html" target="_blank" class="new-li-a text-overflow">车辆行驶危害辨识与风险评价表</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/231098989.html" target="_blank" class="new-li-a text-overflow">贫血不能吃什么</a> </li> <li class="new-down-li"> <i class="icon-doc"></i> <a href="/doc/2322984402.html" target="_blank" class="new-li-a text-overflow">2018年高考英语一轮复习Unit4Astronomy：thescienceofstar</a> </li> <li class="new-down-li"> <i class="icon-docx"></i> <a href="/doc/2025151052.html" target="_blank" class="new-li-a text-overflow">亚洲电影欧洲电影</a> </li> </ul> </div> </div> </div> </div> </div> </main> <div class="broadside"> <div class="user-cursor" id="toTop"> <div class="user-about" title="置顶"> <i class="iconfont icon-you bottom"></i> </div> </div> </div> <footer> <div class="container"> <div class="ft-content"> <div class="ft-logo"> <a href="/" target="_blank" title="文档之家" class="flex-column-center"> <img src="/pc/icon/icon-logo1.png" alt="文档之家"> <p>文档之家</p> </a> </div> <div class="ft-info"> <nav class="footer-nav"> <ul> <li><strong class="ft-block">关于</strong></li> <li><a href="/about/about-us.html">关于我们</a></li> <li><a href="/about/contact-us.html">联系我们</a></li> </ul> <ul> <li><strong class="ft-block">版权相关</strong></li> <li><a href="/about/copyright-statement.html">版权声明</a></li> <li><a href="/about/infringement-complaint.html">侵权投诉</a></li> <li><a href="/about/disclaimer.html">免责声明</a></li> </ul> <ul> <li><strong class="ft-block">网站声明</strong></li> <li><a href="/about/user-agreement.html">用户协议</a></li> <li><a href="/about/privacy-policy.html">隐私政策</a></li> <li><a href="/about/sitemap.html">网站地图</a></li> </ul> <ul> <li><strong class="ft-block">帮助中心</strong></li> <li><a href="/about/download-instructions.html">下载说明</a></li> <li><a href="/about/download-failure-solution.html">下载失败解决</a></li> <li><a href="/about/redownload-order.html">订单重下载</a></li> </ul> </nav> <div class="ft-side"> <h3>微信客服</h3> </div> </div> </div> </div> <div class="ft-box"> <div class="ft-text"> <p>文档之家版权所有 - ©2024</p> </div> </div> </footer> <script src="/pc/js/index.js"></script> </body> </html>