面试 方法 阿里云 typora textview pmp视频 git视频教程 mysql错误代码1064 js获取body的高度 配置tomcat环境变量 bootstrap居中对齐 nfc卡片 python支持中文 java新特性 java时间戳转换成时间 java数组扩容 java中tostring java类的继承 java中基本数据类型 java怎么写接口 javac linuxsudo命令 网络电视软件下载 java疯狂讲义 ad19 免费书籍 微信骰子表情包 联想小新键盘灯怎么开 pr加速视频 谷歌浏览器访问助手 dnf传说 复仇之矛天赋 cad多段线线宽设置 财务报表软件免费版 ps测量长度 pr时间轴不见了 打印机怎么换色带 pylint word怎么 小程序开发者工具
当前位置: 首页 > 学习教程  > 编程语言

day3-李大人part1

2020/12/5 10:46:38 文章标签:

day3 文章目录day3一列表11:无序列表ul12:有序列表ol13:自定义列表dl二表单21:表单标签(表单集)form22:文本输入框:23:密码输入框:24:提交按钮:25…

day3

文章目录

  • day3
      • 一·列表
          • 1·1:无序列表ul
          • 1·2:有序列表ol
          • 1·3:自定义列表dl
      • 二·表单
          • 2·1:表单标签(表单集)form
          • 2·2:文本输入框:
          • 2·3:密码输入框:
          • 2·4:提交按钮:
          • 2·5:重置按钮:
          • 2·6:单选按钮:
          • 2·7:多选按钮:
          • 2·8:下拉菜单:
      • 三·表格标签
          • 3·1:table标签:整个表格
          • 3·2:tr标签:行
          • 3·3:td标签:列
      • 四·快捷键
          • 3·3:td标签:列
      • 四·快捷键

一·列表

1·1:无序列表ul
  • 标签:ul,li

  • ul标签的属性:

    —type属性:无序列表的图标(disc:实心圆/ circle:空心圆/ square:方块)

  • 标签的快速生成:ul>li*次数{li标签里的文字$}

  • li标签可以嵌套自己

  • 应用场景:网站的导航/新闻列表/商品列表

1·2:有序列表ol
  • 标签ol,li

  • ol标签两个属性

    —type:有序列表的类型A/a/1/i/I

    —start:开始的初始值(无论何种类型的有序列表,初始值只能是数字)

1·3:自定义列表dl
  • 标签dl,dt(图片或者被定义的内容),dd(文字或者对于被定义的内容的一种描述)

  • dt标签需要嵌套img标签才能放置一个图片

    —相比于直接一个img标签,使用dt标签会有一个自带的默认距离


二·表单

1·所有的表单标签一般写在form标签里
2·表单的应用场景主要是信息收集/用户交互入口

2·1:表单标签(表单集)form
  • action属性:向服务器提交表单的地址(一般由后端提供)

  • method属性:提交的方式

    -get:1·安全系数不高/ 2·用来获取数据/ 3·get传输的数据量小

    -post:1·保密性高/ 2·用来发送数据/ 3postt传输的数据量不受限制(理论)

2·2:文本输入框:
<input type="text" placeholder="提示信息" value="默认值" name="提交的文本数据显示在地址栏中">
2·3:密码输入框:
<input type="password" placeholder="提示信息" name="提交的密码数据显示在地址栏中">
2·4:提交按钮:

主要结合form标签里的method和action属性使用

<input type="submit" value="按钮文本">
2·5:重置按钮:

但是不会清空默认的值(value的值)
类似于按钮

 <input type="reset" value="按钮文本" >
    
  <!--单纯没有任何功能的按钮-->
  <input type="button">
2·6:单选按钮:

通过name属性来确定分组,name属性相同的为一组,

value属性代表的是被选中的表单项的value值最终提交给服务器

 <input type="radio"  name="gender" value="male"><input type="radio"  name="gender" value="famale">
2·7:多选按钮:
   <input type="checkbox"  name="hobby" value="lanqou">篮球
   <!--checked="checked"表示默认选中-->
   <input type="checkbox"  name="hobbyr" value="zuqou" checked="checked">足球
2·8:下拉菜单:
  <!--1·name属性将下拉菜单分为一组
      2·multiple="multiple"可将其变为多选-->
<select name="stare" multiple="multiple">
       <!--select="select"表示默认选中-->
      <option value="fbb" select="select">范冰冰</option>
      <option value="lbb">李冰冰</option>
</select>

三·表格标签

3·1:table标签:整个表格
  • border属性:边框,属性值为数字

  • width属性/height属性:表格整体的宽高

  • align属性:left/right/center:表格整体在浏览器中的位置

  • valign属性:垂直对齐方式top/bottom/middle

  • cellspacing属性:单元格之间的距离

  • cellpadding属性:单元格和文字之间的距离(会改变单元格的大小)

3·2:tr标签:行
  • width属性/height属性:宽高(可以设置整行的宽高)
  • 行合并属性:rowspan
  • align属性:水平对齐方式,属性值有left/right/center
  • valign属性:垂直对齐方式,属性值有top/bottom/middle
  • 加在tr里的所有属性会作用于该行所在的所有的td标签里
3·3:td标签:列
  • 加在td里的属性,只作用于该单元格
  • 列合并属性:colspan

四·快捷键

ctrl+0:浏览器重置为100%显示

ottom/middle

  • 加在tr里的所有属性会作用于该行所在的所有的td标签里
3·3:td标签:列
  • 加在td里的属性,只作用于该单元格
  • 列合并属性:colspan

四·快捷键

ctrl+0:浏览器重置为100%显示


本文链接: http://www.dtmao.cc/news_show_450322.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?