常用标签

  • 图形标签: <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>
  1. 111
  2. 222
  3. 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>
练习代码

 

posted @ 2018-01-11 11:21  大川哥  阅读(206)  评论(0编辑  收藏  举报