HTML的设计的初衷是为了展示图文，它的排版能力非常强大。写文章的时候突发奇想，想到我还没有正式和同学们做过自我介绍，借这次机会做个自我介绍。通过这篇自我介绍，希望你能够对 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>王素燕自我介绍</title> <link rel="stylesheet" href="./day9.css"></head>
<body> <div class="content"> <p class="title">王素燕自我介绍<p> <p class="greet">同学们好:</p> <p class="des" wo>我是王素燕，男（有的小伙伴总以为我是女生），网名 Lefe，我的微博是 <a href="https://weibo.com/5953150140/profile">Lefe_x</a> （因为 Lefe 已经被占用了）。目前在大厂一线做<span class="stress-word">iOS和前端</span>相关的工作。 我这个人最大的特点是不愿意呆在舒适区，总喜欢自己琢磨一些事情，自我驱动能力和自控力比较强。希望通过 技术能做一件<span class="stress-hard">有意义</span>的事情。 </p> <p class="des"> 前半年，学习了数据结构和算法，学习的时候 并没有找到比较好的电子版资料，故我把学到的数据结构和算法通过图解的形式写出来。画完 了<span class="stress-word">链表、队列、双端队列、循环队列、栈、堆、二叉树、线段树、AVL 树、二分搜索树、红黑树</span>这些数据结构。这部分知识并没有 想象的那么难，<span class="stress-hard">后续打算用前端的形式把它讲的更通俗易懂</span>。 </p> <div class="dsa-box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <p class="des">学习前端这个想法一直都有，只是一直没找到它对我有什么作用。直到我想建一个网站的时候，才下定决心。最终通过 Jekyll 做了我第一个网站 <a href="https://lefex.github.io/">超越技术</a>。做的时候发现前端的思想很超前，很多值得移动端的同学 去学习。一次偶然的机会就开始做前端了。在学习的时候，深刻理解到<span class="stress-hard">万事开头难</span>，好在有公司同事的帮忙，一路磕磕绊绊也算走过来了。 </p> <p class="des">我深知自学一个新的方向，会面对各种问题。看书，不太现实，每天忙得几乎没有半点时间，而书本上的内容大多数是从起源讲起，重点难以突出 ，比如我学选择器的时候，看了半天没告诉选择器究竟是干吗用的。既然入门这么难，世面上却没有系统性学习前端的免费课程。 那我为何不做呢？有了想法后，说干就干。由于和南大一起做过知识小集，有一些人脉，开始时还算顺利，200人很快就达到了，这不你现在才和我一起学习前端吗！ 所以要感谢这些帮我分享课程的小伙伴们。 </p> <p class="des"><span class="stress-hard">《前端小课》</span>，我对它的定位是<span class="stress-hard">一本前端入门到进阶的多媒体电子书</span>。 为什么定义成书呢？ 因为写书比较系统，质量有保证。写《前端小课》的时候我也是这样，每个知识点都会反复推敲，每篇文章都会反复看3遍以上。我觉得《前端小课》还有一个最大的特点是， 它具有一定的活力，因为它融入了读者的思考与行动，每天有数百名同学在打卡，与我互动，互相鼓励。相信后续会有越来越多的同学加入到这个学习队伍中。 </p> <div class="qrcode-box"> <p class="qrcode-text">前端小课，每日一课</p> <img class="qrcode-img" src="./images/qrcode.jpg" alt=""> </div> <p class="footer">素燕写于2019-09-12</p> </div></body>
</html>.title { font-size: 28px; font-weight: bold; color: black; border: 1px dotted rgb(253, 168, 168); text-align: center; margin: 20px auto; width: 220px; border-top-left-radius: 8px; border-bottom-right-radius: 8px;}.greet { font-size: 18px; color: #3f3e3f; text-decoration: underline dotted #9B9B9B;}.content { margin: 16px;}.des { font-size: 16px; color: #3f3e3f; letter-spacing: 1px; line-height: 25px;}[wo]::first-letter { font-size: 30px;}.stress-word { color: black; font-style: italic; font-size: 16px;}.footer { text-align: right;}.stress-hard { color: red;}
.dsa-box { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px);}.qrcode-box { display: flex; flex-direction: column; margin-top: 40px; margin-bottom: 40px; justify-content: center; align-items: center;}.qrcode-img { width: 140px; height: 140px;}.qrcode-text { font-size: 14px; color: #3f3e3f; margin-bottom: 0;}@media (min-width: 700px) { .dsa-box { grid-template-columns: repeat(5, 120px); grid-template-rows: repeat(2, 120px); }}.dsa-box > div { margin: 1px; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}.dsa-box div:nth-child(1) { background-image: url('./images/1.png');}.dsa-box div:nth-child(2) { background-image: url('./images/2.png');}.dsa-box div:nth-child(3) { background-image: url('./images/3.png');}.dsa-box div:nth-child(4) { background-image: url('./images/4.png');}.dsa-box div:nth-child(5) { background-image: url('./images/5.png');}.dsa-box div:nth-child(6) { background-image: url('./images/6.png');}.dsa-box div:nth-child(7) { background-image: url('./images/7.png');}.dsa-box div:nth-child(8) { background-image: url('./images/8.png');}.dsa-box div:nth-child(9) { background-image: url('./images/9.png');}
这篇文章涉及到的内容比较多，比如文字处理，grid 布局，flex 布局，边框，PC与移动端适配，以及各种选择器的使用。不过，重点要掌握文字处理与各种选择器的使用，其它内容后续会详细讲解。你可以把代码复制到一个HTML文件中，在浏览器查看实际效果，应该有不错的效果。
color：字体颜色；
text-align：字体对齐方式；
text-decoration: 文字修饰，比如下划线，删除线；
letter-spacing: 文字间距；
line-height: 行高；
font-style: 文字样式，比如斜体；
今天的打卡指令：
1.你还用过哪些关于文字的CSS属性；
2.直接打卡；
版权声明：本文为lefex原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。