一、无序列表
- 各列表项之间没有次序,各项之间为并列关系
- 语法:
` <ul><!--列表容器-->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<ul>
特点:
- 宽度默认撑满整个父元素。
- 高度默认由内容撑开。
- 独立成行
- 自带外间距
- 自带内填充(内间距)
- 自带列表符,去掉自带列表符 li{ list-style: none; }
2、有序列表
- 语法
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ol start="6" reversed type="I">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
strat属性:开始值 写在 <ol start="6"></ol>开始标签中
reversed属性:倒叙 写在 <ol start="6" reversed></ol>开始标签中
type属性(了解)
- `a`: 小写字母
- `A`: 大写字母
- `i`: 小写罗马数字
- `I`: 大写罗马数字
- `1`: 数字 默认值
特点:
- 与无序列表基本一致
- 应用场景: 有序的列表
3、自定义列表
自定义列表
语法:
<dl>
列表容器
<dt>词专业名</dt>
<dd>对专业名次的解释</dd>
</dl>
在浏览器中,dd标签的内容会缩进显示
<dt>词专业名</dt>
<dd>对专业名次的解释</dd>
<dt>web大前端</dt>
<dd>HTML、CSS、JAVASCRIPT</dd>
</dl>
> 浏览器显示,dd标签的内容会缩进显示```
特点:
-
宽度默认撑满整个父元素
-
高度默认由内容撑开
-
独立成行
-
-dl dt dd都是块级标签
-
dl标签自带外间距
-
dd标签自带外间距
-
浏览器显示,dd标签的内容会缩进显示
4、语义化
1、什么是HTML语义化?
用合适的标签去匹配相应的内容。
2、语义化的好处有哪些?
在没有 CSS 的情况下,页面也能呈现出很好地内容结构。
- 使代码更具【可读性】,便于团队开发和维护。
- 有利于SEO搜索引擎优化(在搜索框搜索内容的时候更好更快的搜到)
- 有利于【用户体验】(例如:title、label 标签、alt属性的灵活运用)