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

HTML5 基础内容（样式/链接/表格） 002

2017-07-03 16:59 751 查看
1.8 HTML的样式

标签:

<style>:样式定义
<link>:资源引用

属性：

rel="stylesheet":外部样式表
type="text/css":引入文档类型
margin-left:边距

三种样式表的插入方式:

1.外部样式表:

<link rel="stylesheeet"type="text/csss"href="mystyle.css">

2.内联样式表：

<p style="color:yellow">


测试原码:

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet"type="text/css"href="mysyle.css"><!--外部样式表的插入方式 还需要创建一个外部的css文件，在外部文件内进行修改-->
<style type="text/css">
p{
color: aqua;
margin-left:100px}
body {
background-color: #ff71d3;
}
</style>
</head>        <!--上面style开始的部分是内部样式表的插入方式，-->
<body>
<h1>标题h1</h1>
<p>欢迎来到我的微博</p>
<a>点击跳转到我的微博</a>
<br>
<a href="http://www.cnblogs.com/martin666/" style="color:#feff2c">点击跳转到我的微博</a><!--内联样式表的插入方式-->
</body>
</html>

CSS文件部分:

h1{
color: red;
}

1.9HTML链接

链接数据:文本链接，图片链接。

链接属性:href属性：指向另一个文档的链接。name属性：创建文档内的链接。

img标签属性：alt替换文本属性。width 宽。height 长。

测试原码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
</head>
<body>
<a name="nameId"style="color: red">这里是页面的顶部</a><!--name属性：创建文本内的链接-->
<br>
<a href="http://www.cnblogs.com/martin666/">点击我跳转</a><!--文字链接-->
<br>
<a href="http://www.cnblogs.com/martin666/"><!--图片链接-->
<img src="image/byamaj.jpg"width="150px"height="100px"alt="这是一个斗地主图片"></a><!--alt:替换文本属性，即看不到图片时，文字提示图片内容。注意：实现这个功能要新建一个image文件夹放一张图片命名为byamaj.jpg-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#nameId">跳转到顶部</a><!--name:创建文本内的链接,跳转到“这里是页面的顶部”的位置-->
</body>
</html>

2.0 HTML样式:链接和表格

HTML表格:

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

如何创建一下HTML表格:

1.带有边框的表格
2.表格中的表头
3.空单元格
4.带有标题的表格


测试原码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="10"> <!--带有边框的表格-->
<caption>表头</caption> <!--表格中的标题-->
<tr>
<th>单元</th><!--表格中的表头-->
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td></td> <!--空单元格-->
<td>单元格3</td>
</tr>
</table>
</body>


5.表格内的标签

测试原码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="10">
<tr>
<td>表格1</td>
<td>表格1</td>
</tr>
<tr>
<td>
<ul>
<li>我的微博1</li><!--表格内的标签-->
<li>我的微博2</li>
<li>我的微博3</li>
</ul>
</td>
<td>
我的微博5
</td>
</tr>
</table>
</body>
</html>


6.单元格边框
7.单元格间距
8.表格内的背景颜色和图像
9.单元格内容排列
10.跨行和跨列单元格


测试原码:

<!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>单元3</td>
<td>单元4</td>
<td>单元5</td>
</tr>
</table>
<br>
<table border="1"cellpadding="10" cellspacing="10"bgcolor="aqua"background="image/001.jpg"><!--cellpadding:单元格的边距，cellspacing:单元格的间距,background:背景图片，-->
<tr>
<td>单元1</td>
<td>单元2</td>
<td>单元3</td>
</tr>
<tr>
<td>单元3</td>
<td>单元4</td>
<td>单元5</td>
</tr>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航