前端开发 第一节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>
HTML笔记+案例（下）：https://developer.aliyun.com/article/1427810
