其他分享
首页 > 其他分享> > day01_html

day01_html

作者：互联网

一.标题标签

h1--h6字体由大到小

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>标题</title>
 6 </head>
 7 <body>
 8 <h1>一级标签<h1>
 9 <h2>二级标签<h2>
10 <h3>三级标签<h3>
11 <h4>四级标签<h4>
12 <h5>五级标签<h5>
13 <h6>六级标签<h6>  
14 <p>这是个段落</p>
15 <p>这是个段落</p>
16 <hr />
17 </body>
18 </html>

二.div和span

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <div>布局用，换行</div>
 9 <div>布局用，换行</div>
10 <span>布局用，不换行</span>
11 <span>布局用，不换行</span>
12 </body>
13 </html>

三.文本标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <b>加粗</b>
 9 <strong>加粗</strong>
10 <i>倾斜</i>
11 <em>倾斜</em>
12 <s>删除线</s>
13 <del>删除线</del>
14 <u>下划线</u>
15 <ins>下划线</ins>
16 </body>
17 </html>

四.图像标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>图像标签</title>
 6 </head>
 7 <body>
 8 1.基本图像src图像路径  <br />
 9 <img src="sd.png" />  <br />
10 2.alt图像不能显示时出现的提示
11 <img src="sd1.png" alt="马的图片" />  <br />
12 3.title鼠标停到图片上时出现的文字<br />
13 <img src="sd.png" title="马的图片" />  <br />
14 4.weight,height的图片   <br />
15 <img src="sd.png" title="马的图片" weight ="200"/>  <br />
16 5.border边框    <br />
17 <img src="sd.png" title="马的图片" weight ="200" border="4"/>  <br />
18 </body>
19 </html>

五.链接标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <h1>友情链接</h1>
 8 转到新的页面 _blank  <br />
 9 <a href="http://www.baidu.com/" target="_blank">百度</a>  <br />
10 没写target默认是_self在当前页面将原来的覆盖    <br />
11 <a href="http://www.sina.com/" >新浪</a>    <br />
12 转到自己写的页面上     <br />
13 <a href="03气温案例.html" target="_blank">气温</a>   <br />
14 还没有做好网址  <br />
15 <a href="#" target="_blank">作品</a>
16 
17 </body>
18 </html>

六.锚点定位

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 目录  <br />
 9 <a href="#live" id="返回早年经历">1.早年经历</a>  <br />
10 <a href="#move" id="返回move">1.演艺生涯</a>  <br />
11 <h3 id="live">早年经历<h3>  
12 <hr />
13 刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [24]  。<br />
14 1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [25]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [26]  。<br />
15 在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [27]。   <br />
16 <a href="#返回早年经历">返回</a>  <br />
17 <h3 id="move">演绎生涯<h3>
18 <hr />
19 <p>1981年，刘德华考进第10期无线电视艺员训练班 [28]  ；同年，出演个人首部电视<p>
20 
21 83年刘德华陈玉莲版《神雕侠侣》 <br />
22 <p>83年刘德华陈玉莲版《神雕侠侣》(2张) </p>
23 
24 
25 
26  <p>剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙 [29]  ；该剧获得美国电视节电视剧特别奖 [30]  。
27 1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [31]  ；同年在喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [32]  。</p>
28 <p>
29 1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [33]  ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [34]  。</p>
30 <p>
31 1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云 [35]  ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙 [36]  。
32 </p>
33 1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎 [37]  ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天 [38-39]  。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛 [39]  。  <br />
34 <a href="#返回move">返回</a>
35 
36 
37 </body>
38 </html>

七.base标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <base target="_blank">
 7 </head>
 8 <body>
 9     base 可以简化target的使用 <br />
10     <a href="http://www.baidu.com/">百度</a>
11     <a href="http://www.sina.com/" target="_self">新浪</a>
12 
13 </body>
14 </html>

八.相对路径

1.图像与HTML在同一级

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <h3>图像在同一级</h3>
 9 <img src="sd.png" />
10 </body>
11 </html>

2.图像与HTML在下一级

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <h3>图像在下一级</h3>
 9 <img src="images/sd.png" />
10 </body>
11 </html>

3.图像与HTML在上一级

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <h3>图像在上一级</h3>
 9 <img src="../sd.png" />
10 </body>
11 </html>

九.自定义列表

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

    <dl>
        <dt>北京</dt>
        <dd>通州</dd>
        <dd>顺义</dd>
   </dl>
   <dl>
        <dt>河北</dt>
        <dd>石家庄</dd>
        <dd>石家庄</dd>
   </dl>

</body>
</html>


十.四大名著练习

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <h2>四大名著</h2>
 9 <h3 id="返回目录">目录</h3>
10 <a href="#西游记">1.西游记</a>  <br />
11 <a href="#红楼梦">2.红楼梦</a>   <br />
12 <a href="#水浒传">3.水浒传</a>    <br />
13 <a href="#三国演义">4.三国演义</a>  <br />
14 <ul>
15     <li>
16         <img src="http://d.hiphotos.baidu.com/baike/s%3D220/sign=cba73536c1fdfc03e178e4bae43e87a9/aec379310a55b319e89f41bd41a98226cefc1797.jpg" id="西游记">   
17         <h3>《西游记》 </h3>
18         <p>西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。</p>
19 
20         <p>《西游记》前七回叙述孙悟空出世，有大闹天宫等故事。此后写孙悟空随唐僧西天取经，沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动，规模宏大，结构完整，并且《西游记》富有浓厚的佛教色彩，其隐含意义非常深远，众说纷纭，见仁见智。可以从佛、道、俗等多个角度欣赏，是中国古典小说中伟大的浪漫主义文学作品。</p>
21 
22         <p>《西游记》在明代刚出现时曾被列为禁书，因为书中充满了崇佛抑道的思想，与当时的明朝皇帝所信奉的道教思想有冲突。</p>
23         <a href="#返回目录">返回目录</a>
24     </li>
25     <li>
26         <img src="http://f.hiphotos.baidu.com/baike/s%3D220/sign=59e407e738292df593c3ab178c305ce2/d000baa1cd11728b8a1a4eeacafcc3cec2fd2cc7.jpg" id="红楼梦">
27         <h3>《红楼梦》 </h3>
28         <p>《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。</p>
29 
30         <p>《红楼梦》讲述的是发生在一个虚构朝代的封建大家庭中的人事物，其中以贾宝玉、林黛玉、薛宝钗三个人之间的感情纠葛为主线通过对一些日常事件的描述体现了在贾府的大观园中以金陵十二钗为主体的众女子的爱恨情愁。而在这同时又从贾府由富贵堂皇走向没落衰败的次线反映了一个大家族的没落历程和这个看似华丽的家族的丑陋的内在。
31         </p>
32         <p>《红楼梦》还是一部百科全书式的长篇小说，以上层贵族社会为中心，极其真实地，生动地描写了十八世纪上半叶中国末期封建社会的全部生活。充分运用了书法，绘画，诗词，歌赋，音乐等各类文学艺术的一切优秀传统手法，展示了一部社会人生悲剧。
33         </p>
34         <p>《红楼梦》在思想内容和艺术技巧方面的卓越成就，不仅在国内成为"中国小说文学难以征服的顶峰"。而且在国际上也受到许多国家学者的重视和研究。更是成立了中国红学会以深入了解《红楼梦》。</p>
35         <a href="#返回目录">返回目录</a>
36     </li>
37     </li>
38     <li>
39         <img src="http://h.hiphotos.baidu.com/baike/s%3D220/sign=26f84946cf177f3e1434fb0f40ce3bb9/43a7d933c895d1435a7b3fd375f082025aaf0735.jpg" id="水浒传">
40         <h3>《水浒传》</h3>
41         <p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p>
42         <p>由于《水浒传》版本众多，流传甚广，其中也出现不同的故事，可大体分为“文简事繁本”和“文繁事简本”两个系统，“文繁事简本”较为细致，也流传最广，主要分为七十回本（无聚义后情节），一百回本（招安后，有征辽、征方腊等情节）和一百二十回本（在一百回本基础上增加征田虎、征王庆情节）。其中一百二十回本也被称为《水浒全传》 ，是水浒故事最完整的一个本。
43         </p>
44         <a href="#返回目录">返回目录</a>
45     </li>
46     </li>
47     <li> 
48         <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=5f5f7bd4ff03918fd3d13ac8613d264b/d439b6003af33a87d5282c2ece5c10385343b5b8.jpg">
49         <h3>《三国演义》   </h3>
50         <p>《三国演义》是中国第一部长篇章回体小说。
51         </p>
52         <p>《三国演义》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
53         <a href="#返回目录">返回目录</a>
54     </li>
55 
56     </li>
57 </ul>
58 </body>
59 </html>

 

标签：11,10,13,12,标签,day01,刘德华,html
来源： https://www.cnblogs.com/li19950423/p/10957121.html