上一篇文章效果实现

要实现的效果如下：

基于昨天的思路，先截图得到项目符号

写出如下代码:

<dl>
    <dt><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c179d87536141bc8204f913a920bd9b~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>新冠疫情</dd>
</dl>
<dl>
    <dt><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdf39bde0cc349618395bbecfd9cd8ef~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>资讯</dd>
</dl>
<dl>
    <dt><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aef92ab53da6408fbc4b9c0a64b8e9f9~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>体育</dd>
</dl>
<dl>
    <dt><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb604d74162d41bb9ce5d82fe2d6b65f~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>天气</dd>
</dl>
<dl>
    <dt><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7efe721e1aa402bbf71ebfb855ae9e0~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>我的兴趣</dd>
</dl>
<dl>
    <dt><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/408a530dc56440b0a178a13b7d9e8703~tplv-k3u1fbpfcp-watermark.image?"></dt>
    <dd>已保存资讯</dd>
</dl>

最终得到效果如下：

大致得到了理想效果

可以看到项目符号并没有位于文字部分正前方，原因是自定义列表的 dt 部分可以添加图片，但是 dl dt dd标签均会默认独占一行。
且 dd 标签有默认的边距（距离页面的左边有一定距离，可以理解为写作文的段首空两个字的间距）
综上所述，使用自定义列表就只能将原页面效果展示如该图效果了。

开始今天的学习吧~

超链接标签

标签写法： <a></a> ，标签之中写的是被点击之后跳转至新的链接的内容。该标签的属性如下：

属性	属性值	含义
`href`	写要链接到的位置	表示超链接点击之后要跳转到的位置`还可以写一个图片的位置跳转到图片`
`title`	写提示信息	表示当鼠标悬停在超链接位置时显示的提示信息
`target`	`_self` `_blank`	`_self`表示在当前窗口打开超链接内容， `_blank`表示在新的窗口打开超链接内容 `默认在当前窗口打开`

根据上面的介绍，一起完成一个简单的超链接吧！

<a href="https://juejin.cn/user/3628846141942669" title="欢迎点击进入amiable的掘金主页" target="_blank">amiable的掘金主页</a>

当鼠标悬停在超链接位置时显示的提示信息为代码中设置的 title

超链接标签默认的点击前文字颜色为蓝色，点击时会变成红色，点击之后会变成紫色

看到这里的话也去试试做一个超链接吧，让打开的页面展示在当前窗口，并且链接到你的掘金主页

制作一个简单登陆网页效果

表单标签

表单是各个网站登录界面输入账号密码的填写框，它的作用就是收集信息。
表单标签写法： <form></form>

文本输入框

要输入账号密码首先需要一个文本输入框 ，文本输入框标签的写法： <input>。给 <input>设置属性 type ，可以改变文本框的类型。 type的属性值：

文本框：type="text"
密码框: type="password"

用 `type` 属性写几个文本框

写一个文本框（输入账号的文本框）

文本框<input type="text">

得到如下效果：
2. 写一个密码框（输入密码的文本框）

密码：<input type="password">

得到如下效果：

密码框的内容默认会隐藏，变成点或者星号等展示（不同的浏览器会有不同的展示效果）

今天的学习内容就到此结束啦到此距离实现一个简单登陆网页的界面已经快要完成了（还差登陆按钮），明天继续学习吧~

html里的其他标签（2）