收藏
天蓬老师批改状态：合格
老师批语：非常认真
| 标签 | 描述 |
|---|---|
<p> |
段落内容 |
<pre> |
按源码格式原样显示 |
<br> |
换行(源码中的换行会被解析来空格) |
<span> |
与<div>类似,无语义, 主要用作内容的样式钩子 |
<time> |
描述日期或时间 |
<abbr> |
缩写 |
<sub> |
下标 |
<sup> |
上标 |
<address> |
地址,通常用在<footer>中 |
<s> / <del> |
删除线, <s>无语义 |
<code> |
显示代码块,通常与代码格式化插件配合,才能高亮关键字 |
<progress> |
进度条 |
<b> / <strong> |
加粗, <b>无语义 |
<i> / <em> |
斜体, <i>无语义 |
<mark> |
高亮标记, 默认为内容添加黄色背景 |
<q> / <blockquote> |
引用, 内容加双引号 |
<p>标签
<p>这是一个段落标签</p>
<pre>标签图片展示：
<!--值得注意的是pre标签之中的内容会被预格式化，也就是说pre标签内的内容可以被当做源码来进行解析。例如<；>可直接转化为<;>符号--><pre><pre标签源码格式展示></pre>
<br>标签图片展示：
<p>这是上一行<br>这是下一行</p>
<span> 标签
<!--<span>与`<div>`类似,无语义, 主要用作内容的样式钩子，在无样式的情况下类似于一个段落--><span>与div类似,无语义, 主要用作内容的样式钩子</span>
<time>标签图片展示：
<time>2020-09-30</time>
<abbr>标签图片展示：
<!--title="文本或内容（鼠标放上去的提示语）"<abbr title="这是我的第二次作业">第二次作业abbr标签</abbr>
<sub>标签图片展示：
<p>2<sub>1</p>
<sup>标签图片展示：
<p>2<sup>1</sup>=2</p>
<address> 标签图片展示：
<p>地址：<address>中国大陆</address></p>
<s> / <del>图片展示：
<p>苹果11pro不要<s>11000</s>元也不要<del>100</del>元，现在免费领取</p>
<s>的删除线效果，第二个100为<del>的删除线效果
<code>标签图片展示：
<code> print("hello python") </code>
<progress> 标签图片展示：
<!--max是进度条的总长，此处设定为100%。value为当前进度50%--><!--但是如果浏览器不支持进度条的话，就只会显示一个文本：已完成50%--><progress max="100" value="50">已完成</progress>
<b> / <strong>标签图片展示：
<b>加粗效果展示1</b><br /><strong>加粗效果展示2</strong>
<i> / <em> 标签图片展示：
<em>斜体效果展示1</em><br /><i>斜体效果展示2</i>
<mark> 标签
<p>高亮效果展示：<mark>这里面是高亮的</mark></p>
<q> / <blockquote>标签图片展示：
<p>后面这句话加双引号：<q>给我加</q></p><p>后面这句话引用blockquote标签：<blockquote>给我加333</blockquote></p>
| 属性 | 描述 | 举例 |
|---|---|---|
href |
指向链接页面的 URL | href="https://www.baidu.com/" |
target |
打开 URL 的页面来源 | target=_self_blank_top_parent |
download |
自定义下载文件名 | download="banner1.jpg" |
type |
设置链接文档的 MIME 类型 | type="image/jpeg" |
href属性值| 属性 | 描述 |
|---|---|
href="url" |
跳转的目标地址 |
href="mailto: 123456@qq.com" |
打开邮箱,发送邮件 |
href="tel:13388**2345" |
点击后,会询问用户是否要拨打电话 |
href="outline.md" |
浏览器不能解析的文档, 会直接下载 |
taget属性值| 属性 | 描述 |
|---|---|
target="__self" |
当前窗口打开链接 |
target="_blank" |
新窗口打开链接 |
target="_parent" |
父窗口打开链接 |
target="_top" |
顶层窗口打开链接 |
target="name" |
指定名称的窗口, 与<iframe>元素配合 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
<!-- href属性是一定要有的，可以是跳转制定的url，也可以是拨打电话 --><!-- 发送邮件，浏览器不能解析的文档，会直接下载 --><!-- 只有href属性的话会默认在当前页面跳转打开页面或拨打发送邮件等操作 --><!-- 所以这里要用到第二个属性target,默认是_self（当前页面打开） --><!-- _blank（新建一个页面打开） --><!-- 先来看看在当前页面打开 --><!-- 先来看看跳转到指定url： --><a href="https://www.baidu.com/">点击这里跳转到百度首页</a><!-- 再来看看在新页面打开 --><a href="https://www.baidu.com/" target="_blank">点击这里跳转到百度首页</a><!-- 下面是询问用户是否拨打电话： --><a href="tel:10086">点击这里拨打电话给中国移动客服</a><!-- 下面是新建一个页面询问用户是否发送邮件 --><a href="mailto:123456789@qq.com" target="_blank">点击这里发送邮件</a><!-- 不能解析的时候会直接进行文件下载 --><a href="demo4.md">这是浏览器不能解析的文件，点击这里即可下载</a><!-- 文件下载操作 --><!-- href内填写文件的下载链接，download内填写的是文件下载时候的默认文件名 --><a href="0929/demo4.html" download="这是一个demo4.html">文件下载</a><!-- 使href属性在同一个页面跳转：锚点 --><!-- 锚点 --><!-- 通过锚点可以实现在当前页面内部实现跳转 --><!-- 跳转到某一个具有ID属性的地址，简而言之就是通过id来进行跳转 --><!-- 利用a标签的href属性：href"#id(锚点)" --><a href="#top">跳转到底部</a><!-- 这里不会显示跳转，但是我们可以通过浏览器的地址栏看到已经跳转了 --><!-- 所以我们要把这里是底部移出当前可视区域 --><p id="top" style="margin-top: 1000px">这里是底部</p><!-- 现在及可正常显示跳转了 -->
| 序号 | 标签 | 描述 | 备注 | |
|---|---|---|---|---|
| 1 | <table> |
定义表格, | 必选 | |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 必选 | |
| 3 | <tr> |
定义表格中的行, | 必选 | |
| 4 | <th> |
定义表格头部中的单元格,默认加粗居中 | 必选 | |
| 5 | <td> |
定义表格主体与底部的的单元格 | 必选 | |
| 6 | <caption> |
定义表格标题, | 可选 | |
| 7 | <thead> |
定义表格头格, 只需定义一次 | 可选 | |
| 8 | <tfoot> |
定义表格底, 只需定义一次 | 可选 | |
| 9 | <col> |
为一个/多个列设置属性,仅限 | 可选 | |
| 10 | <colgroup> |
将多个<col>元素分组管理 |
可选 | |
| 11 | PS 值得注意的是： | 表格主体可以存着多个，而其他部分建议只有一个 | 注意 |
| 序号 | 属性 | 适用元素 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 3 | cellspacing |
<table> |
设置单元格边框间隙 |
| 4 | align |
不限 | 设置单元格内容水平居中 |
| 5 | bgcolor |
不限 | 设置背景色 |
| 6 | width |
不限 | 设置宽度 |
| 7 | height |
不限 | 设置高度 |
PS1：在 html 中生成一个表格，必须首先生成一个行，再生成列，并将数据不断填充至“单元格之中”
PS2：在 html 表格之中，表格标签必须都包在 table 标签之中
实战：在 html 之中生成一个商品信息表，并给予一定的美化！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格元素：1.带分页条的</title></head><body><!-- 利用border属性来给表格添加边框线；利用cellspacing属性使表格边框间隙为0利用cellpadding属性设置表格页边距为5利用align使表格居中（不是内容居中） --><tableborder="1"cellspacing="0"cellpadding="5"width="300"height="200"align="center"><caption>商品信息表</caption><!-- 表头 --><!-- bgcolor属性为表头添加浅蓝色的背景填充 --><thead bgcolor="ligtblue"><!-- 要生成一个表格，必须先生成一个行，然后再生成列，并将数据填充到单元格之中。 --><!-- td和th的区别，th有一个默认样式为：加粗和居中，更加实用表头的使用 --><tr><th>ID</th><th>名称</th><th>数量</th><th>单价</th><th>金额</th></tr></thead><!-- 表格主体区（表格主体可以有多个） --><tbody bgcolor="6aff8c"><tr><td>1</td><td>IPHONE</td><td>1</td><td>11000</td><td>11000</td></tr><tr><td>2</td><td>华为</td><td>2</td><td>4500</td><td>9000</td></tr><tr><td>3</td><td>小米</td><td>3</td><td>3000</td><td>9000</td></tr></tbody></table><!-- 分页条功能可以利用a标签来进行实现 --><p><a href="" class="page">首页</a><a href="" class="page">...</a><a href="" class="page">5</a><a href="" class="page">6</a><a href="" class="page">7</a><a href="" class="page">8</a><a href="" class="page">...</a><a href="" class="page">尾页</a></p></body></html>
不论是行合并还是列合并 rowspan 和 colspan 都必须写到单元格之中 ###行的方向合并：
利用 rowspan 进行合并操作，rowspan=”需要合并的行数”
<!-- 要使上午竖向合并，也就是在行的方向上进行合并，就要使用rowspan属性，值得一提的是合并之后会出现当前单元格的内容去到其他单元格之中比如上午替代了节数2 3 4的情况，这种时候就需要把后面的上午都注释掉只保留第一个即可 --><!-- rowspan="想要合并的行数" --><tr><td rowspan="4">上午</td><td>1</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><!-- 由于已经把上午进行合并了，我们就需要把后面的上午注释掉 --><!-- 不然会出现单元格错乱的现象 --><tr><!-- <td>上午</td> --><td>2</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><tr><!-- <td>上午</td> --><td>3</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><tr><!-- <td>上午</td> --><td>4</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr>
效果展示： 1.已进行合并操作后未注释其他行的：
2.合并成功： 
列的方向进行合并的话利用 colspan 进行合并操作，colspan=”需要合并的列数”
<thead><!-- 列的合并：colspan --><!-- colspan="想要合并的列数" --><!-- 只保留一列的值，其他列注释，避免单元格的值发生错乱 --><tr><th colspan="2">时间</th><!-- <th>时间</th> --><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead>
图片展示：
<!-- 利用bgcolor使它的背景颜色为ff788b色 --><td colspan="7" align="center" bgcolor="ff788b">就餐和休息时间</td>
图片展示：
<colgroup>和<col>进行列的美化
<colgroup><!-- 第一列样式 --><col style="background-color: aqua" /><!-- 第二列样式 --><col style="background-color: aquamarine" /><!-- 第三~七列样式 --><!-- 多列样式的操作使用span进行合并操作 --><col span="5" style="background-color: antiquewhite" /></colgroup>
图片展示：
##制作一个课程表
代码展示：
<!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 border="1" cellspacing="0" cellpadding="5" align=""><caption>法学8班课程表</caption><!-- 无论是行合并，还是列合并，colspan和rowspan都必须写到单元格之中 --><!-- 自定义列样式 利用colgroup标签来进行处理 --><!-- 标签内使用col标签处理 --><colgroup><!-- 第一列样式 --><col style="background-color: aqua" /><!-- 第二列样式 --><col style="background-color: aquamarine" /><!-- 第三~七列样式 --><!-- 多列样式的操作使用span进行合并操作 --><col span="5" style="background-color: antiquewhite" /></colgroup><thead><!-- 列的合并：colspan --><!-- colspan="想要合并的列数" --><!-- 只保留一列的值，其他列注释，避免单元格的值发生错乱 --><tr><th colspan="2">时间</th><!-- <th>时间</th> --><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody><!-- 要使上午竖向合并，也就是在行的方向上进行合并，就要使用rowspan属性，值得一提的是合并之后会出现当前单元格的内容去到其他单元格之中比如上午替代了节数2 3 4的情况，这种时候就需要把后面的上午都注释掉只保留第一个即可 --><!-- rowspan="想要合并的行数" --><tr><td rowspan="4">上午</td><td>1</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><!-- 由于已经把上午进行合并了，我们就需要把后面的上午注释掉 --><!-- 不然会出现单元格错乱的现象 --><tr><!-- <td>上午</td> --><td>2</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><tr><!-- <td>上午</td> --><td>3</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><tr><!-- <td>上午</td> --><td>4</td><td>物权法</td><td>没有课</td><td>民事诉讼法</td><td>合同法</td><td>刑法分论</td></tr><!-- 午餐时间： --><tr><!-- 利用align属性使它居中 --><!-- 利用bgcolor使它的背景颜色为ff788b色 --><td colspan="7" align="center" bgcolor="ff788b">就餐和休息时间</td></tr></tbody></table></body></html>
| 序号 | 列表元素 | 描述 | 场景 |
|---|---|---|---|
| 1 | <ul> + <li> |
无序列表 | 导航 |
| 2 | <ol> + <li> |
有序列表 | 事务 |
| 3 | <dl> + <dt> + <dd> |
自定义列表 | 声明 |
无需列表通常用在导航之中，通过
<ul>标签和<li>标签来进行嵌套使用，从而达到一定的效果。
<!-- 无序列表 --><!-- 利用`ul标签包含li标签实现 --><!-- 列表标签和a标签套用，可以实现列表的跳转 --><h3>导航</h3><ul class="nav"><li><a href="">百度</a></li><li><a href="">搜狗</a></li><li><a href="">博客</a></li><li><a href="">登录/注册</a></li></ul>
通常用在事务上，用于表达一定的时间顺序和计划顺序，能够有一定顺序去完成任务的场景。
通常使用<ol>+<li>标签使用
<!-- 有序列表 --><!-- 有序列表利用ol标签包含li标签来实现 --><h3>计划:</h3><ol class="plan"><li><a href="">早上</a></li><li><a href="">中午</a></li><li><a href="">晚上</a></li><li><a href="">凌晨</a></li></ol>
通常用在声明等页脚说明上
利用<dl>标签下嵌套<dt>嵌套<dd>标签使用<dl>标签声明这是一个自定义列表，<dt>表示这个列表的标题，<dd>为内容
<!-- 自定义列表 --><!-- dl标签包含dt标签和dd标签来进行使用 --><!-- 其中，dl标签表示是一个列表，dt表示标题，dd表示内容 --><!-- 通常自定义列表可在页脚友情链接或联系方式等地方可见 --><dl class="explain"><dt>联系方式:</dt><dd>QQ735740022</dd><dd>联系地址：XX市XX县XX区</dd><dd>tel：12456</dd><dt>友情链接</dt><dd><a href="">百度首页</a></dd><dd><a href="">搜狗首页</a></dd><dd><a href="">腾讯首页</a></dd></dl>
不搭配 CSS 代码可以实现以下效果：
配合老师给的 css 代码，可以做到以下效果：
jpg格式, 小图片,或需要背景透明的,推荐使用png格式gif格式| 元素 | 描述 |
|---|---|
<img> |
图片元素,空元素(单标签) |
<figure> |
图片/插图区域 |
<figcaption> |
图片/插图区域的标题 |
<img>常用属性| 属性 | 描述 |
|---|---|
src |
图片来源地址, 可以是本地, 也可以是来自网络 |
alt |
图片描述信息,当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别 |
title |
鼠标悬停时显示的文本信息, 通常与 alt 属性一致 |
width/height |
图片尺寸, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置 |
<!-- 创建一个容器，可以放置图片和文字链接 --><!-- 创建一个类，使图片和文字为一个整体 --><!-- img标签应该注意的地方重点是src，src存放的是图片的地址，alt属性为图片地址错误时无法加载图片时提示的文字，title为图片标题，即为鼠标放置在图片上的时候提示的文字 --><div class="container"><div class="course"><a href="https://www.php.cn/course/1136.html#down"><imgsrc="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png"alt="PHP中文网第13期前端培训课程"title="PHP中文网第13期前端培训课程"width="200"/></a><a href="https://www.php.cn/course/1136.html#down">第13期前端培训课程</a></div><div class="course"><a href="https://www.php.cn/course/1137.html"><imgsrc="https://img.php.cn/upload/course/000/000/001/5f59db6ea55b7525.png"alt="PHP编程"title="PHP编程"width="200"/></a><a href="https://www.php.cn/course/1137.html">PHP编程</a></div></div>
当图片地址错误时：alt 属性中的值即为提示词，提示用户这张图片是干嘛的
图片地址和代码正确：
配合老师给的 CSS 代码，可以实现：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
