HTML列表标签

一、无序列表

• 各列表项之间没有次序，各项之间为并列关系
• 语法：

` <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属性的灵活运用）