您的位置：首页 > Web前端 > HTML5

HTML5样式 链接 表格

2016-05-08 22:02 513 查看
HTML样式
1.标签：

<style> 样式定义

<link> 资源引用

2.属性：

rel = "stylesheet" 外部样式表
type = "text/css" 引用文档的类型

margin-left 边距

外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：
<style>
body{
background-color:red;
}
p{
margin-left:20px;
}
</style>
内联样式表：

<p style="color:red">


HTML链接
1.链接数据：

文本链接

<a href="www.baidu.com">百度</a>
图片链接

<a href="
<img src="1.jpg">
</a>
2.属性：

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

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

<a name="tips">hello</a>
<a href="#tips">跳转到hello</a> //在百度百科里面使用的非常多
3.img标签属性：

alt:替换文本属性（在图片不能正常显示时替换为文本"1.jpg_logo"）

<img src="1.jpg" width="500px" height="500px" alt="1.jpg_logo">


HTML表格
<table> 定义表格

<caption> 定义表格标题

<th> 定义表格表头

<tr> 定义表格的行

<td> 定义表格的单元

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

<col> 定义表格的列属性

1.表格的表头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的表头</title>
</head>
<body>
<table border="1">
<tr>
<th>单元1</th>
<th>单元2</th>
<th>单元3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
2.没有边框的表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有边框的表格</title>
</head>
<body>
<table>
<tr>
<th>单元1</th>
<th>单元2</th>
<th>单元3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
3.空单元格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空单元格</title>
</head>
<body>
<table border="1">
<tr>
<th>单元1</th>
<th>单元2</th>
<th>单元3</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
4.带有标题的表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有标题的表格------加p元素</title>
</head>
<body>
<p>带标题的表格</p>
<table border="1">
<tr>
<th>单元1</th>
<th>单元2</th>
<th>单元3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有标题的表格------加caption</title>
</head>
<body>
<table border="1">
<caption>带标题的表格</caption>
<tr>
<th>单元1</th>
<th>单元2</th>
<th>单元3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
5.表格的内标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的内标签</title>
</head>
<body>
<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>
</body>
</html>
6.单元格边距（cellpadding）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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><br/>
</table>
<table border="1" cellpadding="10">
<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>
7.单元格间距（cellspacing）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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><br/>
</table>
<table border="1" cellspacing="10">
<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>
8.表格内的背景颜色和图像

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的背景颜色</title>
</head>
<body>
<table border="1" bgcolor="aqua">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的背景图像</title>
</head>
<body>
<table border="1" background="1.jpg" cellpadding="100">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML 链接 样式
相关文章推荐
新的分享
章节导航