Html编码问题、列表li ul、表格table、表单form使用实例讲解

时间:2018-09-18
本文章向大家介绍Html编码问题、列表li ul、表格table、表单form使用实例讲解，需要的朋友可以参考一下

1、解决HTML中的编码问题

<html>
    <head>
        <title>HelloHtml</title>
        <!--告知浏览器用UTF-8编码打开-->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        
        <marquee>hello java</marquee>
        
    </body>
</html>

2、列表的使用

<html>
    <head>
        <title>列表标记</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--有序列表：ol；
            属性：
                type：默认值是1，可选值：AaIi
                start:开始的序号
        -->
        <ol type="1" start="10">
            <li>星期日</li>
            <li>星期一</li>
            <li>星期二</li>
        </ol>
        <hr/>
        <!--无序列表：ul
            属性：
                type：默认值是disc，可选值：circle  square 
        -->
        <ul type="square">
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <!--自定义列表
        dt:定义标题
        dd：定义内容
        -->
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
        <hr/>
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
        <hr/>
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
    </body>
</html>

3、HTML中的表格标记

<html>
    <head>
        <title>表格标记</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--
        tr:表示表中的行
        td:表示行中的列。内容要在td中
            colspan:当前列占用的几列的宽度
            rowspan：当前列占用的行数
        th:表示行中的列。内容会被自动居中和加粗。作为表头使用
        cellspacing:单元格之间的距离。取值是像素值.  外补丁
        cellpadding：单元格中的内容和边线的距离。取值是像素值 内补丁
        -->
        <table border="1" width="60%" align="center">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
             <tr>
                <td>张三</td>
                <td>男</td>
                <td>山东</td>
             </tr>
             <tr>
                <td>&nbsp;李四</td>
                <td>女</td>
                <td>山东</td>
             </tr>
        </table>
        <hr/>
        <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
             <tr>
                <td>张三</td>
                <td>男</td>
                <td>山东</td>
             </tr>
             <tr>
                <td>李四</td>
                <td>女</td>
                <td>山东</td>
             </tr>
        </table>
        <hr/>
        <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
            <tr>
                <td align="center" colspan="3">
                学员信息列表
                </td>
            </tr>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
             <tr>
                <td>张三</td>
                <td>男</td>
                <td>山东</td>
             </tr>
             <tr>
                <td>李四</td>
                <td>女</td>
                <td>山东</td>
             </tr>
        </table>
        <hr/>
        <table align="center" border="1" width="60%" cellspacing="0" cellpadding="5">
            <caption>表格的标题</caption>
            <tr>
                <th>年度</th>
                <th>班级</th>
            </tr>

            <tr>
                <td rowspan="3">2014</td>
                <td>JavaEE12</td>
            </tr>
            <tr>
                <td>JavaEE13</td>
            </tr>
            <tr>
                <td>JavaEE14</td>
            </tr>
            <tr>
                <td rowspan="3">2015</td>
                <td>JavaEE15</td>
            </tr>
            <tr>
                <td>JavaEE16</td>
            </tr>
            <tr>
                <td>JavaEE17</td>
            </tr>
        </table>
    </body>
</html>

4、表单标记

<html>
    <head>
        <title>表单标记</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--表单有关的标记放在form中
        form：代表一个表单
            属性：
                action:是一个地址，接收数据的地址
                method:默认值是get。建议使用post
                
            重点：get和post的区别（暂时记住）
                get：(默认值)01html.html?username=abc&password=123
                    保密性查，容易被旁边的人看到，不安全。
                    长度有限制：<1kb
                post：建议使用的
                    保密性好。长度没有限制
                    
                    username=abc&password=123
                    
                
        input:输入标记
            属性：
            type:输入域的类型。text(默认值)|password(暗文)
                |radio(单选)|checkbox(复选)|file(上传)
                |reset（重置）|submit（提交）|button（按钮，结合js使用）
                |image(指定src用图片代替按钮)
                |hidden隐藏域，向服务器传递信息
                
            name：给该输入域取一个名字。
            maxlength:限制输入的内容的最大长度
        select:下拉选择
        textarea:文本区域
        
        -->
        <form action="01html.html" method="get">
            <input type="hidden" name="id" value="123"/>
            用户名：<input type="text" name="username" value="" maxlength="5"/><br/>
            密码：<input type="password" name="password"/><br/>
            性别：<input id="g1" type="radio" name="gender" value="1" checked="checked"/>
                    <label for="g1">男</label>
                   <input id="g2" type="radio" name="gender" value="0"/>
                    <label for="g2">女</label>
                   <br/>
            爱好：<input type="checkbox" name="hobby" value="吃饭"/>吃饭
                    <input type="checkbox" name="hobby" value="睡觉"/>睡觉
                    <input type="checkbox" name="hobby" value="学java"/>学java<br/>
            籍贯：<select name="province">
                        <option value="BJ">北京</option>
                        <option value="SD" selected="selected">山东</option>
                        <option value="HB">湖北</option>
                    </select><br/>
            靓照：<input type="file" name="photo"/><br/>
            简介：<textarea name="discription" rows="3" cols="38"></textarea><br/>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
            <input type="button" value="按钮"/>
            <input type="image" src="images/reg.jpg"/>
        </form>
    </body>
</html>
随机文章
WEB前端知识点必读
最近更新