运用HTML制作简单效果

107 阅读1分钟

一 设置字体大小 , 颜色以及添加图片

<html>
<head></head>
<body>
    <!--设置字体大小及颜色-->
    <font size="32px" color="yellow">静夜思</font>
        <hr/>
        <font size="5px"><b>床前明月光,</b></font><br/>
        <font size="5px"><i>疑是地上霜。</i></font><br/>
        <font size="5px">举头望明月,</font><br/>
        <font size="5px">低头思故乡。</font><br/> 
        <!--添加图片-->
        <img src="1.jpg">
</body>
</html>

二 自定义列表

<html>
<head></head>
<body>
    需要购买的饮料清单:
    <!--自定义列表 dl :实现二级列表-->
    <dl>
        <!--二级列表 dt-->
        <dt>咖啡</dt>
            <dd>美式</dd>
            <dd>拿铁</dd>
            <dd>卡布奇诺</dd><!--二级列表 dt-->
        <dt>咖啡</dt>
            <dd>可乐</dd>
            <dd>雪碧</dd>
            <dd>美年达</dd>
    </dl></body>
</html>

三 文本框 文本域 单选按钮及按钮

3.1 按钮必须放在表单内部才能实现功能

<html>
<head></head>
<body><h2>用户登录</h2>
    <form> <!--表单-->
        用户名:<input type="text"/><br/>
        密码:<input type="password"/><br/>
        <input type="button" value="登录"/>
        <input type="reset" value="重置"/>
    </form>
    
</body>
</html>
<html>
    <head> </head>
    <body>
        
        <form> <!--表单-->
            业主姓名:<input type="text"/><br/>
            业主电话:<input type="text"/><br/>
            <!--单选按钮--> <!--checked 为默认选项,默认值为true可以省略-->
            性别:<input type="radio" name="sex" checked /><input type="radio" name="sex" /><br/>
            身份证号:<input type="text" /><br/>
            备注信息:
                <textarea role="20" rows="20"><!--文本域--></textarea><br/>
            <input type="button" value="确认修改"/>
        </form></body>
</html>

四 表格 table , 行 tr , 表头 th , 单元格 th

4.1 设置表格样式: border = " "

<html>
<head></head>
<body>
    <!--表格 table-->
    <table border="1" cellspacing="0" cellpadding="10"><!--行 tr-->
        <tr>
            <!--表头 th-->
            <th>姓名</th>
            <th>分数</th>
        </tr><!--行 tr-->
        <tr>
            <!--单元格 th-->
            <td>张三</td>
            <td>100</td>
        </tr><!--行 tr-->
        <tr>
            <!--单元格 th-->
            <td>李四</td>
            <td>95</td>
        </tr><!--行 tr-->
        <tr>
            <!--单元格 th-->
            <td>王五</td>
            <td>90</td>
        </tr>
    </table></body>
</html>

4.2 在表格内设置样式

<html>
<head></head>
<body><table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th><input type="checkbox" name="useer" /></th>
            <th>
                <font color="red">业主姓名</font>
            </th>
            <th>性别</th>
            <th>联系方式</th>
            <th>身份证号</th>
            <th>房屋编号</th>
        </tr><tr>
            <td> <input type="checkbox" name="useer" /></td>
            <td>yx7845</td>
            <td><i></i></td>
            <td><b>15278762321</b></td>
            <td>333876494736289984</td>
            <td>602</td>
        </tr><tr>
            <td> <input type="checkbox" name="useer" /></td>
            <td>yx5411</td>
            <td><i></i></td>
            <td><b>13476762398</b></td>
            <td>443876494736099945</td>
            <td>402</td>
        </tr><tr>
            <td> <input type="checkbox" name="useer" /></td>
            <td>mary</td>
            <td><i></i></td>
            <td><b>13476762398</b></td>
            <td>443876494736099945</td>
            <td>401</td>
        </tr></table></body>
</html>