综合案例-简单网页
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣诞节</title>
</head>
<body>
<h1>圣诞节的那些事</h1>
<a href="#Christmas">1.圣诞节的由来<br /></a>
<a href="#santa">2.圣诞老人<br /></a>
<a href="#Christmastree">3.圣诞树<br /></a>
<a href="#xunlu">4.驯鹿<br /></a>
<h2 id="Christmas">圣诞节的由来</h2>
<p>圣诞节（Christmas）又称耶诞节，译名为“基督弥撒”，它源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷随波逐流地将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生辰，因为《圣经》未有记载耶稣具体生于哪天，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。据《圣经》记载，来自东方三博士在耶稣降生的时候赠送礼物——黄金，乳香，没药，朝拜耶稣，表示对这位人类救主的尊荣。这就是圣诞老人为儿童赠送礼品习俗的由来。英国孩子在圣诞前夕把长筒袜子放在壁炉旁，相信圣诞老人晚上会骑着麋鹿从大烟囱爬下来，给他们带来满袜子的礼物。法国的孩子把鞋放在门口，让圣婴来时把礼物放在鞋里面。公历每年的12月25日，是基督教徒纪念耶稣诞生的日子，称为圣诞节。从12月24日于翌年1月6日为圣诞节节期。圣诞节节日期间，各国基督教徒都举行隆重的纪念仪式。圣诞节本来是基督教徒的节日，由于人们格外重视，它便成为一个全民性的节日，国家一年中最盛大的节日，可以和新年相提并论，类似中国过春节。
</p>
<img src="images/merry.jpg" width="500" alt="圣诞节" title="Christmas">
<h2 id="santa">圣诞老人</h2>
<p>在公元四世纪的时候，尼古拉斯出生在小亚细亚巴大拉城，家庭富有，父母亲是非常热心的天主教友，不幸他的父母早逝。尼古拉斯长大以后，便把丰富的财产全部赠送给贫苦可伶的人，自己则出家修道，献身教会，终生为社会服务。尼古拉斯后来做了神父，而且还升为主教。他一生当中，做了很多慈善的工作，他最喜欢在暗中帮助穷人，圣诞老人是他后来的别号，这个名字是出自他暗中送钱，帮助三个女孩子的故事。
</p>
<p>尼古拉斯死后被尊为圣徒，是一位身穿红袍、头戴红帽的白胡子老头。每年圣诞节他驾着鹿拉的雪橇从北方而来，由烟囱进入各家，把圣诞礼物装在袜子里挂在孩子们的床头上或火炉前。</p>
<img src="images/santa.jpg" width="500" alt="圣诞老人" title="santa">
<h2 id="Christmastree">圣诞树</h2>
<p>圣诞树（Christmastree）是圣诞节庆祝中最有名的传统之一。通常人们在圣诞前后把一颗常绿植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放在树的顶上。用灯饰和装饰品把枞树或洋松装点起来的常青树，作为圣诞节庆祝活动的一部分。近代圣诞树起源于德国。德国人于每年12月24日，即亚当和夏娃节，在家里布置一株枞树（伊甸园之树），将薄饼干挂在上面，象征圣饼（基督徒赎罪的标记）。近代改用各式小甜饼代替圣饼，还常加上象征基督的蜡烛。此外，室内还设有圣诞塔，是一木质的三角形结构，上有许多小架格放置基督雕像，塔身饰以常青树枝叶、蜡烛和一颗星。到16世纪，圣诞塔和伊甸园树合并为圣诞树。
</p>
<img src="images/tree.jpg" width="500" alt="圣诞树" title="Christmastree">
<h2 id="xunlu">驯鹿</h2>
<p>你知道圣诞老人的<a href="xunlu.html" target="_blank">驯鹿</a>的由来嘛？</p>
<h6>想知道更多内容可<a href="http://www.baidu.com" target="_blank">百度一下</a></h6>
</body>
</html>xunlu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>驯鹿</title>
</head>
<body>
<h1>圣诞驯鹿的由来</h1>
<p>大多数人只知道Santa有一只帮他拉雪橇的驯鹿，却很少有人知道那只驯鹿的名字和来历。鲁道夫就是它的名字啦。它有一个会闪闪发光的红鼻子，非常漂亮非常耀眼的红鼻子。在寒冷的冬日，那漂亮的红鼻子，在白雪皑皑中一闪一闪，让人看着就觉得温暖。可是它的伙伴却不喜欢它的红鼻子，还总是嘲笑它的鼻子，也不跟鲁道夫一起玩。
</p>
<p>鲁道夫非常伤心，一个人躲在角落里暗自神伤，红鼻子的光芒也变得暗淡起来。在某一个ChristmasEve，Santa来到了鹿群。他要找一只帮他拉雪橇的驯鹿。驯鹿们争相表现自己，都希望能够被圣诞老人选中。只有鲁道夫，一个人躲在角落里，不敢出来见Santa。
</p>
<p>可是它的红鼻子却发出了耀眼的光芒。Santa在鹿群中发现了鼻子闪闪发光的鲁道夫，非常喜欢，于是就让它为自己拉雪橇。其他的驯鹿在震惊之余，也欢呼了起来，它们高呼着“Rudolph,thered-nosedreindeer,you'llgodowninhistory!”。
</p>
<img src="images/xunlu.jpg" />
</body>
</html>HTML常用标签
排版标签
标题标签h(h1~h6)
段落标签P
水平线标签hr
换行标签<br />
div和span标签：网页布局最主要的两个盒子
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>123
<span>百度</span>
<span>搜狐</span>
<span>新浪</span>
显示标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
加粗显示strong或b
斜体显示em或i
删除线显示del或s
下划线显示ins或u
标签属性
<标签名 属性1="属性值1" 属性2="属性值2"...>内容</标签名>
图像标签
<h4>图像标签的使用:</h4>
<img src="sample.png" />
<h4>alt 替换文本:</h4>
<img src="sample1.png" alt="ParkJisung" />
<h4>title 提示文本:</h4>
<img src="sample.png" alt="ParkJisung" title="ParkJisung" />
<h4>width 给图像设定宽度:</h4>
<img src="sample.png" alt="ParkJisung" title="ParkJisung" width="500" />
<h4>height 给图像设置高度:</h4>
<img src="sample.png" alt="ParkJisung" title="ParkJisung" width="500" height="700" />
<h4>border 给图像设置边框:</h4>
<img src="sample.png" alt="ParkJisung" title="ParkJisung" height="700" border="15" />
<img src="cs.jpg" alt="仓鼠" title="这是一只小仓鼠" width="300" height="500" border="3" />
属性之间不分先后顺序，标签名与属性、属性与属性之间用空格分开。
采用“键值对”的格式 key="value"的格式。
链接标签
<h4 id="fanhui">1.外部链接</h4>
<a href="http://www.bilibili.com <a href="http://www.bilibili.com" target="_blank">哔哩哔哩动画</a>
<h4>2.内部链接</h4>
<a href="02-第一个页面.html" target="_blank">第一个页面</a>
<h4>3.空连接#</h4>
<a href="#">页面地址</a>
<h4>4.下载链接：地址链接的是文件.exe或者zip等压缩包形式</h4>
<a href="sample.rar">下载文件</a>
<h4>5.网页元素的超链接:图片，音频，视频，表格</h4>
<a href="https://baike.baidu.com/item/%E6%9C%B4%E5%BF%97%E6%99%9F/20126959" target="_blank"><img
src="sample.png" /></a>
<a href="#xinwen">新闻（锚点链接）</a><br />
...
<h4 id="xinwen">今日新闻</h4>
<a href="跳转目标" target="目标窗口弹出的方式">文本或图像</a>
src和href的区别：src是引入资源的，href是跳转url的。
注意：外部链接 需要添加http://www.bilibili.com；内部链接 直接链接内部网页名称即可，比如<a href="index.html">首页</a>；如果目标链接没有确定时，通常将链接标签的href标签属性设置为"#"，表示该链接暂时为一个空连接；视频、表格、音频都可添加超链接。
注释标签
<!-- 我是注释。 -->
页 面
< p >是一个段落标签。
快捷键：ctrl + / 或 ctrl + shift + /
路径标签
同一路径：直接输入图像名字即可，<img src="cs.jpg" />
下一级路径：<img src="images/cs.jpg" />
上一级路径：在文件名之前加"../"，如果是上两级则使用"../../"，以此类推。<img src="../cs.jpg />
其他
3941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
