题外话：由于本人也是从零开始学习，所以做的笔记都是最简单的，会根据之后的学习慢慢补充里面的知识。
一、三种常用样式
案例：
- 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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
