HTML笔记+案例(上)

简介: HTML笔记+案例

前端开发 第一节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

目录
相关文章
|
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 运算符