Web前端开发-html5基础-Day02

本文详细介绍了HTML5中的列表标签(无序列表、有序列表、定义列表),表格标签,包括格式、宽高属性、对齐方式等,并讲解了form表单的基础知识,如input、label、select等元素的使用。通过实例代码演示了各种标签的运行结果,强调了理解这些基础原理的重要性,即使在使用前端框架时也应有所掌握。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

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

内容

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

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

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

列表标签

无序列表(ul-li)

格式:

<ul>
  <li>需要显示的条目内容</li>
</ul>

例如:

  <!-- 1、无序列表 ul li 块级元素 ul配合li使用-->
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>榴莲</li>
  </ul>

运行结果(alt+b):

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

<ul type="value"></ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块

注意:

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

有序列表(ol-li)

格式:

<ol>
    <li></li>
</ol>

例如:

  <!-- 2、有序列表 ol li -块级元素-->
  <ol type="1">
    <li>螺蛳粉</li>
    <li>老友粉</li>
    <li>桂林米粉</li>
  </ol>

运行结果:

样式:

<ol type="A"></ol>
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)

格式:

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

例如:

  <!-- 3、定义列表 dl dt dd 块级元素-->
  <dl>
    <!-- 列表标题 类似title -->
    <dt>小明</dt>
    <!-- 对标题的元素 -->
    <dd>是初中生</dd>
    <dt>李明</dt>
    <dd>是高中生</dd>
  </dl>

运行结果:

表格标签

基础知识:

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

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

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

width——table的宽

height——table的高

格式:

  <!-- table标签就是一个表格 -->
  <!-- border——边框 默认为0-->
  <table border="1">
    <!-- tr-一行 -->
    <!-- td-一个单元格或者一列 -->

    <!-- th-表头标题标签 默认居中加粗效果 -->
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>

    <tr>
      <td>李四</td>
      <td>男</td>
      <td>3</td>

    </tr>
  </table>

运行结果:

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

<!-- table标签就是一个表格 -->
  <table border="1" width="300px" height="400px" cellspacing="0" cellpadding="3">
    <!-- tr-一行 -->
    <!-- td-一个单元格或者一列 -->

    <!-- th-表头标题标签 默认居中加粗效果 -->
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <!-- 2、
           table、tr td可设置水平对齐 -align:left center right
           tr td可设置垂直对齐 -valign:top mid bottom
    -->

    <tr align="center">
      <td valign="top">张三</td>
      <td valign="mid">女</td>
      <td valign="bottom">3</td>

    </tr>

    <!-- 3、
      cellspacing -单元格和单元格的外边距 
      cellpadding -单元格和内容的内边距

      单元格合并-设置cellsapcing="0"
      css样式单元格合并-border-collapse:collapse
    
    -->
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>3</td>

    </tr>
  </table>

运行结果:

完整的table结构:

  <!-- 完整的表格结构 -->
  <table border="1">
    <!--表格的标题标签  默认居中-->
    <caption>个人信息</caption>
    <!-- 表头标签 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <!-- 表体标签 -->
    <tbody>
      <tr>
        <td>张三</td>
        <td>女</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

 运行结果:

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使用)

运行代码

  <!-- 小刷-F5、小圆圈:会从浏览器缓存中拿资源 -->
  <!-- 大刷-在url地址栏重新输入地址 -->


  <!-- 表单元素 -->
  <!-- action提交表单服务器 
    当需要上传图片时用:enctype="multipart/form-data" method="post"
    不需要则可以去掉
  -->
  <form action="test.html" enctype="multipart/form-data" method="post">
    <!-- 
      单选框 单选按钮 复选框
      明文输入框
     -->
    账号:<input type="text" name="account" placeholder="请输入账号">
    <br>
    密码:<input type="password" name="pwd" id="" placeholder="请输入密码">
    <br>
    <!-- 1单选按钮  互斥-设置同一个属性即=设置同一个name-->
    角色:
    管理员<input type="radio" name="radio" id="" value="admin" checked>
    顾客<input type="radio" name="radio" id="" value="customer">
    员工<input type="radio" name="radio" id="" value="employee">
    <br>
    <!-- 复选框 默认选中 checked -->
    爱好:
    唱<input type="checkbox" name="hobbies" id="" value="sing">
    跳<input type="checkbox" name="hobbies" id="" value="dance">
    rap<input type="checkbox" name="hobbies" id="" value="rap">
    <br>
    <!-- 附件上传表单元素 -->
    <input type="file" name="file">
    <br>
    <!-- 普通按钮 配合js做一些动作-->
    <input type="button" value="我是一个按钮">
    <br>
    <!-- 图片按钮 -->
    <input type="image" src="../第一天/图片/1.jpg" alt="" width="200px">
    <br>
    <!-- 隐藏域 -->
    <input type="hidden" name="token" value="1">
    <!-- 重置按钮 -->
    <input type="reset" value="重置">

    <!-- 提交按钮 -->
    <input type="submit" value="提交">

    <!-- json字符串
    {
      "username":"admin"
    }
    查询字符串

    -->

  </form>

运行结果

 

总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值