学习前端第一天，笔记整理了一下。

1、HTML列表

1、无序列表

各列表项之间没有次序，各项之间为并列关系

语法

    <ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

• 特性

  ul 和 li 标签都是块级标签

  • 宽度默认撑满整个父元素

  • 高度默认由内容撑开

  • 独立成行

  • 自带外间距

  • 自带内填充

  • 自带列表符，去掉自带列表符 li{ list-style: none; }

• css属性

  • list-style-type属性：列表符类型

    • circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

• 应用场景 : 新闻列表 、导航 、商品列表

• 注意：ul的直接子元素只能是li

2、有序列表

有排列次序，各项之间为并列关系

• 语法

    <ol><!-- 列表容器 -->
        <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 reversed></ol>开始标签中
​
type属性（了解）
​
- `a`: 小写字母
​
- `A`: 大写字母
​
- `i`: 小写罗马数字
​
- `I`: 大写罗马数字
​
- `1`: 数字 默认值
​
​
  <!-- 倒序和开始值 -->
  <!-- 从10开始进行倒序  10  9 ... -->
  <ol start="10" reversed>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ol>
​

• 特性 与无序列表基本一致

• 应用场景: 有序的列表

3、自定义列表

自定义列表
​
        语法：
     <dl>
         列表容器
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
    </dl>
    dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）
​
    在浏览器中，dd标签的内容会缩进显示
​
<dl>
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
        <dt>web大前端</dt>
        <dd>HTML、CSS、JAVASCRIPT</dd>
    </dl>
​
> 浏览器显示，dd标签的内容会缩进显示
​
- 特性
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行 
  -dl，dd默认自带外间距
​
典型应用
- 名词解释、分类（大分类-细节的类别）

2、语义化

1、什么是HTML语义化？

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

2、语义化的好处有哪些？

• 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。

  • 使代码更具【可读性】，便于团队开发和维护。

  • 有利于SEO搜索引擎优化

  • 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

3、HTML特殊字符

代码            效果           描述
&lt;             <         小于号或显示标记
&gt;             >         大于号或显示标记
&amp;            &         可用于显示其它特殊字符
&reg;            ®         已注册
&copy;           ©         版权
&trade;          ™         商标
&nbsp;                     不断行的空白
&yen;            ￥         人民币