一.html简介
1.定义：HTML是hyper text markup language超文本标记语言。
2.html的主要特点是：简易，可扩展，平台无关。
3.html的重点是标签，标签室友各种通过<>包裹的标签组成一个页面。
二.文档基本结构
head头部
body主体部分
<html>
<head>
<!--元信息-->
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页内容(文本。图片，表格等等)
</body>
</html>
三.常用标签
标题：h1~h6
数字越大字体越小
段落：p
换行：br
空格： 
超链接：a
<html>
...
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落&nbps;段落</p>
<br>
<p>段落&nbps;段落</p>
<a hrefk="www.baidu">百度</a>
</body>
</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=>, initial-scale=1.0">
<title>糖醋排骨</title>
</head>
<body>
<h1>《糖醋排骨》的制作方法</h1>
<strong>菜名名称：糖醋排骨</strong>
<br>
<strong>市场价格:</strong>
<b style="color:rgba(4, 2, 22, 0.747)">26</b>
<br>
<strong>会员价格:</strong>
<b style="color:rgba(255, 0, 0, 0.89)">24</b>
<br>
<strong>使用配料:</strong>
<b>排骨、糖、醋</b>
<br>
<br>
<strong><em><u>做法:</u></em></strong>
<p>1.猪小排洗净，晾干水份备用。</p>
<p>2.锅内俱少量油，烧热之后，爆香菱片。</p>
<p>3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦。</p>
<p>4.此时就可以放入黄金比例中的调料了，顺序是，先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋最后四汤勺白糖，炒匀。</p>
<p>5.再倒入能没过排骨的开水，调中小火狗20分钟。</p>
<p>6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点綴即可出锅(锅里剩下的姜片丢掉不用，最后大火收计时注意多翻动锅内的排骨，避免烧焦喲! ) 。</p>
<hr>
<p>*2015 阿婆私房菜</p>
</body>
</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>
<h2>楚乔传</h2>
<a>中国大陆 67集（TV版）/58集（DVD版）</a>
<p>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1] </p>
<img src ="1.jpg" style="width: auto;"alt="剧照" title="官方剧照">
<br>
<a href="#1" >第一集</a>
<a href="#2">第二集</a>
<a href="#3"> 第三集</a>
<a href="#4"> 第四集</a>
<a href="#5"> 第五集</a>
<br>
<hr/>
<a id ="1"></a>
<h3>第一集</h3>
<div>
摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。
西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。
见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。
裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。
而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。
正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。
慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。
围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。
渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。
远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。
而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。
侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。
一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。
燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。
柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她。
</div>
<a id ="2"></a>
<h3>第二集</h3>
<div>
楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。宇文玥不慌不忙的坐起身，冷言嘲她大惊小怪，这侍寝的机会不正是她想要的吗。楚乔凌厉出手反抗，宇文玥趁此机会教她功夫，两人之间不免有了肢体接触，宇文玥将她拦腰抱起，旋转数圈。宇文玥第一次招人侍寝，在青山院里极为轰动。一大早锦烛赶去送汤。听到房外的动静，宇文玥特意与楚乔亲密搂抱，温柔宠溺地亲自喂她吃粥，锦烛出去后，宇文玥立马推开了楚乔，好像刚才温柔似水的不是他一样，冷言让她整理被她玷污的床铺。楚乔瞥了眼床上的落红，面露不屑，明明就是他故意弄上的。楚乔侍寝后还是身份低下的铁铃铛，比之锦烛这样银铃铛的大丫鬟还是差了很多。锦烛对楚乔嫉妒不已，小七、小八听不下去了，出言为楚乔抱不平。锦烛气而动起手来，楚乔随手就制住了她。碧水河畔，杨柳依依，楚乔坐在栈桥边，奋力地洗着衣服。燕洵牵马来到河边找她，调笑宇文玥为楚乔取的名字
</div>
<a id="3"></a>
<h3>第三集</h3>
<div>
青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺，便被院子里闯进来的一位不速之客阻拦。来人正是三房的宇文怀，他不顾侍卫阻拦，出言嚣张傲慢，扬言要亲自开棺验尸。宇文玥百般阻拦未果，两人便在灵堂上动起手来。正在难分难解之间，宇文怀掷出去的剑让院门口立着的一位太监险险避过，继而尖锐的声音响起“护驾！贵妃娘娘在此，谁敢造次？”此言一出，惊得院里的宇文玥急急撇下了手中的武器，来向贵妃娘娘问安。宇文怀心知贵妃是宇文玥请来的救兵，却也无可奈何，只得停了手。一身雍容的贵妃娘娘开口便质问宇文怀，何以在青山院里闹事？宇文怀却恶人先告状，只道是宇文玥执意封棺，还逼得自己动手。宇文玥便回禀贵妃，祖父是身中西域奇毒而亡，自己是怕此毒再行伤人，便先焚毁杂物再封棺。柴房里，清醒过来的楚乔郁郁寡欢，连汁湘姐姐送来的药汤也不愿意喝。汁湘知道她是因为临惜的死自责便劝慰她，生逢乱世大家都是身不由己，叫她不要再责怪自己。楚乔的目光却透出坚毅，她告诉汁湘，自己是不会让临惜白白死去的，自己一定会好好活下去。说罢，端起药汤一饮而尽。婢女们都在院子里干活，就见有侍卫抬着一具尸体走了出去。婢女们纷纷议论，这是被送去极乐阁的婢女锦兰，因未被老太爷看上，便被折磨致死。宋大娘前来挑选送往极乐阁的婢女，楚乔被宋大娘指名要送去极乐阁。汁湘为了救下妹妹，便求了宋大娘，由自己顶替了楚乔去了极乐阁。极乐阁里，同汁湘一起被送进去的女孩子，没有一个人活着出来，汁湘也不例外。楚乔带着小七小八躲在暗处，亲眼看着汁湘被装在一辆破车上送出来，难过至极的三人，却不敢哭出声音，只能眼睁睁看着自己姐姐的尸体被人扔掉。事后，楚乔悄悄将汁湘的尸首埋了。姐妹三人拿着弄来的纸钱，在临惜和汁湘的坟前烧着，却被受了罚的宋大娘撞个正着。宋大娘想拉着她们去向宇文怀邀功，遂与楚乔姐妹三人起了争执。几人撕打之中，宋大娘从桥上滑落，被楚乔拉住，却终是因为太过沉重而落下了水。小七小八十分害怕，楚乔安慰她们，若是有一日东窗事发，自己会一力承当，叫姐妹们不要担心。可是她们谁也没有瞧见，有一个躲在暗处的影子，早已将这发生在深夜里的一切，尽数看在眼底。宇文玥依旧一副淡淡神情，只说人太过聪明了不见得是好事。燕洵不理会宇文玥的冷淡，只跟他说起他们宇文家的内斗，表示自己并不喜欢这些，自己只想做草原上自由翱翔的雄鹰。问及宇文玥想成为什么的时候，宇文玥也只是微微沉吟。燕洵却不理会宇文玥，他想起了楚乔，便从宇文玥的桌子上顺了一瓶伤药，径自来找楚乔了。却正巧撞上有侍卫要带楚乔去受罚，燕洵轻轻松松就替她解了围。但楚乔冷漠的神色却让燕洵很不解，楚乔告诉燕洵，自己的哥哥姐姐新丧，自己也朝不保夕，自然高兴不起来。
</div>
<a id="4"></a>
<h3>第四集</h3>
<div>
宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。她猛地意识到，自己只有离开宇文怀的爪牙，才能保护妹妹们的性命，才能为兄姐报仇。自己就像是墙角的弱草，只有借助强者的力量，才能与顽石对抗！楚乔下定决心要参加择选，她不顾别人异样的眼光，勇敢地走进了青山院。只可惜，她只是一个带着铁铃铛的奴婢，根本没有资格参加择选。但楚乔知道，自己已经没有退路，她一定要参加这次的择选。她不屈不挠地留了下来，固执的跪在院子里不肯起来。宇文玥听闻，只道她是不自量力，便由着她跪，并不理会她。屋外烈日当头，楚乔在烈日下烤着，却依旧坚持着。时间一分一秒流逝，外头已是月上中天，楚乔还在院子中跪着，宇文玥默不作声地在暗处瞧着倔强的楚乔，面上若有所思。侍卫想要劝楚乔回去，却见楚乔并无退意，就要将她架走。宇文玥却出来制止了侍卫，他看着跪在地上的楚乔，问她为什么要来参加择选。楚乔目光坚定的看着他，说自己想要活下去。宇文玥并不相信楚乔的意图，他继续问楚乔，自己亲手杀死了她的哥哥，她却来求着自己收她做侍寝婢女，尊严何在。楚乔面无表情，目光却依旧坚定，作为奴婢，命都保不住，哪里还有尊严。宇文玥看了一眼楚乔，问她是否知道侍寝婢女是要在主人床底之间承欢侍奉。楚乔紧紧握住了自己的手，卑微地叩头，请公子留下奴婢。宇文玥似是沉思了一会儿，便向侍卫下令，准许楚乔参加择选。择选开始，众多的婢女聚到一起，便免不了生出是非。楚乔本就是因着公子格外开恩才得以参选，自然引得其他人对其不满。银铃铛的大丫鬟锦烛，看不惯楚乔私自放飞公子豢养的鹦鹉，想暗地里使坏抓坏楚乔的衣服，不想，却被楚乔反手夺走了衣衫，弄得失了仪态。宇文玥将这一切都瞧在眼里，看出了楚乔身手敏捷，倒是个练武的苗子。第一场是蒲棋，楚乔并不太懂，遂很惨淡地输掉一局。第二局是烹茶，依旧不是楚乔的强项，但她知道自己不能再输了。楚乔仔细观察着周围的婢女们如何烹茶，突然计上心头。她跑到井边打了新鲜的井水上来，又顺手摘了一片叶子，照着别的婢女的法子，有样学样，也烹制出了一杯甘冽的茶水。楚乔赢了第二局。第三局，默记梵文佛经，一柱香时间去记，再用一柱香时间默写。楚乔虽然不会握笔，更不会写字，但她却凭借超人的记忆，将佛经一字不差地默写了下来。但楚乔却因为没有署名，而被宇文玥责问。楚乔却道，规则里并没有要求署名，自己只是按照规则来做，并无不妥。宇文玥要求只要楚乔能够在经文上署上自己的名字，这一局就算她赢。这可难不倒楚乔，她从自己的头发上拿下铜铃铛，蘸了墨，稳稳地印了上去。宇文玥不再说话，但他却在回过身以后，在嘴角勾起了一抹微不可察的笑意。中选后的楚乔被带来见宇文玥，宇文玥再次问她，为何要来做自己的侍寝婢女。楚乔跪下回话，自己是为了活下去。宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨，而楚乔却表示自己已经答应过姐姐，要好好照顾两个妹妹。
</div>
<br><br>
<a id="5"></a>
<h3>第五集</h3>
<div>
楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。宇文玥不慌不忙的坐起身，冷言嘲她大惊小怪，这侍寝的机会不正是她想要的吗。楚乔凌厉出手反抗，宇文玥趁此机会教她功夫，两人之间不免有了肢体接触，宇文玥将她拦腰抱起，旋转数圈。宇文玥第一次招人侍寝，在青山院里极为轰动。一大早锦烛赶去送汤。听到房外的动静，宇文玥特意与楚乔亲密搂抱，温柔宠溺地亲自喂她吃粥，锦烛出去后，宇文玥立马推开了楚乔，好像刚才温柔似水的不是他一样，冷言让她整理被她玷污的床铺。楚乔瞥了眼床上的落红，面露不屑，明明就是他故意弄上的。楚乔侍寝后还是身份低下的铁铃铛，比之锦烛这样银铃铛的大丫鬟还是差了很多。锦烛对楚乔嫉妒不已，小七、小八听不下去了，出言为楚乔抱不平。锦烛气而动起手来，楚乔随手就制住了她。碧水河畔，杨柳依依，楚乔坐在栈桥边，奋力地洗着衣服。燕洵牵马来到河边找她，调笑宇文玥为楚乔取的名字
</div>
</body>
</html>
效果：
六.表格
表格以“行”与“列”的方式展现数据
HTML 表格由 table 标签来定义
每个表格包含若干行，由 tr 标签定义
每行被分割为若干单元格，由 td 标签定义
数据单元格可以包含文本、图片、列表、表单、表格等
caption>表格标题
thead表格头
tbody 表格体
tfoot表格尾
七.表格练习
<!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>
<table border="1" width="50%">
<caption>小说排行榜</caption>
<thead>
<tr>
<th>排名</th><th>关键词</th><th>趋势</th>
<th>今日搜索</th><th>最近七日</th><th>相关链接</th>
</tr>
</thead>
<tr>
<td>1</td><td>鬼吹灯</td><td><img src="up.jpg"></td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a>
</td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a>
</td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td><img src="up.jpg"></td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a></td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td>1</td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a></td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td>1</td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a></td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td>1</td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a></td>
</tr>
<tr>
<td>1</td><td>鬼吹灯</td><td>1</td><td>356</td>
<td>3560</td>
<td><a href="#1">贴吧</a>
<a href="#2">图片</a>
<a href="#3">百科</a></td>
</tr>
</table>
</body>
</html>
效果：
八.列表
有序列表
使用数字进行标记
开始标签： ol
列表项标签： li
无序列表
使用圆点进行标记
开始标签： ul
列表项标签：li
自定义列表
开始标签：dl
列表项标签： dt
列表定义标签： dd
九.列表练习
<!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>
<h2>搜索引擎排名</h2>
<ol type="1">
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sougou</li>
</ol>
<h2>软件编程语言</h2>
<ul type="disc">
<li>java</li>
<li>c++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
<h2>健康食品</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>西兰花</dd>
<dd>菠菜</dd>
</dl>
</body>
</html>
效果：
总结：这些都是基础的，后面几天要好好学习！
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
