HTML笔记+案例

已于 2023-01-25 00:06:39 修改
阅读量1k 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 html
于 2023-01-15 00:26:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq56789/article/details/128687319
版权
本文介绍了前端开发的基础，包括使用HTML、CSS和JavaScript构建网页，以及利用Flask和Django框架处理Web请求。还涉及了MySQL数据库的基础知识。文章提供了快速上手Flask的示例，解释了如何通过添加HTML标签美化网站，并逐步引导读者学习各种HTML标签，如标题、链接、图片、列表和表单。此外，文章还讨论了网络请求的GET和POST方法，以及用户注册和登录的案例。
摘要由CSDN通过智能技术生成

前端开发 第一节HTML标记语言

目的：开发一个平台（网站）
前端开发：HTML、CSS、JavaScript
Web框架：接收请求并处理
- Flask、Djiango
MySQL数据库：存储数据的地方

快速上手：
	基于Flask Web框架快速搭建一个网站

深入学习：
	基于Djiango框架（主要）

1.快速开发网站

安装Flask框架包：

pip install flask

快速上手案例：

from flask import Flask

# Flask是一个类，实例化一个对象为app
app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    return "中国联通"


# 入口
if __name__ == '__main__':
    app.run()

网站如何变好看加上修饰？

浏览器可以识别很多标签+数据，例如：
	中<h1>国</h1>							浏览器识别加大加粗
	<span style='color:red;'>联通</span>	浏览器识别字体变红色
	
如果我们能把浏览器识别的所有的标签学会，我们在网站就可以控制页面到底张什么样子。

from flask import Flask

# Flask是一个类，实例化一个对象为app
app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    # return "中国联通"
    return "中<h1>国</h1><span style='color:red;'>联通</span>"


# 入口
if __name__ == '__main__':
    app.run()

Flask框架为了让我们写便签方便，支持讲字符串写入文件里。

导入render_template，在函数中返回HTML文件：

from flask import Flask, render_template

# Flask是一个类，实例化一个对象为app
app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    # return "中国联通"
    # return "中<h1>国</h1><span style='color:red;'>联通</span>"
    return render_template("index.html")


# 入口
if __name__ == '__main__':
    app.run()

index文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>中国联通</h1>
    <h3>广西联通</h3>
</body>
</html>

2.浏览器能识别的标签

2.1 编码（head）

<meta charset="UTF-8">

2.2 title（head）

<title>Title</title>

2.3 标题

<body>
   <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

2.4 div和span

<div>内容</div>
<span>xxx</span>

  • div，用此标签的内容占一整行。称为：【块级标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>上海</div>
    <div>北京</div>
</body>
</html>

    在这里插入图片描述

  • span，自己多大占多少。称为：【行内标签、内联标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>上海</span>
    <span>北京</span>
</body>
</html>

    在这里插入图片描述

2.5 超链接

跳转到其他网站
<a href="https://www.baidu.com"></a>

跳转到自己网站其他的地址
<a href="http://127.0.0.1/5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

在新的页面打开
<a href="/get/news target="_blank" ">点击跳转</a>

2.6 图片

<img src="图片地址"/>

直接显示别人的图片地址：
<img src="https://pic1.zhimg.com/v2-72ecb4f1094b19ad162950193e0ba9b4_200x0.jpg?source=7e7ef6e2"/>

显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
<img src="自己图片地址" />
<img src="/static/1.png" />
	- 给图片设置高度和宽度
	如果单独定义高度或宽度，将按比例显示。高度和宽度都自定义则按照设置数强制放大或缩小（图片可能失真）
<img style="height: 100px;width: 150px;" src="/static/pc.png">
	- 通过百分率设置高度和宽度
<img style="height: 10%;width: 20%;" src="/static/pc.png">

小结

学习的标签：

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

分类：

- 块级标签
	<h1></h1>
	<div></div>
- 行内标签
	<span></span>
	<a></a>
	<img />

嵌套：

<div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

a标签和img标签嵌套案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h1>商品</h1>
<body>
<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a1.png">
</a>

<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a2.png">
</a>

<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a3.png">
</a>

</body>
</html>

在这里插入图片描述

2.7 列表

无序列表：

<h1>运营商列表</h1>
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

在这里插入图片描述

有序列表：

<h1>运营商列表</h1>
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

在这里插入图片描述

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模板框架。

Brucye
关注
专栏目录
HTML5笔记+案例
sumuqi的博客
06-29 3202
HTML 一 . html简介 1.HTML是什么？ HTML:hyper text makrup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检查信息 使用表单获取用户数据，实现交互 3.版本 W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准 两个版本：HTML 4.0.1、
【学习笔记25】画布canvas+案例
m0_60525480的博客
09-16 1878
canvas属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像 属性： width 默认值 300px height 默认值 150px 注意点：canvas需要写闭合标签 <canvas></canvas> 一般不建议使用css设置它的宽高 方法： ...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
HTML入门学习笔记+案例
itboy
02-21 6万+
一、HTML简介 1.HTML是什么？ HTML:hyper text markup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检索信息 使用表单获取用户的信息，实现交互 3.版本 W3C:world wide web consortium...
HTML入门学习笔记 （案例+详解）
weixin_61370021的博客
03-28 3346
HTML入门笔记目录1、HTML是什么？2、什么是HTML标签？3、什么是HTML文档？ 1、HTML是什么？ HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 2、什么是HTML标签？ HTML 标签是由尖括号包围的关键词 HTML 标签通常是成对出现的 标签对中的第一个标签是开始标签，第二个标签是结束
HTML+CSS案例大全之HTML
weixin_62575733的博客
05-07 1250
作者本人做的笔记，大家偶尔可以复习一下。
RabbitMQ【笔记整理+代码案例】
weixin_44981126的博客
07-12 8369
RabbitMQ【笔记整理+代码案例】
HTML标签及案例超详细笔记
2401_84091938的博客
05-12 625
dl(defination list)：定义列表dt(defination title)：定义标题dd(defination description) ：定义描述定义标题定义描述定义标题定义描述2.9 超链接标签超链接可以是文本也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分；a标签href="跳转的地址"跳转外网需要添加协议target：* \_self：在当前窗口直接打开* \_blank：新建一个窗口打开这个资源地址。
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4557
HTML/CSS笔记#自用#尚硅谷#李立超
HTML思维导图+学习笔记+实际案例
01-08
HTML思维导图 出门要戴上口罩。 （1）html标签是以尖括号关键字成对出现，有开始标签和结束标签，支持正确嵌套 （2）大部分标签是有属性的 属性格式：属性=“属性值” 多个属性之间用空格隔开 （3）空标签：功能...
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可以找到学习这两门语言的详细资源，包括理论知识和实践案例。 HTML是网页内容的结构标记语言，它定义了网页的基本元素，如标题、段落、链接、图片等。学习HTML首先...
HTML+CSS知识笔记、分析案例
05-14
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选； CSS入门容易，精通难。...所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。 会持续更新~
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 430
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1088
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 923
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 710
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 954
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
JavaScript 实现文本转语音功能
bjjgff的博客
11-08 516
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！相关文章你从未见过的 10 个令人惊叹的 JavaScript 技巧HTML+CSS+JS 实现动态模态超级英雄卡片效果使用 HTML 和 CSS 创建 3D 菜单效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Brucye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值