Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第三天
Blogger Information
Blog 39
fans 0
comment 0
visits 34597
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第三天
美丽城堡
Original
677 people have browsed it

一、

1、无序列表 :       <ul> <li>

2、有序列表:        <ol> <li>

3、自定义列表:    <dl><dt><dd>


二、    区块

    1、    div : 负责结构 ，块级元素

    2、    span ：负责内容， 内联元素，行内元素

    3、    div 和 span 有时也叫做钩子元素

<!-- 小粟子-->
<!doctype html>
<html lang="ch">
<head>

</head>
<body>
<!--    电影播放列表-->
    <h3 align="center">
        &sect;one&sect;
    </h3>
    <ul type="none">
        <li>
            <img src="a.png" height="50">
            <em>《乘风破浪》</em>
            <a href="#">点击播放<img src="b.png" width="30"></a>
        </li>
        <li>
            <img src="a.png" height="50">
            <em>《乘风破浪》</em>
            <a href="#">点击播放<img src="b.png" width="30"></a>
        </li>
        <li>
            <img src="a.png" height="50">
            <em>《乘风破浪》</em>
            <a href="#">点击播放<img src="b.png" width="30"></a>
        </li>
        <li>
            <img src="a.png" height="50">
            <em>《乘风破浪》</em>
            <a href="#">点击播放<img src="b.png" width="30"></a>
        </li>
        <li>
            <img src="a.png" height="50">
            <em>《乘风破浪》</em>
            <a href="#">点击播放<img src="b.png" width="30"></a>
        </li>
    </ul>
    
    <!-- get： 所有的数据全部在url 地址上，不安全，且数量有限
    post: 所有的数据在 header 请求头，安全，且数据很大
    post 提交，可以在 控制台 network 中查看
    -->
    <form action="a.php" method="post">
        姓名：<input type="text" name="name" value=""><br>
        密码：<input type="password" name="pass" value=""><br>
        <!-- 对于单选按钮，name 的值必须全部相同 -->
        性别：<input type="radio" name="sex" value="male">男
             <input type="radio" name="sex" value="female">女
             <input type="radio" name="sex" value="secret" checked>保密
             
             <!-- 复选框的 name 属性值必须是数组 -->
             爱好： <input type="checkbox" name="hobby[]" value="movie">看电影
                   <input type="checkbox" name="hobby[]" value="game" checked">打游戏
                   <input type="checkbox" name=“hobby[]” value="cook"> 做饭       
                   
                   <br/>
              级别： <select name="level">
                          <option value="" seclected="">one</option>
                          <option value="">two</option>
                          <option value="">three</option>
                     </select>
                     
               <br/>
               头像：<input type="file" name="photo" accept="images/*">
               <br/>
               备注： <textarea name="comment" rows="s" cols="40"></textarea>
               
               <br/>
               <input type="submit" name="submit" value="提交">
     </form>
</body>
</html>

又一个小粟子

<!doctype html>
<html lang="en">
<head>

</head>
<body>
    <form action="" methd="post">
        <table border="1" cellspacing="1" cellpadding="8" align="center" 
        width="400" bgcolor="powderblue">
            <caption><h2> 用户注册</h2><caption>
            <tr><td colspan="2"><hr></td></tr>
            <tr align="center">
                
                
                    点击标签,让鼠标自动落到输入框中
                    
                    <td align="left">
                        <label for="email"> 邮箱： </label>
                    </td>
                    <td align="right">
                        <input type="text" id="email" size="30" name="email" placeholder="邮箱">
                    </td> 
              </tr>
              <tr align="center">
                     <td align="left">
                        <label for="pass"> 密码： </label>
                    </td>
                    <td align="right">
                        <input type="password" id="pass" size="30" name="email" placeholder="密码">
                    </td> 
            </tr>
            <tr align="center">
                <td align="right"> 性别:</td>
                <td align="left">
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female">女
                </td>
            </tr>
            <tr align="center">
                     <td align="right">
                        性别：
                    </td>
                    <td align="left">
                        <select name="level">
                            <option value="0">one</option>
                            <option value="1">two</option>
                            <option value="2" welected="">three</option>
                        </select>
                    </td> 
            </tr>
            
            <tr align="center">
                <td align="right">
                    <label for="photo">头像：</label>
                </td>
                <td align="left">
                    <img src="a.png" height="20">
                    <input id="photo" type="file" id="photo" name="photo" accept="ima
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<body>
    用表单控件分组来完成一个登录表单
    <form action="" method="post">
    <fieldset>
        <legend align="center">用户登录</legend>
        <p>
        <label for="email"> 邮箱:</label>
        <input type="text" id="email" name="email">
        </p>
        <p>
         <label for="pass"> 邮箱:</label>
        <input type="password" id="pass" name="pass"
         placeholder="">
        </p>
        <hr width="90%" color="orange">
        <p>   
            <button type="submit"> 立即登录</button>
        </p>
        </fieldset>
    </form>
<body>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post