运用HTML制作简单效果

最新推荐文章于 2024-06-02 21:07:47 发布

阿正Sir

最新推荐文章于 2024-06-02 21:07:47 发布

阅读量348

点赞数

文章标签： html

本文链接：https://blog.csdn.net/YZ6699ZY/article/details/127704521

版权

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

<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>