目录
HTML
1 HTML简介
HTML是超文本标记语言
如果想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
HTML就是书写网页的一套标准
2 HTML语法
2.1 注释方法
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
2.2 HTML文档结构
<html>
<head>
头内容
</head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body>
体内容
</body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
PS:文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意:
HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
2.3 两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
2.4 标签的分类
2.4.1 分类1
① 双标签
② 单标签(自闭合标签)
<h1></h1> 双标签
<a href="https://www.mzitu.com/"></a> 双标签
<img/> 单标签(自闭合标签)
2.4.2 分类2
① 块儿级标签
② 行内标签
# 1 块儿级标签:独占一整行
例如: h1~h6, p, div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果嵌套了p标签,问题也不大,因为浏览器会自动帮你解开
(因为浏览器是直接面向用户的,不会轻易的报错,哪怕有报错,用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
例如: i u s b span
行内标签不能嵌套块儿级标签,可以嵌套行内标签
2.4.3 分类3
① head内常用标签
② body内常用标签
tips:
在书写HTML代码的时候 , 只需要写标签名 然后tab就能自动补全
`
# 1. head内常用标签
title: 网页标题
style: 内部书写css代码
script: 内部书写js代码或引入外部js文件
link: 引入外部css文件
meta name="keywords" content='':写入搜索引擎能搜索到该网页的关键字
meta name="description" content='':写入搜索引擎搜索到该网页时显示的描述性信息
# 1. head内常用标签
<title>Title</title> 网页标题(浏览器的标签页上的名字)
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
2.5 body内常用标签及特殊语法
在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
2.5.1 基本标签
<h1>我是h1</h1> (heading标题)1～6级标题 块儿标签
<b>加粗</b> (blod加粗)行内标签
<i>斜体</i> (italic斜体)行内标签
<u>下划线</u> (underline下划线)行内标签
<s>删除线</s> (strikethrough删除线)行内标签
<p>段落</p> (paragraph段落)块儿标签
<br> 换行 (Barter rabbet换行 空标签)
<hr> 水平分割线 (horizontal rule水平分割线)块儿标签
2.5.2 特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
® ®商标
2.5.3 常用标签
<div>占位块儿标签</div>
<span>占位行内标签</span>
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
2.5.4 img标签
# 图片标签 image
<img src="" alt="">
src 可以写入
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据 (Uniform Resource Locators)
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度height和宽度width当只修改一个的时候 另外一个参数会根据图片原始的比例,等比例缩放
如果同时修改了两个参数 并且没有考虑比例的问题 那么图片就会失真(变形)
2.5.5 a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href内可以放的内容:
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target内写的内容:
1.a标签在当前页面完成跳转 _self (默认)
2.a标签修改为新建页面并跳转 _blank
# a标签的锚点功能
"""点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
2.5.6 标签具有的两个重要属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的属性也可以有自定义的属性
<p id="d1" class="c1" username="jason" password="123"></p>
2.5.7 列表标签
-
无序列表(较常用)
unordered lists
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签 -
有序列表(了解)
ordered lists
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 参考博客了机即可 -
标题列表(了解)
definition lists(自定义列表)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
"""
HTML是一门标记语言
在学的时候,就记每一个标签到底表示什么意思
p是什么标签
h是什么标签
"""
2.5.8 表格标签
table内写thead和tbody
thead和tbody内分行写tr
tr内写th或td
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table>
<thead> table head 表格头标签 表头(字段信息)
<tr> table row 表格行 一个tr就表示一行
<th>username</th> 加粗文本 table headline 表格头标签
<td>username</td> 正常文本 table data 表格数据单元格
</tr>
</thead>
<tbody> table body 表格主体 表单(数据信息)
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody>
</table>
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行col=column 横
<td rowspan="2">DBJ</td> 垂直方向占多行row=row 竖
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
2.5.9 表单标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
会自动识别出当前服务端的ip和port,拼接到action前面
host:port/index/
2.5.10 label标签与input标签
label标签一般和input标签一起使用
input标签添加了label标签后产生的效果是:
点击文字描述部分也能进入input框 或勾选选项
# 第一种 直接讲input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
# 第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
# ps:input不跟label关联也没有问题,也能正常使用
"""
label 和 input都是行内标签
"""
input标签 就类似于前端的变形金刚 通过type属性变形
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
radio:单选
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选
<input type="checkbox" checked>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
2.5.11 select标签
默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
2.5.12 textarea标签
获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
2.5.13 验证form表单提交数据
# 接下来的框架代码无需掌握 看一下效果即可
pip3 install FLASK
form表单默认提交数据的方式 是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读