Web学习-HTML（三）

Web学习-HTML（三）

列表标签

• 如果说表格用来显示数据，那么列表就是用来布局的，因为列表非常的整齐、干净

1.无序列表（ul）

释义：列表项无顺序标号

    你喜欢的运动有哪些？
       <ul>
          <li>足球</li>
          <li>篮球</li>
          <li>乒乓球</li>
       </ul>

• 效果：

值得注意的是，无序列表的应用非常广泛，后面学了一些CSS后，能做出意想不到的效果，非常重要
在列表中，只能存在<li></li>标签！！！

2.有序列表（ol）

释义：列表中的各项是有顺序的，并且给出顺序标签（1、2、3...）

班级这次考试的前三名是谁？
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

• 效果：

3.自定义列表（dl）

自定义列表常用于对术语的解释和描述

城市：
    <dl>
        <dt>北京</dt>
        <dd>朝阳区</dd>    
        <dd>大兴区</dd>
        <dd>海淀区</dd>
        <dt>天津</dt>
        <dd>河东区</dd>    
        <dd>河西区</dd>
        <dd>红桥区</dd>
    </dl>

• 效果图：

dd标签围绕dt标签进行解释

常见于下面的使用场景：

表单标签

1. input控件（掌握）

常见的输入页面用到的都是input控件，比如网站用户注册、填写收货地址等页面。

• input标签的使用

上图列举了input标签的各种属性

    用户名：<input type="text" name="username" value="请输入用户名"> <br>
    昵称：<input type="text" name="nickname" value="请输入昵称"> <br>
    密码 ： <input type="password"> <br>
    性别： 男<input type="radio" name="sex" checked="checked">
            女<input type="radio" name="sex"> <br>
    兴趣：篮球<input type="checkbox" name="favioute">
         足球<input type="checkbox" name="favioute" checked="checked">
         远足<input type="checkbox" name="favioute"><br>
        <input type="button" value="请进行验证"><br>
        <!-- 下面两个按钮有默认文字 -->
        <input type="submit"><br>
        <input type="reset"><br>
        <!-- 图片按钮，必须包含一个src属性 -->
        <input type="image" src="images/button.png" value="重置按钮"><br>
        <!-- 上传文件专用 -->
        上传文件：<br>
        <input type="file"><br>

效果就不展示了，可以贴代码运行看一下

• name ：用于区别不同的表单

2.label标签

点击label标签时，被绑定的表单元素会获得焦点

    <!-- 用法一 -->
    <label>用户名：<input type="text" name="username" value="请输入用户名"></label>
    <!-- 用法二 -->
    <label for="nickname">昵称：</label> <input type="text" id="nickname" value="请输入昵称">

3.textarea（文本域）

能显示多行文本

留下评论：
    <textarea cols="30" rows="10">
        
    </textarea>

• cols：每行中的字符数
• rows：显示的行数

上面的两个属性在实际开发中是不使用的，会使用CSS

4.select（下拉列表）

户口所在地：
    <select>
        <option>--选择省份--</option>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>合肥</option>
        <option>深圳</option>
    </select>

• selected：默认选中

5.form（表单域）

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用的属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

个人公众号