和兔子学前端呀-HTML+CSS 学习第二天笔记

HTML+CSS 学习第二天笔记
学习内容：
1、列表
2、表格
3、表单
4、注释
5、字符实体

一、列表

列表都不是单打独斗的，通常都是一组标签组成

1 无序列表

作用：定义一个没有顺序的列表结构

由两个标签组成，ul（容器级标签），li（容器级）

ul：英文ulordered list（无序列表）

li：英文list item（列表项）

无序列表的基本使用

<h2>古典四大名著</h2>
<ul>
    <li>三国演义</li>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
</ul>

需要注意的是，ul内部嵌套li，它们是父子关系。
规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

下面的写法是错误的，因为ul标签的内部不能嵌套除了li标签以外的其他标签

<ul>
    <p>
        西游记
    </p>
    <p>
        三国演义
    </p>
</ul>

列表的拓展，li标签内部可以继续嵌套列表结构

<h2>四大名著</h2>
<ul>
    <li>
        <h3>西游记</h3>
        <ul>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙悟净</li>
        </ul>
    </li>
    <li>
        <h3>水浒传</h3>
        <ul>
            <li>宋江</li>
            <li>武松</li>
            <li>林冲</li>
            <li>卢俊义</li>
        </ul>
    </li>
    <li>
        <h3>红楼梦</h3>
        <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
            <li>贾宝玉</li>
        </ul>
    </li>
    <li>
        <h3>三国演义</h3>
        <ul>
            <li>刘备</li>
            <li>曹操</li>
            <li>孙权</li>
            <li>张飞</li>
        </ul>
    </li>
</ul>

无序列表项之间没有先后顺序之分的
列表项之前的前缀样式是有CSS去控制的，目前只负责结构的搭建就可以了

2 有序列表

作用：定义一个有序列表的列表结构

需要有两个标签组成ol，li

ol：英文ordered list（有序列表）

li：英文list item（列表项）

需要注意的是，ol内部嵌套li，它们是父子关系。
规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

基本使用

<h2>三年级排名情况</h2>
<ol>
    <li>三年级2班</li>
    <li>三年级1班</li>
    <li>三年级2班</li>
</ol>

ol标签的嵌套

<h2>三年级期末考试排名</h2>
<ol>
    <li>
        <h3>三年级2班</h3>
        <ol>
            <li>王同学</li>
            <li>张同学</li>
            <li>李同学</li>
        </ol>
    </li>
    <li>
        <h3>三年级1班</h3>
        <ol>
            <li>樊同学</li>
            <li