自学前端（自用）-表单基础

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量61 收藏
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DespairA/article/details/119009333
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML基础</title>
  </head>

  <body>
    <div></div>
    <h1>青春不常在</h1>
    <table width="500" border="1">
      <!--这是第一行-->
      <tr>
        <td>性别：</td>
        <td>
          <!--label可以扩大作用域，使用id属性和label中的for进行桥接-->
          <input type="radio" name="sex" id="nan" /><label for="nan"
            ><img src="#" />男</label
          >
          <input type="radio" name="sex" id="nv" /><label for="nv"
            ><img src="#" />女</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>
          <!--value默认显示文字-->
          <input type="text" value="北京" />
        </td>
      </tr>
      <!--这是第四行-->
      <tr>
        <td>婚姻状况：</td>
        <td>
          <!--在使用单选时，name属性值必须一致才可以达到单选效果-->
          <!--要使得单选框默认选中项可以使用checked="checked"使单选框默认选中-->
          <input type="radio" name="marry" id="yihun" checked="checked" /><label
            for="yihun"
            >已婚</label
          >
          <input type="radio" name="marry" id="weihun" /><label for="weihun"
            >未婚</label
          >
          <input type="radio" name="marry" id="lihun" /><label for="lihun"
            >离婚</label
          >
        </td>
      </tr>
      <!--这是第五行-->
      <!--在属性值为text中，使用value属性可以使文字默认显示-->
      <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" 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>年满十八岁</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找</li>
          </ul>
        </td>
      </tr>
    </table>
  </body>
</html>

渴望看海的少年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML自学自用。有错误欢迎指正
qq_53609446的博客
10-15 62
colspan表示水平垂直，rowspan表示垂直合并。height：表示表格的高度。width：表示表格的宽度。表格 table 表头是th ，行用tr表示，列用td表示。水平线标签 （color width align）换行标签在p段落标签里面进行设置的换行标签。（表格属性）：border表示表格的边框。有序列表 ol开始 li标签。table>tr*2>td{单元格}ul是无序标签 li是标签。可以使用快捷键来快速生成。
HTML-CSS前端大作业一站式教育机构响应式前端网页网站模板
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
06-01 8436
　对于教育机构来说，**建设网站**可以带来更好的宣传效果、塑造品牌价值，而应用网站模板又可以大大减轻建站压力
【Web前端】HTML与HTML5 知识点梳理总结（自用笔记版）
weixin_48728769的博客
10-07 1997
HTML常见标签知识点整合，写网页时查找即可，自用，可转载。
前端学习，html常用知识总结
Flyoungbuhu的博客
09-13 202
html知识点速记，html学习笔记，自用。
Java自学--基础笔记
07-19
学习Java过程记录笔记
广东自学考试本科-复习资料-历年真题 参考广东自学考试本科-复习资料-历年真题 参考广东自学考试本科-复习资料-历年真题 参考广
01-23
广东自学考试本科-复习资料-历年真题 参考广东自学考试本科-复习资料-历年真题 参考广东自学考试本科-复习资料-历年真题 参考广东自学考试广东自学考试本科-复习资料-历年真题 参考广东自学考试本科-复习资料-历年...
前端基础-静态页面练习.zip
07-08
【前端基础-静态页面练习.zip】是一个集合了前端开发基础训练的资源包，主要涵盖了HTML和CSS的基础知识，提供了一系列的实战练习项目，适合初学者或希望巩固前端基础的开发者进行学习和实践。这个压缩包包含多个实际...
javaWeb自学-html基础
03-09
javaWeb自学-html基础
零基础自学办公软件-看这些免费的办公软件教程就够了!.pdf
11-16
零基础自学办公软件-看这些免费的办公软件教程就够了!.pdf
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 154
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 68
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 915
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 58
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 556
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1852
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 724
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 554
CTFWP，ctfshow-web42
前端性能优化--懒加载
weixin_43799793的博客
07-19 186
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
Python自学指南：从基础到高级
本篇Python自学教程详细介绍了Python语言的基础和进阶知识，旨在帮助初学者掌握这门流行的编程语言。教程主要分为以下几个部分： 1. **入门与交互式解释器**： - 学习者首先会被引导如何调用Python解释器，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值