持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
十月学习内容回顾
前几天学习了一些html中的常用标签和使用方法
- 写文档可以用的标签（在vscode里写html简单页面（页面效果+实现步骤） - 掘金 (juejin.cn)）
- 添加图片用的标签（含有图片的html页面（页面效果+实现步骤） - 掘金 (juejin.cn)）
- 制作表格用的标签（一个美化的表格（页面效果+实现步骤） - 掘金 (juejin.cn)）
今天继续学习一些html中的常用标签
hr标签
hr标签是分割线标签，效果如下：
将页面放大之后可以看到这条分割线是有阴影的：
那么如何让这个阴影取消，得到下面的效果呢？
下面就来学习一下
hr标签的属性标签
| 属性 | 属性值 | 含义 |
|---|---|---|
noshade | noshade | 取消阴影，这个属性值是默认的属性值，属性值可以空着不写 代码写法：写作 <hr noshade="noshade"> 或者 <hr noshade> |
color | 任意颜色的英文单词 | 让分割线的颜色改变为该属性值颜色 |
width | 数字px 或者写百分比 | 指定分割线的宽度 |
align | 可以写 left center right | 指定分割线的水平对齐方式 |
size | 数字px | 指定分割线的粗细 |
列表标签
用html标签可以制作出三种列表：
- 无序列表
- 有序列表
- 自定义列表
无序列表
上图文字部分即为一个无序列表，实现这个效果需要用到无序列表标签。
标签格式： <ul><li></li></ul>
ul表示无序列表开始
li表示无序列表中的项目，可以有多个，每一个li中包含的是无序列表中的一项
用下方代码即可实现一个基础的无序列表
<ul>
<li>新冠疫情</li>
<li>资讯</li>
<li>体育</li>
<li>天气</li>
<li>我的兴趣</li>
<li>已保存资讯</li>
</ul>
效果如图：
·是无序列表的默认项目符号
无序列表的属性(该属性写在 ul 的开始标签之后)：
| 属性 | 属性值 | 含义 |
|---|---|---|
type | disc | 指定无序列表的项目符号为实心圆圈 |
type | circle | 指定无序列表的项目符号为空心圆圈 |
type | square | 指定无序列表的项目符号为实心方块 |
type | none | 取消无序列表的项目符号 |
指定 type 的属性值为none，可以得到如下效果： |
有序列表
标签格式： <ol><li></li></ol>
将上方的无序列表稍加修改可以得到下图样式：
1.是有序列表的默认项目符号
有序列表还可以有其他几种项目符号（将如下属性添加至 ol的开始标签之后）：
| 属性 | 属性值 | 含义 |
|---|---|---|
type | 1 | 指定有序列表的项目符号为 1.,也是默认的项目符号 |
type | a | 指定有序列表的项目符号为 a. |
type | A | 指定有序列表的项目符号为 A. |
type | i | 指定有序列表的项目符号为小写罗马数字 |
type | I | 指定有序列表的项目符号为大写罗马数字 |
start | 任意数字 | 写数字几，有序列表的项目符号就从几开始。该属性值不设置时默认从1开始 |
自定义列表
标签格式：<dl><dt></dt><dd></dd></dl>
<dt></dt>之间可以放图片<dd></dd>之间可以放文字<dd></dd>前方有默认间距<dl>内部可以放置多个dt dd标签，建议只放一个
案例实现
基于自定义列表的样式，提出一个实现上图的方案：
将图中文字前方的图片截取出来，放置于自定义列表的<dt></dt>之中，文字部分放置于<dd></dd>之中
今天的学习就分享到这里，实现效果下次文章继续分享~
