img标签
标签的属性分类
1.自带的属性
2.自定义属性
<img src="地址" alt="描述信息">
src属性:图片的地址
1.外链地址
2.相对地址
alt属性:当图片加载失败后,显示的描述信息
width属性:控制图片宽度
height属性:控制图片高度
ps:二者等比例缩放
a标签
a:超链接
<a href=""></a>
href:填写的是跳转地址
绝对URL:指向另一个站点(比如 href="http://www.jd.com)
相对URL:指向当前站点中的确切路径(href="index.htm")
target=‘_blank’
跳转时新开一个tab页面
title
当鼠标悬浮时展示的内容
列表
1.无序列表
格式
<ul type="disc">
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
</ul>
type属性
disc(实心圆点,默认值)
circle(空心圆点)
square(实心方块)
none(无样式)
2.有序列表
格式
<ol type="1" start="3">
<li>sb</li>
<li>sb</li>
<li>sb</li>
<li>sb</li>
<li>sb</li>
</ol>
type属性
1 数字列表、默认值
a 小写字母
A 大写字母
I 大写罗马
i 小写罗马
stayt属性
表示type默认值从几开始,不写从1开始
3.标题列表
格式
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格
格式
<table border="5" cellpadding="20" cellspacing="20"> <thead> <tr> <td>id</td> <td>name</td> <td>age</td> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">kevin</td> <td >18</td> </tr> <tr> <td>2</td> <td>18</td> </tr> <tr> <td>3</td> <td>kevin</td> <td>18</td> </tr> </tbody> </table>
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.(最好通过css来设置长宽)
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列(即合并单元格)
标签两个重要属性
id属性
一个html文档中,id只能有一个,并且不能重复,通过这个id可以唯一确定一个标签
class属性
一个html文档中,class值是可以有多个的,可以重复
自定义属性
属性名可以自己来定,自定义属性一般用来存储数据的
form表单
form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端
<form></form>
<label></label>
通过id值绑定
<label for="username">用户名</label>
<input type="text" id="username">
input:
通过改变input的属性type来达到不同的输入类型
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
属性说明:
● name:表单提交时的“键”,注意和id的区别
● value:表单提交时对应项的值
○ type="button", "reset", "submit"时,为按钮上显示的文本年内容
○ type="text","password","hidden"时,为输入框的初始值
○ type="checkbox", "radio", "file",为输入相关联的值
● checked:radio和checkbox默认被选中的项
● readonly:text和password设置只读
● disabled:所有input均适用
# 每一个单选框、复选框标签都应该有一个属性叫name
<input type="submit" value="登录"> # 把前端数据提交表单到后端
<input type="button" value="登录"> # 不能够提交表单,就是一个空白的按钮,事件
<button>登录</button> # 提交表单的功能,但是,必须写在form表单里
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明:
● multiple:布尔属性,设置后为多选,否则默认单选
● disabled:禁用
● selected:默认选中该项
● value:定义提交时的选项值
验证from表单提交数据到后端
用的是flask框架做后端语言
# 代码不需要掌握,你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架,Django框架
<form action="">
action:
1. 什么都不写,默认提交到当前地址
2. 全写,绝对地址:http://www.baidu.com/login/
3. 只写后缀
/index/
它会自动拼接当前计算机的ip+port
http://127.0.0.1:5000/index/
文件的提交:
必须满足两个条件
1. 请求方式必须是post
2. enctype必须是form-data
form表单提交数据的编码方式:
application/x-www-form-urlencoded
1. urlencode:普通文本框提交的都是这个格式的,只能提交普通文本数据,不能够提交文件数据
multipart/form-data
2. form-data:提交文件使用的必须是这个方式,可以提交普通文件数据,也可以提交文件数据
3. json # form表单不能提交json格式的数据
from flask import Flask,request app = Flask(__name__) 路由,网址的后缀 baidu.com/index/ @app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求 def index(): # 如何拿到前端提交过来的数据 # 前端以post请求方式提交的 print(request.form) # 只能拿到post请求的数据 # print(request.args) # 拿到get请求的数据 # 如何接收文件数据 print(request.files) file_obj = request.files.get('myfile') print(file_obj.filename) # 965_001_dq3_3600_5400.jpg with open(file_obj.filename, 'wb') as f: for line in file_obj: f.write(line) return 'OK'
app.run()
ccs
html: 超文本标记语言
css:层叠样式表
就是给html增加样式的,让其变得更加的好看
css的学习步骤:
1. 先学习选择器,作用就是如何找到标签
2. 找到标签之后,给标签增加样式
选择器的语法结构
选择器 {
属性名1:属性值1
属性名2:属性值2
属性名3:属性值3
属性名4:属性值4
}
CSS的注释语法
/* 内容 */ # 快捷键:ctrl + ?
css的引入方式
1. 在html文档中直接写在style标签中
2. 单独写一个CSS文件,然后通过link标签引入外部的css文件
3. 直接写在标签上,行内式
基本选择器
<style> /*#p1 {*/ /* color: red;*/ /* font-size: 30px;*/ /*}*/ /*.c1 {*/ /* color: yellow;*/ /* font-size: 25px;*/ /*}*/ /*p {*/ /* color: green;*/ /*}*/ /** {*/ /* color: orange;*/ /*}*/ </style>
id
class
标签选择器
通用选择器
<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午,汗滴禾下土</p>
<p id="p2" class="c1">锄禾日当午,汗滴禾下土</p>
<p id="p3" class="c1" style="color: red;font-size: 20px">锄禾日当午,汗滴禾下土</p>
组合选择器
<style> /*ul li .c1 {*/ /* color: red;*/ /*}*/ div>p { color: red; } </style>
属性选择器
<style> [username] { color: red; } [username=kevin] { color: red; } input[username=kevin] { color: red; } </style>
分组和嵌套
div, p, span { color: red; }
标签:form,color,标签,表单,提交,属性 From: https://www.cnblogs.com/shanghaipudong/p/17563925.html