郑州前端实训1-2代码笔记

1、无序列表 （ul li)

    <!-- 无序列表 支持三层结构-->   <!-- ul里嵌套其他的标签 不允许--ul>li li里可以嵌套其他的标签-->

2、有序列表  (ol li)

    <!-- 有序列表 start属性值是数字-->

3、自定义列表 （dl dt、dd)

     <!-- 自定义列表 dt:自定义组 dd:自定义描述项-->

    <dl>

        <!-- dt和dd是并列关系 -->

        <dt>关注我们</dt>

        <dd>微信公众号关注</dd>

4、表格

     1.td:是单元格 

     2.tr里只能嵌套td,td是个容器可以嵌套其他元素

     3、<!-- cellspacing:是单元格与单元格之间的距离 默认值是2

        cellpadding:是单元格内容与单元格边框之间的空白的间距 默认值是1

        <table border="1" cellspacing="0" cellpadding="10" width="400" height="300" align="center">

     4、<table border="1" cellspacing="0" width="600">

        <!-- 嵌套在table里的 -->

        <caption>成绩汇总表</caption>

        <!-- 表头 -->  表头写在表格里面

        <thead>

            <tr>

                <!-- th:字体加粗,字体显示居中 -->

                <th>班级</th>

                <th>姓名</th>

            </tr>

        </thead>

        <!-- 表体 -->

        <tbody>

            <tr>

                <td>一班</td>

                <td>张三</td>

            </tr>

        </tbody>

        <!-- 表尾 -->

        <tfoot>

            <tr>

                <td>班级</td>

                <td>学生</td>

            </tr>

        </tfoot>

        </table>

     5、1. thead、tfoot里的单元格不可以与tbody单元格进行合并 

         2.合并行rowspan以上为准,删除下边

         3.合并列colspan以左为准,删除右边

     6、 /* 边框折叠 */  border-collapse: collapse;

5、表单

    <!-- form:表单域 -->

    <form action="" method="post">

        <!-- 单行文本输入框 text -->

        <!-- for:找聚焦点 -->

        <label for="username">用户名:</label><input type="text" id="username" name="uname"><br>

        <!-- 密码输入框 -->

        <label for="pwd">密&emsp;码:</label><input type="password" id="pwd" name="pwd"><br>

        <!-- 单选按钮 -->

        <!-- name:名字一样才可以成为单选按钮  value:是传递数据的真正的值-->

        <input type="radio" name="sex" id="" value="1" checked>男

        <input type="radio" name="sex" id="" value="2">女<br>

        <!-- 多选按钮 value没有设置 checked属性默认选中的状态-->

        <input type="checkbox" name="hobby" id="" checked value="sleep">睡觉

        <input type="checkbox" name="hobby" id="" value="study">学习

        <input type="checkbox" name="hobby" id="" value="sport">运动

        <input type="checkbox" name="hobby" id="" value="listenMusic">听音乐<br>

        <!-- 文本域 -->

        <!-- 中文滚动条不出现时:6   滚动条出现时:5 -->

        <!-- 英文滚动条不出现时:11   滚动条出现时:10 

            cols:半角字符数 如果滚动条不出现因为占用了滚动条的位置所以字符会超出设置的值-->

        <!-- maxlength:最大的字符数 不管是中文还是英文都是限定的字符数-->

        <!-- disabled:禁用文本区域 -->

        <textarea rows="5" cols="10" maxlength="4" name="comment"></textarea><br>

        <!-- 下拉列表框 multiple多项选择-->

        <select name="province" id="">

            <option value="01">北京</option>

            <option value="02" disabled>上海</option>

            <option value="03" selected>河南</option>

            <option value="04">河北</option>             

        </select><br>

        <select>

            <optgroup label="河南省">

            <option value="zhengzhou">郑州</option>

            <option value="jiaozuo">焦作</option>

            </optgroup>

            <optgroup label="河北省">

            <option value="shijiazhuang">石家庄</option>

            <option value="handan">邯郸</option>

            </optgroup>

        </select><br>

        <!-- 如果只写type属性的submit,是会有默认的提交字样 -->

        <input type="submit" value="注册">

        <input type="reset">

    </form>