HTML5样式、链接和表格

[摘要：本章内容1. HTML款式2. HTML链接3. HTML表格HTML款式1. 标签： <style>:款式界说 <link>:资本援用 2. 属性： rel="stylesheet":中]

本章内容

1. HTML样式2. HTML链接3. HTML表格HTML样式

1. 标签： <style>:样式定义 <link>:资源引用 2. 属性： rel="stylesheet":外部样式表 type="text/css":引入文档的类型 margin-left:边距3. 三种样式表插入方法：外部样式表： <link rel="stylesheet" type="text/css" href="mystyle.css"> 内部样式表： <style type="text/css"> body{background-color: red} p{margin-left: 20px} </style 内联样式表： <p style= "color: red">代码效果

外部样式表

工程目录结构：

index.html:

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

mystyle.css:

h1{ color: aquamarine;}

运行效果：

内部样式表

index.html:

<!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: olivedrab; } </style></head><body> <h1>标题h1</h1> <p>hello world</p></body></html>

效果：

内联样式表

index.html:

效果：

HTML链接

1. 链接数据文本链接图片链接2. 属性： herf属性：指向另一个文档的链接 name属性：创建文档内的链接3. img标签属性： alt:替换文本属性 width:宽 height:高代码效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>链接</title></head><body> <a href="http://www.baidu.com">百度一下哈哈哈</a><br/><br/> <a href="http://www.baidu.com"><img src="a.png" width="100px" height="100px" alt="helloimg"></a><br/><br/> <a href="http://www.baidu.com"><img src="b.png" width="100px" height="100px" alt="helloimg"></a> <br/><br/> <a name="a1">a1</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/><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="#a1">a2</a></body></html>

效果：

a2在画面外面，最底部，点击直接跳到a1

表格

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

代码：

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>biaoge</title></head><body> <h3>没有边框的表格</h3> <table> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> </table> <h3>表头&空的单元格&表格标题</h3> <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>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> </table> <h3>表格内的标签</h3> <table border="1"> <tr> <td>单元1</td> <td>单元2</td> </tr> <tr> <td> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </td> <td>单元4</td> </tr> </table> <h3>单元格的边距&间距&背景色&背景图片</h3> cellpadding 是边距<br/> cellspacing 是间距 <table border="1" cellpadding="10" cellspacing="10" bgcolor="#a52a2a" background="a.png"> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> </table> <h3>跨行</h3> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>甲</td> <td>123456</td> <td>234567</td> </tr> </table> <h3>跨列</h3> <table border="1"> <tr> <th>姓名</th> <td>乙</td> </tr> <tr> <th rowspan="2">电话</th> <td>123456</td> </tr> <tr> <td>123456</td> </tr> </table></body></html>

效果：

OK！又是愉快的一天结束了！

相关推荐

感谢关注 Ithao123HTML5频道，ithao123.cn是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!

关键词：

文章点评：

精选专题

Laravel入门教程

Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。

hadoop学习及应用

Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。

互联网产品设计

产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计

产品经理职责

随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。