HTML笔记+案例(下)

简介: HTML笔记+案例

HTML笔记+案例(上):https://developer.aliyun.com/article/1427806


2.8 表格标签

<talbe>:表格标签
<thead>:表头标签
<tbody>:表内容标签
<tr>:行
<th>:表头内容
<td>:表内内容
border:边框
<h1>数据表格</h1>
<table>
    <thead border="1">
        <tr>  <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
        <tr>  <td>1</td> <td>刘备</th> <td>50</td> </tr>
        <tr>  <td>2</td> <td>关羽</th> <td>49</td> </tr>
        <tr>  <td>3</td> <td>张飞</th> <td>48</td> </tr>
    </tbody>
</table>



案例:表格嵌套


表格嵌套案例:

<h1>用户列表</h1>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>头像</th>
        <th>姓名</th>
        <th>更多信息</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>
            <img style="width: 150px;" src="/static/liubei.png">
        </td>
        <td>刘备</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>
            <img style="height: 100px;" src="/static/guanyv.png">
        </td>
        <td>关羽</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <img style="height: 100px;" src="/static/zhangfei.png">
        </td>
        <td>张飞</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    </tbody>
</table>



2.9 input系列

- 明文输入框:
<input type="text">
- 密文输入框:
<input type="password">
- 文件上传:
<input type="file">
- 单选框:
<input type="radio" name="n1">男
<input type="radio" name="n1">女
- 复选框:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
- 普通按钮:
<input type="button" value="提交">
- 提交表单:
<input type="submit" value="提交">


2.10 下拉框

- 单选下拉框
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>
- 多选下拉框(按住shift可多选)
multiple:多选
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>


2.11 多行文本


rows:默认行数

<textarea rows="5"></textarea>


案例:用户注册

<h1>用户注册</h1>
<div>
    用户名:<input type="text">
</div>
<div>
    密码:<input type="password">
</div>
<div>
    性别:<input type="radio">男 <input type="radio">女
</div>
<div>
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>
<div>
    擅长的领域:
    <select multiple>
        <option>Python</option>
        <option>C++</option>
        <option>Java</option>
    </select>
</div>
<div>
    备注:<textarea></textarea>
</div>
<div>
    <input type="button" value="button按钮">
    <input type="submit" value="button按钮">
</div>



网络请求


GET请求:【URL方法 / 表单提交】

  • 现象:数据在url上体现


POST请求:【表单提交】

  • 现象:数据在请求体中


案例:用户注册(传输数据)


页面数据如何提交到后台:


  • form标签包裹要提交的数据标签
  • 提交方式:method=“get”
  • 提交地址:action=“/xxx/xxx/xx”
  • form标签中必须有一个submit标签


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form method="post" action="/post/reg">
        用户名:<input type="text" name="user"/>
        密码:<input type="password" name="pwd"/>
        <input type="submit" value="submit按钮"/>
    </form>
</body>
</html>


Python:

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/add", methods=['POST'])
def add():
    return render_template("add.html")
@app.route("/post/reg", methods=["POST"])
def post_register():
    print(request.form)
    return "注册成功!"
if __name__ == '__main__':
    app.run()



整合GET、POST请求为一个函数:


HTML(完整代码):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form method="post" action="/add">
        <div>
            用户名:<input type="text" name="user"/>
        </div>
        <div>
            密码:<input type="password" name="pwd"/>
        </div>
        <div>
            性别:
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>
        <div>
            爱好:
            <input type="checkbox" name="hobby" value="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">乒乓球
        </div>
        <div>
            城市:
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            擅长领域:
            <select name="skill">
                <option value="100">Python</option>
                <option value="101">C++</option>
                <option value="102">Java</option>
            </select>
        </div>
        <div>
            备注:<textarea name="more"></textarea>
        </div>
        <input type="submit" value="submit按钮"/>
    </form>
</body>
</html>


Python(完整代码):

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/add", methods=['GET', "POST"])
def register():
    if request.method == "GET":
        return render_template("add.html")
    else:
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.get("hobby")
        city = request.form.get("city")
        skill_list = request.form.get("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        return "注册成功!"
if __name__ == '__main__':
    app.run()


案例:登录


HTML(完整代码):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <form method="post" action="/login">
        <div>
            用户名:<input type="text" name="username">
        </div>
        <div>
            密码:<input type="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>


Python(完整代码):

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/login", methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        user = request.form.get("username")
        pwd = request.form.get("password")
        print(user, pwd)
        return "登录成功"
if __name__ == '__main__':
    app.run()


总结


1.称呼


什么是HTML?

超文本标记传输语言(与浏览器搭配)


2.HTML标签(默认格式样式、以后可以通过CSS修改)


3.HTML标签与编程语言无关


  • java + HTML
  • c# + HTML
  • php + HTML
  • python + HTML


4.以上HTML标签是常用标签可完成90%开发,标签还有很多,不必逐一学会,网络上有成熟的HTML模板框架。

目录
相关文章
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
11 0
|
1月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
17 0
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符