重新学习html的第六天-列表标签与表单标签
原创重新学习html的第六天-列表标签与表单标签
原创
title: 重新学习html的第六天-列表标签与表单标签
tags: 笔记
categories: 笔记
date: 2022-06-12 10:33:57
1.列表标签
1.1 无序列表 ul
基本语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
1.2 有序列表 ol
基本语法格式
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>1.3 自定义列表
<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>1.4 列表总结
2.表单标签
2.1 input 控件
```html<input type="" value="">```2.1.1. type属性
- 这个属性通过改变值，可以决定了你属于那种input表单。
- 比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。
- 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
2.1.2 value属性
value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
实例：
<input type="text" name="username" value="admin">2.1.3. name属性
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女2.1.4. checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
实例：
<!-- 来份计划清单？ -->
<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>2.1.5 input属性小结
属性 | 说明 | 作用 |
|---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
2.2 label 标签
目标：
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念：
label 标签为 input 元素定义标注（标签）。
作用：
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
2.2.1 绑定元素
第一种方法：直接包含表单-适合单个表单
<!-- label 标签 -->
<label>用户名: <input type="text" name="" id=""></label>第二种方法：通过for 和 id 控制
<label for="username">昵称</label> <input type="text" id="username">原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。