-
图形标签: <img>
‘‘‘ src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) ‘‘‘
案例:
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58" alt="红烧肉" title="红烧肉" width="100px" height="100px">
-
超链接标签(锚标签): <a> </a>
‘‘‘ <a href="" target="_blank" >click</a> href属性指定目标网页地址。该地址可以有几种类型: 绝对 URL - 指向另一个站点(比如 href="http://www.jd.com) 相对 URL - 指当前站点中确切的路径(href="index.htm") 锚 URL - 指向页面中的锚(href="#top") ‘‘‘
案例及效果:
<a href="https://www.baidu.com/" target="_blank">点击</a>
-
列表标签
‘‘‘ <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)] <ol>: 有序列表 <li>:列表中的每一项. <dl> 定义列表 <dt> 列表标题 <dd> 列表项 ‘‘‘
案例及效果:
<!--unorder list 无序--> <ul> <li>111</li> <li>222</li> <li>333</li> </ul>
- 111
- 222
- 333
<!--order list 有序--> <ol> <li>111</li> <li>222</li> <li>333</li> </ol>
- 111
- 222
- 333
<dl> <!--dd--> <dt>河北省</dt> <dd>保定市</dd> <dd>石家庄</dd> <dd>邯郸</dd> </dl>
- 河北省
- 保定市
- 石家庄
- 邯郸
-
表格标签: <table>
表格概念
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
<table> <tr> <td>标题</td> <td>标题</td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> </table>
属性:
‘‘‘ <tr>: table row <th>: table head cell <td>: table data cell 属性: border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格) ‘‘‘
案例及效果:
<table border="1px" cellpadding="10px" cellspacing="2px"> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan="2">111</td> <td>111</td> <td>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> <td rowspan="2">111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table>
111 | 111 | 111 | 111 |
111 | 111 | 111 | |
111 | 111 | 111 | 111 |
111 | 111 | 111 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58" alt="红烧肉" title="红烧肉" width="100px" height="100px"> <h3 style="background-color: aqua;font-weight: 100"></h3> <a href="https://www.baidu.com/" target="_blank">点击</a> <!--<a href="基本标签.html" target="_blank">点击2</a>--> <!--<a href="基本标签.html" target="_blank">--> <!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" alt="egon" title="egon" width="100px" height="100px">--> <!--</a>--> <!--unorder list 无序--> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <!--order list 有序--> <ol> <li>111</li> <li>222</li> <li>333</li> </ol> <!--定义 define list--> <dl> <!--dd--> <dt>河北省</dt> <dd>保定市</dd> <dd>石家庄</dd> <dd>邯郸</dd> </dl> <table border="1px" cellpadding="10px" cellspacing="2px"> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan="2">111</td> <td>111</td> <td>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> <td rowspan="2">111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table> </body> </html>