HTML(12)认识CSS

2020-10-23

HTML和CSS什么关系

  • 如果把HTML比做一个人但话,标签和结构只不过是完成了一个人的基本结构
  • CSS层叠样式表,就相当于给人穿上衣服
  • 使用方法在标签上加上style属性

    代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 注意事项:
        1.form表单必须有action属性,表示提交地址
        2.所有需要提交的数据,input标签必须有name属性
        3.input按钮的文字,使用value属性表示
        4.input必须放在form标签内才能提交 -->
    <!-- input标签常见类型总结:
        1.文本输入框type=text
        2.密码输入框type=password
        3.单选框type=radio
        4.复选框type=checkbox
        5.普通按钮type=button
        6.提交按钮type=submit
        7.重置按钮type=reset
        8.文件选择框type=file -->
    <!-- input标签输入框和按钮 -->
    <!-- action请求的地址 -->
    <form action="http://www.baidu.com">
        <table align="center" margin-top="400px" width="500px" height="450px" border="1px" cellspacing="0" style="background-color: chartreuse;">
            <tr>
                <!-- 比如我们想给字体加一个颜色 -->
                <td align="center" style="color:red;">
                    <!-- name属性设置提交过去的名字,用于绑定信息 -->
                    用户名:<input type="text" name="loginName" style="background-color: blue;">
                    <br>
                    <br>
                    密码:&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="loginPassword" style="background-color: blue;">
                    <br>
                    <br>
                    <!-- 比如我们想更改按钮的宽度 -->
                    <input type="submit" value="提交" style="width: 50px; height: 25px; color: green; background-color: pink;">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" style="width: 50px; height: 25px; color: green; background-color: pink;">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

效果图

image.png


标题:HTML(12)认识CSS
作者:张范
地址:http://misterzhang.top/articles/2020/10/23/1603422764956.html