前言
继续学习如何使用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 bottomcellspacing ——单元格和格的外边距
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等组件,但我们也要学会这些基本原理。)
本文详细介绍了HTML5中的列表标签(无序列表、有序列表、定义列表),表格标签,包括格式、宽高属性、对齐方式等,并讲解了form表单的基础知识,如input、label、select等元素的使用。通过实例代码演示了各种标签的运行结果,强调了理解这些基础原理的重要性,即使在使用前端框架时也应有所掌握。








被折叠的 条评论
为什么被折叠?



