HTML笔记2
HTML列表
列表是用来布局的
无序列表
<ul></ul>
标签表示无序列表,一般会以项目符号呈现列表项,而列表项使用<li></li>
标签定义
无序列表的基本语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序之分,是并列的
<ul></ul>
中只能嵌套<li></li>
,直接在<li></li>
中嵌套其他标签或者直接输入文字的做法是不被允许的<li></li>
相当于一个容器,可以容纳所有元素
有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义
<ol></ol>
标签用于定义有序列表,列表排序以数字来显示,并且使用<li></li>
标签来定义列表项
有序列表的基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或者文字的做法是不被允许的<li></li>
之间相当于一个容器,可以容纳所有元素- 有序列表自带样式属性,但是在实际使用中使用CSS来设置
自定义列表
在HTML标签中,<dl></dl>
标签用于定义描述列表(或定义列表),该标签会与<dt></dt>
(定义项目/名字)和<dd></dd>
(描述每一个项目/名字)一起使用
自定义列表的基本语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
<dl></dl>
里面只能包含<dt></dt>
和<dd></dd>
<dt></dt>
和<dd></dd>
个数没有限制,经常是一个<dt></dt>
对应多个<dd></dd>
表单
使用表单目的是为了收集用户信息
一个完整的表单通常由表单域、表单控件(也被称为表单元素)和提示信息3个部分构成
表单域是一个包含表单元素的区域
在HTML标签中,<form></form>
标签用于定义表单域,以实现用户信息的收集和传递
<form></form>
会把它范围内的表单元素信息提交给服务器
表单域的基本语法格式:
<form action="url地址" methon="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性:
input输入表单元素
<input/>
标签用于收集用户信息,其中包含一个type属性,根据不同的type属性值,根据不同的属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
<input type="属性值"/>
<input/>
为单标签- type属性设置不同的属性值用来指定不同的空间类型
type属性的属性值及其描述如下:
<input/>
标签的其他属性:
- name和value是每个表单元素都有的属性值,主要给后台人员使用
- name表单元素的名字,要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
- maxkength是用户可以在表单元素输入的最大字符数,一般较少使用
<label></label>
标签
<label></label>
标签为input元素定义标注(标签)
<label></label>
标签用于一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
<label></label>
标签的基本语法格式:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<select></select>
表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select></select>
标签控件定义下拉列表
<select></select>
标签的基本语法格式:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select></select>
中至少包含一对<option></option>
- 在
<option></option>
中定义selected=selected
时,当前项即为默认选中项
<textarea></textarea>
表单元素
使用场景:当用户输入内容较多的情况下使用,在表单元素中,<textarea></textarea>
标签是用于定义多行文本输入的控件,使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板、评论
<textarea></textarea>
标签的基本语法格式:
<textarea rows="3" clos="20">
文本内容
</textarea>
- 通过
<textarea></textarea>
标签可以轻松地创建多行文本输入框 - cols="每行中的字符数",rows="显示的行数",在实际开发中不会使用,这部分用CSS样式表来控制
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤