HTML5_样式,链接和表格

最新推荐文章于 2020-11-16 11:10:17 发布

原创最新推荐文章于 2020-11-16 11:10:17 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

【HTML5】专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML5中的样式应用、链接创建和表格定义的基本概念和使用方法，包括外部、内部和内联样式表的使用，文本、图片链接的创建，以及表格的简单构建。

一.HTML5样式

1.标签

<link>:资源引用

2.属性

rel="stylesheet":外部样式表

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

margin-left:边距

3.样式的使用方式

（1）外部样式表

<link rel="stylesheet" type="text/css" href="myStyle.css">

（2）内部样式表

    <!--内部样式表-->
    <style type="text/css">
    p{
        color: chartreuse;
    }
    </style>

（3）内联样式表

<p style="color: crimson">内联样式表</p>

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5样式</title>
    <!--外部样式表-->
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    <!--内部样式表-->
    <style type="text/css">
    p{
        color: chartreuse;
    }
    </style>
</head>
<body>
<h1>HTML5样式</h1>
<p>内部样式表</p>
<p style="color: crimson">内联样式表</p>
</body>
</html>

二.HTML5链接

1.连接数据

（1）文本链接

（2）图片链接

2.属性

href属性：指向另一个文档的链接（跳转到另外一个页面）

name属性：指向文档内的链接（同一个页面内不同位置的跳转）

3.img标签属性

alt：替换文本属性

height：指定高度

wight：指定宽度

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5链接</title>
</head>
<body>
<!--文本链接-->
<a href="http://www.baidu.com">百度</a>
<br>
<!--图片链接-->
<a href="http://www.baidu.com">
    <img src="liangdianshui.jpg">
</a>
<a name="baidu">百度</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>
<a href="#baidu">跳转到页面上面的“百度”</a>
</body>
</html>

三.HTML5表格

1.定义和用法

<table>标签定义HTML表格

一个简单的HTML表格包括table元素，一个或多个tr,th以及

tr:定义表格的行

th：定义表格的表头

td：定义表格的表格单元

更复杂的 HTML 表格也可能包含 caption, col, colgroup, thead, tfoot, tbody 等元素。

Demo:http://download.youkuaiyun.com/detail/two_water/9427026