html5学习笔记
1、HTML常用标签
1.1、标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML提供了6个等级的网页标题，即
至
。
<h1>
我是一级标题
</h1>
h是单词head的缩写，意为头部、标题。
标题语义：作为标题使用，并且依据重要性递减。
特点：
- 加了标题的文字会加粗，字号也会依次变大
- 一个标题独占一行
1.2、段落和换行标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干个段落。
<p>
我是一个段落标签
</p>
p是单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
1.3、换行标签
在HTML中，一个段落的文字会从左到右依次排序，直到浏览器窗口的右端，然后才自动换行。如果希望某段文字强制换行显示，就需要使用换行标签
。
<br />
br是单词break的缩写，意为打断、换行。
标签语义：强制换行。
特点：
- 该标签是个单标签
- 该标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
案例：体育新闻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>体育新闻</title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h4>数据统计：水花兄弟合砍61分</h4>
<p> 库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h4>兄弟对决升级：小库里给哥哥造成压力</h4>
<p> 库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
<p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
<p> 作者: pink老师 <br />
2019-8-8</p>
</body>
</html>
1.4、文本格式化标签
在网页中，有时需要为文本设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，是文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 更推荐使用标签，语义更强烈 |
| 倾斜 | 或者 | 更推荐使用标签，语义更强烈 |
| 删除线 | 更推荐使用 |
|
| 下划线 | 或者 | 更推荐使用标签，语义更强烈 |
重点记住加粗和倾斜。
1.5、div和span标签
和是没有语义的，它们就是一个盒子，用来装内容的。
<div>
这是头部
</div>
<span>今日价格</span>
div是division的缩写，表示分割、分区。
span意为跨度、跨距。
特点：
-
标签用来布局，但是一行只能放一个。 大盒子
- 标签用来布局，一行上可以放多个。 小盒子
1.6、图像标签
在HTML标签中，标签用于定义HTML页面中的图像。
<img src="图像URL" />
img是单词image的缩写，意为图像。
src是标签的必须属性，它用于指定图像文件的路径和文件名。
属性：简单理解就是属于这个图象标签的特性。
|图像标签的其他属性：|||
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像无法显示时显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上时显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即key="value"的格式，属性="属性值"
1.7、目录文件夹和根目录
目录文件夹：就是普通文件夹，里面存放了做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录
1.8、路径
1.8.1、相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
|简单来说，就是图片相对于html文件的位置。|||
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 直接写 | 图像文件位于html文件同一级，如 |
| 下一级路径 | / | 图像文件位于html文件下一级，如 |
| 上一级路径 | ../ | 图像文件位于html文件上一级，如 |
相对路径是从代码所在的文件出发，去寻找目标文件的，而这里所说的上一级、下一级和同一级就是图片相对于html文件的位置。
1.8.2、绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
1.9、超链接标签
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a为单词anchor的缩写，意为锚。
|两个属性的作用如下：||
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值， _blank为在新窗口中打开方式 |
链接分类：
- 外部链接，例如
<a href="http://www.baidu.com">百度</a>
- 内部链接，网站内部页面之间相互链接，直接链接内部页面名称即可，例如
<a href="index.html"></a>
- 空连接，如果当时没有确定链接目标时，如
<a href="#"></a>
- 下载链接，如果href里面的地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接，在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="img.jpg" />百度</a>
- 锚点链接，点击链接，可以快速定位到页面中的某个位置
- 在连接文本的href属性中，设置属性值为#名字的形式，如
<a href="#two">第2集</a>
- 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如
<h3 id="two">
第2集介绍
</h3>
案例：刘德华介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>目录</h2>
1 早年经历<br />
2 演艺经历<br />
3 <a href="#live">个人生活</a><br />
4 <a href="#zuopin">主要作品</a><br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br />
<h3>早年经历</h3>
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18] 。刘德华从黄大仙天主教小学毕业后升读可立中学[19] 。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20] 。
<h3>演艺经历</h3>
1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在
刘德华早期照片
刘德华早期照片(2张)
喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25] 。
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。
1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28] ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29] 。
1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30] ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32] 。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32] 。
刘德华
刘德华
电影时代
1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班
刘德华电视剧剧照
刘德华电视剧剧照(9张)
的学员[33] 。1982年，在剧情片《投奔怒海》中饰演美军翻译官祖名，并凭借该片获得第2届香港电影金像奖最佳新演员提名[33] 。
1983年，与张曼玉搭档主演剧情片《家在香港》，在片中饰演急功近利的青年人亚伦[34] ；同年，主演动作片《毁灭号地车》，在片中与一个越南少女演绎了一段爱情故事[35] 。1984年，在爱情片《停不了的爱》中饰演富家公子Eric[36] 。
1985年，在与叶德娴共同主演的剧情片《法外情》中饰演少年得志的青年律师刘志鹏[37] 。1986年，主演科幻冒险片《魔翡翠》，在片中饰演冒险专家猎鹰一号，这也是他首度出演科幻题材的电影[38] ；同年，出演喜剧片《最佳福星》，在片中饰演身手矫健的特警组警员蓝保[39] 。1987年，主演警匪片《肝胆相照》，在片中饰演亦正亦邪的犯罪集团成员阿定[40] 。
1988年，主演王家卫执导的黑帮片《旺角卡门》，在片中饰演重情重义的江湖混混华仔，并凭借该片获得第8届香港电影金像奖最佳男主角奖提名[41] ；同年，主演警匪片《猎鹰计划》，在片中饰演具有正义感的警员国华[42] ；此外，他还再度与叶德娴合作，在剧情片《法内情》中与叶德娴饰演绎了一段母子情[43] 。
1989年，在动作片《至尊无上》中饰演有“亚洲第一快手”之称的
刘德华写真
刘德华写真(4张)
陈亚蟹[44] ；同年，主演剧情片《神行太保》，在片中饰演一名公正、能干、勇敢的太保；此外，他还主演了动作片《人海孤鸿》，在片中饰演没有接受过良好教育的古惑仔沙士[45] ；12月，与周润发共同主演动作片《赌神》，在片中饰演赌神高进的徒弟刀仔[46] 。
1990年，主演爱情片《天若有情之追梦人》，在片中饰演善良热情、讲义气的黑社会混混华Dee[47] ；同年，主演剧情片《至尊计状元才》；12月，与周星驰合作主演赌片《赌侠》，在片中饰演身怀绝技的陈刀仔[48] 。
1991年，刘德华开始改变银幕形象，主演了传记题材的系列电影《五亿探长雷洛传》，并在片中首次诠释年龄跨度较大的人物，该系列中的两部作品《五亿探长雷洛传I雷老虎》、《五亿探长雷洛传2:父子情仇》在香港的累积票房达到5300万[49] ；6月，主演犯罪题材的电影《至尊无上Ⅱ之永霸天下》；此外，他还主演了动作片《九一神雕侠侣》，该片是刘德华投资出品的首部电影作品[50] 。
1992年，凭借传记片《五亿探长雷洛传》获得第11届香港电影金像奖最佳男主角提名[51] ；8月，与王祖贤、叶德娴合作出演剧情片《庙街十二少》；11月，与林青霞、叶德娴共同主演古装片《绝代双骄》，在片中饰演聪明绝顶的小鱼儿[52] ；同年，主演爱情片《九二神雕侠侣之痴心情长剑》，在片中饰演痴情大侠情仁[53] 。
1993年，在古装片《战神传说》中扮演一个武功超群的渔民[54] ；同年，主
刘德华
刘德华(4张)
演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象[55] 。
1985年，加入华星唱片公司；同年，发行首张
刘德华
刘德华(6张)
个人专辑《只知道此刻爱你》，从而正式进入歌坛[109] 。1987年，加入百代唱片公司；同年，发行粤语专辑《情感的禁区》。
1988年2月，发行第三张个人专辑《回到你身边》；这张专辑拓展了歌曲题材的表达范围，专辑所收录的歌曲也不再局限于爱情类型的歌曲[110] 。1989年2月，发行个人首张国语专辑《回到你身边·法内情》；10月，发行国语专辑《爱的连线》，收录了包括情歌《在我的胸前安歇》、《忘了爱》在内的8首歌曲[111] 。
1990年，凭借专辑《可不可以》奠定其在歌坛的地位[112] ；专辑同名主打歌《可不可以》获得第十三届十大中文金曲奖[113] ；4月，发行国语专辑《如果你是我的传说》[111] ；专辑发行后在东南亚的销售量达150万张；这张专辑收录的歌曲多数采用了近似的题材与曲式，同名主打歌《如果你是我的传说》由刘德华个人填词[114] ；12月，发行粤语专辑《再会了》；专辑同名主打歌获得十大劲歌金曲奖[115] 。
1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌获得十大劲歌金曲奖以及十大中文金曲奖[116-117] ；2月，发行粤语专辑《爱不完》[118] ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2万张[119] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[116] 。
1992年，在洛杉矶、旧金山等地举行美加巡回演唱会；9月，发行加入
刘德华
刘德华(3张)
华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120] ；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。
1993年1月至2月，在香港红磡体育馆举行20场“真我的风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖[121] 。
1994年，发行国语专辑《忘情水》，同名主打歌获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖[122-123] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[11] 。
1995年，加入艺能动音唱片公司；8月，发行国语专辑《真永远》，其中的代表作是具有励志色彩的歌曲《今天》；该专辑是刘德华在音乐视角上的一个分水岭，从这张专辑开始，刘德华歌唱爱的角度开始变得多元化；同年，首次登上央视春晚舞台，并演唱歌曲《忘情水》；此外，他还在洛杉矶、芝加哥等地举行“刘德华真永远美加巡回演唱会”；12月，发行粤语专辑《情未鸟》，同名主打歌获得十大劲歌金曲奖以及第19届十大中文金曲奖[124-125] 。
1996年，发行国语专辑《相思成灾》，同名主打歌获得第19届十大中
<h3 id="live">个人生活</h3>
刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）[158] 。
感情
1986年，刘德华随香港明星足球队赴吉隆坡时，结识了朱丽倩。2008年6月23日，刘德华与朱丽倩在美国拉斯维加斯注册结婚[159] 。2012年5月9日，刘德华的妻子朱丽倩生下一个女儿。[160-161] 2016年3月，刘德华的妻子朱丽倩怀上第2胎。[162]
<h3 id="zuopin">主要作品</h3>
参演电影
侠盗联盟2017-07
导演冯德伦 主演让-雷诺, 舒淇
拆弹专家2017
饰演拆弹专家 导演邱礼涛 主演姜武, 小宋佳,
黄宗泽
长城2016-12-18
饰演宋朝将军 导演张艺谋 主演马特·达蒙, 景甜, 张涵予
王牌逗王牌[164] 2016-10-01
饰演宝爷 导演王晶 主演黄晓明, 王祖蓝, 沈腾
我的特工爷爷2016-04-01
饰演李政玖 导演洪金宝 主演洪金宝, 朱雨辰, 李勤勤
澳门风云32016-02-08
饰演刀仔 导演王晶 主演周润发、刘德华
解救吾先生2015-09-30
饰演吾先生 导演丁晟 主演刘烨, 王千源, 吴若普
失孤2015-03-21
饰演雷泽宽 导演彭三源 主演井柏然, 梁家辉
风暴2013-12-12
饰演吕明哲 导演袁锦麟 主演刘德华、姚晨、林家栋
盲探2013-07-04
饰演庄士敦 导演杜琪峰 主演刘德华、郑秀文
天机·富春山居图2013-06
饰演肖锦汉 导演孙健君 主演刘德华、林志玲
桃姐2012-03-08
饰演罗杰 导演许鞍华 主演刘德华、叶德娴、秦海璐
寒战2012
饰演客串 导演梁乐民 主演郭富城, 梁家辉, 李治廷
新少林寺2011
饰演侯杰 导演陈木胜 主演刘德华、谢霆锋、
范冰冰
我知女人心2011
饰演孙子刚 导演陈大明 主演刘德华、巩俐
建党伟业2011
饰演蔡锷 导演韩三平 主演周润发、刘烨、汤唯
狄仁杰之通天帝国2010
饰演狄仁杰 导演徐克 主演李冰冰, 刘嘉玲, 梁家辉
未来警察2010
饰演周志豪 导演王晶 主演徐熙媛, 樊少皇, 徐娇
游龙戏凤2009
饰演程仲森 导演刘伟强 主演刘德华、舒淇
建国大业2009
饰演俞济时 导演韩三平 主演张国立、唐国强
三国之见龙卸甲2008
饰演赵子龙 导演李仁港 主演刘德华、洪金宝
投名状2007
饰演赵二虎 导演陈可辛 主演刘德华、李连杰、金城武
兄弟之生死同盟2007
饰演刘进奎 导演赵崇基 主演刘德华、苗侨伟
门徒2007
饰演林昆 导演尔冬升 主演刘德华、吴彦祖、张静初
墨攻2006
饰演革离 导演张之亮 主演刘德华、范冰冰
再说一次我爱你2005
饰演高医生 导演余伟国 主演蔡卓妍, 杨采妮, 林依轮
童梦奇缘2005
饰演光仔 导演陈德森 主演刘德华、莫文蔚
十面埋伏2004
饰演刘捕头 导演张艺谋 主演刘德华、金城武、章子怡
天下无贼2004
饰演王薄 导演冯小刚 主演刘若英, 葛优, 王宝强
江湖2004
饰演洪仁就 导演黄精甫 主演张学友, 吴倩莲, 惠英红
龙凤斗2004
饰演盗先生 导演杜琪峰 主演郑秀文, 吴嘉龙, 胡燕妮
魔幻厨房2004
饰演传佑 导演李志毅 主演郑秀文, 言承旭, 李美琪
无间道Ⅲ终极无间2003
饰演刘健明 导演刘伟强, 麦兆辉 主演梁朝伟, 黎明, 郑秀文
大只佬2003
饰演了因 导演杜琪峰, 韦家辉 主演张柏芝, 张兆辉, 秦煌
无间道2002
饰演刘健明 导演刘伟强, 麦兆辉 主演刘德华、梁朝伟, 曾志伟、黄秋生
卫斯理之蓝血人2002
饰演卫斯理 导演刘伟强 主演关之琳, 舒淇, 王晶
呖咕呖咕新年财2002
饰演德华 导演杜琪峰, 韦家辉 主演刘青云, 古天乐, 梁咏琪
老鼠爱上猫2002
饰演展昭 导演陈嘉上 主演刘德华、张柏芝
爱君如梦2001
饰演刘南生 导演刘伟强 主演吴君如, 梅艳芳, 应采儿
瘦身男女2001
饰演肥佬 导演杜琪峰, 韦家辉 主演刘德华、郑秀文
全职杀手2001
饰演托尔 导演杜琪峰, 韦家辉 主演刘德华、反町隆史, 林熙蕾、任达华
大话情人2001
饰演华弟 导演余伟国 主演关之琳, 李婉华, 叶德娴
决战紫禁之巅2000
饰演叶孤城 导演刘伟强 主演郑伊健, 赵薇, 杨恭如
孤男寡女2000
饰演张华绍 导演杜琪峰, 韦家辉 主演郑秀文, 梁艺龄, 黄浩然
阿虎2000
饰演孟虎 导演李仁港 主演刘德华、常盘贵子
赌侠大战拉斯维加斯2000
饰演King哥 导演王晶 主演张家辉, 陈百祥, 林熙蕾
暗战1999
饰演华 导演杜琪峰 主演刘青云, 蒙嘉慧, 林雪
龙在边缘1999
饰演飞龙 导演霍耀良 主演古天乐, 谭耀文, 关秀媚
黑马王子1999
饰演华Dee 导演王晶 主演张家辉, 李嘉欣, 叶德娴
爱情梦幻号1999
饰演邱礼涛 导演邱礼涛, 张泽晖 主演伍咏薇, 黄百鸣, 陈芷菁
赌侠19991999
饰演King哥 导演王晶 主演张家辉, 朱茵, 李子雄
龙在江湖1998
饰演韦吉祥 导演王晶 主演梁咏琪, 方中信, 关秀媚
黑金1998
饰演方国辉 导演麦当杰 主演梁家辉, 吴辰君, 孙佳君
天地雄心1997
饰演靳铁生博士 导演陈嘉上 主演李嘉欣, 黄秋生, 刘倩怡
天若有情之烽火佳人1997
饰演刘天伟 导演杜琪峰 主演吴倩莲, 方中信, 何中华
新上海滩1996
饰演丁力 导演潘文杰 主演张国荣, 宁静, 李蕙敏
1/2次同床1996
饰演华弟 导演罗文, 余伟国 主演关之琳, 陈淑兰, 叶德娴
烈火战车1995
饰演阿祖 导演尔冬升 主演梁咏琪, 钱嘉乐, 吴大维
大冒险家1995
饰演韦洛仁 导演林岭东 主演吴倩莲, 关之琳, 姜大卫
醉拳III1994
饰演杨君 导演刘家良 主演李嘉欣, 任达华, 郑少秋
杀手的童话1994
饰演高守 导演陈静仪 主演袁咏仪, 伍咏薇, 郑浩南
刀剑笑1994
饰演笑三少 导演黄泰来 主演林青霞, 李嘉欣, 曹颖
醉拳II1994
饰演张学良 导演刘家良, 成龙, 陈港生 主演成龙, 梅艳芳, 狄龙
天与地1994
饰演张一鹏 导演黎大炜 主演刘松仁, 陈少霞, 金士杰
至尊36计之偷天换日1993
饰演钱文迪 导演王晶 主演梁家辉, 钟丽缇, 苑琼丹
反斗马骝1993
饰演周俊杰 导演曾志伟 主演梁朝伟, 徐少强, 苗侨伟
超级学校霸王1993
饰演铁面 导演王晶 主演张学友, 郭富城, 杨采妮
天长地久1993
饰演方德胜 导演刘镇伟 主演吴家丽, 刘锦玲, 叶德娴
赌城大亨II之至尊无敌1992
饰演贺新 导演王晶 主演万梓良, 邱淑贞, 王祖贤
1/3
音乐作品
内容来自
热门歌曲
1. 冰雨
2. 来生缘
3. 天意
4. 练习
5. 今天
6. 世界第一等
7. 男人哭吧不是罪
8. 谢谢你的爱
9. 暗里着迷
10. 爱你一万年
11. 一起走过的日子
12. 忘情水
</body>
</html>
2、HTML中的注释标签和特殊字符
2.1、注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签。
HTML中的注释以""结束。
<!-- 注释语句 --> 快捷键：ctrl+/
注释标签里的内容是给程序员看的，这个代码是不执行不显示到页面中的。
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
2.2、特殊字符
|在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代.|||
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | < |
| >. | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
综合案例：圣诞节的那些事
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> 圣诞节的那些事</h1>
1.圣诞是怎样由来的 <br>
2.<a href="#oldman">圣诞老人的由来</a> <br>
3.<a href="#tree">圣诞树的由来</a> <br>
<h2> 圣诞是怎样由来的</h2>
<p> 圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
<img src="images/t1.gif">
<h2 id="oldman"> 圣诞老人的由来</h2>
<p>圣诞节当然少不了<a href="oldman.html" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
<img src="images/t2.jpg" >
<p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
<p> 到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?
<h2 id="tree">圣诞树的由来</h2>
<p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
<p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>
<p> 另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。
</p>
<p> 圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。
每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
<img src="images/t3.jpg">
<p>更多内容可以 <a href="http://www.baidu.com" target="_blank">百度一下</a> </p>
</body>
</html>
oldman.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>圣诞老人 （西方文化的传说人物）</h1>
<p> 圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p>
<img src="images/oldman.jpg" >
</body>
</html>
3、表格标签
3.1、表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面的，而是用来展示数据的。
3.2、表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
-
是用于定义表格的标签
-
标签用于定义表格中的行，必须嵌套在
标签中
- 用于定义表格中的单元格，必须嵌套在标签中
- 字母td指表格数据(table data)，即数据单元格的内容
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="250">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td>58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td>57</td>
</tr>
</table>
</body>
</html>
|效果：|||
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 刘德华 | 男 | 56 |
| 张学友 | 男 | 58 |
| 郭富城 | 男 | 51 |
| 黎明 | 男 | 57 |
3.3、表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
标签表示HTML表格中的表头部分(table head的缩写)<table>
<tr>
<th>姓名</th>
</tr>
</table>
3.4、表格相关属性
|表格标签这部分属性我们实际开发中不常用，后面通过CSS来设置。|||
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
这些属性要写到表格标签table里面去
案例：小说排行榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</table>
</body>
</html>
3.5、表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：标签表示表格的头部区域，标签表示表格的主体区域，这样可以更好的分清表格结构。
案例：小说排行旁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
- :用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
- ：用于定义表格的主体，主要用于放数据本体。
- 以上两个标签都是放在
标签中的。
3.6、合并单元格
合并单元格方式：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
目标单元格：(写合并代码)
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格数量。比如：
- 删除多余的单元格
4、列表标签
4.1、无序列表
表格是用来显示数据的，列表是用来布局的。
列表最大的特点就是整齐、整洁、有序，他作为布局会更加自由和方便。
根据使用场景不同，列表可以分为3大类：无序列表、有序列表和自定义列表。
- 标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
- 标签定义。
无序列表的基本语法格式如下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul>- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
-
- 与 之间相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
4.2、有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，
- 标签用于定义有序列表，列表排序以数字来显示，并且使用
- 标签来定义列表项。
有序列表的基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>-
- 与 之间相当于一个容器，可以容纳所有元素。
- 有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
4.3、自定义列表
在HTML标签中，
- 标签用于定义描述列表（或定义列表），该标签会与
- （定义项目/名字）和
- （描述每一个项目/名字）一起使用。
其基本语法如下：
<dl> <dt>名词1</dt> <dt>名词1解释1</dt> <dt>名词1解释2</dt> ... </dl>5、表单标签
5.1、表单使用场景及分类
使用表单目的是为了收集用户信息。
在网页中，我们也需要和用户进行交互，收集用户资料，此时就需要表单。
表单标签的组成：
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3部分组成。5.2、表单域
表单域是包含表单元素的区域。
在HTML标签中，
-
- 在
5.3.4、textarea文本域标签
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用
浙公网安备 33010602011771号