正文
Day12 HTML知识
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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="width:400px;height:400px;background-color:red;" >我是网页的头部</div>
<div style="width:400px;height:400px;background-color:blue;">我是网页的内容</div>
<div style="width: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="width:400px;height:1000px;background-color:pink;"> 孙悟空怒捶红孩儿 </p> <a id="a2">第二章</a>
<p style="width:400px;height:1000px;background-color:green;"> 孙悟空怒捶红孩儿 </p> <a id="a3">第三章</a>
<p style="width: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="width: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>
