day45
昨日内容回顾
统一思想
sql语句的由来
http协议
...
请求方式
get
要数据
post
提交数据
HTTP协议(web基础入门知识点)
四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
3.无状态
不保存用户状态
cookie session token 自定义加密字符串
4.无连接
websocket长连接(HTTP协议大的补丁)
聊天室
数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
请求体(只有朝后端提交数据的时候 post)
响应格式
响应状态码
用数字来表示一段文字信息
1XX:服务端已经成功接收到你的请求 正在处理 你可以继续提交数据
2XX:服务端对你的请求做出了成功的响应200
3XX:重定向(当你访问A的时候 自动跳到了B)
4XX:404请求资源不存在,403当前不符合条件 服务端拒绝访问
5XX:服务器内部错误(bug,着火,爆炸)500
注意:每个公司都可以自定义自己的状态码 不需要完全按照上面的规定来
1000
1001
1002
1003
HTML
超文本标记语言 它仅仅是一门标记语言 跟后端编程语言不一样 没有任何逻辑
注释是代码之母
注释
HTML文档结构
html
head
body
html的标签分类1
1.自闭合标签
2.双标签
head内常用标签(都不是给人看的 给浏览器看的)
title
style
script 内部可以直接写js代码 也可以通过src属性引入外部js文件
link 引入外部css文件
meta
keywords content
description content
body内常用标签
普通标签
h1~h6 标题标签
p 段落标签
u,i,s,b
br 换行
hr 分割线
特殊符号
&
>
<
©
®
¥
标签分类2：
块级标签 h1~h6 p br hr div
独占一行
特例是p标签
行内标签 a img s b u i span
内部文本多大 就占多大
常用标签
div
span
两者使用场景最多 通常用来页面的前期布局
一个标签通常都应该有两个属性
id 该值在同一个html文件中是唯一性
class 类似于面向对象中的类的继承
a标签
href
1.跳转到指定的网址
2.锚点功能(a标签的id值)
target
默认是在当前页面跳转
你也可以修改成_blank在新建的页面跳转
img标签
src
图片的地址 可以是网上的也可以是本地的
alt
图片加载不出来的时候 默认的提示信息
title
鼠标悬浮在图片上的时候 显示的提示信息
width 和 height
如果单独修改一个 另外一个会等比例缩放
如果该两个 那么图片失真
列表标签
ul 无序列表 type参数
li
ol 有序列表 type参数
li
dl 标题列表
dt
dd
表格标签
table
thead
tr
th
tbody
tr
td
tr
td
一个tr表示一行
一个td或者th表示一个字段或者字段内容
今日内容
## form表单(******)
能够获取用户输入(输入，选择，上传的文件)
并且将用户输入的内容全部发送给后端
参数
action 控制数据提交的地址
三种书写方式
1.不写 默认就是朝当前这个页面所在的地址提交数据
2.写全路径
3.只写路径后缀(/index/)
method 控制数据提交的方式
get form表单默认是get请求
post
通常情况下input需要结合label一起使用
绑定id值 之后点击label标签内任何的位置都可以自动选中input框
form表单中的input就类似于是前端的变形金刚
根据typy参数的不同 展示不同的功能
text 普通文本
password 输入的内容 会变成密文
date 日期
radis 单选圆圈
checkbox 多选 打钩
hidden 隐藏
file 传文件
button 普通按钮 没有任何意义 然后却是用的最多的 你可以给它绑定js事件
reset 重置按钮
submit 提交按钮 能够自动触发form表单提交数据的动作
select标签 下拉框
一个个的option标签就是一个个的选项
默认是单选
你可以给select标签加一个multiple参数 就可以变成多选
textarea标签 获取大段文本
input标签可以加disable属性 禁用该input框
input标签可以加value属性 设置默认值
选择的标签 如何默认选中
radio
checkbox
checked='checked'
当属性名和属性值相同的时候 可以只写属性名(******)
能够触发form表单提交数据的动作有两个标签可以(******)
input标签type=submit
button标签
所有获取用户输入的标签 都应该有name属性(******)
name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中
针对选择框 传到后端的数据 有value属性决定
form表单如果要提交文件数据 必须修改以下参数
enctype="multipart/form-data"
CSS
层叠样式表
用来控制html标签样式的
注释
/单行注释/
/*
多行注释1
多行注释2
*/
通常我们在写css的时候 都会单独写一个css文件 里面只有css代码
/这是**网站首页的css样式文件/
/通用样式/
/导航条样式/
/轮播图样式/
css的语法结构
选择器 {属性1:属性值1}
css的三种引入方式
1.通过link标签引入外部的css文件(最正规用法)
2.直接在html页面上的head内通过style标签直接书写css代码
3.行内式(直接在标签内部通过style属性直接书写) 不推荐使用
<h1 style="color: orange">我是Oscar</h1>
我们需要先学习 如何查找标签
然后在学习如何修改样式
css查找 很重要 只要你学会了css的查找 后面js jQuery的标签查找都是一个原理
基本选择器
元素选择器
id选择器
类选择器
通用选择器
组合选择器
div span
div>span
div+span
div~span
属性选择器
补充
任何的标签都有自己的默认的属性 id class
标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)
伪类选择器
a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后 再回去
我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus
鼠标移出去之后的状态 叫做input框失去焦点
伪元素选择器 (清除浮动带来的负面影响)
可以通过css添加文本内容
选择器优先级
1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cyt</title>
<!--<link rel="stylesheet" href="css练习.css">-->
<style>
/*span {*/
/*color: aqua;*/
/*}*/
/*div {*/
/*color: brown;*/
/*}*/
/*#d2 {*/
/*color: chartreuse;*/
/*}*/
/*.c2 {*/
/*color: aqua;*/
/*}*/
/*.c1 {*/
/*color: burlywood;*/
/*}*/
/*div span {*/
/*color: chartreuse;*/
/*}*/
/*div>span {*/
/*color: burlywood;*/
/*}*/
/*div~span {*/
/*color: brown;*/
/*}*/
/*div+span {*/
/*color: chartreuse;*/
/*}*/
/*[div_name] {*/
/*color: aqua;*/
/*}*/
/*span[div_name='111'] {*/
/*color: chartreuse;*/
/*}*/
/*p,#d3,.c3 {*/
/*color: chartreuse;*/
/*}*/
/*a:link {*/
/*color: brown;*/
/*}*/
/*a:hover {*/
/*color: chartreuse;*/
/*}*/
/*a:active {*/
/*color: blue;*/
/*}*/
/*a:visited {*/
/*color: darkorange;*/
/*}*/
/*input:focus {*/
/*background-color: blue;*/
/*}*/
/*span:hover {*/
/*background-color: blue;*/
/*}*/
/*p:first-letter {*/
/*font-size: 50px;*/
/*color: blue;*/
/*}*/
/*.c1 {*/
/*color: crimson;*/
/*}*/
/*#d2 {*/
/*color: blue;*/
/*}*/
</style>
</head>
<body>
<p class="c3">p的标记</p>
<span id="d3" class="c2 c1" div_name="111">span的标记</span>
<div id="d2" class="c1">div
<span>div里的span</span>
</div>
<div div_name="111">
<!--<p id="d1" class="c1">p-->
<span class="c1" div_name="222">p里面的span</span>
<!--</p>-->
</div>
<a href="">难任天堂</a>
<span>2145365476</span>
<p>dsgfdhfjhf</p>
fsgvfghds
<p>用户:<input type="text"></p>
<!--<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">-->
<!--<p><label for="d1">用户名:<input type="text" id="d1" name="username" disabled></label></p>-->
<!--<p><label for="d2">密码:<input type="password" id="d2" name="password"></label></p>-->
<!--<p><label for="d3">生日:<input type="date" name="birthday" id="d3"></label></p>-->
<!--<p>性别:-->
<!--<label for="d4">男:<input type="radio" name="gender" value="male" id="d4"></label>-->
<!--<label for="d5">女:<input type="radio" name="gender" value="female" id="d5"></label>-->
<!--</p>-->
<!--<p>爱好:-->
<!--<label for="d7">篮球:<input type="checkbox" name="hobby" id="d7" value="basketball" checked></label>-->
<!--<label for="d8">足球:<input type="checkbox" name="hobby" id="d8" value="football"></label>-->
<!--<label for="d9">双色球:<input type="checkbox" name="hobby" id="d9" value="doublecolorball"></label>-->
<!--</p>-->
<!--<p><label for="d10">个人简历:<input type="file" name="myfile" id="d10"></label></p>-->
<!--<p><label for="d11">猜猜在那里<input type="hidden" id="d11"></label></p>-->
<!--<p>-->
<!--<label for=""><input type="button" value="按钮" ></label>-->
<!--<label for=""><input type="reset" value="重置" ></label>-->
<!--<label for=""><input type="submit" value="提交"></label>-->
<!--</p>-->
<!--<p>前女友:-->
<!--<select name="province" id="" multiple>-->
<!--<option value="sh">上海</option>-->
<!--<option value="bj">北京</option>-->
<!--<option value="gz">广州</option>-->
<!--</select>-->
<!--</p>-->
<!--<p>个人简历:-->
<!--<textarea name="info" id="" cols="30" rows="10"></textarea>-->
<!--</p>-->
<!--<p>-->
<!--</p>-->
<!--</form>-->
</body>
</html>
