HTML5开发笔记_2、HTML5基础_3.HTML5样式、链接和表格

最新推荐文章于 2021-06-21 18:04:43 发布

张金富

最新推荐文章于 2021-06-21 18:04:43 发布

阅读量951

点赞数

分类专栏： HTML5开发笔记文章标签：读书笔记 html5

本文链接：https://blog.csdn.net/zjf_sdnu/article/details/44162361

版权

HTML5开发笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本课学习HTML5样式和使用，掌握后可以很好的使用HTML5链接到属性和熟练应用表格。

课程概要

一、HTML样式

1、标签：

2、属性：

rel="stylesheet"：外部样式表

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

margin-left：边距

3、三种样式表插入方法：

外部样式表：

内部样式表：

body {backgroud-color: red;}

p {margin-left: 20px;}

</style>

内联样式表：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        p{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>欢迎来到极客学院</p>
    <a href="http://www.jikexueyuan.com" style="color: chartreuse">点击我跳转到极客学院</a>
</body>
</html>

mystyle.css：

h1 {
    color: red;
}

二、HTML链接

1、链接数据：

文本链接

图片链接

2、属性：

href属性：指向另一个文档的链接

name属性：创建文档内的链接

3、img标签属性：

alt：替换文本属性

width：宽

height：高

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.jikexueyuan.com">点击我</a>
    <a href="http://www.jikexueyuan.com">
        <img src="html5.jpg" width="200px" height="200px" alt="html5logo">
    </a>
    <a name="tips">hello</a>
    <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/><br/><br/><br/><br/><br/>
    <a href="#tips">跳转到hello</a>
</body>
</html>

三、HTML表格

表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格的单元
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<col>	定义表格的列属性

1、没有边框的表格

2、表格的表头

3、空单元格

4、带有标题的表格

5、表格内的标签

6、单元格边距

7、单元格间距

8、表格内的背景颜色和图像

9、单元格内容排列

10、跨行和跨列单元格

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--<p>表格</p>
<table border="1">
    <caption>重要表格</caption>
    <tr>
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td></td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td>表格1</td>
        <td>表格2</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>菠萝</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>我想吃了</td>
    </tr>
</table>-->
    <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="#a52a2a" background="html5.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>