整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

初识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老师发布的基础视频,明天做的案例按照老师讲解的案例去做。

有下拉列表的表单

题目只能有30个字,不能写全,其实今天我们要学习的内容有三个,第一,下拉列表表单,第二,多行文字输入表单,第三,数据集表单。

开始学习吧!

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践,今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时,经常会遇到选择"生活所在地"的操作,因为中国的地名是固定的,因此页面会为我们提供一个下拉列表选项,我们直接点选即可,就不需要输入文字了,这样操作的好处在于不会出现拼写错误。例如:

写这个功能我们需要介绍一组新标签<select></select>。"select"(选择)。在这个标签中再添加<option></option>。"option"(选项)。这样就可以写出带有下拉列表的表单了,示例代码如下:

<select><option></option></select>

这段代码我们继续在昨天的"表单.html"文件中添加即可,在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可!与这个图片提交按钮共用一个<form></form>标签!

下面我们为多选表单添加名称,示例代码如下:

请选择省份<select><option></option></select>

下面我们添加不同选项,示例代码如下:

请选择省份
  <select >
  <option >河北</option>
  <option >山东</option>
  <option >河南</option>
  <option >海南</option>
  <option >江苏</option>
  <option >安徽</option>
  </select>
  <br><br>

为了规范起见,我们为表单信息添加name和value属性,示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是,在下拉列表表单中,name写在<select>中,value写在<option>中。

页面效果如下:

这里告诉大家一个规律,下拉列表表单默认显示第一个<option></option>中的文字内容。

如果您想改变这个默认显示,请在需要显示的<option>中添加selected属性,并赋值为"selected"。

示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option>
 <!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>

页面效果如图:

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述,页面中的输入框不是像下图这么短的单行输入框。

而是多行输入框,如图:

使用<textarea></textarea>标签即可添加这样的输入框,不过要设置row(列)和cols(行)属性的数值。示例代码如下:

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select><br><br>之后,与其共同使用一个<form></form>标签。

下面我们为这个多行输入框添加一些提示和限制。

首先,添加提示文字,和type="text"的<input/>标签一样,都是使用placeholder属性。

第二,我们限制一下字数,使用maxlength(最大长度)属性。

第三,在页面加载完成后,直接让光标停留在输入框中,使用autofocus属性。

下面看看如何写吧,示例代码如下:(不要忘记写好name属性!)

<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>

页面效果如图:

如果刷新页面不能正确显示,请尝试关闭后重新打开!

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。(W3school)

这个数据集有三个部分组成,首先是<fliedset></fliedset>,这个标签不会显示,只是告诉浏览器这里的数据要打包。

第二是<legend></legend>,"legend"(说明),这里添加数据集名称。

第三就是我们之前学到的那些标签了。

示例代码如下:

<fliedset> <legend>信息打包</legend> </fliedset>

下面我们使用这段代码把form2打包一下吧。示例代码如下:

<form>
  <fieldset><!--开始-->
  <legend>信息打包</legend><br>
  <!--标题-->兴趣爱好:<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>读书
  <input type = "checkbox" name = "hobby" value = "film"/>电影
  <input type = "checkbox" name = "hobby" value = "painting"/>绘画
  <input type = "checkbox" name = "hobby" value = "music"/>音乐
  <br>
  最高学历:<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>硕士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option><!--选中这个选项-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  请简要描述您的剧本的情节<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--结尾-->
  <input type = "image" src = "img/示例图片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下:

今天的内容结束了!

如果您喜欢我的教程请关注我,点赞也能让我充满动力!

HTML完整学习目录

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简介

什么是HTML?

HTML代表超文本标记语言(Hypertext Markup Language)。它是一种用于构建网页的标记语言。HTML文件包含一组标签,这些标签用于定义网页的结构和内容。浏览器读取HTML文件,并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式,并提供交互元素,例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构:

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构:

  • <!DOCTYPE html>:这是文档类型声明,它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
  • <html>:HTML文档的根元素。所有其他元素都包含在<html>标签内。
  • <head>:包含与文档相关的元信息,如页面标题、字符集声明和外部样式表链接。
  • <title>:定义网页的标题,显示在浏览器标签页上。
  • <body>:包含网页的主要内容,如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称,例如<p>表示段落,<img>表示图像。标签通常成对出现,有一个开始标签和一个结束标签。例如:

<p>这是一个段落。</p>

<p>是开始标签,</p>是结束标签,文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的,不需要结束标签,例如<img>用于插入图像。

HTML注释

在HTML中,你可以使用注释来添加说明性文字,注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾,如下所示:

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分:HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素:

  • <p>:定义一个段落。
  • <h1><h6>:定义标题,<h1>是最高级别的标题,<h6>是最低级别的标题。
  • <strong>:定义强调文本,通常以粗体显示。
  • <em>:定义强调文本,通常以斜体显示。
  • <a>:定义超链接,允许用户点击跳转到其他页面。

示例:

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像,可以使用<img>标签。它是一个自封闭标签,需要指定图像的src属性来指定图像文件的路径。

示例:

htmlCopy code
<img src="image.jpg" alt="图像描述">
  • src:指定图像文件的路径。
  • alt:提供图像的替代文本,用于无法加载图像时的文字描述。

链接

通过使用<a>标签,可以在网页中创建链接。链接通常包含在文本或图像中,并使用href属性指定目标URL。

示例:

<a href="https://www.example.com">访问示例网站</a>
  • href:指定链接的目标URL。

列表

HTML支持有序列表(<ol>)、无序列表(<ul>)和定义列表(<dl>)。

无序列表

无序列表使用<ul>标签定义,每个列表项使用<li>标签。

示例:

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义,每个列表项使用<li>标签。

示例:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义,每个定义项目使用<dt>标签定义术语,使用<dd>标签定义描述。

示例:

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分:HTML表单

HTML表单允许用户与网页进行交互,提交数据。以下是HTML表单的基本元素:

<form>元素

<form>元素用于创建表单,可以包含文本字段、复选框、单选按钮、下拉列表等。

示例:

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>
  • action:指定表单数据提交的目标URL。
  • method:指定提交方法,通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据,常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签,type属性设置为"text"。

示例:

<input type="text" name="username" placeholder="用户名">
  • type:指定字段类型。
  • name:指定字段的名称。
  • placeholder:设置文本框的占位符文本。

密码框

密码框使用<input>标签,type属性设置为"password"。

示例:

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签,type属性设置为"radio"。

示例:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • name:指定单选按钮组的名称。
  • value:指定每个选项的值。

复选框

复选框使用<input>标签,type属性设置为"checkbox"。

示例:

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select><option>标签创建。<select>定义下拉列表,而<option>定义选项。

示例:

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>
  • name:指定下拉列表的名称。
  • 每个<option>标签表示一个选项,使用value属性定义选项的值。

第四部分:HTML样式和CSS

HTML用于定义网页的结构和内容,但要使网页看起来更吸引人,需要使用CSS(层叠样式表)。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例:

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中,并通过<link>标签将其链接到HTML文档。

示例(style.css):

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表:

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素,你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单,HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识,但HTML是一个广泛的主题,还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助,让你能够开始创建自己的网页。继续学习和实践,你将成为一个熟练的网页开发者。