整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
节课 来学习自定义列表。
先来看个例子 小米官网 (https://www.mi.com/) 的底部导航 每个列表都有一个共同特点， 除了列表内容外， 还包含一个标题， 我们就把类似这样的列表 ， 称为自定义列表。
自定义列表由三个标签组成， 分别是： dl dt 和 dd
dl 是 definition list 的缩写 意为定义 列表
dt 是 definition term 的缩写 意为定义术语 可以理解为列表标题。
dd 是 definition description的缩写 意为定义描述 可以理解为列表内容 三个标签都遵循双标签语法。
语法如下图：
注意 dt 和 dd 是 dl 的子标签。dt 与 dd 是兄弟标签，dt 不能放入 dd 内 dd也不能放入 dt 内 dd标签可以定义多个 但dt 或 dd 标签不能脱离 dl 单独使用。
再次来到小米官网的底部导航 在浏览器页面上 单击鼠标右键 选择， 检查， 打开开发者工具， 选择 elements 页签 ， 点击元素选择工具按钮， 点击选中你要查看的元素， 在 elements 中你就能看到选择区域的代码。
仔细观察 dl 标签下 定义了一个dt 和三个 dd 分别展示了一个列表标题和三个列表描述。
我们来动手制作一个自定义列表
打开编辑器 新建一个 definition_list_1.html 页面 使用 ! 配合 tab 键自动补全基础代码
在 body 里书写 dl ， 按下 tab 键补全 dl 标签， 在 dl 标签内部， 敲回车， 换行， 书写 dt， 按下 tab或者是回车键自动补全 dt， 在 dt 的结束标签外部， 回车换行， 在下边再定义一个 dd 标签，
dt 标签里书写文本问：英文不好能不能学编程
dd 标签里书写文本 答：当然可以， 保存。
在浏览器打开页面， 自定义列表完成了， 这里我们发现， dd 里包含的文本缩进了， 这个缩进是浏览器默认的样式。
再来实现一下小米官网的底部导航！
回到编辑器， 新建 definition_list_2.html 页面， 补全基础代码， 在body里面书写一个 dl 标签 在 dl 中书写一个 dt 标签， 向 dt 标签中填写文本， 帮助中心 ，再书写三个 dd 标签， 分别在每个 dd 中输入文本， 账户管理， 订单指南， 订单操作， 保存
在浏览器打开页面， 基本的自定义列表实现了。
和真实的效果做个对比， 我们发现这两处文字的大小是不同的 而我们的是相同的， 同时， 这里的内容没有缩进， 而我们的有缩进， 这些问题等到我们学习了CSS知识后， 就可以实现了。
1、无序列表概念：用来放置一些对于顺序无关紧要的内容，例如下面的新闻内容。
2、有序列表概念：有序列表用于存放内容不能错乱的信息，比如下面的阿里云内容。
3、自定义列表：自定义列表用于正文之外的框框栏栏之类的。
列表样式2
列表样式3
列表标签是用 ul 表示，但是不是单独使用的，需要和 li 标签配合使用，并且列表标签也有属性，用法：
<ul type="disc"> ，属性有多个值：
disc ：小圆点，默认属性
circle ：小圆圈
square ：实心方块
none ：不要任何符号
源码：↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页抬头-->
<title>Title</title>
</head>
<body>
<!--列表与列表属性-->
<ul type="disc">
<li>这是列表a</li>
<li>这是列表b</li>
<li>这是列表c</li>
</ul>
</body>
在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！
作用：如果说table标签是用来显示数据的，那么列表标签就是用来进行html页面布局的。
语法：
<ul>
<li></li>
</ul><ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样，列表标签也自带样式属性，但为了代码统一，我们还是会使用css来设置。
代码示例：
<h2>无序列表：</h2>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>运行界面：
语法：
<ol>
<li></li>
</ol><ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。
代码示例：
<h2>有序列表：</h2>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>运行界面：
语法：
<dl>
<dt></dt>
<dd></dd>
</dl><dl></dl>标签：定义列表
<dt></dt>标签：列表标题
<dd></dd>标签：列表内容
一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。
代码示例：
<h2>自定义列表：</h2>
<!-- dl：外层标签 dt：项目标题 dd：项目内容 -->
<dl>
<dt>水果种类</dt>
<dd>苹果</dd>
<dd>橘子</dd>
<dd>香蕉</dd>
</dl>运行界面：
作用：收集用户信息。一般用在注册界面等。
组成：一个完整的表单中包含表单域（整个填写界面所有信息）、表单控件（表单元素）和提示信息（表单控件的提示作用）3个部分。
表单域：是一个包含表单元素的区域。
<form>标签用于定义表单域，实现用户信息的收集和传递。
作用：将其区域范围内的信息收集并传送给服务器。
语法：
<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单控件
</form>注：action：url地址，指定接收并处理表单数据的服务器程序的url地址。
method：用于设置表单数据的提交方式。
method=”get”：提交数据时，地址栏可查看到数据。数据量少且安全级别不高时使用。
method=”post”：提交数据时，地址栏数据是加密的。
name：表单域的名称。用于区分同一页面下的不同表单域。
1.input输入表单元素：
语法：<input type=””>，依据type属性值不同区分不同控件。
文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。
密码框：<input type=”password”>。输入内容默认不可见。
单选框：<input type=”radio”>，默认情况下选中后无法取消。
注：为实现多选一状态，需要将所有的单选框控件具有同一个name名。
复选框：<input type=”checkbox”>，选中后可以更改可以取消。
提交按钮：<input type=”submit”>，默认按钮中的提示文字是提交，可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。
重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。
普通按钮：<input type=”button”>
文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。
label标签：标注标签，配合input控件一起使用
作用：绑定表单控件，扩大点击范围。
当点击label标签的内容时，系统会自动选中该表单控件。
代码示例：
<h1>label标签</h1>
<form>
<label for="text">用户名：</label>
<input type="text" name="用户名" id="text"><br>
<label for="password">密码：</label>
<input type="password" id="password"><br>
<label for="男">男</label>
<input type="radio" name="sex" id="男">
<label for="女">女</label>
<input type="radio" name="sex" id="女"><br>
</form>运行界面：
Input控件属性：
name:用户自定义，提示input元素的名称。给后台工作人员的提示。
value：用户自定义，提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容，单选框和复选框则显示不出来。
checked：默认选中状态。主要用于单选按钮和复选按钮中。
maxlength：正整数，规定输入字段中的字符最大长度。
input代码示例：
<h2>表单标签</h2>
<form>
用户名：<input type="text" maxlength="15" value="请输入用户名"><br>
密 码：<input type="password"><br>
性 别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
爱 好：<input type="checkbox" name="like" value="swim">游泳
<input type="checkbox" name="like" value="健身">健身
<input type="checkbox" name="like" value="run">跑步<br>
<input type="submit">
<input type="reset"><br>
<input type="submit" value="注册">
<input type="reset" value="清空"><br>
<!-- 后期结合js搭配使用 -->
<!-- 按钮选框在默认情况下是没有文字内容的，需要添加value值设置文字内容 -->
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>运行界面：
2.select下拉表单元素：
使用场景：地址选择、职业分类、学校分类等。
select标签：定义下拉列表。
语法：
<select>
<option></option>
</select>代码示例：
<h1>下拉表单</h1>
<form>
<label for="adress">籍贯：</label>
<select name="" id="">
<option value="">北京</option>
<option value="">河北</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</form>运行界面：
3.textrea文本域表单控件
使用场景：留言、介绍、评论等。
语法：
<textrea rows=”” cols=””>文本内容</textrea>跟文本框控件不同，它是多行文本输入框，可以自行设定行数以及一行容纳多少字数。
rows=“每行可输入的字符数”，
cols=“显示的行数”。
这两个样式属性实际开发中大多使用css就可以改变操作。
代码示例：
<h1>文本域表单元素</h1>
<form action="">
<label for="textrea">今日反馈：</label><br>
<textarea name="" id="" cols="15" rows="10">今日反馈</textarea>
</form>运行界面：
关于HTML基础内容就学习到这里了，明天练习一个综合案例。对了，现在跟学的是黑马前端的pink老师发布的基础视频，明天做的案例按照老师讲解的案例去做。
*请认真填写需求信息，我们会在24小时内与您取得联系。
