欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

H5+CSS+JS:链接,表格

程序员文章站 2022-07-05 20:40:09
...

链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
     <a href="http://www.jikexueyuan.com">点击我</a>
     <a href="http://www.baidu.com">
         <img src="images/2.jpg" width="400px" height="400px" alt="l00000ogoo">  <!--图片的长宽-->
     </a>
    <a name="tips">hello</a>         <!--name标签指定的文档内的链接-->
     <br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">跳转到hello</a>
</body>
</html>
  • name指定标签内的链接:回到顶部……

表格

  • 表格行和列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <caption>表1</caption>
    <tr>
        <th>0</th>
        <th>0</th>
        <th>0</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

H5+CSS+JS:链接,表格


  • 表格内的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>
            我想吃了
        </td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

H5+CSS+JS:链接,表格


  • 单元格边距和单元格间距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" cellpadding="10">  <!--单元格边距-->
    <caption>边距变大</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" cellspacing="10">  <!--单元格间距-->
    <caption>间距变大</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

H5+CSS+JS:链接,表格


  • 背景颜色和背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1" bgcolor="#7fff00">
    <caption>bgcolor</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" background="images/1.png">
    <caption>background</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

H5+CSS+JS:链接,表格

相关标签: H5