前端开发基础（HTML基础）

前端开发基础

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

1、快速开发一个网站

pip install flask

from flask import Flaskapp = 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_templateapp = 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>

前端开发基础（HTML基础）相关推荐

【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
前端开发工程化探讨--基础篇（长文）
转载自UC资深前端工程师张云龙的github 喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧. 你好,切图仔. 不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类 ...
requestbody前端怎么传_学习前端开发前的基础知识了解「V1001」
一.什么是http协议? 什么是协议,就是一群人协商好了,统一认知的规则. [例]你,我,他,还有她他他,大家一致认定结婚的时候都要给份子钱,这种大家认同的就是协议. http协议,就规定了浏览器与互 ...
学Web前端开发需要哪些基础？零基础小白该怎么入行？
Web前端人才需求大.薪资待遇好,是公认的高薪行业.很多人想学前端却又担心学不会,学Web前端需要哪些基础?零基础小白该怎么入行?且看小编的分析. 前端开发是创建Web页面或APP等前端界面呈现给用户 ...
前端开发工程化探讨--基础篇
不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的 ...
网站前端开发必会基础知识有哪些？
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
前端三剑客-前端开发的三大基础语言
如今前端的技术更新速度越来越快,与其说更新速度不如说前端领域的边界不断被拓宽.从最初的PC端浏览器,然后是移动端,再然后是各种终端.WEB前端已经从最初的信息展示,发展成为与用户关系日益密切的应用形式 ...

前端开发基础（HTML基础）

前端开发基础

1、快速开发一个网站

2、浏览器能识别的标签

2.1 编码(head)

2.2 title(head)

2.3 标题(body)

2.4 div和span

练习题

2.5 超链接

2.6 图片

小结

前端开发基础（HTML基础）相关推荐

最新文章

热门文章