HTML笔记 常用标签

it2025-06-10  23

换行标签

<h1 - 6> </h1 - 6> 标题 <p> </p> 换行 <br/> 另起一行


文本格式标签

<strong> </strong> 或 <b> </b> 加粗 <em> </em> 或 <i> </i> 斜体 <del> </del>或<s> </s> 删除线 <ins> </ins>或<u> </u> 下划线 <div> </div> 独占一行 <span> </span> 占一个小板块


图片标签

<img src = “路径” /> <img src = “…/路径”> 上一级文件夹 <img alt = ” “ /> 图片显示不出来时显示的文字 <img title = ” " / > 鼠标放在图片上,显示文字 <img weight = ” " / > 设置宽度 <img heigh = ” " /> 设置高度 宽度和高度设置一个就可以了,另一边等比例缩放,且这个路径是同一级路径 绝对路径是 \(反斜杠),相对路径和网络图片绝对路径是 / (斜杠)


超链接标签

外部链接 <a href = "网页http路径,如https://editor.csdn.net" target = "_self(在自己的页面上跳转) _blank(在新的页面跳转)">网站名字,如腾讯</a> 内部链接,用来链接同一个文件夹内的网站 <a href = "文件名,如 huft.html"> 学校简介 </a> 空链接,点击无转接 <a href = "#"> 首页 </a> 下载链接 <a href = " 文件路径,和图片路径一样" > 下载 </a> 元素链接,可以让一张图片变成链接,这样点击了图片就跳转到百度了 <a href = "http://www.baidu.com"> <img src = "img.jpg"/> </a> 锚点链接,点击后直接跳到同页面的那个部分 比如点击"个人生活",直接跳到同一页的那个部分 跳转的地方只能是标题

<a href = "#trag"> 个人生活 </a> // 这个目标必须是加 # 的 <h3 id = "trag"> 标题 </h3> 特殊符号 特殊符号后面一定要加 ; 讲&nbsp;&nbsp;&nbsp;究 // 之间空了3个格 &lt; p &gt; // 显示为 <p>

表格

整体表格 属性中可以设置大小width <table> </table> 表格中的行 <tr> </tr> 加粗居中显示的单元格 <th> </th> 每行中的单元格 <td> </td> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 人物表格 </title> </head> <body> <table> <tr> <th> 姓名 </th> <th> 年龄 </th> <th> 性别 </th> </tr> <tr> <td> yyr </td> <td> 21 </td> <td></td> </tr> <tr> <td> ljj </td> <td> 20 </td> <td></td> </tr> </table> </body> </html>

结构标签 我们将表头放在<thead> </thead>中 将数据部分放在<tbody> </tbody>中 这两块都放在<table> </table>里面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 人物表格 </title> </head> <body> <table> <thead> <!-- 表头 --> <tr> <th> 姓名 </th> <th> 年龄 </th> <th> 性别 </th> </tr> </thead> <tbody> <!-- 数据体 --> <!-- 第一行 --> <tr> <td> yyr </td> <td> 21 </td> <td></td> </tr> <!-- 第二行 --> <tr> <td> ljj </td> <td> 20 </td> <td></td> </tr> </tbody> </table> </body> </html> 合并表格 如果我们要跨行合并,使用rowspan="2",在最上面的那个单元格的<td>或者<th>中设置属性,2代表合并两个表格。 如果要跨列合并,使用colspan="2",在最左边的单元格设置。 然后删除被合并的单元格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 表格 </title> </head> <body> <table width = "500" height = "250" border = "1" cellspacing = "0"> <!-- 第一行 --> <tr > <th> </th> <th colspan="2"> </th> </tr> <!-- 第二行 --> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr> <!-- 第三行 --> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>

最新回复(0)