初识HTML-列表标签和表单标签

表标签

在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代码标签：

<!--HTML-->
<div class="list">
<div class="left">
<a href="https://www.tpt360.com/" target="_blank"><img src="http://www.hmttv.cn/uploadfile/2024/1012/20241012085817904.png"></a>
</div>
<div class="right">
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面...</p>
</div>
</div>

知识点：

这里我用了一个class属性，它是用来定义当前标签的样式名，我这用list这个名去定义这个div的样式，如需定义多个名，可以用空格分开，那么在css样式表里面就用.list{}来表示。

a则是超文本链接标签，用href属性来描述链接的地址，target="_blank"表示用鼠标点击链接会从浏览器的新窗口去打开这个链接地址，我这里把img标签放在a标签里面表示点击这张图片就能够跳转这个链接地址。

其他的标签我已经在上一篇文章都详细介绍了，不是很明白的同学可以翻阅上篇文章。

从上面的代码看，我用了三个div来布局，第一个list可以控制整个区块的样式，left则是定义往左方布局，right就是定义往右方布局。

首先，我想给list整个区域限制一个宽度、高度、内边距和背景颜色，那么我们就应该这样写：

.list {
	width: 800px; /*宽度800像素*/
	height: 80px; /*高度80像素*/
	background: #f2f2f2; /*灰色的背景颜色*/
	padding: 15px; /*15像素的内边距*/
}

接下来我让left也限制一个宽度，并往左边浮动：

.left {
	width: 120px; /*宽度120像素*/
	float: left; /*往左边浮动*/ 
}

那么right就应该往右边浮动，并限制一个宽度，注意：左右两边的宽度不能大于整个区域的宽度

.right {
	width: 660px; /*宽度660像素*/
	float: right; /*往右边浮动*/ 
}

接着左边图片我们需要定义一个大小

.left img {
	width: 120px; /*高度120像素*/
	height: 80px; /*宽度80像素*/
}

最后右边的标题和文章简介也需要定义样式

.right h2 {
	font-size: 16px; /*16像素的字体大小*/
	color: #333; /*字体颜色为黑色*/
	line-height: 24px; /*24像素的行高*/
	margin: 5px 0; /*上下为5像素的外边距*/
}
.right p {
	font-size: 14px; /*14像素的字体大小*/
	color: #999; /*字体颜色为浅黑色*/
	line-height: 24px; /*24像素的行高*/
	margin: 0 0 5px 0; /*下边为5像素的外边距*/
}

这样一个简单的图文列表布局就完成了，当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，谢谢观看！！！

篇介绍了html 中文本格式及段落等标签，今天说下列表，什么是列表？它就是一种数据排列方式，以条列式的方式显示文本，使读者一目了然。列表主要有以下三种：

无序列表
有序列表
定义列表

无序列表 —— ul

无序列表在每行开始位置显示一个符号，语法如下：

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

显示效果：

无序列表的符号可以通过在ul 标签上设置 type 属性显示不同的符号，比如：

1、disc —— 实心圆点 (默认类型)
2、circle —— 空心圆圈
3、square —— 实心方块

实例代码：

<html>
<body>
<h4>一个无序列表：</h4>
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>

显示效果：

有序列表 —— ol

有序列表使用数字或字母符号排列，表示文本按一定顺序显示，语法如下：

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

效果如下：

同无序列表一样，在ol上通过type 属性设置使用那种符号表示顺序，有以下几种：

1、1，表示数字 1、2、3..... （默认数字）
2、a，表示小写字母 a、b、c....
3、A，表示大写字母 A、B、C ....
4、i，表示小写罗马字母 i、ii、iii、iv....
5、I，表示大写罗马字母 I、II、III、IV....

显示效果如下：

html代码：

<!DOCTYPE html>
<html>
<body>
数字
<ol type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小写字母
<ol type="a">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大写字母
<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小写罗马字母
<ol type="i">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大写罗马字母
<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

有序列表还可以通过start 属性设置起始数组，如下：

<ol  start="3">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

显示效果：

定义列表——dl

不同以上2种列表，定义列表主要用来解释名词，由2种层次列表显示，第一层是被解释的名词，第二层是详细地解释文字，语法如下：

<html>
<body>
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

显示效果：

第一行<dt>是要解释的名词，第二行标签<dd>是解释文本，会自动缩进。

列表的嵌套

以上三种列表是可以嵌套使用的，看如下示例：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果：

每嵌套一层，它的符号是不一样的，你可以试试再嵌套一层看看效果。

当然，不同列表类型也可互相嵌套，根据显示效果可以自由使用，一般建议不要这样使用，不同类型列表显示在一块不是很美观。如下面无序列表中嵌套有序列表：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ol>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ol>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果如下：