栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Web前端开发-html5基础-Day02

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Web前端开发-html5基础-Day02

前言

继续学习如何使用html,一定要多动手敲代码!!!!

内容

列表标签:无序列表、有序列表、定义列表

表格标签:格式、宽高属性、水平对齐、垂直居中、外边距、内边距、细线表格、表格的完整结构

form表单:格式、常见的表单元素

列表标签
无序列表(ul-li)

格式:

  • 需要显示的条目内容

例如:

  
  
  • 苹果
  • 香蕉
  • 榴莲

运行结果(alt+b):

样式:我们可以修改前面圆点的形状(一般情况都会使用css将它隐藏)

    disc 默认值 实心圆 circle 空心圆 square 实心方块

    注意:

    ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现

    有序列表(ol-li)

    格式:

    例如:

      
      
    1. 螺蛳粉
    2. 老友粉
    3. 桂林米粉

    运行结果:

    样式:

      1 默认值。数字有序列表。(1、2、3、4) a 按字母顺序排列的有序列表,小写。(a、b、c、d) A 按字母顺序排列的有序列表,大写。(A、B、C、D) i 罗马字母,小写。(i, ii, iii, iv) I 罗马字母,大写。(I, II, III, IV)

      定义列表(dl-dt-dd)

      格式:

      dt:definition title-定义列表中的标题 dd:definition description, 定义标题对应的描述

      例如:

        
        
      小明
      是初中生
      李明
      是高中生

      运行结果:

      表格标签

      基础知识:

      tr-一行  td-一列或者一个单元格  th-表头标题标签(默认居中加粗效果)

       table、tr td可设置水平对齐 ——align:left center right
       tr td可设置垂直对齐 ——valign:top mid bottom

      cellspacing ——单元格和格的外边距
      cellpadding ——单元格和内容的内边距

      width——table的宽

      height——table的高

      格式:

        
        
        
      姓名 性别 年龄
      李四 男 3

      运行结果:

      宽高属性、水平对齐、垂直居中、外边距、内边距(在一个table中统一解释啦):

      
        
      姓名 性别 年龄
      张三 女 3
      李四 女 3

      运行结果:

      完整的table结构:

        
        
      个人信息
      姓名 性别 年龄
      张三 女 3

       运行结果:

      form表单
      基础知识

      1.input标签——输入框

      当type的值改变时,输入框的类型发生改变

      • text——普通输入框
      • password——密码框
      • radio——单选框
      • chexkbox——多选框 (checked默认选中)
      • submit——提交按钮(提交至form表单中的action)
      • buttion——普通按钮(配合js完成一些操作)
      • image——图片按钮(配合js完成一些操作)
      • reset——重置按钮(清空表单)
      • hidden——隐藏域

      name:输入框的名称、value:输入框的值    提交时将name=value 提交至服务器

      placholder:给用户提示文字

      2、label标签——聚焦作用,点击文字时聚焦到对应的输入框

      3、select标签——下拉列表(配合option使用)

      运行代码
        
        
      
      
        
        
        
      账号:
      密码:
      角色: 管理员 顾客 员工
      爱好: 唱 跳 rap



      运行结果

       

      总结

      大家在写表单基本标签的时候,可以一个属性一个属性的完成 这样笔记直观哈(虽然后续我们的学习很少用到原生的表格和表单,大多数都会使用vue、element、vant等组件,但我们也要学会这些基本原理。)

      转载请注明:文章转载自 www.mshxw.com
      本文地址:https://www.mshxw.com/it/1020236.html
      我们一直用心在做
      关于我们 文章归档 网站地图 联系我们

      版权所有 (c)2021-2022 MSHXW.COM

      ICP备案号:晋ICP备2021003244-6号