HTML5学习之四样式、链接和表格

最新推荐文章于 2022-02-15 18:49:18 发布

Henry_Jing

最新推荐文章于 2022-02-15 18:49:18 发布

阅读量643

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/JCY1009015337/article/details/53452810

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

样式

1、标签

<link>资源引用

2、属性

rel="stylesheet"：外部样式表

type="text/css"：引入文档的类型

3、三种样式表的插入方式

外部样式表：<ink rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表

内联样式表

链接

1、链接数据（文本链接、图片链接）

2、属性（href属性：指向另一个文档的链接，name属性：创建文档内的链接）

创建文档内的链接，使用name属性

   <a name="tips">hello</a>
   <a href="#tips">跳转到hello</a>

3、img标签属性（alt：替换文本属性，宽和高）

<a href="http://www.baidu.com/">
    <img width="100px" height="100px" alt="html5logo" src="001.jpg"/>
</a>

表格

<caption>定义表格标题

<th>定义表格的表头

定义边框的 border="1"

定义表头 <th>

单元格内边距

<table border="1" cellpadding="10">

单元格之间的间距

<table border="1" cellspacing="10">

表格设置背景颜色，设置背景图片

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
       <tr>
           <td>单元1</td>
           <td>单元2</td>
           <td>单元3</td>
       </tr>
        <tr>
            <td>单元4</td>
            <td>单元5</td>
            <td>单元6</td>
        </tr>
    </table>
    <br/>
    <table border="1" cellpadding="10" cellspacing="10" bgcolor="#32ff24" background="001.jpg">
        <tr>
            <td>单元1</td>
            <td>单元2</td>
            <td>单元3</td>
        </tr>
        <tr>
            <td>单元4</td>
            <td>单元5</td>
            <td>单元6</td>
        </tr>
    </table>
</body>
</html>