1.html初识
- 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
- 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
- 静态网页文件扩展名：.html 或 .htm
1.1 html不是什么?
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML 使用标记标签来描述网页
1.2 html结构
- <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体内容
1.3 html标签格式
2. html 结构
<!DOCTYPE HTML>
<html>
<head>
<!--1.设置编码集-->
<meta charset="utf-8" />
<!--2.设置网站标题-->
<title>这是前端内容</title>
<!--3.设置网站图标 http://www.bitbug.net/ 在线制作ico-->
<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON" />
<!--4.设置搜索引擎抓取页面的关键字-->
<meta name="keywords" content="html在线学习,css在线学习,js在线学习" />
<!--5.设置搜索引擎抓取页面的网站描述-->
<meta name="description" content="在线学习html , css , js" />
<!--6.设置几秒之后页面跳转-->
<!--
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
-->
</head>
<body>
<!--字符实体
< <=> < 小于
> <=> > 大于
  代表的是空格
-->
5<d 8>3
5<d 8 >3
<!-- <br />代表换行 -->
<br />
11122233
<br />
44455566
<!-- <hr />代表分割线 -->
<hr />
7788
<hr />
<!-- <pre />格式化预览标签 (所有想要原型化输出的内容放到该标签中) -->
<pre>
333
+444
</pre>
</body>
</html>
3. 常用标签
<!-- 常用标签 --> <!DOCTYPE HTML> <html> <head> <title>常用标签</title> </head> <body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> 标签标签标签 <!-- 逻辑强调 w3c 带有语义上的强调 --> <strong>你好</strong> <!--粗体--> <em>世界</em> <!--斜体--> <!-- 物理强调 (只是单纯展示效果,没有语义化的概念) --> <b>你好2</b> <i>世界2</i> <hr /> h<sub>2</sub>o <!-- h2o --> x<sup>2</sup>=100 <!-- x2 = 100 --> <hr /> <p>这是一段话</p> <!-- 段落标签 --> <p>这是二段话</p> <!-- 段落标签 --> </body> </html>
4. 块状和行内标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title> 块状和行内标签 </title> </head> <body> <!-- span 和 div 用来划分 网页内容 和 网页结构 的无语义化标签 div 是块状元素 独占一行 , 可以直接设置宽高 span 是行内元素 不能独占一行,不能直接设置宽高 px 是像素单位,1px 表示一个像素点 --> <span style="color:green;background-color:yellow;"> 张俊文<span style="color:red">黄启新</span> </span> <div style="400px;height:400px;background-color:red;" >我是网页的头部</div> <div style="400px;height:400px;background-color:blue;">我是网页的内容</div> <div style="400px;height:400px;background-color:green;">我是网页的脚部</div> </body> </html>
5. 列表标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>列表标签</title> </head> <body> <!-- 无序列表 (最为常用) --> <ul type="circle"> <!-- type = square 方块 circle 空心圆--> <li>姜子牙</li> <li>我和的家乡</li> <li>夺冠</li> <li>唐人街探案3</li> </ul> <!-- 有序列表--> <ol start=5 type="i"> <!-- start=5 起始值 type="i" 代表指定罗马数字--> <li>姜子牙</li> <li>我和的家乡</li> <li>夺冠</li> <li>唐人街探案3</li> </ol> <!-- 定义列表--> <dl> <!--列表标题用dt--> <dt>女生曾经说过的谎言</dt> <!--列表内容--> <dd>不要</dd> <dd>你真坏</dd> <dd>你是个好人</dd> <dd>给你介绍个特别漂亮的姑娘</dd> </dl> </body> </html>
6. 超链接标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>超链接标签</title> </head> <body> <!-- . 代表相对当前路径 .. 代表上一级的路径 _self : 指定跳转的方式是当前窗口 _blank: 指定跳转的方式是新窗口 --> <h1>超链接标签</h1> <a href="./3.html" target="_self" > 点击我1 </a> <hr /> <a href="./3.html" target="_blank" > 点击我2 </a> <hr /> <!--显示传参--> <a href="./3.html?a=1&b=2&c=3" target="_blank" > 点击我3 </a> <hr /> <!--刷新原页面--> <a href="">点击我4</a> <hr /> <!--原页面没有刷新--> <a href="#">点击我5</a> <hr /> <!--把文件直接写在a链接中实现下载操作--> <a href="./W3CSchool.chm">点击我6</a> </body> </html>
7. 跳锚点
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>跳锚点</title> </head> <body> <h1>跳锚点练习</h1> <ul> <li><a href="#a1">第一章</a></li> <li><a href="#a2">第二章</a></li> <li><a href="#a3">第三章</a></li> </ul> <a id="a1" >第一章</a> <p style="400px;height:1000px;background-color:pink;"> 孙悟空怒捶红孩儿 </p> <a id="a2">第二章</a> <p style="400px;height:1000px;background-color:green;"> 孙悟空怒捶红孩儿 </p> <a id="a3">第三章</a> <p style="400px;height:1000px;background-color:blue;"> 孙悟空怒捶红孩儿 </p> <a href="#">回到顶部</a> <p style="height:1000px;"></p> </body> </html>
8. 图片标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>图片标签</title> </head> <body> <!-- img 属于行内块状元素 , 不能独占一行, 但可以设置宽高 如果想要等比例缩放,只调节width即可,如果同时调整宽高有可能图片失真 width 宽 height 高 --> <img src="./zhouxingchi.jpg" width="260px" height="260px" title="周星驰" /> <a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin"><img src="./zhouxingchi.jpg" width="260px" height="260px" title="周星驰" /></a> </body> </html>
9. 表格标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>表格标签 table </title> </head> <body> <!-- tr 表示一行 th 表示一个单元格(可以将文字加粗,表达标题) td 表示一个单元格 colspan : 横向合并 rowspan : 纵向合并 --> <table border="1" width="1000px"> <!--表格头thead--> <thead style="background-color:red;"> <tr> <th>姓名</th> <th>年龄</th> <th>薪水</th> <th>部门</th> </tr> </thead> <!--表格体tbody--> <tbody style="background-color:blue;"> <tr> <td>王文</td> <td>18</td> <td>20</td> <td>python</td> </tr> <tr> <td>陈勇</td> <td>19</td> <td>30</td> <td>运维</td> </tr> <tr> <td>黄金生</td> <td>20</td> <td>40</td> <td>网络</td> </tr> </tbody> <!--表格脚tfoot--> <tfoot style="background-color:yellow;"> <tr> <td>黄启新</td> <td>98</td> <td>50</td> <td>高管</td> </tr> </tfoot> </table> <!--对单元格进行合并 --> <table border="1" width="1000px"> <!--表格头thead--> <thead style="background-color:red;"> <tr> <th>姓名</th> <th>年龄</th> <th>薪水</th> <th>部门</th> </tr> </thead> <!--表格体tbody--> <tbody style="background-color:green;"> <tr> <td colspan="2"> 左右合并 </td> <td>20</td> <td rowspan="4">python</td> </tr> <tr> <td>陈勇</td> <td>19</td> <td>30</td> </tr> <tr> <td>黄金生</td> <td>20</td> <td>40</td> </tr> <tr> <td>黄启新</td> <td>98</td> <td>50</td> </tr> </tbody> <!--表格脚tfoot--> <tfoot style="background-color:yellow;"> <tr> <td colspan="4">横向合并</td> </tr> </tfoot> </table> </body> </html>
10. table属性
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title> table 的方向属性 </title> </head> <body> <!-- cellspacing td与td之间的间距(单元格之间的间距) cellpadding td与其中内容之间的间距 align 水平对齐 left center right valign 垂直对齐 top middle bottom --> <table border = "1" width = "400px" height = "200px" cellspacing = "0" cellpadding="0"> <tr align="right" valign="top"> <td>张三</td> <td>90</td> <td>100万</td> <td>辽宁</td> </tr> <tr align="left" valign = "bottom"> <td>李四</td> <td>90</td> <td>100万</td> <td>丹东</td> </tr> <tr align="center" valign="middle"> <td>王五</td> <td align="center" valign="bottom">90</td> <td>100万</td> <td>广东</td> </tr> </table> </body> </html>
11. iframe子窗口
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>iframe 子窗口 </title> </head> <body> <iframe src="" name="zichuangkou" width="800px" height="500px"></iframe> <hr /> <a href="http://www.baidu.com" target="zichuangkou" > 点击我跳转百度 </a> <hr /> <a href="9.html" target="zichuangkou" > 点击我跳转9.html </a> <hr /> <a href="10.html" target="zichuangkou" > 点击我跳转10.html </a> </body> </html>
12. 音视频标签
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>音视频标签</title> </head> <body> <!-- audio --> <video src="ceshi1.mp4" controls = "controls"> 抱歉,您的浏览器不支持...视频播放.. </video> <audio src="ceshi2.mp3" controls = "controls"> 抱歉,您的浏览器不支持...音频播放.. </audio> </body> </html>
13. 表达操作
【模拟服务器代码】
from flask import Flask , render_template , request , redirect """安装flask pip3 install flask""" print(__name__) # (1) 实例化一个flask的应用对象 app = Flask(__name__) # (2) 定义路由(url) """ The return type must be a string, dict, tuple""" @app.route("/") def index(): return "<h1 style='color:red'>服务器运转正常~ flask已经启动~</h1>" # return 1233 error @app.route('/ceshi1') def func(): # 获取访问的方法(get , post) print(request.method , "<====================>") # GET strvar = """ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <!-- action 表示吧数据提交给哪个地址进行处理 method 表示数据以哪种方式进行提交 get 显示提交数据(参数在地址栏上,参数大小2k~8k左右) post 隐式提交数据(参数不在地址上,参数大小没有限制) input 行内块状元素 --> <form action="" method="get"> 账号:<input type="text" name="username" value="" /> <br /> 密码:<input type="password" name="username" value="" /> <br /> <input type="submit" value="登录" style="color:red;background-color:yellow;" /> </form> </body> </html> # return strvar """ """ # render_template 操作过程; 文件夹的名称必须是templates with open("./templates/1.form表单.html" mode="rb") as fp: res = fp.read() return res.decode() """ return render_template("1.form表单.html") # return strvar # get方法提交到 http://127.0.0.1:9008/ceshi2 地址 (路由默认以GET方法接收数据) @app.route('/ceshi2',methods=("GET",)) def func2(): """ """ if request.method == "GET": return "ok,就是我 GET" # post方法提交到 http://127.0.0.1:9008/ceshi2 地址 @app.route('/ceshi2',methods=("POST",)) def func3(): if request.method == "POST": # to_dict 把响应的数据转换成字典 dic = request.values.to_dict() return dic # return "ok,就是我 post" @app.route('/ceshi3',methods=("GET",)) def func4(): if request.method == "GET": return render_template("2.单选框_复选框_下拉框.html") @app.route('/ceshi4',methods=("POST",)) def func5(): if request.method == "POST": # 获取表单对应的数据,通过to_dict转化成字典,但无法获取到复选框的所有内容 # return request.values.to_dict() # 获取复选框时,使用getlist方法,但是返回时需要字典,借助enumerate间接变成字典 # print(request.values.getlist("hobby")) return dict( enumerate(request.values.getlist("hobby")) ) @app.route('/ceshi5',methods=("POST","GET")) def func6(): if request.method == "GET": return render_template("3.文件上传.html") if request.method == "POST": # 获取上传图片的数据信息 tupian_obj = request.files.get("myfiles") # 获取上传文件的名字 print(tupian_obj.filename) # 保存上传的数据 tupian_obj.save( tupian_obj.filename ) # 按照这个名字保存数据 print(request.values.to_dict) # return request.values.to_dict() strvar = """ 恭喜你上传成功,3秒后自动跳转到百度!!! <meta http-equiv="refresh" content="0;url=http://www.baidu.com" /> """ # return strvar # redirect 重定向 # return redirect("http://www.baidu.com") # return redirect("/ceshi2") # (3) 启动服务 app.run(host="127.0.0.1" ,port=9008,debug=True)
（1）form表单
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>form表单</title> </head> <body> <!-- action 表示吧把数据提交给哪个地址进行处理 method 表示数据以哪种方式进行提交 get 显示提交数据(参数在地址栏上,参数大小2k~8k左右) post 隐式提交数据(参数不在地址上,参数大小没有限制) input 行内块状元素 --> <form action="/ceshi2" method="post"> 账号:<input type="text" name="username" value="" /> <br /> 密码:<input type="password" name="password" value="" /> <br /> <input type="submit" value="登录" style="color:red;background-color:yellow;" /> </form> </body> </html>
（2）单选框_复选框_下拉框
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>form表单</title> </head> <body> <!-- action 表示吧把数据提交给哪个地址进行处理 method 表示数据以哪种方式进行提交 get 显示提交数据(参数在地址栏上,参数大小2k~8k左右) post 隐式提交数据(参数不在地址上,参数大小没有限制) input 行内块状元素 --> <form action="/ceshi2" method="post"> 账号:<input type="text" name="username" value="" /> <br /> 密码:<input type="password" name="password" value="" /> <br /> <input type="submit" value="登录" style="color:red;background-color:yellow;" /> </form> </body> </html>
（3）文件上传
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>文件上传</title> </head> <body> <!-- 文件上传的表单方法必须是post,并且指定上传数据的编码格式 multipart/form-data --> <form action="/ceshi5" method="post" enctype = "multipart/form-data" > 头像:<input type="file" name="myfiles" /> <hr /> <!-- 大段文本框 --> 个人介绍: <textarea name="info" style="100px;height:20px;"></textarea> <!-- 隐藏的表单框 => 隐藏提交的id --> <hr /> <input type="hidden" name="sid" value="23" /> <!-- update 表明 set name = "王文" where id = 23 --> <input type="submit" value="提交" /> </form> </body> </html>
（4）input属性
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>input属性</title> </head> <body> <!-- placeholder 灰色输入提示 --> <!-- required 必填 --> <!-- readonly 只能读不能改 可以被提交 --> <!-- disabled 只能读不能改 不会被提交 --> <!-- size 设置输入框的大小 --> <!-- maxlength 输入框最多可以输入多少字符 --> <!-- minlength 输入框最少需要输入多少字符 --> <!-- autofocus 自动获取焦点, 整个页面只能有一个 --> <!-- tabindex 设置tab的切换顺序 --> <form action="" method="post"> 用户:<input type="text" name="username" placeholder="请输入用户名" disabled tabindex="5" /> <br /> 密码:<input type="password" name="password" required tabindex="4" /> <br /> 年龄:<input type="text" name="age" value="18" readonly size="30" tabindex="3"/> <br /> 班级:<input type="text" name="classroom" value="" maxlength="4" minlength ="2" tabindex="2" /> <br /> 祖籍:<input type="text" name="country" value="" autofocus tabindex="1" /> <br /> <input type="submit" value="提交" /> </form> </body> </html>