HTML
HTML
超文本标记语言
在学习HTML的时候, 只需要记住每个标签标示的意思.
浏览器所能识别的语言
- HTML/XML
- CSS
- JS
扩展: XML 也可以书写前端, 主要用于odoo框架中, 书写企业内部管理软件(ERP)
HTML 注释
注释是代码之母
-
单行注释:
-
多行注释: <!--
多行注释1
多行注释2
-->
补充: 由于HTML 页面结构比较复杂, 内容较多, 不方便与后期的维护修改 通常在写页面的时候, 习惯用代码注释这种人为的方式, 划分代码区域, 便于管理
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
HTML文档结构
<html>
<head></head>: 用来给浏览器或者蜘蛛爬虫, 浏览器做识别操作
<body></body>: 用来给浏览器渲染, 展示给用户看的
</html>
标签分类
标签应该具备的属性
- id属性: 类似于身份证号 用来表示标签在当前html页面中的唯一
- class属性: 类似于面向对象的继承, 直接引用别的类的样式
1. 双闭合标签 <a>内容</a>
2. 自闭和标签 <br> <hr>
head 内常用标签
title: 定义网页标题
style: 内部支持css代码
link: 引入外部css文件
script:
1. 内部可以直接编写js代码
2. 可以通过src属性引用外部js代码
meta:
name 属性 (用于做SEO)
keywords 关键字
description 展示页面信息
什么是URL
URL: 统一资源定位符
body内常用标签
基本标签
h1~h6: 标题标签
s: 删除线
b: 加粗
u: 下划线
i: 斜体
p: 段落标签, 独占一行
br: 换行
hr:分割线
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 人民币符号
© 版权标示
® 注册商标
常用标签
div 块级标签
span 行内标签
以上标签本身没有任何意义, div 用来做布局用
- img 标签
img 标签 图片标签
src属性
1. 可以写一个网络图片的链接
2. 可以写本地的图片地址
3. url(点击会自动朝该url发送get请求数据)
alt属性
当图片加载不出来是, 默认展示的提示信息
title 属性
当鼠标悬停在图片上的时候, 展示的提示信息
width,height 宽和高
只修改一个, 图片会同比例缩放
如果两个都修改, 非同比例会失真
代码示例:
<img src="https://i.meizitu.net/thumbs/2019/12/216914_23b13_236.jpg" alt="就是这张图片" title="好漂亮的妹妹">
- a标签
a 链接标签
href 属性
1. 放一个url 点击会跳转到该url
taget
控制是否在当前页面跳转
1. 默认是 _self 在当前页面跳转
2. _blank 新建页面跳转
锚点功能
href 不单单可以写url , 也可以写另外一个a标签的ID值, 点击就会跳转到该id所对应的a标签所在的位置 书写格式
href="#id"
- 列表标签
列表标签
无序列表(较多使用)
ul : 序列表标签
li :标签内元素
只要页面上出现比较有规则排序的文本, 基本上就是用无需列表来实现的
有序列表
ol : 无序列表标签
li : 标签内元素
标题列表
dl : 标题列表标签
dt 标题
dd 内容
- 表格标签
表格标签(******)
展示网站数据的时候, 一般情况下可以使用表格表标签
<table> 表格标签
<thead>
<tr>
<th></th> 表头(加粗显示)
</tr> 表示一行数据
</thead> # 表格的表头
<tbody>
<tr> # 表示一行数据
<td></td> 包裹真是数据
</tr>
</tbody> # 表格的数据体
</table>
<table></table> 表格标签
<thead></thead> 表格表头标签
<tbody></tbody> 表格体标签
- 表单标签
表单标签
form标签
作用: 用来获取用户输入(输入, 选择, 上传文件) 并且将数据打包发送给后端
action 属性,
用来控制数据提交的路径, 将数据提交给谁
三种写法:
1: 不写, 默认是获取当前html页面的地址
2: 全路径(https://www.baidu.com)
3: 只写路径后缀(/index/) 默认拼接第一种的地址.
method 属性:
用来控制提交数据的方式, 默认是 get 方式
enctype 属性:
用来控制提交的数据, 默认是application/x-www-form-urlencoded (只提交表单数据)
要想提交文件数据需要设置为 multipart/form-data
-
input 标签
用于在form表单内用于提供给用户提交的输入框
input 类似于前端的变形金刚. 多种方式接收用户输入
-
type 属性
-
text 普通文本
<p> <label for="d1"> 用户名:<input type="text" id="d1" name="username"> </label> </p> -
password 秘文
<p> <label for="d1"> 密码:<input type="password" id="d2" name="password"> </label> </p> -
date 日期
<p> <label for="d1"> 注册日期:<input type="date"> </label> </p> -
radio 多选一: 用相同的name 进行约束
<p>性别: 男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"> </p> -
checkbox 多选多
默认选中 checked="checked" 当标签属性名和属性值相同的时候, 可以只写属性名 <p>爱好: 足球<input type="checkbox" name="hobby" checked value="2"> 篮球<input type="checkbox" name="hobby" value="1"> 肉球<input type="checkbox" name="hobby" value="3"> </p> # 需要提交的数据要记录在 value中, 获取列表 需要用方法 request.POST.getlist("hobby") -
reset 重置 清空已输入的所有数据
<p> <input type="reset" value="清空所有的数据"> </p> -
button 普通按钮
<p> <input type="button" value="提交"></p> 只是一个按钮, 这样写, 没有任何意义 -
submit 触发form表单的提交动作
<p><input type="submit" value="注册"></p> form表单中的提交 value设置按钮的名字 -
file 获取文件
<p> <input type="file" name="file"> </p>
-
-
name 属性, 标明这个标签的名称, 传送数据时是以 key=value json格式字典进行传输
-
-
select 标签
用于 form 表单内 , 下拉框
一个选项就是一个 option 标签
默认是单选的, 可在 select 标签内加上 multiple 属性, 改成多选
-
示例
<select name="" id="" multiple> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> <option value="">选项4</option> </select> -
默认选中. 在option 标签内, 设置 selected属性
-
-
textarea 标签, 获取大段文本
-
label 标签, 通常是配合 input 一起使用的, for 属性用来填写对应的input标签的id值, 点击文本可以获取对应的输入框焦点
-
能够触发form表单提交数据的按钮
input 使用type="submit" 进行触发
<button>可触发以</button>
django 上传文件功能的实现
# 前端页面设计
{% csrf_token %}
<form action="" method="post" enctype='multipart/form-data' enctype="multipart/form-data">
<p><input type="file" name="file"></p>
</form>
# django开启需要 使用{% csrf_token %} 使用token 进行数据验证(具体不懂) 在测试时
# 可以先在django的setting 配置文件中先注销
# setting 文件注销后 可以在前端不需要使用 {% csrf_token %}
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 视图 view 设置:
# 使用 {% csrf_token %} 必须要使用csrf_exempt 装饰器
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def register(request):
if request.method == 'POST':
obj = request.FILES.get("file") # 使用FILES 方法获取数据
with open(f"1243.md", "wb")as f:
for chunk in obj.chunks(): # 使用 obj.chunks 获取句柄.
f.write(chunk)
return render(request, "register.html", locals())
