Web前端开发基础教程二2

简介: Web前端开发基础教程二2

自定义列表:

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。


基本语法如下:

<body>
   <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
   </dl>
</body>

举例:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
   <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
   </dl>
</body>
</html>

显示如下:

<1><dl></dl>里面只能包含<dt>和<dd>

<2><dt><dd>个数没有限制,经常是一个<dt>对应多个<dd>


表单标签:

现实中的表单:

网页中的表单:

使用表单的目的是为了手机用户信息。

在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要表单。


表单的组成:

在HTML中,一个完整的表单通常由表单域,表单控件(也称为表单元素)和提示信息3个部分组成。

表单域:

表单域是一个包含表单元素的区域。

在HTML标签中,标签用于定义表单域,以实现用户信息的收集和传递。


<form>会把它范围内的表单元素信息提交给服务器。

语法格式:

<form action="ul地址" method="提交方法" name="表单域名称">
    各种表单元素控件
</form>


input表单元素标签:

type属性的属性值及其描述如下:

type属性主要用于使表单元素呈现不同的状态


表单元素:

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<input>表单元素:

在英文单词中,input是输入的意思,而在表单元素中<input>标签用于收集用户信息。

举例:

<from>
  用户名:<input type="text"></br>
  密码:<input type="password"></br>
  性别:男:<input type="radio">女:<input type="radio"></br>
  爱好:吃饭:<input type="checkbox">睡觉:<input type="checkbox">打豆豆:<input type="checkbox">
</from>


显示效果:

在上文我们提到"radio"是单选框,那么为什么现在性别的两个选项都可以被选择呢?

解决方法为:给单选按钮命名相同的名字。

修改如下:

用户名:<input type="text" name="username"></br>
  密码:<input type="password" name="password"></br>
  性别:男:<input type="radio" name="sex">女:<input type="radio" name="sex"></br>


那么复选框是不是就不需要起相同的名字啦?

那当然不是,复选框也要给每个选项起相同的名字,但它的作用是为了将我们输入的数据提交给后台时分类能够明确。

除了type属性之外,<input>标签还有其他很多属性,其常用的属性如下:


举例:

<from>
  用户名:<input type="text" name="username" value="请在这里输入用户名"></br>
  密码:<input type="password" name="password" ></br>
  性别:男:<input type="radio" name="sex" value="男">女:<input type="radio" name="sex" value="女"></br>
  爱好:吃饭:<input type="checkbox" name="hobby">睡觉:<input type="checkbox" name="hobby">打豆豆:<input type="checkbox" name="hobby"></br>
  <input type="checkbox" checked="checked">我已阅读用户协议
</from>


显示如下:

注:

name和value是每个表单元素都有的属性值,主要给后台人员使用,

name表单元素的名字,要求单选按钮和复选框要有相同的name值,name通常用于区分不同的表单元素。

checked主要针对于单选和复选按钮,主要作用是一打开页面就可以默认选中某个表单元素。

举例:

<input type="submit" name="submit" value="注册">
<br>
<input type="reset" value="重置信息">//将已经填写的表单恢复到最初状态

显示如下:

注意button按钮和submit/reset/file按钮的区别,button按钮并不会提交顺序!

举例:

上传头像:<input type="file" name="选择文件"><br>//弹出资源管理器
<input type="button" value="获取短信验证码"><br>//网页不会发生任何变化


显示如下:

label标签:

<label>标签为input元素定义标注标签,用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上来增加用户体验。

举例:

<label for="nan">男:</label>
<input type="radio" name="sex" value="男" id="nan">

注:<label>标签的for属性应当与相关元素的id属性相同。

select表单元素:

使用场景:在页面中,如果有多个选项让用户进行选择,并且想要节约页面空间时,我们可以选择<select>标签控件定义下拉列表。



举例:

<form >
  省份:
  <select>
  <option selected="selected">陕西</option>
  <option>北京</option>
  <option>上海</option>
  <option>广东</option>
  <option>江西</option>
  <option>山西</option>
  <option>湖北</option>
</select>
</form>


显示效果:

注意:


1:<select>中至少包含一对<option>


2:在<option>中定义selected="selected"时,当前项即为默认选中项


textarea文本域元素:

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。


在表单元素中,<textarea>标签是用于定义多行文本输入的控件。


使用多行文本输入控件,可以输入更多的文字,该空间常用于留言板,评论等。

举例:

<form >
自我介绍:
  <textarea rows="3" cols="20">
  介绍一下自己吧!
  </textarea>
</form>

显示效果:

通过rows[每行中的字符数]和cols[显示的行数]属性,我们可以设置文本框的大小,但是在实际开发中我们并不会使用该属性来设置,都是使用CSS来改变大小

相关文章
|
24天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
62 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
28天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
39 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
53 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!