title: 重新学习html的第五天-列表标签与表单标签
tags: 笔记
categories: 笔记
date: 2022-06-12 10:33:57
基本语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器,可以容纳所有元素。
基本语法格式
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
<dl>
英文单词:definition list,没有属性。dl的子元素只能是dt和dd。<dt>
:definition title 列表的标题,这个标签是必须的<dd>
:definition description 列表的列表项,如果不需要它,可以不加 备注:dt、dd只能在dl里面;dl里面只能有dt、dd。
基本语法
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
举个例子:
<!-- 自定义列表 -->
<dl>
<dt>第一条</dt>
<dd>你若是觉得你有实力和我玩,良辰不介意奉陪到底</dd>
<dd>我会让你明白,我从不说空话</dd>
<dd>我是本地的,我有一百种方式让你呆不下去;而你,无可奈何</dd>
<dt>第二条</dt>
<dd>良辰最喜欢对那些自认能力出众的人出手</dd>
<dd>你可以继续我行我素,不过,你的日子不会很舒心</dd>
<dd>你只要记住,我叫叶良辰</dd>
<dd>不介意陪你玩玩</dd>
<dd>良辰必有重谢</dd>
</dl>
<!--再来一个实例-->
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dd>污染很严重,PM2.0天天报表</dd>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
</dl>
```html
<input type="" value="">
```
value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
实例:
<input type="text" name="username" value="admin">
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
表示默认选中状态。 较常见于 单选按钮和复选按钮。
实例:
<!-- 来份计划清单? -->
<ol>
<h2>今日份清单</h2>
<li><input type="checkbox" checked="checked">学习前端</li>
<li><input type="checkbox" checked="checked">背英语四级单词</li>
<li><input type="checkbox" checked="checked">写博客</li>
<li><input type="checkbox" checked="checked">打游戏</li>
</ol>
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念:
label 标签为 input 元素定义标注(标签)。
作用:
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
第一种方法:直接包含表单-适合单个表单
<!-- label 标签 -->
<label>用户名: <input type="text" name="" id=""></label>
第二种方法:通过for 和 id 控制
<label for="username">昵称</label> <input type="text" id="username">
写法:
<h2>用户留言</h2>
<textarea cols="30" rows="10"></textarea>
目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
<!-- select 下拉列表 -->
<h2>省份</h2>
<select name="" id="">
<option value="">--请选择省份--</option>
<option value="">陕西</option>
<option value="">山西</option>
<option value="">浙江</option>
<option value="">海南</option>
<option value="">台湾</option>
</select>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。