网站开发的目的 实习报告,企业宣传片制作软件app,有引导的网站,网站开发国内外研究名人说#xff1a;莫道桑榆晚#xff0c;为霞尚满天。——刘禹锡#xff08;刘梦得#xff0c;诗豪#xff09; 创作者#xff1a;Code_流苏(CSDN)#xff08;一个喜欢古诗词和编程的Coder#x1f60a;#xff09; 目录 一、HTML1、前端引入和HTML标签①前端引入②浏览… 名人说莫道桑榆晚为霞尚满天。——刘禹锡刘梦得诗豪 创作者Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 目录 一、HTML1、前端引入和HTML标签①前端引入②浏览器能识别的标签 2、HTML - 超链接①超链接 3、HTML - 图片①图片②小结 4、HTML - 表格和列表等①列表标签②关于HTML注释③表格标签 5、HTML - 表单标签①input系列②下拉框③多行文本④小结 6、HTML - form表单和提交7、HTML-案例①Python代码Flask框架②HTML代码③总结 一、HTML
1、前端引入和HTML标签
①前端引入
安装fllask
pip install flask#从flask库中导入Flask类
from flask import Flask
#创建一个简单的Flask应用app Flask(__name__)app.route(/show/info)
def index():return 中国联通if __name__ __main__:app.run()咱们的网站与别人的不一样
浏览器可以识别很多标签数据例如h1中国/h1 ----》浏览器可以看到加大加粗span stylecolor:red;联通/span ----》浏览器看见字体颜色变红
如果我们能把浏览器所能识别的标签都学会我们在网站就可以控制页面到底长什么样子。Flask框架为了让咱们写标签方便支持将字符串写入到文件里面
#从flask库中导入Flask类
from flask import Flask,render_template
#创建一个简单的Flask应用app Flask(__name__)# 创建了网址 /show/info 和函数 index 的对应关系
# 以后用户在浏览器上访问 /show/info网站自动执行 index
app.route(/show/info)
def index():# return 中h1国/h1联通# Flask内部会自动打开这个文件并读取内容将内容给用户返回# 默认去当前项目目录的templates文件夹中寻找return render_template(index.html)
if __name__ __main__:app.run()②浏览器能识别的标签
1.编码 charset head
meta charset UTF-82.标题 title head
headmeta charsetUTF-8title我的联通/title
/head3.标题
h11级标题/h1
h22级标题/h2
h33级标题/h3
h44级标题/h4
h55级标题/h5
h66级标题/h64.div和span
div内容
/divspanasdfa/spandiv一人占一行。 【块级标签】
!DOCTYPE html
html langen
headmeta charsetUTF-8title我的联通/title
/head
bodydiv山东蓝翔/divdiv挖掘机哪家强/div
/body
/htmlspan自己有多大就占多大。【行内标签内联标签】
!DOCTYPE html
html langen
headmeta charsetUTF-8title我的联通/title
/head
bodyspan山东蓝翔/spanspan挖掘机哪家强/span
/body
/html注意这两个标签比较简洁未来引入CSS样式后会更好看。
综合练习
!DOCTYPE html
html langen
headmeta charsetUTF-8title我的联通/title
/head
bodyh1中国联通/h1divspan stylecolor:red时间/spanspan2023-11-11/span/divdiv北京天坛公园祈年殿前游客密密麻麻上海南京路上游人摩肩接踵西安大唐不夜城里游人如织成都大熊猫繁育基地门口早早排起长队……热闹的人群和丰富的文旅活动共同织就了春节繁华的旅游画卷。“旅游式过年”已成为新年俗。这个春节人们都去了哪里央视在“数据看春运”系列报道中公布的一组由中国联通智慧足迹提供的数据为我们揭开了答案。/divh2河南联通分部/h2divspan stylecolor:red时间/spanspan2023-11-11/span/divdiv重庆、武汉、西安、北京、开封等城市成为当下热门的文旅目的地。当地具有文化内涵和历史底蕴的特色景点如开封宋都皇城、武汉楚河汉街、石家庄正定古城、北京前门大街、重庆解放碑洪崖洞等是大家最愿意去的热门景点。/div
/body
/html2、HTML - 超链接
①超链接
跳转到其它网站
a hrefhttps://www.chinaunicom.com.cn/点击跳转/a跳转到自己网站的其它地址
a hrefhttp://127.0.0.1:5000/get/news点击跳转/a
a href/get/news点击跳转/a# 当前页面打开
a href/get/news点击跳转/a# 新的Tab页面打开
a href/get/news target_blank点击跳转/a3、HTML - 图片
①图片
img src图片地址 /直接显示别人的图片地址可能有防盗链无法显示
img srccontenthttps://picx.zhimg.com/50/v2-0e28f8d5f385f53f8560890bbae5e79b_720w.jpg?sourceb6762063 /显示自己的图片
img src图片地址 /
- 自己项目中创建static目录图片要放在static文件中
- 在页面上引入图片img src /static/1.jpg关于设置图片的高度和宽度
img src图片地址 styleheight:100px; width:200px; /
img src图片地址 styleheight:10%; width:20%; /!DOCTYPE html
html langen
headmeta charsetUTF-8title我的联通/title
/head
bodyh1中国联通/h1divspan stylecolor:red时间/spanspan2023-11-11/span/divdiv北京天坛公园祈年殿前游客密密麻麻上海南京路上游人摩肩接踵西安大唐不夜城里游人如织成都大熊猫繁育基地门口早早排起长队……热闹的人群和丰富的文旅活动共同织就了春节繁华的旅游画卷。“旅游式过年”已成为新年俗。这个春节人们都去了哪里央视在“数据看春运”系列报道中公布的一组由中国联通智慧足迹提供的数据为我们揭开了答案。a hrefhttps://www.chinaunicom.com.cn/点击跳转/aimg srchttps://picx.zhimg.com/50/v2-0e28f8d5f385f53f8560890bbae5e79b_720w.jpg?sourceb6762063 styleheight:100px; width:200px; //divh2河南联通分部/h2divspan stylecolor:red时间/spanspan2023-11-11/span/divdiv重庆、武汉、西安、北京、开封等城市成为当下热门的文旅目的地。当地具有文化内涵和历史底蕴的特色景点如开封宋都皇城、武汉楚河汉街、石家庄正定古城、北京前门大街、重庆解放碑洪崖洞等是大家最愿意去的热门景点。img src https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402191626527.jpg /a href/get/news点击跳转/a/div/body
/html②小结
学习的标签
h1/h1
div /div
span/span
a/a
img /划分
- 块级标签h1/h1div/div
- 行内标签span/spana/aimg /嵌套 divspanxxx/spanimg /a/a/div !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1商品列表/h1a hrefhttps://www.mi.com/shop/buy/detail?product_id19436 target_blankimg src/static/a1.png stylewidth: 150px/aa hrefhttps://www.mi.com/shop/buy/detail?product_id19432 target_blankimg src/static/a2.png stylewidth: 150px/aa hrefhttps://www.mi.com/shop/buy/detail?product_id19437 target_blankimg src/static/a3.png stylewidth: 150px/a
/body
/html4、HTML - 表格和列表等
①列表标签
1.无序列表
ulli中国移动/lili中国联通/lili中国电信/li
/ul2.有序列表
olli中国移动/lili中国联通/lili中国电信/li
/ol②关于HTML注释
在HTML中注释是用来向代码添加说明的但它们不会在网页上显示。注释对于开发者来说非常有用因为它们可以用来解释代码的功能或目的或者暂时禁用某段代码而不完全删除它。
要在HTML中添加注释你需要使用以下语法
!-- 这是一个注释它不会在网页上显示。 --任何放在!--和--之间的内容都会被浏览器忽略不会在网页上渲染。这意味着你可以在HTML文档中的任何位置添加注释无论是在元素内部、元素之间还是在文档的头部或尾部。
例如
!DOCTYPE html
html
headtitle示例页面/title!-- 这是head部分的注释 --
/head
body!-- 页面主体的开始 --p这是一个段落。/p!-- p这是一个被注释掉的段落不会显示。/p --!-- 页面主体的结束 --
/body
/html③表格标签
!DOCTYPE html
html langen
headtitleTitle/titlemeta charsetUTF-8styletable {border-collapse: collapse; /* 将边框合并为单一边框避免双线边框的出现 *//*width: 100%; !* 根据需要设置表格宽度 *!*/}th, td {border: 1px solid black; /* 设置单元格边框为黑色1px宽 */padding: 8px; /* 设置内边距根据需要调整 */text-align: left; /* 文字对齐方式 */}th {background-color: #f2f2f2; /* 设置表头背景颜色可根据需要调整 */}/style/head
bodytabletheadtrthID/thth姓名/thth年龄/th/tr/theadtbodytrtd10/tdtd张三/tdtd21/td/trtrtd11/tdtd李四/tdtd22/td/trtrtd12/tdtd王五/tdtd23/td/trtrtd13/tdtd火钳/tdtd22/td/trtrtd14/tdtd刘明/tdtd21/td/tr/tbody
/table/body
/html 综合案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyletable {border-collapse: collapse; /* 将边框合并为单一边框避免双线边框的出现 *//*width: 100%; !* 根据需要设置表格宽度 *!*/}th, td {border: 1px solid black; /* 设置单元格边框为黑色1px宽 */padding: 8px; /* 设置内边距根据需要调整 */text-align: left; /* 文字对齐方式 */}th {background-color: #f2f2f2; /* 设置表头背景颜色可根据需要调整 */}/style
/head
bodyh1用户列表/h1table border1theadtrthID/thth头像/thth姓名/thth邮箱/thth更多信息/thth操作/th/tr/theadtbodytrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd张三/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd李四/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd王五/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd火钳/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/tr/tbody/table
/body
/html5、HTML - 表单标签
①input系列
!--文本框--
input typetext
!--密码框--
input typepassword
!--上传文件--
input typefile
!--单选框--
input typeradio namen1男
input typeradio namen1女
!--复选框--
input typecheckbox篮球
input typecheckbox足球
input typecheckbox乒乓球
input typecheckbox棒球
!--按钮--
input typebutton value提交
!--表单--
input typesubmit value提交②下拉框
!--单选--
selectoption/optionoption北京/optionoption上海/option option深圳/option
/select
!--多选--
select multipleoption/optionoption北京/optionoption上海/option option深圳/option
/select③多行文本
textarea/textarea
textarea rows5/textarea综合案例用户注册
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1用户注册/h1div用户名: input typetext/divdiv密码: input typepassword/divdiv性别input typeradio namen1男input typeradio namen1女/divdiv爱好input typecheckbox篮球input typecheckbox足球input typecheckbox乒乓球/divdiv城市selectoption北京/optionoption上海/optionoption广州/optionoption深圳/option/select/divdiv擅长领域select multipleoption学习/optionoption睡觉/optionoption吃饭/optionoption旅游/option/select/divdiv备注textarea/textarea/divdivinput typebutton valuebutton按钮input typesubmit valuesubmit提交/div
/body
/html④小结
网站请求的流程 各类标签
h div span a img ul ol li table input textarea select网络请求
在浏览器的URL重写入地址点击回车访问。
浏览器会发送数据过去本质上发送的是字符串
GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n浏览器向后端发送请求时 GET请求【URL方法/表单提交】 现象GET请求、跳转、向后台传入数据数据会拼接在URL上 https://www.baidu.com/s?wd%E5%AE%89%E5%8D%93rsv_spt1rsv_iqid0xdfd4d15c003351e9issp1f8rsv_bp1rsv_idx2ieutf-8tnbaiduhome_pgrsv_enter1rsv_dltbrsv_sug38rsv_sug14rsv_sug7100rsv_sug20rsv_btypeiprefixsug%25E5%25AE%2589%25E5%258D%2593rsp7inputT1776rsv_sug41895注意GET请求数据会在URL中体现。 POST请求【表单提交】 现象提交数据不在URL中体现而是在请求体form data中
6、HTML - form表单和提交
综合案例用户注册
新创建项目创建Flask代码
# -*- coding: utf-8 -*-
# Time : 2024-02-20 10:55from flask import Flask,render_template,requestapp Flask(__name__)app.route(/register,methods[GET,POST])
def register():if request.method GET:return render_template(register.html)else:user request.form.get(user)pwd request.form.get(pwd)gender request.form.get(gender)hobby_list request.form.getlist(hobby)city request.form.get(city)skill_list request.form.getlist(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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1用户注册/h1form action/register methodpostdiv用户名: input typetext nameuser/divdiv密码: input typepassword namepwd/divdiv性别input typeradio namegender value1男input typeradio namegender value2女/divdiv爱好input typecheckbox namehobby value10篮球input typecheckbox namehobby value20足球input typecheckbox namehobby value30乒乓球input typecheckbox namehobby value40棒球/divdiv城市select namecityoption valueBeijing北京/optionoption valueShanghai上海/optionoption valueShenzhen深圳/optionoption/option/select/divdiv擅长领域select nameskill multipleoption value100吃饭/optionoption value101睡觉/optionoption value102打球/option/select/divdiv备注textarea namemore/textarea/divdivinput typesubmit value注册/div/form
/body
/html页面上的数据想要提交到后台
form标签包裹要提交的数据。 提交方式method“get”提交的地址action“/xxx/xxx/xx”在form标签里面必须有一个submit标签 在form里面的一些标签input/select/textarea 一定要写name属性 7、HTML-案例
①Python代码Flask框架
# -*- coding: utf-8 -*-
# Time : 2024-02-20 10:55from flask import Flask,render_template,requestapp Flask(__name__)app.route(/register,methods[GET,POST])
def register():if request.method GET:return render_template(register.html)else:user request.form.get(user)pwd request.form.get(pwd)gender request.form.get(gender)hobby_list request.form.getlist(hobby)city request.form.get(city)skill_list request.form.getlist(skill)more request.form.get(more)print(user,pwd,gender,hobby_list,city,skill_list,more)return 注册成功 app.route(/login,methods[GET,POST])
def login():if request.method GET:return render_template(login.html)else:print(request.form)user request.form.get(username)pwd request.form.get(password)print(user,pwd)return 登录成功app.route(/index,methods[GET])
def index():return render_template(index.html)if __name__ __main__:app.run()②HTML代码
1.注册 register.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1用户注册/h1form action/register methodpostdiv用户名: input typetext nameuser/divdiv密码: input typepassword namepwd/divdiv性别input typeradio namegender value1男input typeradio namegender value2女/divdiv爱好input typecheckbox namehobby value10篮球input typecheckbox namehobby value20足球input typecheckbox namehobby value30乒乓球input typecheckbox namehobby value40棒球/divdiv城市select namecityoption valueBeijing北京/optionoption valueShanghai上海/optionoption valueShenzhen深圳/optionoption/option/select/divdiv擅长领域select nameskill multipleoption value100吃饭/optionoption value101睡觉/optionoption value102打球/option/select/divdiv备注textarea namemore/textarea/divdivinput typesubmit value注册/div/form
/body
/html2.登录 login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1用户登录/h1form methodpost action/login用户名input typetext nameusername密码input typetext namepasswordinput typesubmit value提交/form
/body
/html3.首页 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyletable {border-collapse: collapse; /* 将边框合并为单一边框避免双线边框的出现 *//*width: 100%; !* 根据需要设置表格宽度 *!*/}th, td {border: 1px solid black; /* 设置单元格边框为黑色1px宽 */padding: 8px; /* 设置内边距根据需要调整 */text-align: left; /* 文字对齐方式 */}th {background-color: #f2f2f2; /* 设置表头背景颜色可根据需要调整 */}/style
/head
bodyh1欢迎使用xxx系统/h1table border1theadtrthID/thth头像/thth姓名/thth邮箱/thth更多信息/thth操作/th/tr/theadtbodytrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd张三/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd李四/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd王五/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/trtrtd1/tdtdimg srchttps://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg alt styleheight: 50px/tdtd火钳/tdtdnasx1357163.com/tdtda hrefhttps://www.nowcoder.com target_blank点击查看详细/a/tdtd编辑删除/td/tr/tbody/table
/body
/html③总结
1.称呼
- 浏览器能够识别的标签。× 不专业
- HTML标签√什么是HTML
超文本传输语言与浏览器搭配2.HTML标签默认格式样式、以后通过手段CSS可以修改
3.HTML标签与编程语言无关
java HTMLC# HTMLPHP HTMLPython HTML…
4.注意HTML标签较多不必一下全学会先学会常用的剩下的等用到的时候自己查找使用即可 很感谢你能看到这里如有相关疑问还请下方评论留言。 笔记记录来源B站 python的web开发全家桶django前端数据库 Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 如果对大家有帮助的话希望大家能多多点赞关注这样我的动力会更足
