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

HTML5学习03-HTML5样式 链接和表格

2017-07-03 17:00 471 查看

题外话：由于本人也是从零开始学习，所以做的笔记都是最简单的，会根据之后的学习慢慢补充里面的知识。

一、三种常用样式



案例：

1、外联的样式，myyangshiss.css

h1{
color: red;
}


2、代码内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的使用</title>

<!--第一种：引用外部样式表-->
<link rel="stylesheet" type="text/css" href="myyangshiss.css">

<!--第二种内部引入文档类型-->
<style type="text/css">
p{ color: aqua; }
</style>
</head>

<body>
<!--标签内部直接引用-->
<p >欢迎开始学习HTML5开发</p>
<h1>我是超人</h1>

<!--第三种，内联样式-->
<a href="www.baidu.com" style="color: green">点击跳转到百度</a>

</body>
</html>


3、效果图



注意



二、链接



案例：

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接</title>
</head>
<body>

<!--1、文本链接-->
<a href="https://www.baidu.com/">跳转到百度</a>

<br><br><br>
<!--2、点击图片跳转-->-

<a href="https://www.baidu.com/">
<img src="imgs/meinv.png" width="200px" height="200px">
</a>

<br>
<!--3、图片无法显示，后面添加提示-->

<a href="https://www.baidu.com/">
<img src="imgs/meinvss.png" width="200px" height="200px" alt="点击我跳转到百度" >
</a>

<br>
<!--4、文档内部跳转-->
<a href="#tiaozhuan"> 跳转到小明位置</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="tiaozhuan">小明</a>
<br><br><br><br><br><br><br>
</body>
</html>


效果图，点击就可以跳转到百度和小明的位置



三、表格



案例：



案例一：没有边框的表格

<br>---------案例一-----------
<table border="1">
<tr>
<td>张三</td>
<td>王五</td>
<td>李六</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例二：定义带有表头的表格（th元素）

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例三：内容包含空值的表格（就是不写值）

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例四：定义带有标题的表格（caption元素）

<table border="1">
<caption>重要文档表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例五：表格内的标签（）

<table border="1">
<caption>标签</caption>
<tr>
<td>水果</td>
<td>味道</td>
</tr>

<tr>
<td>
<ul>

<li>苹果</li>
<li>橘子</li>
<li>苦瓜</li>
</ul>
</td>

<td>
<ul>
<li>甜的</li>
<li>酸的</li>
<li>苦的</li>
</ul>
</td>
</tr>

</table>


效果图



案例六：单元格的边距（cellpadding）

<table border="1" cellpadding="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例七：单元格的边内间距（cellpadding）

<table border="1" cellspacing="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例八：添加背景使用：bgcolor，添加图片使用：background

<table border="1" bgcolor="#ffe4c4">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br><br>
<table border="1" background="imgs/tupian.png">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>


效果图



案例九：colspan:跨列 rowspan:跨列

<table border="1" cellspacing="10">
<tr>
<th>姓名</th>
<th colspan="2">年龄</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">25岁</td>
</tr>
<tr>
<td>翠花</td>
<td ></td>
</tr>
</table>


效果图



所有的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>

<!--table定义没有边框的表格-->
<br>---------案例一-----------
<table >
<tr>
<td>张三</td>
<td>王五</td>
<td>李六</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>

<br>---------案例二----------
<!--table定义带有表头的表格-->

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>

<br>---------案三----------
<!--table内容包含空值的表格-->

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>

<br>---------案四----------
<!--table定义带有标题的表格-->

<table border="1">
<caption>重要文档表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>

<br>---------案五----------
<!--表格内的标签-->

<table border="1">
<caption>标签</caption>
<tr>
<td>水果</td>
<td>味道</td>
</tr>

<tr>
<td>
<ul>

<li>苹果</li>
<li>橘子</li>
<li>苦瓜</li>
</ul>
</td>

<td>
<ul>

<li>甜的</li>
<li>酸的</li>
<li>苦的</li>
</ul>
</td>
</tr>

</table>

<br>---------案六：单元格的边距----------

<table border="1" cellpadding="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br>---------案七：单元格的边内间距----------

<table border="1" cellspacing="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br>---------案八：单元格的边内间距----------

<table border="1" cellspacing="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br>---------案九：添加背景使用：bgcolor，添加图片使用：background----------

<table border="1" bgcolor="#ffe4c4">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br><br>
<table border="1" background="imgs/tupian.png">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21岁</td>
<td>女</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br>

<br>---------案九：colspan:跨列  rowspan:跨列----------

<table border="1" cellspacing="10">
<tr>
<th>姓名</th>
<th colspan="2">年龄</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">25岁</td>
</tr>
<tr>
<td>翠花</td>
<td ></td>
</tr>
</table></body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航