html标签属性大全手册（HTML的基本标签及属性）
1. 标题与段落标签
(1) 标题标签是一对双标签：<h1></h1> ，<h2></h2> ，<h3></h3> ，<h4></h4> ，<h5></h5> ，<h6></h6> 。在网页中 ，h1标签最重要 ，一个.html文件中只能有一个h1标签 ，h2 、h3 、h4 、h5 、h6可以有多个 ，最常用的标题标签是h1~h4 ，h5和h6在网页中不常使用 。
(2) 段落标签是一对双标签：<p></p> 。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>一级标题</h1> <p>盼望着 ，盼望着 ，东风来了 ，春天的脚步近了 。</p> <h2>二级标题</h2> <p>一切都像刚睡醒的样子 ，欣欣然张开了眼 。山朗润起来了 ，水涨起来了 ，太阳的脸红起来了 。</p> <h3>三级标题</h3> <p>小草偷偷地从土里钻出来 ，嫩嫩的 ，绿绿的 。园子里 ，田野里 ，瞧去 ，一大片一大片满是的 。</p> <h4>四级标题</h4> <p>坐着 ，躺着 ，打两个滚 ，踢几脚球 ，赛几趟跑 ，捉几回迷藏 。风轻悄悄的 ，草软绵绵的 。</p> </body> </html>2. 文本修饰标签
(1) 强调标签是一对双标签：<strong></strong> 、<em></em> ，strong标签会对文本进行加粗 ，em标签会对文本进行斜体 ，strong的强调性比em更强 。
(2) 上 、下标文本标签都是一对双标签：<sup></sup> 、<sub></sub> 。
(3) 插入 、删除文本标签都是一对双标签： 、 。
(4) 换行标签是单标签： 。
(5) 水平分割线标签是单标签：<hr> 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <strong>strong标签强调的文字</strong> <br> <hr> <em>em标签强调的文字</em> <br> <hr> 3<sup>2</sup>+2<sup>2</sup>=13 <br> <hr> <ins>100</ins> <br> <hr> <del>200</del> </body> </html>3. 图片标签
(1) 图片标签是单标签：<img src=“./img/scene_1.jpg ” alt=“风景图片1 ”>
<img width="30%" height="30%" src="./img/scene_1.jpg" alt="风景图片1" title="风景图片1">(2) 图片标签的属性：
width 、height：图片的宽 、高；
src：在.html文件中引入图片的地址；
alt：当图片加载出现问题或无法加载时 ，起提示作用；
title：提示图片的信息 。(3) 引入文件的路径：
相对路径：文件相对于引用文件去定义被引用文件的地址 ，.表示当前文件目录下 ，..表示上一级文件目录下 。当图片scene_1.jpg在index.html文件的上一级目录下时 ，引入这张图片的路径src=“../img/scene_1.jpg ” 。
绝对路径：文件相对于磁盘位置定位的地址 ，例如：C:\Users\19464\Desktop\img\scene_1
，或者文件在网络中的地址 ，例如：https://www.yuucn.com/wp-content/uploads/2023/04/1682085647-67a9be4cb0e5db5.png#pic_center 。4. 链接标签
(1) 链接标签是一对双标签：<a></a> 。
(2) a标签的属性：
href：链接的地址；
target：链接的跳转方式 ，默认值_self是在当前页面打开 ，_blank是在新窗口打开链接 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a> <!--给图片加上链接--> <a href="https://www.bilibili.com/"> <img src="./img/scene_1.jpg" alt="风景图"> </a> </body> </html>给文本加上a标签 ，点击文本内容就会跳转到指定网址 。不仅文本可以加上a标签 ，图片也可以 ，点击图片也会跳转到指定网址 。
(3) base标签：单标签<base href=“ ” target=“ ”> ，可以改变链接的默认跳转行为 。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <!--点击网页中的所有链接都会在新窗口中打开--> <base target="_blank"> </head> <body> <a href="https://www.bilibili.com/">哔哩哔哩官网</a> <a href="https://www.bilibili.com/">哔哩哔哩官网</a> <a href="https://www.bilibili.com/">哔哩哔哩官网</a> <a href="https://www.bilibili.com/"> <img src="./img/scene_1.jpg" alt="风景图"> </a> </body> </html>(4) 跳转锚点：
在网页内部进行跳转 ，网页内部的一个点跳转到另一个点 。
第一种方式：href属性值为#id名 ，跳转到带id属性的标签元素处；
第二种方式：href属性值为#name属性的属性值 ，跳转到带name属性的a标签处 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#p_1">段落1</a> <a href="#p_2">段落2</a> <p>文字段落</p> <p>文字段落</p> <p>文字段落</p> <p id="p_1">文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1</p> <p>文字段落</p> <p>文字段落</p> <p>文字段落</p> <a name="p_2"></a> <p>文字段落</p> </body> </html>5. 无序 、有序列表与定义列表
ul 、ol标签和li标签必须组合存在 ，而且li的父级标签必须是ul或者ol ，不能是其它标签 。有序列表用得比较少 ，无序列表经常可以代替有序列表实现列表功能 。
(1) 无序列表：
列表项：
(2) 有序列表：
列表项：
(3) 定义列表：<dl></dl> 、<dt></dt> 、<dd></dd> 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--正确语法--> <ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> <ol> <li>有序列表项1</li> <li>有序列表项2</li> <li>有序列表项3</li> </ol> <dl> <dt>HTML</dt> <dd> HTML的全称为超文本标记语言 ，是一种标记语言 。它包括一系列标签．通过这些标签可以将网络上的文档格式统一 ，使分散的Internet资源连接为一个逻辑整体 。 </dd> <dt>CSS</dt> <dd> 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言 。 </dd> </dl> <!--错误语法--> <ul> <p> <li></li> </p> </ul> <ol> <span> <li></li> </span> </ol> </body> </html>(4) 列表之间也可以相互嵌套 ，从而形成多层级的列表 ，二级导航就是使用多层级列表来实现的 。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </li> <li> <ul> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> </ul> </li> </ul> </body> </html>6. 表格 、表单标签
(1) 表格外层容器：
，表格标题： ，表头： ，表格行： ，表格单元： 。 (2) 表格语义化标签： 、 、
(3) 表格的属性：
border：表格边框；
cellpadding：单元格内空间；
cellspacing：单元格之间空间；
rowspan：合并一行的单元格；
colspan：合并一列的单元格；
align：水平对齐方式；
valign：竖直对齐方式 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table> <caption>员工工资表</caption> <tr> <th>编号</th><th>姓名</th><th>工资</th> </tr> <tr> <td>1</td><td>张三</td><td>8000</td> </tr> <tr> <td>2</td><td>李四</td><td>10000</td> </tr> </table> </body> </html>(4) 表单外层容器：
，表单input标签：； input标签的type属性值： type属性值 含义 text 文本框 password 密码输入框 checkbox 复选框 radio 单选框 submit 提交按钮 reset 重置按钮 file 上传文件多行文本框：；
下拉菜单： ，选项：；
辅助表单： 。
表单的常用属性：
placeholder：给出输入框的提示信息；
checked：被选中；
name：表单名称；
disabled：用于复选框禁用某个选项；
action：表单提交数据的目的地；
method：表单发送数据的方式 ，get和post方式；
for：规定 label 与哪个表单元素绑定 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="https://www.bilibili.com/" method="post"> <label for="user">账号</label> <input type="text" id="_user" placeholder="请输入账号"><br> <label for="_password">密码</label> <input type="password" id="_password" placeholder="请输入密码"><br> <select> <option>运动</option> <option>音乐</option> <option>电影</option> </select> </form> </body> </html>7. div与span标签
(1) div（块）标签可以把文档分割为独立的 、不同的部分 。它可以用作严格的组织工具 ，并且不使用任何格式与其关联 ，div标签是一个块级元素 ，每个div标签独占一行 ，换行是div标签固有的唯一格式表现 。
(2) span（内联）标签被用来组合文档中的行内元素 。如果不对 span 应用样式 ，那么 span 元素中的文本与其他文本不会任何视觉上的差异 。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="background-color: red;"> 这是一个块级元素 </div> <span style="background-color: blue;">这是一个内联元素</span> </body> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！