文章目录
- 无序列表menu
- ol的其他属性
- type
- start和value
- reversed
- 定义列表dl、dt、dd
- html与body
- 关联性
- overflow
- 桌面端和移动端的滚动条
《HTML并不简单：Web前端开发精进秘籍》张鑫旭 笔记
无序列表menu
<menu>元素可以看成是<ul>元素的平行替代，两者的语法及默认样式都是一致的，区别在于语义上。
<menu>用在可交互的列表上，而<ul>用在称述性的列表上，如：
- li中是链接元素
<button>或按钮元素<a>，使用<menu> - 否则使用
<ul>
ol的其他属性
可以用CSS改变ol元素的序号类型，如想要大写ABC序号：
ol{list-style: upper-alpha;
}
但是这样不好。假设我希望有序列表的需要从3开始，或从C开始，怎么实现？下面将用几个html的属性实现。
type
ol的type属性可以用来定义有序列表的类型：
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马数字编号
- I 表示大写罗马数字编号
- 1 表示数字编号（默认）
编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性。
css的list-style-type优先级高于type。
start和value
start和value属性可以指定有序列表的起始序号。start用在ol上，value用在li上。value优先级高于start。
<ol type="A" start="3"><li>aaa</li><li>bbb</li>
</ol>
<ol type="A"><li value="3">aaa</li><li>bbb</li>
</ol>
效果都是：
C.aaa
D.bbb
都要type属性
另外，如果是字母排序，且序号范围超过了26，就会在前面叠加字母作为前缀：
<ol type="A" start="38"><li>aaa</li><li>bbb</li>
</ol>
显示为：第12个字母正好是L
AL.aaa
AM.bbb
reversed
该属性可以在不改变列表元素布局的情况下，让有序列表的序号按照倒序呈现。
<ol reversed><li>aaa</li><li>bbb</li>
</ol>
2.aaa
1.bbb
以上几个属性就是<ol>元素才有的HTML属性，遇到符合的场景一定要优先使用，而不是借助CSS或者JavaScript代码，会有好处。
如：
在复制页面内容并粘贴到富文本编辑器的场景中，如果有序列表的起始值或者反序都是使用CSS代码模拟的，那么，当粘贴到富文本编辑器中的时候，这些信息就会丢失，而如果使用HTML属性，这些信息都会被保留到富文本编辑器中。
定义列表dl、dt、dd
首字母的d表示定义：definition。
l表示列表：list。
t表示术语：term。
第二个d表示描述：description。
html与body
关联性
在HTML中，
<body>和<html>并非两个完全独立的元素。
我们建立一个空白页面，不设置额外的css代码，用如下代码在控制台输入：
document.body.clientHeight
会得到0，表示body的高度为0。
但给body设置背景色，整个页面都会有背景色。
为什么？body的高度为0，但是背景色会铺满整个浏览器？
同时，我们给html设置任意背景，如：
background-image: linear-gradient(to bottom, aqua, aquamarine);
则原本body的背景色消失了，显示的是渐变背景的平铺高度，只有8px。为什么？
答：
当只给body设置背景色时，渲染效果与html元素设置背景色一致，且html元素的背景色高度至少为一屏幕。因此背景色是铺满整个屏幕的，哪怕body高度为0.
这也就是给高度为0的body设置背景色，整个页面都有背景色的原因。
当html设置了渐变背景后，html的背景色就是用设置的渐变背景，而不是body的背景。body的高度为0，所以设置的颜色会消失。
body元素有margin:8px的默认样式。css中，有margin合并现象，即：
当两个垂直边界（上下边界）相遇时，他们将形成一个边界，其大小等于两个发生合并边界的最大者。若此块级元素内部为空，且没有设置border和padding，它的上下margin会合并。
因此，在默认状态下，由于body的margin:8px和margin合并现象，html的高度会被计算为8px。由于html要显示一屏幕，则会显示为：8px高的渐变背景重复铺满整个屏幕，形成水平条纹的效果。
html {background-image: linear-gradient(to bottom, aqua, pink);
}
margin合并： 理解margin塌陷和margin合并及其解决方案- 掘金 (juejin.cn)
可以给html设置高度，则就会是水平条纹的高度：
html {height: 100px;background-image: linear-gradient(to bottom, aqua, pink);
}
overflow
除了背景外，body的overflow属性也有类似现象。
<body><div></div>
</body>
body{height: 50px;overflow: hidden;background-color: pink;
}
body>div{height: 150px;background-color: aqua;
}
按照我们对现有知识的理解，div超出50px应该要隐藏，但实际上没有：
若让div的height非常大：
body>div{height: 9999px;
}
它最多也只有一屏，多余的隐藏了。
把 overflow: hidden;注释掉，就会出现滚动条，蓝色高度为9999px了。
为什么？
原因和背景色的渲染规则类似：
如果html没有设置overflow属性，那么body的overflow可以看做设置在html上。而html的overflow属性生效高度至少为一屏。
桌面端和移动端的滚动条
桌面端，页面默认滚动条由html产生。
移动端，由body产生。
需要注意的是：
对于移动端，许多移动设备（如iPhone和Android设备）并不显示常规的滚动条。相反，当用户滑动屏幕时，它们会显示一个短暂的、简化的滚动指示器。因此，尝试在移动端Web页面上自定义滚动条可能不会有任何效果。它由body元素产生。
因此，如果想隐藏滚动条，在桌面端要在html设置css：
html {overflow:hidden;
}
在移动端要在body设置css。
如果我们想知道当前页面的窗体滚动对象，可以使用：
document.scrollingElement
