今天就发个HTML的部分明天发CSS。 

<!-- 分成两个板块 --><!-- 第一个板块   左侧 放导航栏 --><div id="left"><div><div class="touxiang"><!-- 类名  头像（touxiang）的拼音 --><!-- 头像旋转 --><img src="./img/touxiang.jpg"></div><h2>曹操</h2>		<!-- 曹操两个字会一直发光 --><div class="audio"><audio src="img/beijingyinyue.mp3" controls="controls" autoplay="autoplay">			<!-- 音频  置于右下角 （为了方便视频，音频，图片都放在img文件夹里） -->当前浏览器不支持audio</audio></div></div><!-- 导航栏 --><div id="nav"><ul><li><a href="#huanyi">			<!-- 描点链接---欢迎界面 --><div><spanclass="iconfont">&#xe7b9;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎</div></a></li><li><a href="#guanyuta">		<!-- 描点链接---关于他界面 --><div><spanclass="iconfont">&#xe678;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于他</div></a></li><li><a href="#tadetuji">		<!-- 描点链接---他的图集界面 --><div><spanclass="iconfont">&#xe7f6;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他的图集</div></a></li><li><a href="#lianxita">		<!-- 描点链接---联系他界面 --><div><spanclass="iconfont">&#xe617;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系他</div></a></li></ul></div><div id="tubiao"><!-- 运用了字体图标  链接了部分常用浏览器为用户了解更多提供方便不过这里没有添加链接只是用  #  代替 --><ul><li><span class="iconfont"><a href="#">&#xe63f;</a></span></li><li><span class="iconfont"><a href="#">&#xe6cb;</a></span></li><li><span class="iconfont"><a href="#">&#xe72e;</a></span></li><li><span class="iconfont"><a href="#">&#xe64a;</a></span></li><li><span class="iconfont"><a href="#">&#xe616;</a></span></li></ul></div></div><!-- 第二个板块   右侧  写网页的主要内容------介绍曹操 --><div id="right"><div id="huanyi"></div> <!-- id名 欢迎的拼音[但是打的时候漏打了]（huanyi） --><div id="guanyuta"><!-- id名   关于他的拼音（guanyuta） --><h3>他的生平</h3><div class="zaonian"><!-- 类名 早年 的拼音 --><h4>早年经历</h4><!-- 类名 介绍 的拼音 --><div class="jieshao jieshao1"><p>曹操出生在宦官世家，《三国志》称其为汉相曹参之后，曹操的父亲曹嵩是宦官曹腾的养子，曹腾历侍四代皇帝，颇有名望。汉桓帝时，封为费亭侯，曹嵩继承了曹腾的侯爵，在汉灵帝时官至太尉。</p><p>年轻时期曹操机智警敏，有随机权衡应变的能力，而且任性好侠、放荡不羁，不修品行，不研究学业，所以当时的人不认为他有什么特别的才能，只有梁国的桥玄和南阳的何颙认为他不平凡，桥玄对曹操说：“天下将乱，非命世之才不能济也，能安之者，其在君乎？”南阳何颙对他说：“汉室将亡，安天下者，必此人也！” 南阳的许劭以知人著称，他也曾对曹操说过：“君清平之奸贼，乱世之英雄”。</p><p>曹操早年就表现出对武艺的爱好与才能，博览群书，尤其喜欢兵法，曾抄录古代诸家兵法韬略，还有注释《孙子兵法》的《魏武注孙子》著作传世。这些为他后来的军事生涯打下了稳健的基础。</p></div><div class="jieshao jieshao2"><img src="img/jieshao.jpg"></div></div><!-- 类名 暂露头角 的拼音 --><div class="zanlutoujiao"><h4>崭露头角</h4><div><img src="img/zanlutoujiao.jpg"><p>熹平三年（174年），曹操被举为孝廉，入京都洛阳为郎。不久，被任命为洛阳北部尉。洛阳为东汉都城，是皇亲贵戚聚居之地，很难治理。曹操一到职，就申明禁令、严肃法纪，造五色大棒十余根，悬于衙门左右，“有犯禁者，皆棒杀之”。皇帝宠幸的宦官蹇硕的叔父违禁夜行，曹操毫不留情，将蹇硕的叔父用五色棒处死。于是，“京师敛迹，无敢犯者”。曹操也因此得罪了一些当朝权贵，碍于其父曹嵩的关系，明升暗降，曹操被调任顿丘（今清丰县）令。</p><p>光和元年（178年），曹操因堂妹夫濦强侯宋奇被宦官诛杀，受到牵连，被免去官职。其后，在洛阳无事可做，回到家乡谯县闲居。</p><p>光和三年（180年），曹操又被朝廷征召，任命为议郎。此前，大将军窦武、太傅陈蕃谋划诛杀宦官，不料其事未济反为宦官所害。曹操上书陈述窦武等人为官正直而遭陷害，致使奸邪之徒满朝，而忠良之人却得不到重用的情形，言辞恳切，但没有被汉灵帝采纳。尔后，曹操又多次上书进谏，虽偶有成效，但东汉朝政日益腐败，曹操知道无法匡正。</p><p>中平元年（184年），黄巾起义爆发，曹操被拜为骑都尉，受命与皇甫嵩等人合军进攻颍川的黄巾军，结果大破黄巾军，斩首数万级。随之迁为济南相。济南相任内，曹操治事如初。济南国（今山东省济南市）有县十余个，各县长吏多依附贵势，贪赃枉法，无所顾忌。曹操之前历任国相皆置之不问。曹操到职，大力整饬，一下奏免十分之八的长吏，济南震动，贪官污吏纷纷逃窜。“政教大行，一郡清平”。</p><p>当时正是东汉政治极度黑暗之时，甚至有了买官制度。朝廷徵还其为东郡太守，拜为议郎，曹操不肯迎合权贵，遂托病回归乡里，春夏读书，秋冬弋猎，暂时隐居了。</p><p>当时天下纷乱，先是发生了冀州刺史王芬联合南阳许攸、沛国周旌等地方豪强，谋划废黜灵帝立合肥侯的事件。王芬等人曾希望曹操加入他们，但被曹操拒绝，后来王芬事败自杀。接着，又有西北金城郡（今兰州市）的边章、韩遂杀死刺史和太守，率兵十余万反叛朝廷。</p><p>中平五年（188年），汉灵帝为巩固统治，设置西园八校尉，曹操因其家世被任命为八校尉中的典军校尉。</p></div></div><!-- 类名 位极人臣 的拼音 --><div class="weijirenchen"><h4>位极人臣</h4><p>建安十七年（212年），汉献帝准许曹操“参拜不名、剑履上殿”，如汉丞相萧何故事。</p><p>建安十八年（213年），曹操起兵号称四十万，亲自南征孙权。次年正月，曹军进至濡须口（今安徽巢县东南），攻破孙权设在江北的营寨，生擒其将公孙阳。孙权亲率军七万，前至濡须口抵御曹军。两军相持月余，曹操的水军作战失利。由于春雨瓢泼、江水上涨，曹操见难以取胜，遂撤军北还。</p><p>同年五月，复《禹贡》九州。汉献帝册封曹操为魏公，加九锡、建魏国，定国都于邺城。魏国拥有冀州十郡之地，置丞相、太尉、大将军等百官。</p><p>建安二十一年（216年）四月，汉献帝册封曹操为魏王，邑三万户，位在诸侯王上，奏事不称臣，受诏不拜，以天子旒冕、车服、旌旗、礼乐郊祀天地，出入得称警跸，宗庙、祖、腊皆如汉制，国都邺城。王子皆为列侯。曹操名义虽非天子，但实际已经有天子之实。</p><p>建安二十二年（217年）冬十月，汉献帝又赐予曹操王冕十有二旒，乘金根车，驾六马，设五时副车，曹操以五官中郎将曹丕为魏王世子。</p></div><!-- 类名 文学 的拼音 --><div class="wenxue"><h4>文学</h4><p>曹操对文学、书法、音乐等都有深湛的修养。著有《孙子略解》、《兵书接要》《孟德新书》等书。</p><p>曹操的文学成就，主要表当今诗歌上，散文也很有特点。曹操的诗歌，今存20多篇，全部是乐府诗体。内容大体上可分三类。一类是关涉时事的，一类是以表述理想为主的，一类是游仙诗。</p><p>与时事有某种关联的作品有《薤露行》《蒿里行》《苦寒行》《步出夏门行》等，抒发自己的政治抱负，并反映汉末人民苦难生活，气魄雄伟，慷慨悲凉。《薤露行》《蒿里行》二诗，作于建安初年。前一篇反映何进谋诛宦官事败，董卓入洛阳作乱；后一篇写关东各州郡兴兵讨卓，又各怀野心，互相杀伐，在内容上紧相承接。诗篇以简练的语言，高度概括地写出了这一段历史过程，因此被誉为“汉末实录，真诗史也”。《苦寒行》作于建安十一年，诗篇描写冬日太行山区的酷寒、荒芜、险峻，形象生动，同时也写出了诗人内心的复杂感受。《步出夏门行》作于建安十二年征三郡乌桓时。该诗包括“艳”（前奏）及四解。“艳”着重写了诗人出征时的复杂心情。一解“观沧海”，写进军途经碣石时的观感；二解“冬十月”、三解“土不同”，写归途中见闻；四解“龟虽寿”，写取得了这场重要战役胜利后的思想活动。以表述理想为主的诗歌有《度关山》《对酒》《短歌行》等。前两篇写政治理想。他设想的太平盛世是儒法兼采、恩威并用的贤君良臣政治。这在汉末社会大破坏的现实背景下，无疑是具有进步意义的。《短歌行》的主题是求贤，以“山不厌高，海不厌深，周公吐哺，天下归心”等诗句，抒发求贤若渴，广纳人才，以冀成其大业心情。</p><p>在艺术风格上，曹操诗歌朴实无华、不尚藻饰。它们以感情深挚、气韵沉雄取胜。在诗歌情调上，则以慷慨悲凉为其特色。慷慨悲凉，这本来是建安文学的共同基调，不过在曹操的诗中，它表现得最为典型，最为突出。在诗歌体裁上，曹操的乐府诗并不照搬汉乐府成规，而是有所发展。如《薤露行》《蒿里行》，在汉乐府中都是挽歌，他却运用旧题抒写了全新的内容。曹操开创了以乐府写时事的传统，影响深远。</p><p>曹操在文学上的功绩，还表现在他对建安文学（见建安七子）所起的建设性作用上，建安文学能够在长期战乱、社会残破的背景下得以勃兴，同他的重视和推动是分不开的。刘勰在论述建安文学繁荣原因时，就曾指出“魏武以相王之尊，雅爱诗章”。事实上，建安时期的主要作家，无不同他有密切关系。曹丕、曹植是他的儿子，“七子”及蔡琰等，也都托庇于他的荫护。可以说，“邺下文人集团”就是在他提供的物质条件基础上形成的；而他们的创作，也是在他的倡导影响下进行的。</p><p>此外，曹操还有不少其他文章传世，例如《请追增郭嘉封邑表》、《让县自明本志令》、《与王修书》、《祀故太尉桥玄文》等，文字质朴，感情流露，流畅率真。</p><p>曹操著述，据清姚振宗《三国艺文志》考证，有《魏武帝集》30卷录1卷、《兵书》13卷等十余种，然多已亡佚，今存者唯《孙子注》。明代张溥辑散见诗、文等145篇为《魏武帝集》，收入《汉魏六朝百三家集》中。丁福保《汉魏六朝名家集》中也有《魏武帝集》，所收作品略多于张溥辑本。1959年，中华书局据丁福保本，稍加整理补充，增入《孙子注》，又附入《魏志·武帝纪》、《曹操年表》等，重新排印为《曹操集》。</p></div></div><div id="tadetuji"><!-- id名   他的图集   的拼音 --><h3>他的图集</h3><p>魏武帝曹操（155年 —220年3月15日 ），字孟德，小名阿瞒、吉利，沛国谯县（今安徽省亳州市）人 。中国古代杰出的政治家、军事家、文学家、书法家、诗人。东汉末年权相，太尉曹嵩之子，曹魏的奠基者。</p><div><!-- 类名 图集 的拼音 --><!-- 反映曹操为人，事迹的一些图片及文字简介和视频 --><div class="tuji1"><div class="tuji11"><img src="img/tuji1.jpg"></div><div class="tuji12"><p>掌控朝局的曹操以酒宴试探刘<br>备是否有称霸天下的野心，最终被<br>刘备巧言瞒过</p></div></div><div class="tuji2"><div class="tuji21"><img src="img/tuji2.jpg"></div><div class="tuji22"><p>“三曹”是指汉魏时期曹操与其<br>子曹丕、曹植的合称。因他们父子兄<br>弟间在政治上的地位和文学上的成就<br>，都对当时的文坛有剧烈的影响，是<br>建安文学的代表。</p></div></div><div class="tuji3"><div class="tuji31"><img src="img/tuji3.jpg"></div><div class="tuji32"><p>南朝宋刘义庆《世说新语·假<br>谲》：“ 魏武行役，失汲道，军<br>皆渴，乃令曰：‘前有大梅林，饶<br>子，甘酸可以解渴。’士卒闻之，<br>口皆出水，乘此得及前源。”</p></div></div><div class="tuji4"><div class="tuji41"><video controls="controls"><source src="img/tuji4.mp4" type="video/mp4"></source>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video></div></div><div class="tuji5"><div class="tuji51"><video controls="controls"><source src="img/tuji5.mp4" type="video/mp4"></source>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video></div></div><div class="tuji6"><div class="tuji61"><video controls="controls"><source src="img/tuji6.mp4" type="video/mp4"></source>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video></div></div></div></div><div id="lianxita"><!-- id名  联系他   的拼音 --><h3>给他留言的地方</h3><p>世人都说我是奸雄，可都又拿我这个奸雄无可奈何，你们这些自诩为君子的人，也都败在了我这个奸雄手里，如果当君子的代价就是被凌辱，被践踏，被消灭，甚至被杀的话，我宁愿当一个能够实现自己报负的奸雄，自古以来大奸似忠，大伪似真，忠义和奸恶，都不是能从表面就能看出来的，也许你们从前看错了我曹操，现在又 看错了我，我从来都不怕别人错看我。</p><form action="" method=""><input type="text" name="" id="" value="" placeholder="你的名字..." class="xinxi" /><input type="email" name="" id="" value="" placeholder="你的邮箱..." class="xinxi" /><input type="text" name="" id="" value="" placeholder="主题..." class="xinxi" /><textarea rows="" cols="" class="wenbenyu" placeholder="写下你的留言..."></textarea><input type="submit" name="" id="" value="提交你的信息" class="tijiao" /></form></div><div id="footer"><p>谢谢浏览，网页到此结束&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://baike.baidu.com/item/%E6%9B%B9%E6%93%8D/6772?fr=aladdin" target="_blank">网页所有资料均来自秒懂百科&nbsp;&nbsp;(点击进入)</a></p></div></div>