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>

效果展示:

相关文章
|
4月前
|
存储 自然语言处理 前端开发
Web1.0、Web2.0 和 Web3.0 的区别
【7月更文挑战第4天】Web1.0是只读的互联网,内容由网站所有者发布,用户被动接收;Web2.0强调用户生成内容和社交互动,如博客、社交媒体,用户能积极参与;而Web3.0则走向去中心化,基于区块链,强调语义网、数字资产、用户隐私和数据主权,赋予用户更多控制权。从单向传播到深度互动,再到去中心化和智能服务,互联网不断演进。
523 6
|
3月前
webpack——webpackMerge is not a function
webpack——webpackMerge is not a function
42 0
|
小程序 安全 JavaScript
web-view是什么
web-view是什么
|
缓存 JavaScript 前端开发
Webpack 项目中 html-webpack-plugin 和 public 目录的关系
这几天一直在研究 Webpack 这些打包工具链,在研究项目启动的过程中,初步认识到平时开发时是通过 Webpack-dev-server 调用 Webpack 的打包能力结合静态资源服务器能力开发的
|
资源调度 JavaScript 前端开发
webpack中极容易混淆的path、publicPath、contentBase配置
webpack中极容易混淆的path、publicPath、contentBase配置
1448 1
webpack中极容易混淆的path、publicPath、contentBase配置
|
JavaScript 前端开发 API
秒懂 Web Component
哈喽,大家好,我是海怪。 最近不是写了一篇关于京东微前端框架的文章嘛 《初探 MicroApp,一个极致简洁的微前端框架》,里面提到了一个叫 Web Components 的东西。虽然对它早有耳闻,但是一直也没怎么仔细看过,所以就深入了解了一下,今天给大家做个简单分享 :)
秒懂 Web Component
|
Web App开发 前端开发 JavaScript
|
Java Spring 数据格式