常用标签

图形标签: <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>

<!--order list 有序-->
<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<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	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>