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.csdn.net/detail/two_water/9427026

秒客网

HTML5_样式,链接和表格

相关文章