<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习黑马视频的第二个HTML</title>
</head>
<body>
<!-- 如果说表格是用来显示数据的，那么列表就是用来布局的 -->
<!-- 列表最大的特点是整齐，整洁，有序，它作为布局会更加自由和方便 -->
<!-- 根据使用场景的不同，列表可以分为三大类：无序列表，有序列表和自定义列表 -->
<!-- 一.无序列表
1.ul标签标识html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义
2.ul标签下，只能够使用li标签
3.li里面可以放任何元素
4.无序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置
-->
<h1>你喜欢吃什么？</h1>
<ul>
<li>酸菜鱼</li>
<li>臭豆腐</li>
<li>河南烩面</li>
</ul>
<!-- 二.有序列表
1.ol标签用于定义有序标签，列表排列以顺序来显示，并且使用li标签来使用列表项
2.ol标签下，只能够使用li标签
3.li标签里可以放任何元素
4.有序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置
-->
<h1>粉丝排行榜</h1>
<ol>
<li>张三 100000</li>
<li>李四 30000</li>
<li>王五 20000</li>
</ol>
<!-- 三.自定义列表
1.dl标签定义html中的自定义列表，dt是上边的标题，重要的部分。dd是dt下边跟着的，对dt进行说明。
2.dl中只能够包含dt和dd
3.dt和dd的个数没有限制，经常是一个dt对应多个dd。
-->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<!-- 表单
form标签用于定义表单域
表单域：就是一个包含表单元素的区域
作用：实现用户信息的收集和传递
form会把它范围内的表单元素信息提交给服务器
form表单中属性值：
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
表单元素
1.input输入表单元素
input标签用于收集用户信息
input标签中有一个type属性，取值不同就可以指定不同类型的控件
属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和浏览按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单中的数据发送到服务器
text 定义但行的输入字段，用户可在其中输入文本，默认宽度为20个字符
name 定义input元素的名称，由用户自定义
value 定义input元素的值，由用户自定义
checked 规定input元素首次加载时应当被选中
maxlength 正整数，规定输入字段的最大长度
label标签，并不属于表单，但是经常和表单元素一起搭配使用。
作用：可以绑定一个表单元素，当点击label标签中的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增强用户体验
2.select下拉表单元素
使用场景---》如果有多个选项供用户选择，并且想要节约页面空间时，我们可以使用select标签控件定义下拉列表
父标签select--》子标签option在子标签中有一个属性selected="selected"则表示标签是默认选中状态
3.textarea文本域元素
当用户输入内容比较多的情况下，就不能使用文本框表单了，textarea标签适用于定义多行文本输入的标签。
cols是每行的字符数，rows一共有多少行不用记，实际开发中都是用css来配置的
-->
<form action="https://www.baid.com" method="post" name="name1">
<!-- 文本框，用户可以在里面输入任何内容 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6">
<br>
密码：<input type="password" name="password">
<br>
性别：
<label for="sex1">男 </label>
<input type="radio" name="sex" value="1" id="sex1">
<label for="sex2">女 </label> <input type="radio" name="sex" value="2" checked="checked" id="sex2">
<br>
爱好：篮球<input type="checkbox" name="hobby" value="1">
书法<input type="checkbox" name="hobby" value="2" checked="checked">
玩游戏<input type="checkbox" name="hobby" value="3" checked="checked">
<br>
<input type="button" value="获取短信验证码">
<br>
上传头像：<input type="file">
<br>
籍贯：<select name="jiguan" id="">
<option value="1">河南</option>
<option selected="selected" value="2">浙江</option>
</select>
<br>
备注：<textarea name="wenben" id="" cols="30" rows="2">
请输入备注
</textarea>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
本文详细介绍了HTML中的无序列表、有序列表和自定义列表的使用，以及如何通过CSS进行样式设置。通过实例演示了如何创建整洁的菜单和排行榜。同时探讨了表单元素如input、select和textarea在收集用户信息的应用。
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
