【HTML学习笔记02】表格基本语法、合并单元格、列表、表单、input、、label、select、textarea

最新推荐文章于 2023-08-13 16:42:36 发布
最新推荐文章于 2023-08-13 16:42:36 发布
阅读量223 收藏
点赞数
分类专栏： HTML学习 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46503569/article/details/115803416
版权

1.表格基本语法

    <table>
        <tr><td>姓名</td>  <td>性别</td> <td> 年龄 </td></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>

2.表头单元格标签

    <!-- 这些属性要写到表格标签table 里面去 -->
    <!-- cellpadding文字和边框的距离 cellspacing单元格之间的距离 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>

3.合并单元格

 <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <!-- 跨列合并 :目标单元格为左上的那个-->
            <td colspan="2"></td>
           <!-- 进行合并操作，必须删除多余单元格 -->
           <!-- <td></td> -->
        </tr>
        <tr>
            <!-- 跨行合并 -->
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
        </tr>
    </table>

4.无序列表

    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>

5.有序列表

    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1</li>
    </ol>

6.自定义列表

    <dl>
        <!-- 一个dt对应多个dd -->
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>

        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

7.input 表单元素

   <form action="xxx.php" method="get" name="表单域名称">
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        密码: <input type="password" name="pwd" >  <br> 

        性别: 男 <input type="radio" name="sex" value="男"> 
            女  <input type="radio" name="sex" value="女" checked="checked"> 
       
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 
            睡觉 <input type="checkbox" name="hobby">  
            打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
  
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <input type="button" value="获取短信验证码"> <br>
        上传头像:  <input type="file" >
    </form>

8.label标签绑定id

<body>

   <label for="username"> 用户名:</label> <input type="text" id="username" >

   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>

   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>
</body>

9.select下拉表单

<body>
    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <!-- selected设置默认选择 -->
        <option selected="selected">火星</option>
    </select>
</form>
</body>

10.textarea 文本域

<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="5">这个反馈留言是textarea来做的 </textarea>
    </form>
</body>

11.综合案例:注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-注册页面</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>学历:</td>
             <td><input type="text" value="博士后"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的 
                <input type="checkbox" name="love" > 可爱的 
                <input type="checkbox" name="love" > 小鲜肉 
                <input type="checkbox" name="love" > 老腊肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜欢 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册" >
            </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <input type="checkbox"  checked="checked">    我同意注册条款和会员加入标准
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <a href="#" > 我是会员，立即登录</a>
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                    <!-- <dl>
                        <dt>我承诺</dt>
                        <dd>年满18岁、单身</dd>
                        <dd>抱着严肃的态度</dd>
                        <dd>真诚寻找另一半</dd>
                    </dl> -->
                </td>
        </tr>
           
    </table>
</body>
</html>
Pump09
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Owl 学习笔记之六--表单输入绑定 我们经常需要能够从 html input（或 textarea, or select）中
05-07
Owl 学习笔记之六--表单输入绑定 我们经常需要能够从 html input（或 textarea, or select）中读取值是很常见的（注意：它不需要在表单中！）。一种可能的方法是手动完成，如下： class Form extends owl.Component { state = useState({ text: "" }); _updateInputValue(event) { this.state.text = event.target.value; } } ```xml <div> <input t-on-input="_updateInputValue" /> <span t-esc="state.text" /> </div> ``` 这行得通。但是，这需要一些管道代码。此外，如果您需要与复选框、单选按钮或选择标签进行交互，则管道代码略有不同。 为了帮助解决这种情况，Owl 有一个内置指令t-model：它的值应该是组件中的观察值（通常是state.someValue）。使用该t-model指令，我们可以编写更短的代码，相当于前
Vue学习笔记之表单输入控件绑定
12-11
表单输入绑定 基础用法 文本 <input v-model:"msg" placeholder="edit me"/> ### 多行文本 <textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea> ### 复选框 爱好 <...
HTML基础2：其他标签（表格、列表、表单标签）
m0_51405559的博客
01-11 841
文章目录一、表格标签1.基本使用2.合并单元格二、列表标签三、表单标签1.from标签2.input标签3.label标签4.select标签5.textarea标签四、无语义标签：div&span五、Emmet快捷键六、HTML特殊字符 一、表格标签 1.基本使用 table标签：表示一个表格 tr：表示表格的一行 td：表示一个单元格 th：表示表头单元格，会居中加粗 thread：表格的头部区域（注意和th区分，范围是比th要大的） tbody：表格得到主体区域 table包含tr，..
前端form post方式 访问webapi 导出Aspose excel，以及单元格合并 Cells.Merge
钢ge的博客
02-20 364
前端 post 表单方式 function export_Interact() { var url = "https://XXXXXXX:8083/sjjmeet/api/SignPerson/ExportListInteract?Token=123"; var form = $("<form>");//定义一个form表单 form....
【jquery实现动态给表格添加删除行，合并指定单元格】
最新发布
weixin_42589681的博客
08-13 584
jquery+jsp实现动态给表格添加删除行，合并指定单元格的代码示例
HTML5基础
m0_60237095的博客
03-14 2200
1.HTML HTML是超文本标记语言 单标签，双标签 UTF-8字符集 标签 1.标题h标签 2.段落p标签 3.水平线标签hr 4.换行标签br 5. div和span标签(重点) div标签 用来布局的，但是现在一行只能放一个div span标签 用来布局的，一行上可以放好多个span 6.空格符号 **&nbsp;** 总结 .
HTML复习总结（27th）
山雀的博客
10-20 2550
HTML复习知识汇总，HTML基本标签，HTML5新增标签
零基础HTML入门教程(15)——合并单元格
weixin_61808806的博客
12-06 1958
我们上小节学习了表格，以及他的基本使用，那我们这一小节学习一下，合并单元格，并熟练使用。合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格） 效果如下 我们可以看到，表格合并了，为什么要学习表格合并那，因为我们再平时做表格的时候合并表格可以是他更容易看清内容使内容清晰，我们熟练掌握合并标签。
表格的属性、表格的合并及表单
m0_67316947的博客
02-26 1849
表单 什么是表单？ 采集用户输入的数据，把数据提交给服务器 表单有什么组成？ 表单是由表单标签、表单域以及表单按钮组成。 表单标签包含处理表单数据所用程序的URL以及数据提交到服务器的方法。 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框等。 表单按钮包括提交按钮、复位按钮和一般按钮； 表单标签 ＜form＞＜/form＞ <form action="" method="get"></form> action表示行为、动作，以及数据提交的路径 mothod
HTML基础
weixin_45746811的博客
10-31 2493
总结的html基础知识，便于复习，原知识源于WEB前端开发精品课。
如何使多个input标签在同一行
qq_47956199的博客
10-08 8807
td中的white-space: nowrap；属性可以使td内的多个input不换行，但是用多个td也可以实现。 td{ white-space: nowrap; } 不用表格可以使用display:inline; input{ display: inline; }
JQuery操作textarea,input,select,checkbox方法
10-23
本文给大家汇总介绍了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的简单实用，都是小编项目中使用过的，这里推荐给大家。
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
12-28
<label for=label-input> <input type=text class= id=label-input> <button>button</button> </label> 在移动平台页面的开发中，为了让表单项的可点区域变大而更好的操作，label可提供相应...
Bootstrap简单表单显示学习笔记
11-28
基本的表单结构时BootStrap自带的，创建基本表单的步骤如下： 1、向父<form>元素添加role = “form”； 2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下； 3、向所有的文本元素...
HTML+CSS学习笔记
CSDNxiaodi的博客
05-09 70
border 设置表格边框cellspacing 设置单元格与单元格边框之间的空白间距cellpadding 设置单元格内容与单元格之间的空白间距width 设置表格的宽度height 设置表格的高度sign 设置表格在网页之间的水平对齐方式 left center right表头单元格一般位于表格的第一行或第一列 文本加粗居中，用th替换td即可设置表头表格结构标签，默认居中，第一行。
element 修改表单值后表单验证无效_vue结合form-create组件生成动态表单
weixin_39609423的博客
11-20 486
最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结...
elementui表格合并列和合并行
瘦瘦瘦大人的博客
11-12 2120
element ui表格合并
关于table排版
weixin_30466421的博客
07-29 865
colspan和rowspan这两个属性用于创建特殊的表格。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数： 在浏览器中将显示如下： 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspa...
html+css表单label 居中textarea ,请给样式
05-18
可以使用以下样式来居中 `<textarea>` 元素，并将 `<label>` 元素与其对齐： ```html label { display: block; text-align: center; } textarea { display: block; margin: 0 auto; } <label for=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值