练习1
<!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>
<hr>
<span>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！</span><br>
<span>今年海角天涯，萧萧两鬓生华。</span><br>
<span>看取晚来风势，故应难看梅花。</span>
</body>
</html><h1>是一级标题。
<hr>可以打印一条横线。
<span>是行元素，<br>是单标签具有换行的作用。
练习二
<!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><b>李清照</b>（<i>1084年3月13日~1155年5月12日</i>），宋代女词人，号易安居士，婉约词派代表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，留有诗集《易安居士文集》、《易安词》等。</p>
<hr>
© 北大青鸟版权所有
</body>
</html><p>表示段落且独占一行。
©表示一个版权符。
表示一个空格。
练习三
<!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>
<h2>创新公司皮克斯的启示</h2>
<hr>
<img src="./img/book.jpg" alt="" width="200px">
<p><i>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</i></p>
<p><i>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</i></p>
<p><i>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</i></p>
<b>看不见的完美硬币：细节的负担</b>
<p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p>
<p>皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p>
<p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p>
</body>
</html><img>可以添加图片，其中src属性需要填写图片的地址，./表示当前目录下，可以省略。
<i>标签可以让字体倾斜，和<em>标签类似。
<b>标签让字体加粗，和<strong>标签类似。
练习四
关于<a>标签链接有三种使用场景，代码如下。
<!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>
<h4 id="first">标题1</h4>
<h4>标题2</h4>
<h4>标题3</h4>
<h4>标题4</h4>
<p>之未落在郭陈化不馆负支得马，皇投养可他年年份气其不来五，选狂是自今其嗣老法人张要前，这那她事得和斯落助韩们老认，由郭骨教不薪化法老览派能劝耳而重洪反导，舟德连俭掉掸孔整处你足归则导，到何畴才娘讨，定。</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nostrum aspernatur molestiae velit, quaerat voluptate eaque dolorem possimus iure assumenda inventore quae temporibus fugit vel perferendis nihil explicabo animi ullam.</p>
<p>看者别仁种许冈人身惊是望略服，们蒲在国，诗价中郭，妄乡李就老，落始今十派中秦变国希为仇，人文保答，感起德未人请低仍成啦年畴极同为房得，行是可仃变六刑皇丈化吾丈尹唯览，生如能不范同光要报，在釜我人才，知落婵秦者己但上对没，陀专才那房而生吾李事不越，是领子内保喜中么重非，而狱谢玉快，哉沫你性话统得婵弟后之道由磊，薪都范能定生道，的此应持徨什动，家有宫京归们原三终说越才人幕为尚斯，整撒终导人区月恨有主。</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate eligendi est voluptatem repellat, error fugiat numquam voluptas doloremque. Reiciendis consequuntur aliquam dicta nemo nulla maiores sint, incidunt quibusdam. Dolorem eveniet mollitia velit hic quo repellat omnis atque qui debitis doloremque quis, incidunt perspiciatis earum adipisci. Id provident optio velit vel totam ipsa! Iure laborum nostrum suscipit eligendi alias. Eos rerum eligendi minima dolore sunt vitae nihil animi natus commodi, mollitia ipsa error culpa, quibusdam deleniti. Maiores aut nobis ullam, accusamus inventore ex in veritatis possimus molestiae et maxime ipsam velit id cum impedit enim labore ut hic esse voluptatem, quam quas eos itaque fugiat. Dolorem aliquid minus sed architecto fugiat fuga, veniam qui itaque, velit quidem iure totam. Culpa, consequatur quisquam aliquam unde maxime esse at numquam consectetur, ratione nostrum, veniam explicabo laboriosam veritatis ullam non? Accusamus saepe aspernatur, atque culpa facilis, quidem harum hic ullam sunt possimus, porro laudantium! Atque ullam possimus sapiente consectetur architecto sequi vel quidem ratione, pariatur doloribus nobis esse alias corrupti explicabo, beatae eligendi nostrum adipisci quos enim dignissimos sit accusantium amet delectus! Harum tenetur sed voluptas dolorum adipisci illum repudiandae tempora asperiores fuga. Ex, assumenda cupiditate laudantium facilis tempore vitae dolorem veniam commodi quidem ipsam, odio voluptas saepe tempora corrupti eius enim esse ab provident omnis nulla in. Sint tenetur assumenda corrupti nobis facilis veritatis sit aut cumque! Quia eius quasi eligendi cum ab. Culpa aspernatur accusamus beatae labore aliquid! Quae, tenetur? Esse neque officiis pariatur porro sequi eum ratione labore exercitationem ea animi rem tempora error deleniti suscipit repellat minus, sed a voluptate corporis voluptatum. Commodi, accusamus ipsam dignissimos, fuga repellat a magni veniam recusandae numquam obcaecati natus. Aliquam molestias ab cum dolor neque nobis minima sunt quidem nemo, libero numquam repellat? Iste, consectetur provident possimus impedit veritatis ad quo, fuga maxime quasi culpa dicta sint ab natus odio deserunt animi? Neque, sed sapiente maxime dolores recusandae inventore sequi beatae vel incidunt hic at odio perspiciatis facilis blanditiis eligendi libero ratione veniam, asperiores laboriosam excepturi nisi! Nisi velit error nobis sapiente ullam nihil magnam illo sit recusandae explicabo, iste voluptates quod sunt voluptate reiciendis id eos maxime aliquam eligendi nam libero repudiandae, deleniti inventore aut! Cumque sequi velit omnis consequuntur! Non at ducimus voluptate mollitia provident nihil sed voluptatem libero saepe. Est asperiores dolor error perspiciatis quos pariatur alias qui. Rerum assumenda sunt laborum, unde harum repellendus ut alias accusamus reprehenderit illo eaque sed neque, nihil quo obcaecati mollitia est itaque cupiditate! Eveniet asperiores repellat officia voluptas iure quibusdam nesciunt, ut veritatis, illum exercitationem architecto a. Doloribus assumenda ipsum illo fuga aspernatur labore mollitia, similique unde odio harum voluptates numquam exercitationem dolorum reiciendis beatae accusamus. Nemo dignissimos repellat, dolor iusto ut beatae! Laboriosam perspiciatis commodi excepturi numquam, voluptatem, vel ut nihil iure quod dolore ipsum doloribus, cum deserunt dolorum reiciendis eaque ullam sapiente cumque dolorem ea. Suscipit in, quae debitis repudiandae, aliquam temporibus voluptas ipsum facilis ex sed possimus reiciendis eveniet. Odit fugiat aliquam itaque blanditiis, consequuntur ea delectus excepturi debitis quasi ullam!</p>
<p>秦付求关便之也而事着生亲案，病高十动司药，无弟了尺兼将马身常身可与太灰感一，杀这人尘朋太即文，前人份情承不我、在招后的子有他，不要主人十预世是陈入洪是了是五太，位色入在杨措亲有慷，唯降气妄不应十生耐定清，落非自事非极之曾秦平后人学促，对到这要叹学，氏正见、失的，谓韩报护世了尹人李乌文他韩处郭仃后他，乐范航求才李互我，一娟藏中陀国他，他而肯词却着冒秦宋木京于竟应其，畴把极者，畴者冇留德舟原第了使，事事两请绝，狱勇有与锐井郭救太幕尺使文釜发陀那，貂丹我活的韩活资由落之，着六十哥你文遗量爻绪有胜分烦看母死二仄，活死我大前鼓往了的临胜到你关此薪，相融之的竟要非日自反乐统正罪拾老始召乏，惶关我极总重人。</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa pariatur molestiae id corporis in? Cum, atque amet quos enim vel aperiam quibusdam cupiditate esse maiores sunt fugit at harum quas fuga facilis ratione eum consequatur mollitia rerum. Reprehenderit esse cupiditate perferendis soluta facere obcaecati alias atque suscipit ratione porro laudantium impedit eius distinctio ipsa error assumenda expedita, iste velit veniam nam corporis minus. Possimus accusamus, quisquam, facilis tempora reiciendis eveniet distinctio animi veritatis quasi doloribus amet non, illo dolor nemo fuga dolores sint tempore delectus omnis dignissimos. Repellendus totam itaque repellat laborum odit, possimus, atque ad ab corporis fuga reprehenderit autem, animi est et dignissimos. Nesciunt accusamus quas, itaque est facere illum autem commodi delectus illo sit! Quae illo inventore aliquid dolorem distinctio doloremque at porro, sunt esse pariatur dolor dicta incidunt quia consequatur ut quaerat necessitatibus similique. Voluptatibus eaque tenetur, beatae error quod, reiciendis aliquam quibusdam culpa iure optio mollitia ut sint aliquid corrupti adipisci neque fugit nostrum quae facilis iusto et in. Quia dicta accusantium qui deleniti consequatur tempora perspiciatis impedit magni voluptatibus dolorem nisi iusto mollitia voluptate assumenda, autem explicabo fugit! Adipisci iste provident voluptas dignissimos ab! Modi quae fugit id. Sunt enim ex expedita beatae, laborum reiciendis est deleniti nihil assumenda ipsum aut perspiciatis molestias dolorum quis neque eum modi dolores adipisci iste! Praesentium animi libero tenetur saepe. Odit aut explicabo, expedita minus dolorem consequatur at maxime quas deserunt laboriosam, dignissimos quos amet reiciendis? Earum molestias quod, perferendis inventore sequi nisi ex! Placeat ducimus assumenda blanditiis in, dicta ipsum alias saepe eaque laborum aliquid incidunt at. Maxime fugit nulla fugiat, rerum aspernatur consequuntur? Saepe provident corporis ipsa sed nulla eligendi labore placeat perferendis. Ut facilis sint neque. Qui, fuga provident. Perspiciatis explicabo quis delectus ullam. Est, vitae minima! Dolorum, debitis molestiae libero quam cum molestias eius.</p>
<a href="https://www.baidu.com" target="_blank" title="百度网页">访问百度网页</a>
<a href="#">跳转到首页</a>
<a href="#first">跳转至标题一处</a>
</body>
</html>场景一：跳转至其他网页，target属性中_blank表示新建链接窗口。
场景二：跳转至首页，在href后添加#号占位符即可。
场景三：跳转至指定位置，需要使用到id属性，我们需要在指定位置比如说如上代码的第一个四级标题处添加了id，设置为first，而在<a>中的href后添加id设置值再加上一个#即可。
3226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
