38. html_02

1. 标签的id属性和class属性

id

用于精确查找某个标签。

类似于标签的唯一标识符，用于在同一个页面上唯一标识一个特定的元素。
每个id值在整个文档中都必须是唯一的，不能重复使用。
通过id值，可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。

class

类似于面向对象，将多个标签归于一类，分类查找

一个HTML标签可以具有多个class值，这样可以将多个不同的样式或行为应用于同一个标签。
多个class值之间使用空格分隔。
通过class值，可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。

<a href="" id="d1">顶部</a>
<a href="" id="d2">中间</a>
<a href="" id="d3">底部</a>

<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>

2. 列表

2.1 有序列表

ol + li

    <ol>
        <li>avril</li>
        <li>avril</li>
        <li>avril</li>
    </ol>

2.2 无序列表

ul + li

2.3 标题列表

dl + dt/dd

dt定义标题，dd定义描述内容

    <dl>
        <dt>标题一</dt>
        <dd>内容一</dd>
        <dt>标题二</dt>
        <dd>内容二</dd>
        <dt>标题三</dt>
        <dd>内容三</dd>
        <dt>标题四</dt>
        <dd>内容四</dd>
    </dl>

3. 表格标签

3.1 定义

一个HTML表格由一个<table>元素和一个或多个<tr>、<th>和<td>元素组成
　　<table>：声明是表格标签

　　<thead>：声明表头

　　<tbody>：声明表体

　　<tr>：定义表格行
　　<th>：定义表头的字段(列)，字体自动加粗
　　<td>：定义表格单元格(表体的内容)，字体不加粗

3.2 简单表格

<table>　　　　　　　　　　　　　　　　　　　　  # 声明是一个表格
        <thead>　　　　　　　　　　　　　　　  # 声明表头
            <tr>　　　　　　　　　　　　　　　 # 声明是一行数据
                <th>id</th>　　　　　　　　　# 声明是一个加粗的表头字段
                <th>username</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>　　　　　　　　　　　　　　　　 #  声明表体
            <tr>　　　　　　　　　　　　　　　  #  声明是一行数据
                <td>1</td>　　　　　　　　　　#  声明表格单元格内容
                <td>avril</td>
                <td>666</td>
            </tr>
            <tr>
                <td>2</td>
                <td>lavigne</td>
                <td>999</td>
            </tr>
        </tbody>
    </table>

3.3 增加属性

border：为表格添加外边框
cellpadding：调整字体离边框距离
cellspacing ：调整内边框离外边框的距离
colspan="2" ：水平占两个单元格
rowspan="2" ：垂直占两个单元格

<table border="1" cellpadding="20" cellspacing="20">　　　# 定义边框、边距
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1</td>　　　　　　　　　　　　# 水平占两个单元格
                <td>avril</td>
                <td>666</td>
            </tr>
            <tr>
                <td>2</td>
                <td rowspan="2">lavigne</td>　　　　　　　　# 垂直占两个单元格
                <td>999</td>
            </tr>
            <tr>
                <td>3</td>
                <td>for good</td>
                <td>999</td>
            </tr>
        </tbody>
    </table>

4. form表单

4.1 概念

表单（Form）是网页中用于收集用户输入信息的一种方式。
通过表单，用户可以输入各种数据
例如文本、数字、日期等。在HTML中，使用<form>标签创建表单。

获取前端用户输入的数据 ,用户输入的、用户选择的、用户上传的，基于网络发送给后端

4.2 表单的组成

[1]表单域（Form Fields）

用于接收用户输入的数据。
常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。

[2]提交按钮（Submit Button）

用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。

[3]取消按钮（Cancel Button）

允许用户取消当前的操作并清空表单内的所有数据。

[4]标签（Labels）

描述表单域的作用或意义，增加表单的可读性和易用性。

[5]校验机制（Validation）

用于验证用户输入的数据是否符合预期的格式或要求。
常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。

4.3 语法

<form action=""></form>

4.4 参数

action：控制数据提交的后端路径(给哪个服务端提交数据)
[1]什么都不写
默认就是朝当前页面所在的url提交数据
[2]写全路径
https://www.baidu.com 朝百度服务端提交数据
[3]只写路径后缀
action = '/index/'
自动识别出当前服务端的IP和端口拼接到前面
host:port/index/

4.5 input标签

[1]type参数

　　text：文本输入框，用于接受单行文本。
　　password：密码输入框，输入的内容会被隐藏。
　　checkbox：复选框，可以选择多个选项。　　checked="checked"设置默认值，可简写checked
　　radio：单选按钮，只能选择其中一个选项。　（需搭配name实现从多个键中选取一个，否则无实际意义）checked="checked"设置默认值，可简写checked
　　file：文件上传框，用于选择上传的文件。　　添加multiple属性可以上传多个文件　　　　
　　submit：提交按钮，用于提交表单数据。
　　reset：重置按钮，用于重置表单数据。

　　button：一个普通按钮，通常需要配合JavaScript来实现功能。

　　date：日历

　　email：邮箱

[2]input参数

name: 类似于字典的key（用于给后端传值）
value: 类似于字典的value（用于给后端传值）
placeholder: 在输入框为空时显示的提示文本。
required: 设置为 true 时，表示输入框必须填写内容才能提交表单。
readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
size: 指定输入框的可见宽度，单位为字符数。
maxlength: 指定输入框中可以输入的最大字符数。
autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）。

[3]代码示例

<form action="">
    <p>用户名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>
    <p>明星:avril<input type="radio" name="public">
            lavigne<input type="radio" name="public">
            haaland<input type="radio" name="public">
    </p>
    <p>爱好:
        football<input type="checkbox" name="hobby">
        soccer <input type="checkbox" name="hobby">
        volleyball <input type="checkbox" name="hobby">
    </p>
    <p>日期: <input type="date" name="date"></p>
    <p>邮箱: <input type="email"></p>
    <p>单个文件: <input type="file"></p>
    <p>多个文件: <input type="file" multiple></p>
    <p>
        <input type="submit" value="注册">　　# subit和reset可以通过value来控制在按钮上显示的文字，如果不指定value，则默认为"提交"、“重置”
        <input type="reset">
    </p>
</form>

4.6 select标签：选择框

multiple参数实现多选

<form action="">
    <p>城市:
        <select name="city">
            <option value="阿德莱德">阿德莱德</option>
            <option value="黄金海岸">黄金海岸</option>
            <option value="赫尔辛基">赫尔辛基</option>
        </select>
    </p>
    <p>
        欧冠:
        <select name="uefa" multiple>
            <option value="皇马">皇马</option>
            <option value="拜仁">拜仁</option>
            <option value="ac米兰">ac米兰</option>
        </select>
    </p>
    <p>
        <input type="submit" value="注册">
        <input type="reset">
    </p>
</form>

4.7 textarea标签：多行文本输入框

cols：定义文本区域的行数
rows：定义文本区域的列数
maxlength：限制最多字数

<form action="">
    <p>
        <textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
    </p>
    <p>
        <input type="submit" value="注册">
        <input type="reset">
    </p>
</form>

4.8 label标签：给input标签配文字说明（了解）

方式一：直接将 input框写在label内

<label>用户名:
  <input type="text">
</label>

方式二：通过id链接，无需嵌套

<label for="d1">用户名:</label>
<input type="text" id="d1">

4.9 网络请求方式

[1]GET

从服务器获取数据。
客户端通过在URL后面添加查询字符串来指定需要获取的数据。
https://www.baidu.com/s?wd=%E5%91%A8%E6%9D%B0%E4%BC%A6
GET请求虽然可以携带数据但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制最多只能携带2KB左右

[2]POST

向服务器提交数据。
以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。

[3]form表单请求方式

form表单中有一个method属性，用于控制提交的方式；有两个选项get/post，默认是get请求

数据拼接在 url 后面
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
form 表单的注意事项：
method 必须是 post/get ...
enctype="multipart/form-data" 才能接收到二进制数据

posted @ 2024-12-01 17:37 hbutmeng 阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

hbutmeng