HTML&CSS-Day03
1.列表标签
无序列表
ul li 列表标志项 type disc circle square
有序列表
ol lo 列表标志项 type 1 A a i I
定义列表
dl dt dd definition list
2.表格
table属性:
width height border align bgcolor background
cellpadding 单元格文字到单元格距离 内边距
cellspacing 单元格和单元格之间得距离 外边距
tr 一行 align valign bgcolor
th td align valign bgcolor
细线表格
table bgcolor='black' cellspacing='1'
tr bgcolor='white'
可以通过css属性合并单元格边框 border-collapse:collapse
跨行合并 rowspan='number' 跨列合并colspan='number'
3.表单
所有表单元素都要写在form表单中 action enctype method
input type name='提交给表单属性名' value='提交给表单得属性值'
text 明文输入框
password 暗文输入框
radio 单选按钮 将所有单选按钮设置同一个name
checkbox 复选按钮
button 普通按钮
image 图片按钮
reset 重置按钮
submit 提交按钮
hidden 隐藏域
file 上传文件
textarea 多行文本框
fieldset 表单元素 legend 表单标题
想要点击文字让表单元素聚焦
1.label标签直接包裹表单元素
2.label for 属性 和 input id属性要一致 文字放在label中
4.h5新增表单元素
progress 进度条 value max
input type
range 滑块 max min value step
email 邮箱 提交时候会对邮箱验证 11@11
tel 电话 使用pattern 做正则校验
url url做校验 https://11
color 取色器
date 日期选择器
datatime-local 时间日期选择器
number 数字表单元素 只允许输入一组数字
想要给输入框绑定待选项
input list = '' 与datalist id属性一致
datalist
option
5.h5新增表单属性
min
max
step
list属性 给输入框绑定待选项属性
autofocus 自动聚焦
pattern 正则属性
required 必填项
formaction 提交表单得服务器地址
formenctype 提交表单得数据格式
formmethod 提交表单得方式
formnovalidate 不对表单进行校验
-----------------------------------------------------------------------
1.http协议 ******
2.请求方式 *****
3.CSS 选择器
**********HTTP协议:
超文本传输协议(HyperText Transfer Protocol);
客户端(一般指的是浏览器)和服务器请求应答的通信协议;
客户端发送的数据会被封装成请求报文给服务器端
请求报文:
请求行 请求方式 url(请求路径) http1.1(版本号)
请求头 content-type:application/json (请求头格式)
空行 回车 换行 分割内容
请求体 get请求发送的数据会携带在url地址栏 post(携带数据携带在请求中)发送的数据携带请求体中
服务器端响应给客户端的数据也会被客户端(浏览器)封装成响应报文
响应报文：
响应行 http1.1(版本号) 状态码 状态码描述 (成功)0200 OK / (失败)500 Internal Serve Error
响应头 content-type:application/json
响应体 {status:200,message:"新增成功(查询成功)",data:[{}],timestatmp:时间戳}
get参数 1kb 2kb 2kb-8kb 写在地址栏上
请求方式 get post delete
get head delete 一类请求
post put patch 一类请求
get
查询 删除
post
保存
put
修改
patch
delete请求 删除
head请求
options 嗅兵请求
********get和post请求区别?
1.get携带的参数携带在地址栏 http://121.199.0.15:7001/user/findById?id=1&name='zhangsan';
2.post携带的参数携带在请求体中
3.get携带的参数有限制 1kb post携带的参数量大
4.安全性 get参数在地址栏 安全性差 post请求参数在请求体中 安全性好
5.get请求会被浏览器缓存 浏览器支持get请求 post请求不会被缓存 浏览器不支持post请求
********************
块级元素 行内元素
h5新增表单 h5新增表单属性 http协议 get和post区别
----------------------------------------------------
CSS(Cascading Style Sheets)层叠样式表 修饰html文档 xml文档
1.CSS语法
规则集:选择器{} {声明块}一个属性就是一个声明
声明块规则:属性名和属性值之间:隔开 多对属性之间使用;隔开 最后一对属性可以不加;建议加
2.注释/**/
3.速记写法 border:width Style color
笔试题:三角形:width:0 height:0 border:100px solid transparent;
border-top:100px solid red;
4.给标签设置样式的几种方式 引入css的方式
(1)行内样式 内联样式 style属性
(2)内部样式表 style标签
(3)外部样式表:使用link标签引入css文件
使用@import引入 不建议使用
优先级:行内样式>内部样式/外部样式(就近原则)
link和@import区别:
所属范围:link属于html标签 @import属于css
加载:link同时加载html和css @import优先加载css
兼容性:link无兼容性 @import支持ie5+
5.css选择器
1.标签选择器 div{}
2.id选择器 #id{}
3.class选择器 .类名{}
4.后代选择器 div p{}
5.子代选择器 div>p{}
6.交集选择器 p.p1{}
7.并集选择器(组合选择器) div,#one,.two{}
8.序选择器(伪类选择器) div:first-child{} last-child() nth-chcild(n/odd/even/3n+1)
兄弟选择器 css2(除去本身): .box+div{} css3: .box~div{}
序选择器/伪类选择器
动态伪类选择器 link visited hover active (一起出现必须按顺序)