当前位置： 移动技术网 > IT编程>网页制作>CSS > Html学习一

Html学习一

2018年09月18日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网