文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML怎么开发单选题页面

2024-04-02 19:55

关注

这篇文章主要讲解了“HTML怎么开发单选题页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML怎么开发单选题页面”吧!

  表格

  table标签(表格)、

  tr标签(行)、

  td标签(标准单元格)、

  caption标签(标题)、

  th标签(表头单元格)。

  为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。

  这三个标签把表格分为三部分:表头、表身、表脚。

  table 表格

  caption 标题

  thead 表头(语义划分)

  tbody 表身(语义划分)

  tfoot 表尾(语义划分)

  tr 行

  th 表头单元格

  td 表格单元格

  姓名语文英语数学

  小明808080小红909090小杰100100100平均909090

  表格样式美化

  table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

  }

  th, td {

  padding: 6px;

  color: blue;

  }

  给表格添加边框,设置字体颜色,

  以及给单元格设置一些padding

  表单

  表单就是收集用户信息的,就是让用户填写的、选择的。

  所有的表单内容,都要写在form标签里面

  form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

  1.文本框

  2.密码框

  3.单选按钮男 女

  input的type的值如果是radio就是单选按钮。

  需要注意的是必须要有相同的name属性,单选按钮才能互斥。

  label标签

  男

  女

  input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框

  5.4.复选框 睡觉

  吃饭

  复选框,最好也是有相同的name(便于服务器端收集用户选中的信息)。

  5.下拉列表

  吃饭

  睡觉

  打豆豆

  select就是“选择”,

  select标签和ul、ol、dl一样,都是组标签

  option“选项”。

  6.文本域

  cols属性表示columns“列”,

  rows属性表示rows“行”。

  值就是数字,表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字,一般不需要写字。

  7.按钮

  普通按钮

  button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

  提交按钮

  submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击,表单会提交到服务器。

  重置按钮

  reset就是“复位”“重置”的意思,可以重置前面各个表单元素中填写的值。

  只读和禁用

  项目实战

  制作商品搜索表单

  search-form.css.search{

  height: 40px;

  width: 420px;

  margin: 0 auto;

  margin-top: 60px;

  }

  .search .input{

  border: 3px solid red;

  width: 300px;

  height: 36px;

  font-size: 20px;

  }

  .search .btn{

  height: 44px;

  width: 100px;

  border:0;

  background-color: red;

  color: white;

  font-size: 18px;

  font-weight: bold;

  margin-left: -4px;

  vertical-align: top;

  letter-spacing: 6px;

  }

  youlu-search-form.html

  Document

感谢各位的阅读,以上就是“HTML怎么开发单选题页面”的内容了,经过本文的学习后,相信大家对HTML怎么开发单选题页面这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯