HTML_v2

/*
时间：2021/11/25
功能：HTML
目录: 
    一: 模板注释
    二: 常用标签
    三: 列表
    四: 表格
    五: 表单    
    六: 提交表单
    七: 查看提交表单: 前后端
    八: 问题
        1 后端解析数据
*/

一: 模板注释

<!-- 文档声明: html5文档  -->
<!DOCTYPE html> 

<!-- 网页语言设置英文: lang="en", 默认也为英文 -->
<!-- 网页语言设置中午: lang="zh" -->
<html lang="en">
<head>
    <!-- 网页编码格式 -->
    <meta charset="UTF-8">

    <!-- 移动设备浏览网页，网页不缩放 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 使用IE浏览器，选择最高版本 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 网页标题 -->
    <title>Document</title>
</head>
<body>
    hi
</body>
</html>

二: 常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 双标签 -->
    <h1> h1标题 </h1>
    <h3> h3标题 </h3>
    <h6> h6标题 </h6>

    <div> div标签: 容器标签; 可以包含其他标签 </div>
    <p> p 段落标签 </p>
    <p> p 段落标签 </p>

    <!-- 单标签 -->
    <br>    <!-- 换行标签 -->
    <img src = "imgs/001.PNG" alt="">
    <hr>    <!-- 分割标签 -->
    <img src = "imgs/002.PNG" alt="图片加载失败会显示">

    <!-- 属性标签 -->
    <a href="http://www.baidu.com">百度</a>

    <!-- 嵌套标签 -->
    <div>
        <p> 段落标签 </p>
    </div>
</body>
</html>


三: 列表

<!-- 列表标签: 无序 有序 -->
<!-- 无序标签 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

<!-- 有序标签 -->
<ol>
    <li>大米</li>
    <li>红薯</li>
</ol>


四: 表格

<!-- 表格边线: 编写合并 -->
<table style="border: 1px solid black; border-collapse:collapse;">
    <tr>
        <th style="border: 1px solid black;">姓名</th>
        <th style="border: 1px solid black;">年龄</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">张三</td>
        <td style="border: 1px solid black;">18</td>
    </tr>
</table>

五: 表单

<!-- 表单标签 -->
<form>
    <p>
        <label for="name"> 用户名: </label>
        <input type="text" id="name">
    </p>
    <p>
        <label for="pass">密码:</label>
        <input type="password" id="pass">
    </p>
    <p>
        <label>性别:</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好</label>
        <input type="checkbox">学习
        <input type="checkbox"> 小说
        <input type="checkbox"> 打游戏
    </p>
    <p>
        <label>照片</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </p>
</form>

六: 提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签 -->
    <form action="http://www.baidu.com" method="post">
        <p>
            <label for="name"> 用户名: </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="pass">密码:</label>
            <input type="password" id="pass" name="password">
        </p>
        <p>
            <label>性别:</label>
            <input type="radio" name="sex" value="0"> 男
            <input type="radio" name="sex" value="1"> 女
        </p>
        <p>
            <label>爱好</label>
            <input type="checkbox" name="love" value="学习">学习
            <input type="checkbox" name="love" value="睡觉"> 小说
            <input type="checkbox" name="love" value="打游戏"> 打游戏
        </p>
        <p>
            <label>照片</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label>个人描述</label>
            <textarea name="desc"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select name="position">
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
    </form>
 
</body>
</html>

七: 查看提交表单: 前后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签 -->
    <form action="http://127.0.0.1:6006" method="post">
        <p>
            <label for="name"> 用户名: </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="pass">密码:</label>
            <input type="password" id="pass" name="password">
        </p>
        <p>
            <label>性别:</label>
            <input type="radio" name="sex" value="0"> 男
            <input type="radio" name="sex" value="1"> 女
        </p>
        <p>
            <label>爱好</label>
            <input type="checkbox" name="love" value="学习">学习
            <input type="checkbox" name="love" value="睡觉"> 小说
            <input type="checkbox" name="love" value="打游戏"> 打游戏
        </p>
        <p>
            <label>照片</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label>个人描述</label>
            <textarea name="desc"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select name="position">
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
    </form>
 
</body>
</html>

1 : 说明  HTML源代码，文件名为"index6006.html"。

1 : 填写页面信息，点击"提交"。

1 : 查看Form Data。

1 : 查看服务端获取数据。

八: 问题
　　1 后端解析数据

/*
    提交数据中文无法显示
*/
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huafan/p/15603981.html