整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
序列表
经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。
学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。
列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。
首先介绍有序列表
要用<ol></ol>标签告诉浏览器这里是列表。
然后在里面添加<li></li>标签，在这个标签中添加内容即可。
示例代码如下
<p>我喜欢的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>大家可以把它放到一个新的html框架中看看效果。
完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>列表</title>
</head>
<body>
<h>有序列表</h>
<p>我喜欢的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
</body>
</html>页面效果如下：
通过修改<ol>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：
<ol type="A">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>页面效果如下：
下面给大家介绍一下搜狗输入法中如何输入罗马数字。
step1.点击"输入方式"
step2.点击"特殊符号"后选择数字序号，找到罗马数字即可
除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"
示例代码如下：(使用日语中的片假名表示序号)
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>页面效果如图所示：
是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。
如图：
资料来自w3school
无序列表
无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul>。
有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol。
无序为unorder，无序列表为unorder list，缩写为ul。
无序列表<ul>标签的type属性用来控制列表前的标记显示演示。
示例代码如下：
<h>无序列表</h>
<p>我喜欢的水果</p>
<ul>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="disc">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="circle">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="square">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>页面效果如下：
通过图片我们可知，无序列表默认的列表标识就是type="disc"。
style属性的话大家自己试试吧，这里就不啰嗦了。
定义列表
这个列表比较特殊，也比较不常见，主要就是显示名词定义的。
首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表，和<ol>或<ul>一样。
定义的英文是definition，定义列表就是definition list，缩写是dl。
下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title（标题）。
与定义名称标签并列的是定义描述<dd></dd>,即definition describe（描述）。
示例代码如下：
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>页面效果如下：
今天的内容结束了！
列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！
如果您喜欢我的教程请关注我，点赞也能让我充满动力！
如果您有任何疑问请给我留言，如有问题或错误请予以斧正！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
在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老师发布的基础视频，明天做的案例按照老师讲解的案例去做。
家有没有好奇过，为什么网页中的图片都是按顺序排放的，或者说有时候网页的内容的排版非常有序。其实大多数网页的这种效果都要依赖于列表标签。
在HTML中，列表分为有序列表和无序列表。
有序列表：
<ol type="">(type属性不写默认为0,1,2......)
<li>内容</li>
<li>内容</li>
。。。。。
</ol>
ol标签的type属性只有五种类型，分别为：
“1”：用阿拉伯数字排列。
“A”：用大写字母排列。
“a”：用小写字母排列。
“i”：用罗马数字排列。
“Ⅰ”：用大写罗马数字排列。
ol还有两个属性：reversed和start。
<ol reversed=""reversed>倒叙排列。
<ol start="(数字)"从第几个开始排列。
我们说完有序列表自然要说他的好兄弟——无序列表，在我们真正的研发中，无序列表才是应用最广泛的，
<ul>
<li>内容</li>
<li>内容</li>
。。。。。
</ul>
ul标签也有type属性，
“disc”效果是个圆点（是默认值）。
"square"效果是个实心方块。
“circle”效果是个空心圆。
在我们真实的编程中一般都是用不上这些type效果的，所以我们可以通过CSS将其解决掉：<style>
list-style:none;(此代码可以去掉列表的样式)
</style>
好啦，今天接到这里，有什么问题可以评论区留言或者私聊我呦，制作不易，希望多多转发多多关注[比心][比心][比心]
*请认真填写需求信息，我们会在24小时内与您取得联系。
