前端开发基础（HTML基础）

最新推荐文章于 2023-05-23 19:58:37 发布

洪同学

最新推荐文章于 2023-05-23 19:58:37 发布

阅读量1k

点赞数 2

分类专栏：前端开发笔记文章标签： 1024程序员节 html 前端 flask

本文链接：https://blog.csdn.net/HY2640044908/article/details/127504026

版权

前端开发笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端开发基础

目的：开发一个平台（网站）
	- 前端开发：HTML、CSS、JavaScript
	- Web框架：接收请求并处理
	- MySQL数据库：存储数据的地方
	
快速上手：
	基于Flask Web框架让你快速搭建一个网站出来
深度学习：
	基于Django框架（主要）

1、快速开发一个网站

pip install flask

from flask import Flask

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()

咱们网站与别人的不一样：

别人的好看vs咱们的难堪

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

Flask 框架为了咱们写标签方便，支持将字符串写入到文件里。
咱们网站与别人的不一样：

from flask import Flask,render_template

app = Flask(__name__)

# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info ,网站自动执行 index
@app.route('/show/info')
def index():
    # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
    # 默认：取当前项目目录的templates文件夹中找
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

2、浏览器能识别的标签

2.1 编码(head)

<meta charset="UTF-8">

2.2 title(head)

<title>YangHong</title>

2.3 标题(body)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.4 div和span

<div>内容1</div>

<span>内容2</span>

div：一个人占一整行。【块级标签】

<!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>YangHong</title>
</head>
<body>
    <div>海南师范大学</div>
    <div>海南大学</div>
</body>
</html>

span：自己多大占多大。【行内标签，内联标签】

<!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>YangHong</title>
</head>
<body>
    <span>海南师范大学</span>
    <span>海南大学</span>
</body>
</html>

注意：这两个标签比较素+CSS样式。

练习题

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <Title>我的电信</Title>
</head>
<body>
    <h1>中国电信</h1>
    <div>
        <span style="color: red;">时间：</span>
        <span>2022年9月4日</span>
    </div>
    <div>
        人工智能已经成为新一轮科技革命和产业变革的引领性力量，是推动科技跨越发展、产业优化升级、生产力整体跃升的核心驱动力。中国电信围绕云网融合3.0新阶段，集聚AI+5G+云+安全+绿色五大要素，构筑人工智能时代的智慧社会基石。
    </div>
    <h2>海南电信</h2>
    <div>
        <span style="color: red;">时间：</span>
        <span>2022年9月4日</span>
    </div>
    <div>
        承接国家“东数西算”，天翼云持续迭代升级。建设覆盖全国的、安全的、智能的、高速互联的分布式云计算网络，进一步打通跨行业、跨地区、跨层级的算力资源，引导算力资源合理布局，实现产业结构优化提升。夯实“2+4+31+X+O”资源布局，自研分布式云操作系统，已经实现对算力、算法、数据进行统一编排和调度。依托天翼云提供一云多态、一云多芯、一张云网、统一云网操作系统、统一应用分发、统一运维监控一致体验的服务。
    </div>
</body>
</html>

2.5 超链接

跳转到其他网站
<a href="http://www.chinatelecom.com.cn/news/02/">点击跳转</a>

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

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

2.6 图片

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

直接显示别人的图片地址 (防盗链)
<img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&form=IQFRBA&id=1C8280D2D75B8653FE4F87817387F57189B5AA41&first=1&tsc=ImageHoverTitle&disoverlay=1" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static中
	- 在页面上引入图片
	<img src="/static/view.jfif" />

关于设置图片的高度和宽度

<img src="图片地址" style="height: 100px;width: 200px;" />
<img src="图片地址" style="height: 10%;width: 20%;" />

小结

学习的标签

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

划分

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

嵌套

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

洪同学

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端开发基础（HTML基础）

前端开发基础（HTML基础）
复制链接

扫一扫

专栏目录