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>

效果展示:

相关文章
|
7月前
|
缓存 安全 Java
7:Servlet表单-Java Web
7:Servlet表单-Java Web
70 0
|
5月前
|
存储 自然语言处理 前端开发
Web1.0、Web2.0 和 Web3.0 的区别
【7月更文挑战第4天】Web1.0是只读的互联网,内容由网站所有者发布,用户被动接收;Web2.0强调用户生成内容和社交互动,如博客、社交媒体,用户能积极参与;而Web3.0则走向去中心化,基于区块链,强调语义网、数字资产、用户隐私和数据主权,赋予用户更多控制权。从单向传播到深度互动,再到去中心化和智能服务,互联网不断演进。
620 6
|
4月前
webpack——webpackMerge is not a function
webpack——webpackMerge is not a function
49 0
|
7月前
|
存储 缓存 前端开发
14:Servlet中的页面跳转-Java Web
14:Servlet中的页面跳转-Java Web
206 6
|
小程序 安全 JavaScript
web-view是什么
web-view是什么
|
Java 应用服务中间件 数据处理
Java Web class notes | Java Web
Java Web class notes | Java Web
119 0
Java Web class notes | Java Web
|
Web App开发 存储 缓存
Java Web(五)Web
主要是讲解了web服务器tomcat的使用
177 0
|
Java 数据安全/隐私保护
Java Web(十)Filter和Listener
两个对象Filter和Listener
111 0
|
JavaScript 前端开发 API
秒懂 Web Component
哈喽,大家好,我是海怪。 最近不是写了一篇关于京东微前端框架的文章嘛 《初探 MicroApp,一个极致简洁的微前端框架》,里面提到了一个叫 Web Components 的东西。虽然对它早有耳闻,但是一直也没怎么仔细看过,所以就深入了解了一下,今天给大家做个简单分享 :)
秒懂 Web Component

热门文章

最新文章