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 (一起出现必须按顺序)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值