重新学习html的第六天-列表标签与表单标签

2022-06-23 18:20:55 浏览数 (1)

title: 重新学习html的第六天-列表标签与表单标签

tags: 笔记

categories: 笔记

date: 2022-06-12 10:33:57

1.列表标签

1.1 无序列表 ul

基本语法格式

代码语言：html复制
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

<li>与</li>之间相当于一个容器，可以容纳所有元素。

1.2 有序列表 ol

基本语法格式

代码语言：html复制
<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。

基本语法

代码语言：html复制
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

举个例子：

代码语言：html复制
   <!-- 自定义列表 -->
    <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 控件

代码语言：txt复制
```html
代码语言：txt复制
<input type="" value="">
代码语言：txt复制
```

2.1.1. type属性

  • 这个属性通过改变值，可以决定了你属于那种input表单。
  • 比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。
  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。

2.1.2 value属性

value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

实例：

代码语言：html复制
    <input type="text" name="username" value="admin">

2.1.3. name属性

name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。

代码语言：html复制
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

2.1.4. checked属性

表示默认选中状态。 较常见于 单选按钮和复选按钮。

实例：

代码语言：html复制
    <!-- 来份计划清单？ -->
    <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 绑定元素

第一种方法：直接包含表单-适合单个表单

代码语言：html复制
<!-- label 标签 -->
<label>用户名: <input type="text" name="" id=""></label>

第二种方法：通过for 和 id 控制

代码语言：html复制
<label for="username">昵称</label> <input type="text" id="username">
html html5

0 人点赞