html+css学习第五天（页内跳转、表单）

一、页内跳转

        把a标签的href属性设置为#XXX时，点击这个a标签里面立刻就会跳转到id值为XXX的元素位置。

eg：点击第1/2/3块时，会跳转到相应的div盒子处。

    <ul>

        <li><a href="#box1">第1块</a></li>

        <li><a href="#box2">第2块</a></li>

        <li><a href="#box3">第3块</a></li>

    </ul>

    <div id="box1" class="box">第一块</div>

    <div id="box2" class="box">第二块</div>

    <div id="box3" class="box">第三块</div>

二、表单form

1.表单标签：<form action="#"></form>

                action：当表单提交的时候，将数据发往何处。

2.input：定义输入框，按钮等，单标签。

                    type：定义input的类型(值不同对应的input的功能或样式都会发生改变。)

                        值：

                            text：定义文本输入框。

                            password：定义密码输入框。

                            button：定义可点击的按钮。

                            submit：提交按钮，会把表单内的数据提交给服务器。

                            reset：重置按钮，清除表单内所有的数据。

                            file：文件选择按钮，供文件上传。

                                        accept：规定了文件上传的类型，text/*

                            image：定义图片形式的提交按钮，必须把src属性和image结合使用。

                            checkbox：定义复选框。

                            radio：定义单选框。

                    value：定义input的初始值。

                    required：输入内容是必须的，不能为空。

                    readonly：定义input为只读模式。

                    disabled：禁用input元素。

                    placeholder：定义文本输入框的提示音。

                    name：定义文本输入框的名字，唯一。

                    maxlength：最多可以输入多少字符。

                    size：定义文本框的宽度。

3.label：给input添加的标注。

                    for：为了让input和label进行绑定。

                    for的值要跟input的值相同，当点击label时，可以让input自动获得输入焦点。

4.多行文本输入框：

                    textarea：定义多行文本输入框。

                    name：规定文本区的名称。

                    cols：number，规定文本区内的可见宽度。

                    rows：number，规定文本区内的可见行度。

                    required：输入内容是必须的，不能为空。

                    readonly：定义input为只读模式。

                    disabled：禁用input元素。

                    maxlength：最多可以输入多少字符。

5.多选框

checkbox：定义复选框。

eg：

        <label for="checkbox">复选框1</label>

        <input type="checkbox" id="checkbox1">

        <label for="checkbox">复选框2</label>

        <input type="checkbox" id="checkbox2">

6.单选框

radio：定义单选框。

eg：

        你喜欢吃什么水果？

        <input type="radio" name="fruit1" id="fruit" value="苹果">

        <label for="fruit1">苹果</label>

        <input type="radio" name="fruit1" id="fruit" value="香蕉">

        <label for="fruit1">香蕉</label>

注意：相同选择里  label  的 for 的值一定要相同，否则会变成多选。

7.分组

fieldset：将表单内容进行分组，会产生一个边框(默认为2px边框，内边距(10px

            ,12px)，左右外边距2px)；

            legend：legend是fieldset元素定义的标题(默认在分组边框的上边框内，可以左右移动位置)；

8.分组下拉菜单：

            select：定义下拉菜单。

            optgroup：定义选项组。

            option：定义列表中的一个选项内容。

eg：

<select name="" id="">

            <optgroup label="上午">

                <option value="1">上课1</option>

                <option value="2">上课2</option>

                <option value="3">上课3</option>

            </optgroup>

            <optgroup label="下午">

                <option value="1">上课1</option>

                <option value="2">上课2</option>

                <option value="3">上课3</option>

            </optgroup>

        </select>