前端(HTML+CSS+JS)

这篇博客主要介绍了前端开发的基础知识,包括表格和表单的HTML标签,如table、tr、td等,以及CSS的选择器和基础语法。在表单部分详细讲解了form的提交数据机制和各类型的input标签,还给出了一个简单的表单实例。在CSS部分,提到了CSS文件的创建和应用,以及盒子模型的概念。此外,还提及了JS的基本特点和优势,例如良好的交互性和跨平台性。
摘要由CSDN通过智能技术生成

表格标签

向网页中加入表格

2,总结

table 标签用来表示表格
tr 标签表示表里的一行
td 标签表示行里的列
border 设置边框
cellspacing 设置单元格的间距
bgcolor 设置背景色
width 设置宽度
height 设置高度
colspan 合并列
rowspan 合并行

表单标签:

用来提交数据,本质上就是在一个表格标签的外面用form包起来

总结:

form标签用来提交表单里的数据
table标签用来实现表格
tr标签用来表示表格里的行
td标签表示行里的列
img标签表示插入图片
select标签表示下拉框,option是下拉选项
textarea标签是文本域
input表示输入框,类型很丰富
text类型是普通的文本输入框
password是密码输入框
email是邮箱的输入框
file是上传文件
radio是单选框
checkbox是多选框
button是普通的按钮
submit是提交按钮,比button多了数据提交的功能
align属性用来设置元素的位置center是居中
bordercolor设置边框的颜色

3,form提交数据

提交按钮必须submit类型,不然不会提交数据的
–2,哪些数据需要提交的话,必须在网页上配置name属性
–3,提交的数据都在地址栏中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314 ,其中username是页面中name属性的值,1314是网页中输入的数据
http://127.0.0.1:8848/cgb2105/html4.html? username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&head=&code=brpn

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 表单标签</title>
    </head>
    <body>
        <!-- 默认会把数据在地址栏中拼接,,,,,GET方式提交数据 
            http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2
            GET方式提交数据:好处是展示的效果明确,坏处是不安全,地址栏太长
            POST方式提交数据:好处是安全对数据的大小没上线,坏处是看不见数据
        -->

        <form method="post" action="http://www.baidu.com">
            <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
                <tr>
                    <td colspan="2">
                        <h1 align="center">注册表单</h1>
                    </td>
                </tr>
                <tr>
                    <td>用户名:</td>
                    <td>
                        <input type="text" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pwd"/>
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td>
                        <input type="password" name="repwd" />
                    </td>
                </tr>
                <tr>
                    <td>昵称:</td>
                    <td>
                        <input type="text"  name="nick"/>
                    </td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td>
                        <input type="email" name="mail" />
                    </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <!-- radio是单选,拥有相同的name

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值