HTML功能元素

1.列表：
    先后之分：有 排行榜
         无 新闻列表 商品列表
无序列表 ul/li 班级-学生 导航栏
    <ul>
    <li>内容显示区域</li>
    </ul>
无序列表的样式：
    <ul type="value"></ul>
    disc    默认值 实心圆
    circle  空心圆
    square  实心方块
有序列表 ol/li 奥运会排行榜：
    <ol>
    <li>内容显示区域</li>
    </ol>
有序列表样式：
    <ol type="A"></ol>
    1   默认值。数字有序列表。（1、2、3、4）
    a   按字母顺序排列的有序列表，小写。（a、b、c、d）
    A   按字母顺序排列的有序列表，大写。（A、B、C、D）
    i   罗马字母，小写。（i, ii, iii, iv）
    I   罗马字母，大写。（I, II, III, IV）
2.表格标签：
        一对table标签就是一个表格
        一对tr标签就是表格中的一行
        一对td标签就是一行中的一个单元格
        注意点：tr和th搭配用来构建表头，字体为居中的粗体。
        tr和td搭配用来构建表体，字体为左对齐的普通文本。
    宽高属性设置：
        table 表格的宽高
        tr、th、td 单元格的宽高
        （都属于块级元素，宽度默认100%，高度由内容撑起）
    水平、垂直对齐：
        水平方向    algin table（表格），tr、td（单元格内容对齐）
        align: left center right
        垂直方向    valgin tr、td（单元格内容对齐）
        valign: top mid bottom
    外边距和内边距（在元素中为margin、padding）：
        cellspacing外边距就是单元格和单元格之间的距离, 默认情况下边距的距离是2px
        cellpadding内边距就是单元格的边框和文字之间的间隙, 默认情况下内边距是1
    表格的完整结构：
        表头thead、th，主体tbody、td，附加tfoot
        caption: 指定表格的标题
        thead: 指定表格的表头信息
        tbody: 指定表格的主体信息
        tfoot: 指定表格的附加信息
    单元格合并：
        水平方向上 合并列 colspan
        垂直方向上 合并行 rowspan
3.form表单
    <form action="提交的服务器接口地址">
        <表单元素>
    </form>
    明文输入框：
        <input type="text" name="account" placeholder="请输入用户名">
        name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构
        placeholder:提示
    暗文输入框：
        <input type="password" name="password" placeholder="请输入密码">
    单选框： 
        <input type="radio" name="xx" value="xxx" checked>
        注意点:
        1.互斥：
        必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。
        2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。
        3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。
    多选框：
        <input type="checkbox" name="xxx" value="xxx" checked>
        多选框默认选中 checked
    提交按钮：
        将表单中已经填写好的数据, 提交到远程服务器
        <input type="submit">
        必须具备两个条件：
        1.需要给form表单添加一个action的属性, 通过这个属性指定需要提交到的服务器地址
        2.需要给提交到服务器的表单元素添加一个name属性
    普通按钮：
        <input type="button" value="xxx">
        可以通过value属性来给按钮指定标题
        作用: 配合JS完成一些操作
    图片按钮： 
        <input type="image" src="">
    重置按钮 
        <input type="reset" value="xx">
        作用: 用于清空表单中已经填写好的数据
    隐藏域： 
        <input type="hidden" name="xx" value="xxx">
        隐藏域
        作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器
label标签:
    默认情况下文字和输入框是没有关联关系的
    绑定的格式:
        1.将文字利用label标签包裹起来
        2.给输入框添加一个id属性
        3.在label标签中通过for属性和输入框中的id进行绑定即可
        <label for="account">
          账号:
        </label>
        <input type="text" id="account">
select标签:
  作用: 用于定义下拉列表
        格式:
        <select>
            <optgroup label="分组名称">
                <option>列表数据</option>
            </optgroup>
        </select>
textarea标签:
  作用: 定义一个多行输入框
        格式:
        <textarea>
        </textarea>
4.HTML5新增表单元素
    邮箱: <input type="email">
    可以自动校验输入的内容是否符合邮箱的格式

    域名: <input type="url">
    可以自动校验输入的内容是否是URL地址

    数字: <input type="number">
    输入框中只能输入数字

    时间: <input type="date">
    可以通过日历来选择时间

    颜色: <input type="color">
    可以通过取色板来选择颜色