基于HTML整理02
html简介
hyperTest Markup Language 超文本标记语言,网页语言
后缀名:.html或者.htm
规则:
1.一个html文件都有开始标签和结束标签
2.html包含两部分内容:
<head>设置相关信息</head>
<body>显示在页面上的内容都写在body标签里面</body>
3.html代码不区分大小写
有的标签是双标签,有的是单标签(也就是没有结束标签)
比如换行标签
html的操作思想(理解)
1.网页中有很多的数据,不同的数据可能需要不同的显示效果,这就需要
使用标签将数据包(封装)起来.通过修改标签的属性值来显示不同的效果.
2.一个标签相当于一个容器,想要改变容器内数据显示样式,
就只需要改变容器内数据的属性值.来实现样式的不同.
html中常用的标签
文字标签和注释标签
1.文字标签:修改文字的样式
*size:文字的大小
取值范围是1~7 超过7默认为7
*color:文字的颜色
,两种表示方式
英文单词:blue green red white yellow gray....
十六进制:#66cc66 RGB
2.注释标签:
html注释标签
标题标签,水平线标签和特殊字符
3.标题标签:双标签
<h1>标题一</h1>,<h2>标题二</h2>,<h3>标题三</h3> .....<h6>标题六<h6>
标题从h1到h6,字体逐渐变小 自动换行
4.水平线标签:单标签
<hr size="5",color="blue"/>
- 属性
size:表示水平线的粗细 取值范围是1~7 超过7默认为7
color:表示水平线的颜色
两种表示方式
英文单词:blue green red white yellow gray....
十六进制:#66cc66 RGB
5.特殊字符
想要在页面显示这样的内容: <html>:是网页的开始
需要对特殊字符进行转义
> <
< >
空格
& &
超链接标签
a标签:
href : 要跳转的网页的资源路径
本地资源路径: 相对路径
网络资源: 网络资源(网页)的URL
target : 指明要跳转的网页资源的显示位置
_self (默认) 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意:
超链接标签中一定要声明访问方式,访问方式可以是图片或者文字.
瞄点:
作用: 在一张网页中进行资源跳转
使用:
先试用超链接标签在指定的网页位置增加瞄点
格式为 : <a name="#瞄点名" ></a>
使用a标签可以跳转到指定的瞄点,达到网页内部资源的跳转的目的
格式为 : <a href="#瞄点名"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<h4>本地资源:</h4>
<a href="06图片标签.html">图片标签</a><br>
<a href="04列表标签_有序无序.html" target="_blank">
<img src="img/1.jpg" alt="未来的自己" height="200px">
</a><br>
<!--网络资源-->
<h4>网络资源</h4>
<a href="http://www.taobao.com/">淘宝一下</a><br>
<a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.taobao.com/" target="_blank">
<img src="../imgs/4.jpg" alt="点击进入淘宝"
title="点击进入淘宝">
</a>
</body>
</html>
显示效果
图片.png
瞄点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瞄点</title>
</head>
<body>
<h3>瞄点</h3>
<hr>
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a href="#fourth">第四章</a><br>
<a href="#fifth">第五章</a><br>
<dl title="一帘幽梦，我心所属">
<a name="first"></a>
<dt>第一章</dt>
<dd>
也许，每一个人的青春是美好的；
也许，每一个人的青春是闪光的。所不同的，只是每一个人的心境；所不同的，<br>
只是社会不一般的评价。曾经的那些日子里，让我看到了什么是青春，也让我懂得了人生的意义。<br>
青春不是季节，青春不是时间，青春不是片断，青春是人生得以沉淀的每一个坚实的脚印。<br>
人生的意义不在于活了多少年，而是活着的那些日子做了些什么。<br>
人的一生，在历史的长河中显得十分的短暂，有时候，短得来不及问一句，什么是青春？每一个人都选择自己的人生坐标，每一个人总是在努力，<br>
让自己的人生有意义而放光彩，用社会的观念，世界的观念去衡量一个人的价值，身边就会有精彩， 身边就会有美好。<br>
在那样一个角落里，有那样的一个人，用坚强的信念丈量着人生，用精彩的文字书写着人生。<br>
曾经的青春，仿佛已经在二十一岁那年逝去，不复存在。人的一生，许多是未知的，也不会有如果，走过的每一步，<br>
都不会再回来。在我眼前，那样真切地出现了令许多人心碎的一幕。<br>
</dd>
<a name="second"></a>
<dt>第二章</dt>
<dd>
独坐岁月，一季喧嚣里，守着一帘幽梦，走走停停的站台上，感动着一次次遇见，或深或浅，倍感温暖，<br>
动荡的站台，起伏的心音，谁是你的心里的暖香，你眉底的脉脉含情？人生这场无止境的修行，体会中感悟，<br>
感动中珍惜，这冥冥中的定数，深情了三生石上的一抹嫣然一笑，今世停泊的港口，是否兴盛着烟火？<br>
你可知，那一帘幽梦，正是我心所属！
安坐夏季清风中，一丝窃窃私语，穿过耳畔，激发陈藏的心语，思绪蔓延出浓浓的想念，一纸誓言契约，于温润的<br>
红尘中，翼化为蝶恋的唇语，轻轻抖动梦的蝉翼，那一帘幽梦，摇曳生姿，舞摆着无尽的痴缠，如蜻蜓点水般，<br>
温柔划过心脉，写意出似水年华中风花雪月的流年，你在那笔殷殷期盼里，脉脉晕开，静静回味……<br>
夏季的雨，来的突然，走的匆匆，像突如其来的心情，辗转思绪，万千头绪而来，却不知怎样去梳理，去雨里<br>
走走吧，撑起一把伞，漫步走在雨里，嘀嗒嘀嗒的声音，像极了此刻的心情，深深浅浅的脚步，踩在湿滑的马路上，<br>
鞋子湿了许些，鞋子湿了可换，那心中的鞋子呢？前面的蔷薇刚开，便打湿了花蕊，一场花期，不知怎去安排了，<br>
那自己的呢？这场梦做的太久太久，不知能否待到雨歇晴空，这份所属，你可知晓？<br>
</dd>
<dt>第三章</dt>
<a name="third"></a>
<dd>
灰蒙蒙的街道，看不清的人群，渐行渐远的花季，在这一袭烟雨下，散落去，不知哪里，仅有极远处，那一树树 <br>
葱茏，在雨里，越发的青绿茂盛，一片片叶子，在雨水的洗礼下，清新了起来，而那些花儿呢，雨打后萎靡了花瓣，<br>
即便色彩明艳了许多，看着却无不心生怜悯，实在让人心疼的不得了，这季的花期也要改了吗？如此不争，怎也要<br>
折损年华，漫漫等待，度此余生,此刻无言以对，沉默不语，静立在雨中，就让这帘幽梦，逐着雨滴，自己寻根寻源去吧！<br>
守望素年锦时那一掬馨香，遥念中逐梦，频频倚着光阴的窗台，悉数满地落红，哪一片是陌上蚀骨的花蕊，<br>
是生死相依的山盟，捱着时光，催人老的孤寂，弥漫在空气中，处处是念想的气息， 拨开时间沉寂的厚重，谁在霞光的艳丽中妩媚，酌一笔小令，<br>
锦上添花一瓣心香，潺潺而流，冥想与你相遇，那是何等的欢喜的事情，不问悲喜，不言离散，只许在这盏琉璃花盏里，绽放一帘幽梦的清喜。<br>
总在午夜，千回百转，捻颂心语，流淌成歌，一腔深情自醉，柔情似水低眉含笑间，你总在嘴角边，<br>
浮动百媚，暗香盈袖，在恰好；这一脉心念，在朗月清风中，只为一人，绽放风景，或浓或淡，或深或浅，都在轻轻回眸间莞尔，潺潺心音，幽幽情在一盏杯影里，<br>
一帘幽梦里，回溯剪影，遐想着雁子回时月满西楼，共剪西窗烛，巴山夜话。<br>
那一帘幽梦，美好愿望，在时间煮雨中，散发出淡淡的清喜，取一盏浅酌慢品，独坐山之巅，水之湄，去飘香浅笑的嫣然 ，<br>
温暖简单的喜欢，陪伴日思夜想的眷恋，回归梦的原乡……那便，<br>
拾一枚风花雪月，捻一指绿叶细语，去文字铺垫一窗流光瑰丽，点燃记忆中的那城倾城三千，<br>
可否？凝滞那段时空，重故锦瑟年华里那段芳华，嗅着袅袅生香的记忆，感受清风入怀幸福盈满的温存。<br>
</dd>
<a name="fourth"></a>
<dt>第四章</dt>
<dd>
一帘幽梦，我心所属，堪那红尘繁华，尘埃落定时，钟爱的仅此一朵，弱水三千，也只饮此一瓢，夏花铺陈再多，<br>
也只为一人凝眉，也仅为一人埋心于诗行里长情，那一怀诗情，画意了一阙阙平仄意境，许是在三千年之外的荒漠，策马而过，许是墨雨江南，青黛高墙深处，<br>
在这也好，在那也罢，从此情丝深种眉底，不言相离，不道相忘，只要相依相偎，便是一生的欢愉！<br>
独坐岁月，一季喧嚣里，守着一帘幽梦，走走停停的站台上，感动着一次次遇见，或深或浅，倍感温暖，<br>
动荡的站台，起伏的心音，谁是你的心里的暖香，你眉底的脉脉含情？人生这场无止境的修行，体会中感悟，感动中珍惜，这冥冥中的定数，深情了三生石上的一抹嫣然一笑，<br>
今世停泊的港口，是否兴盛着烟火？你可知，那一帘幽梦，正是我心所属！<br>
安坐夏季清风中，一丝窃窃私语，穿过耳畔，激发陈藏的心语，思绪蔓延出浓浓的想念，一纸誓言契约，于温润的红尘中，<br>
翼化为蝶恋的唇语，轻轻抖动梦的蝉翼，那一帘幽梦，摇曳生姿，舞摆着无尽的痴缠，如蜻蜓点水般，温柔划过心脉，写意出似水年华中风花雪月的流年，你在那笔殷殷期盼里，脉脉晕开，静静回味……<br>
夏季的雨，来的突然，走的匆匆，像突如其来的心情，辗转思绪，万千头绪而来，却不知怎样去梳理，<br>
去雨里走走吧，撑起一把伞，漫步走在雨里，嘀嗒嘀嗒的声音，像极了此刻的心情，深深浅浅的脚步，踩在湿滑的马路上，鞋子湿了许些，鞋子湿了可换，那心中的鞋子呢？<br>
前面的蔷薇刚开，便打湿了花蕊，一场花期，不知怎去安排了，那自己的呢？这场梦做的太久太久，不知能否待到雨歇晴空，这份所属，你可知晓？<br>
灰蒙蒙的街道，看不清的人群，渐行渐远的花季，在这一袭烟雨下，散落去，不知哪里，仅有极远处，那一树树葱茏，在雨里，越发的青绿茂盛，<br>
一片片叶子，在雨水的洗礼下，清新了起来，而那些花儿呢，雨打后萎靡了花瓣，即便色彩明艳了许多，看着却无不心生怜悯，实在让人心疼的不得了，这季的花期也要改了吗？如此不争，怎也要折损年华，<br>
漫漫等待，度此余生，此刻无言以对，沉默不语，静立在雨中，就让这帘幽梦，逐着雨滴，自己寻根寻源去吧！<br>
</dd>
<a name="fifth"></a>
<dt>第五章</dt>
<dd>
守望素年锦时那一掬馨香，遥念中逐梦，频频倚着光阴的窗台，悉数满地落红，哪一片是陌上蚀骨的花蕊，<br>
是生死相依的山盟，捱着时光，催人老的孤寂，弥漫在空气中，处处是念想的气息， 拨开时间沉寂的厚重，谁在霞光的艳丽中妩媚，酌一笔小令，锦上添花一瓣心香，<br>
潺潺而流，冥想与你相遇，那是何等的欢喜的事情，不问悲喜，不言离散，只许在这盏琉璃花盏里，绽放一帘幽梦的清喜。<br>
总在午夜，千回百转，捻颂心语，流淌成歌，一腔深情自醉，柔情似水低眉含笑间，你总在嘴角边，<br>
浮动百媚，暗香盈袖，在恰好；这一脉心念，在朗月清风中，只为一人，绽放风景，或浓或淡，或深或浅，都在轻轻回眸间莞尔，潺潺心音，幽幽情在一盏杯影里，<br>
一帘幽梦里，回溯剪影，遐想着雁子回时月满西楼，共剪西窗烛，巴山夜话。<br>
那一帘幽梦，美好愿望，在时间煮雨中，散发出淡淡的清喜，取一盏浅酌慢品，独坐山之巅，<br>
水之湄，去飘香浅笑的嫣然，温暖简单的喜欢，陪伴日思夜想的眷恋，回归梦的原乡……那便，拾一枚风花雪月，捻一指绿叶细语，去文字铺垫一窗流光瑰丽，<br>
点燃记忆中的那城倾城三千，可否？凝滞那段时空，重故锦瑟年华里那段芳华，嗅着袅袅生香的记忆，感受清风入怀幸福盈满的温存。<br>
一帘幽梦，我心所属，堪那红尘繁华，尘埃落定时，钟爱的仅此一朵，弱水三千，也只饮此一瓢，夏花铺陈再多， <br>
也只为一人凝眉，也仅为一人埋心于诗行里长情，那一怀诗情，画意了一阙阙平仄意境，许是在三千年之外的荒漠，策马而过，许是墨雨江南，青黛高墙深处，在这也好，在那也罢， <br>
从此情丝深种眉底，不言相离，不道相忘，只要相依相偎，便是一生的欢愉！ <br>
一帘幽梦，我心所属，为你铺就了一地诗行，遥望着沧海桑田，寻梦回来！ <br>
</dd>
</dl>
<a href="#">回到顶部</a>
</body>
</html>
显示效果
图片.png
表格标签及其单元格合并
表格标签:
table : 声明一个表格
tr : 声明一行,可设置行高及其所有单元格的高度
th : 声明一个单元格 表头格 默认居中加黑显示
td : 声明一个单元格 默认居左显示数据
注意 :
行高即该行所有的单元格的高度
单元格的宽度 列宽
属性:
border : 给表格添加边框
width : 设置表格的宽度
height : 设置表格的高度
宽高一般设置在tr标签内
cellpadding ：设置单元格内容距边框的距离
cellspacing ： 设置边框的大小
特点;
默认根据数据的多少进行表格大小的显示
快捷生成table表格:
比如生成4行5列的表格 table>tr*4>td*5 按tab键自动生成
单元格的合并：
第一步：
首先要确保表格是一个规整的表格
第二步：
根据需要合并的单元格找到所在的源码位置
第三步：
行合并（两行或多行的合并）：
要在合并的单元格添加属性 rowspan="合并的单元格的个数"，删除其他的合并的单元格
列合并（两列或多列的合并）：
合并的任意一个单元格上添加属性 colspan="合并的单元格的个数"，删除要合并的其他单元格
常用表格标签及其单元格合并操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<h3>表格</h3>
<hr>
<h4>表格标签的常用标签</h4>
<table border="1px" cellpadding="0" cellspacing="0">
<tr height="50px">
<th width="100px">学号</th>
<th width="100px">姓名</th>
<th width="100px">语文</th>
<th width="100px">数学</th>
<th width="100px">外语</th>
<th width="100px">综合</th>
<th width="100px">总分</th>
</tr>
<tr>
<td>10010</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>110</td>
<td>200</td>
<td>530</td>
</tr>
<tr>
<td>10011</td>
<td>李四</td>
<td>100</td>
<td>110</td>
<td>110</td>
<td>200</td>
<td>520</td>
</tr>
<tr>
<td>10012</td>
<td>李小龙</td>
<td>120</td>
<td>120</td>
<td>120</td>
<td>200</td>
<td>560</td>
</tr>
<tr>
<td>10013</td>
<td>王楚楚</td>
<td>90</td>
<td>120</td>
<td>100</td>
<td>200</td>
<td>510</td>
</tr>
</table>
<hr>
<h3>单元格合并</h3>
<table border="1px" cellpadding="0" cellspacing="0">
<tr height="35px">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<tr height="35px">
<td colspan="2"></td><!--合并第二行一二列单元格-->
<td rowspan="3"></td><!--合并第三列的二三四行单元格-->
<td></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td> <!--合并右下角的四个单元格-->
</tr>
<tr height="35px">
<td></td>
<td></td>
<!--<td colspan="2"></td>-->
</tr>
</table>
</body>
</html>
效果显示
图片.png
表格标签简历制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历表单</title>
</head>
<body>
<h2 align="center" >简历表</h2>
<br>
<table border="1px" cellpadding="0" cellspacing="0" align="center" style="border-bottom: none">
<tr height="25px">
<td colspan="5" align="left" bgcolor="#7fffd4">基本情况</td>
</tr>
<tr height="25px" >
<td width="100">姓名</td>
<td width="104"></td>
<td width="85">性别</td>
<td width="105"></td>
<td width="105" rowspan="7"></td>
</tr>
<tr height="25px">
<td>民族</td>
<td></td>
<td>出生年月</td>
<td></td>
</tr>
<tr height="25px">
<td>政治面貌</td>
<td></td>
<td>健康情况</td>
<td></td>
</tr>
<tr height="25px">
<td >籍贯</td>
<td></td>
<td >学历</td>
<td></td>
</tr>
<tr height="25px">
<td >电子信箱</td>
<td></td>
<td>联系电话</td>
<td></td>
</tr>
<tr height="25px">
<td >专业</td>
<td colspan="3"></td>
</tr>
<tr height="25px">
<td >毕业院校</td>
<td colspan="3"></td>
</tr>
<tr height="25px">
<td>求职方向</td>
<td colspan="4"></td>
</tr>
</table>
<table border="1px" cellpadding="0" cellspacing="0" align="center" style="border-bottom: none" >
<tr height="25px" >
<td align="left" colspan="4" bgcolor="#7fffd4">教育情况</td>
</tr>
<tr height="25px">
<td width="130px">时间</td>
<td width="120px">院校名称</td>
<td width="120px">专业</td>
<td width="130px">学历</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">培训经历</td>
</tr>
<tr height="25px">
<td>时间</td>
<td>培训机构</td>
<td>课程</td>
<td>证书</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">技能特长</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="3"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
</tr>
</table>
<table border="1px" cellpadding="0" cellspacing="0" align="center">
<tr height="25px">
<td align="left" colspan="4" bgcolor="#7fffd4">工作经验</td>
</tr>
<tr height="25px">
<td width="120px">时间</td>
<td width="140px">公司名称</td>
<td width="100px">职位</td>
<td width="140px">工作内容</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">英语、计算机水平</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">奖励荣誉</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">自我评价</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
</table>
</body>
</html>
效果显示
残缺部分省略.png
