HTML5学习笔记<三>: HTML5样式, 连接和表格

HTML样式

　　1, 标签:

　　<style>: 样式定义

　　<link>: 资源引用

　　2. 属性:

　　rel="stylesheet": 外部样式表

　　type="text/css": 引入文档的类型

　　margin-left:边距

　　3. 三种样式表的插入方法

　　外部样式表:　　

　　注: 外部样式表需要创建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的大括号内可以设置多个属性.

　　内部样式表:

　　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>

　　内联样式表:

　　注:内部样式也可设置多个属性, 在双引号内多个属性以分号";"隔开

　　代码示例:

<!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学习笔 ...

随机推荐

Ajax+存储过程真分页实例解析(10W数据毫秒级+项目解析)
周末闲来无事,突然想写个分页的东西玩玩,说走就走在文章最后我会把整个项目+数据库附上,下载下来直接运行就可以看效果了.整个项目采用的是简单三层模式,开发平开是VS2010+SQL2012 一.我要做 ...
svn conflicts: local delete, incoming delete upon update
svn st查看更新的时候发现存在conflicts,提示很多 local delete, incoming delete upon update , $:svn st ? C IMIRROR.T3 ...
使用net Manager工具远程连接oracle
一,在服务端配置oracle端口在命令行中输入netca命令,打开相关配置默认端口号为1521 二,配置端口后使用Telnet工具调试端口是否联通在命令行输入telnet 服务器ip 端口号三, ...
tableView的编辑
首先记住声明编辑样式的属性 UITableViewCellEditingStyle 和四个步骤第一步:让tableView处于编辑状态 [self.rootView.tabView setEdit ...
oracle数据库在mybatis中使用uuid
<insert id="insert" parameterType="com.xxx.SystemDepartment"> <sele ...
自己动手搭建苹果推送Push服务器
今天我们来说下怎么自己建一个Push推送服务器, 当然还是用的苹果的APNS 这里我们讲的的自己服务器端的实现在做推送服务器之前我们要先做一些准备动作 #1. 确保你的App ID有启用PushNo ...
gitHub搭建
1.注册一个gitHub账户 2.新建立一个远程仓库(登陆进去后-->点击图标 --> New repository ) 3.跳转后,填写相关信息(仓库名称及选项) 4.在本地的文件夹里右 ...
Javascript事件绑定及深入
由于开学后的编程实验课,接触了海量字符换搜索的实验,所以好几天没有学习JS课程了,今天继续学习事件绑定. 传统事件绑定存在一些问题,如:同名事件函数都执行,第二个函数会覆盖第一个. 下面我们以事件切换 ...
Qt入门之基础篇（三）：掌握Qt4的静态编译基本方法
转载载请注明出处:CN_Simo. 导语: 前两章都提到过“静态编译”(Static Compilation),在Windows下一次静态编译差不多需要长达三个小时才能完成,而且还非常容易由于各种原因 ...
第三方库AFNetworking 3.1.0的简单使用
AFNetworking是一个在iOS开发中使用非常多网络开源库.它是一个轻量级的网络请求API类库. 适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLCon ...

HTML5学习笔记<三>: HTML5样式, 连接和表格

HTML5学习笔记<三>: HTML5样式, 连接和表格的更多相关文章

随机推荐

热门专题