嗯哼君 渠源查看:1 回复:3 评论:1 创建时间:2020-04-21T12:55:48用户:嗯哼君 渠源查看:1 回复:3 评论:1 创建时间:2020-04-21T12:55:48
往期回顾：
1·众所周知HT·ML是一门编程语言：https://shequ.codemao.cn/community/279595
2·为自家作品写个简介呗：https://shequ.codemao.cn/community/279喵9
——————————
一、元素
上节课，我们懵懵懂懂地学习了有关HTML的一些基本内容，今天我们就来深化一下
还是老文件，直接放出来吧：
<!doctype html>
<html>
<body>
<h1>《玊兽》</h1>
<p>著者：嗯哼君 渠源</p>
</body>
</html>我们知道，<xx>与</xx>是一对标签，在他们之间的内容就是他们要管的范围
而<p>和</p>之间，便是<p>这个标签要管的内容
管啥呢？怎么管呢？
每一个不同的标签，都有他们的作用。上回说了，<p>的作用就是把一段文字不加修饰地显示出来
显示啥呢？咋显示呢？
显示的内容，就是两个标签之间的内容啦。在这里，就是“著者：嗯哼君 渠源”
不用加双引号，这点倒是与其他的编程语言不同。毕竟我在一开始就说了，HTML不能算是编程语言……
经过这么一解释后，相信大家就没有疑问了吧（毕竟这只是最基础最基础的一个标签啊2333）
理解以后，我们再来专业化一下：在HTML中，我们称这中间的文字部分，叫做“元素”
举个例子，上面的<h1>与<p>的元素就分别是：“《玊兽》”与“著者：嗯哼君 渠源”
很好理解，对吧？接下来，我们就要学习一个知识点，叫做：属性
二、属性
有些编程底子的人，可以把标签理解为函数，属性就是函数的参数
喵的人，就把元素当做这个标签的一个修饰吧，它指定了这个标签要怎么怎么样。举个例子：
一个精神小伙（划去）当服务员，叫做<p>
一位客人来点餐了，对<p>说：“跟厨师说去，我要一份老八秘制小汉堡”
然后<p>就去后厨了，跟厨师说：“老八秘制小汉堡”！然后厨师就……，最后递给了<p>汉堡，<p>再递给那位客人
马上，第二位客人来了，不过他比上一位更加挑剔。他对<p>说：我也要一份‘老八秘制小汉堡，’但是佐料放多一点！”
于是<p>就记住了，跟厨师说去：“老八秘制小汉堡”！然后补充：“对了，这个汉堡要多点佐料！”
怎么样，可以理解了吧？元素就相当于一个形容词，来修饰、指定这个标签的作用
那么，这个属性放在哪里呢？我们一般来说，都会将属性放到开放标签中，格式如下：
<(标签名)(空格)(属性名)="(属性内容)">(元素)</(标签名)>
<xx a="b">……</xx>
<p style="font-size:20px">hello world</p>今天，我们就先来学习一个属性，叫做style。它是最常用，但也是功能最广的一个属性
简单地说，style管着它的外观。例如在上面的例子中，就指定了“font-size:20px”，也就是“字体大小为20px”
此外，常用的还有font-family（字体）、font-weight（粗细）、text-align（对齐方式）、color（颜色）、background-color（纯色背景）等等……此外，style还有很多神奇的功能，等待着你的挖掘
那么，如何为一个标签，添加两个及以上的属性呢？其实很简单，加空格就行了。为此，我们来介绍第二个属性：href
href配合<a>标签用于跳转链接，而href的内容就是点击后要跳转的链接
举个例子：下面的代码，将会输出一行字体大小40px、最粗、隶书、红色的、绿色背景的“《玊兽》”。而且当我们点击它时，它将会跳转到指定的网站
<!doctype html>
<html>
<body>
<a style="font-size:40px; font-weight:900; font-family:'隶书'; color:red; background: green"
href="https://shequ.codemao.cn/wiki/novel/cover/61302">《玊兽》</a>
</body>
</html>PS：href前面是空格，不过因为太长被电脑自动换行了2333，实际上两个属性之间不用换行的
因为篇幅限制，这节课我们就学习了元素、属性与新标签<a>，若有什么不会或者补充的地方还请在评论区留言哦
——————————
三、今日作业
1、基本任务：用类似的方法，最好能纯手打出最后那行代码，将其中的属性改为你想要的属性。完成的或者有疑问的，可以在评论区里留言，让我们互帮互助鸭
2、进阶任务①：尝试一下将<h1>到<h6>的各标签、<p>与<a>组合到一块，编写出一个介绍自己作品的页面，而且最后可以跳转到该页面
3、进阶任务②：了解一下更多的属性，最好能总结一下style属性里面的编写方式（因为这个属性比较特殊，属性的值里面又有其他的小属性）。
OK，本节课到此为止，十分感谢您的阅读！
