HTML5学习笔记<三>: HTML5样式, 连接和表格
HTML样式
1, 标签:
<style>: 样式定义
<link>: 资源引用
2. 属性:
rel="stylesheet": 外部样式表
type="text/css": 引入文档的类型
margin-left:边距
3. 三种样式表的插入方法
外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
注: 外部样式表需要创建css文件, 右击工程目录 New->File, 命名为:MyStyle.css, 必须指定后缀名.
.html文件需与.css放在同一目录下.
代码示例:
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<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: red;
}
MyStyle.css的大括号内可以设置多个属性.
内部样式表:
<style type="text/css">
body {background-color:red}
p {nargin-left:20px}
</style>
注: 内部样式的代码需放到head标签里面, style标签内可以设置多个属性.
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
p {
color: blueviolet;
}
</style>
</head>
<body>
<P>欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
</body>
</html>
内联样式表:
<p style="color:red">
注:内部样式也可设置多个属性, 在双引号内 多个属性以分号";"隔开
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
</head>
<body>
<P style="color: burlywood; margin-left: 20px">欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
</body>
</html>
HTML连接
1. 连接数据:
文本连接
图片连接
2. 属性:
href属性: 只想另一个文档的连接
name属性: 创建文档内的连接
3. img标签属性:
alt: 替换文本属性, 当图片无法正常显示时, 显示alt属性所赋值的文字
width: 宽
height: 高
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接</title>
</head>
<body>
<!--连接-->
<a href="http://www.cnblogs.com/winsoncheung/">点击我进入南心芭比的博客</a>
<a href="http://www.cnblogs.com/winsoncheung">
<!--图片连接 ,img属性-->
<img src="http://popup.freep.cn/images/freepupload.jpg" width="100px", height="100px" alt="上传logo">
</a>
<br/>
<!--name属性-->
<a name="tips">hello</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/><br/><br/> <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/> <!--文档内部跳转连接--> <a href="#tips">跳转到hello</a> </body> </html>
HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--定义表格-->
<table>
<!--定义表格的行-->
<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>
练习:
1. 没有边框的表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--定义表格-->
<table>
<!--定义表格的行-->
<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 border="1">
<!--定义表头-->
<th>单元</th>
<th>单元</th>
<th>单元</th>
<!--定义表格的行-->
<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">
<!--定义表头-->
<th>单元</th>
<th>单元</th>
<th>单元</th>
<!--定义表格的行-->
<tr>
<!--定义表格的单元-->
<td></td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<!--定义表格的单元-->
<td>单元格1</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
4. 带有标题的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<p>表格</p>
<!--定义表格-->
<table border="1">
<!--带标题的表格-->
<caption>重要表格</caption>
<tr>
<!--定义表头-->
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<!--定义表格的行-->
<tr>
<!--定义表格的单元-->
<td></td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<!--定义表格的单元-->
<td>单元格1</td>
<td></td>
<td></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>apple</li>
<li>bananer</li>
<li>polo</li>
</ul>
</td>
<td>
我想吃
</td>
</tr>
</table>
</body>
</html>
6. 单元格边距
<!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>
</table>
<br/>
<!--单元格边距-->
<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. 单元格间距
<!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>
</table>
<br/>
<!--单元格间距-->
<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" backgroud="http://popup.freep.cn/images/freepupload.jpg">
<tr>
<td>单元1</td>
<td>单元2 </td>
<td>单元3</td>
</tr>
<tr>
<td>单元4</td>
<td>单元5</td>
<td>单元6</td>
</tr>
</table>
<br/>
<!--表格内的背景颜色-->
<table border="1" bgcolor="#ff7f50">
<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>
9. 单元格内容排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
10. 跨行和跨列单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body> <h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> <h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</html>
以上例子阅读者可复制到IntelliJ IDEA中试试.
欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~
HTML5学习笔记<三>: HTML5样式, 连接和表格的更多相关文章
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- 【canvas学习笔记三】样式和颜色
上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条.这节就来学习设置不同的颜色和线条样式. 颜色 设置颜色主要有两个属性: fillStyle = color 设置填充颜色 stro ...
- HTML5学习笔记三 HTML元素、属性、标题、段落简介
一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- HTML5学习笔记三：aside元素，time元素与微格式
一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...
- HTML5学习笔记<六>: HTML5框架, 背景和实体
HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...
- HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]
使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...
- HTML5学习笔记1 HTML5 新元素
自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能 ...
- HTML5学习笔记（四）：关于表格
在一个实例中碰到表格,总结下,先上代码,例: <table border="1"> <thead> <th>表头</th> < ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- OpenCV框架介绍
OpenCV框架介绍 概述 OpenCV是一个开放源代码的计算机视觉应用平台,由英特尔公司下属研发中心俄罗斯团队发起该项目,开源BSD证书,OpenCV的目标是实现实时计算机视觉,,是一个跨平台的计算 ...
- [随笔]利用云虚拟机和学校VPN实现校外访问校内站点（反向代理）
探究背景简介: 大学校内站点一般不对外开放,个人认为原因有二: 一是站点内容受众就是大学师生: 二是站点基本无防御措施,在公网环境下容易发生意外情况. 至于为何不对外开放,不是这篇随笔探讨的重点,利用 ...
- Hadoop-2.x启动HDFS和YARN的方式
逐一启动(实际生产环境中的启动方式) * sbin/hadoop-daemon.sh start|stop namenode|datanode|journalnode * sbin/yarn-daem ...
- MyBatis:学习笔记(3)——关联查询
MyBatis:学习笔记(3)--关联查询 关联查询 理解联结 SQL最强大的功能之一在于我们可以在数据查询的执行中可以使用联结,来将多个表中的数据作为整体进行筛选. 模拟一个简单的在线商品购物系统, ...
- ubuntu 笔记一
注:ubuntu14.04 64位 1.刚安装的ubuntu无法在终端使用su 原因:root没有默认密码,需要手动设定. 解决方法:以具有sudo权限的用户登录 给root用户设置密码:打开一个te ...
- nRF51800 蓝牙学习 进程记录 2：关于二维数组 执念执战
前天在玩OLED时想完成一直想弄得一个东西,就是简单的单片机游戏.因为STM32和nRF51822的内存足够,所以就用缓存数组的方法来显示图像(我也不知道术语是啥,反正就是在内存中建立一个128X64 ...
- css实现页面居中的一种方法
在网页制作的过程中,为方便读者的阅读,会把网页内容限定在一个较小的方框中,并居中显示,如何实现这一功能呢? 1)把正文放在一个<div>标签中,只要这个标签居中整个网页就居中了. < ...
- arcpy.mapping实战-专题图制图自动化
arcpy.mapping实战-专题图制图自动化 by 李远祥 最初对arcpy.mapping感兴趣是因为一次大规模的专题地图调整的需要,由于某某单位利用ArcEngine编写的专题图出图系统,出现 ...
- 时间处理之strtotime
strtotime (PHP 4, PHP 5, PHP 7)strtotime - 将任何英文文本的日期时间描述解析为 Unix 时间戳说明 int strtotime ( string $time ...
- 传输控制协议TCP
TCP主要特点: (1)面向连接 (2)只能是点到点 (3)可靠的传输协议 (4)全双工通信,各自各自的读写缓冲区,应用层吧数据交给发送缓冲区,tcp合适就发送了,接受的时候tcp写入接受缓冲区,应用 ...