web_class01

简介: web_class01

table

 <table align="center" border="1px" width="500" cellpadding="100px" cellspacing="2px" bordercolor="pink">
        <caption>CAPTION</caption>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2"></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td>2</td>
                <td></td>
            </tr>
        </tbody>
    </table>
  • caption 表头标题
  • th 表头(加粗效果)
  • align=“center” 表格居中
  • border 表格线粗细
  • bordercolor 表格线颜色
  • width 整个表格宽度
  • cellpadding 单元边沿 与 单元内容之间的空间
  • cellspacing 规定的是单元之间的空间
  • thead, tbody, tfoot 显示顺序不受写的顺序影响
  • colspan 合并列
  • rowspan 合并行


效果展示:

form


标签为 input 元素定义标签(label)。


label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。


标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。


  • type: text 默认,普通文本框
  • type: password 密码框,输入会隐藏
  • type:checkbox 多选框
  • type:radio 单选框
  • select: 下拉菜单
  • type:file 文件上传
  • input type=“image” 等同于 input type=“submit” ,但它是以图片的形式呈现(图片url放在src属性中),而不是文字
  • textarea 多行的文本输入控件。
<form name="test" action="#" method="get">
        <label for="name">偶像练习生:<input id="name" type="text" placeholder="请输入姓名" value="蔡徐坤"></label>
        <br>
        <label for="habit">兴趣:
            <input type="checkbox" name="habit" id="1">唱
            <input type="checkbox" name="habit" id="2">跳
            <input type="checkbox" name="habit" id="3">rap
            <input type="checkbox" name="habit" id="4">篮球</label>
        <br>
        <select name="aiyo" id="">
            <option value="">哎哟</option>
            <option value="">你干嘛</option>
        </select>
        <br>
        <input type="radio" name="sex" id="1">Boy
        <input type="radio" name="sex" id="2">girl
        <br>
        <input type="file" name="file" id="">
        <br>
        <input type="image" src="http://static.yujing.fit/image/鞠婧祎/20.jpg" alt="" width="30px">
        <br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

效果展示:

相关文章
|
9月前
|
小程序 安全 JavaScript
web-view是什么
web-view是什么
|
缓存 JavaScript 前端开发
Webpack 项目中 html-webpack-plugin 和 public 目录的关系
这几天一直在研究 Webpack 这些打包工具链,在研究项目启动的过程中,初步认识到平时开发时是通过 Webpack-dev-server 调用 Webpack 的打包能力结合静态资源服务器能力开发的
|
Web App开发 存储 缓存
Java Web(五)Web
主要是讲解了web服务器tomcat的使用
150 0
|
JavaScript 前端开发 API
秒懂 Web Component
哈喽,大家好,我是海怪。 最近不是写了一篇关于京东微前端框架的文章嘛 《初探 MicroApp,一个极致简洁的微前端框架》,里面提到了一个叫 Web Components 的东西。虽然对它早有耳闻,但是一直也没怎么仔细看过,所以就深入了解了一下,今天给大家做个简单分享 :)
秒懂 Web Component
Our form can use the Web Service now
Our form can use the Web Service now
104 0
Our form can use the Web Service now
|
Java Spring 数据格式
|
Web App开发 JavaScript 前端开发