master

分支 (1)

管理

管理

master

training-notes
/
总结.txt

1.网页三要素
HTML 、CSS、JS
  结构   表现   行为
    网页框架搭建，于描述页面的结构
    用于表现网页元素的样式，颜色，字体，背景
    用于响应用户操作，动态+事件
2.注释    ctrl+/
<!-- 导航栏 --> <!--/ 导航栏 -->
养成良好习惯，用于给其他开发人员表述代码结构
3.文档结构
    <!-- 文档头信息 -->
    <!-- html5标准网页声明 -->
    <!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
    <!DOCTYPE html>
    <!-- 语言，”en”代表英语，”zh-CN”代表中文 -->
    <!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
    <html lang="en">
    <!--
            字符编码，浏览器会根据字符编码进行解析
            常见的字符编码有：gb2312、gbk、unicode、utf-8。
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 浏览器选项卡上的名字 -->
    <title>Hello HTML</title>
    </head>
    <!--
        body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
    -->
    <body>
    <!-- 在body里的内容都是显示在浏览器的视图区的 -->
    </body>
    </html>
4.属性
   title=“”   鼠标悬停后的提示文字
   id   身份证，唯一标识符
   class  类
   style  行内样式，优先级最高
5.实体
   空格  &nbsp;
   <    &lt;
   >    &gt;
4.块级、行内
块级
  div、p、h1~h6、ul/ol-li
  特点：
     1.独占一行
     2.宽度默认为100%，如果没有父元素的话，宽度相对视图区而言。如果有父元素，相对父元素而言。高度由子元素及其内容决定（撑起）。块级元素可以直接设置宽高。
     3.块级元素可以包含行内与块级。
行内 （img、input特殊行内，可以直接设置宽高，置换元素）
   span、a、img、strong、i、em
   特点：
     1.与其他元素共享一行。
     2.宽高由自身决定。
     3.行内相对来说只能包含行内。
块级与行内区别  高频面试题  80%
     1.块级独占一行，行内共享一行。
     2.块级可以直接设置宽高，而行内不行。（通过CSS的display属性，取值为inline-block/block，这样可以给行内元素设置宽高。）
     span{
         display:block/inline-block;
         width:
         height:
     }
     3.块级可以包含行内与块级，而行内只能包含行内。
5.a 标签
   href  放跳转路径
         相对./ ../ or 绝对路径
         http://ip:端口号/项目名/文件名
   target  跳转页面打开位置
           _self  默认，在当前窗口打开
           _blank  新窗口/新的选项卡
6.img   放图片的元素
   src  放图片路径
        相对./ ../ or 绝对路径 （一般用相对路径，网页图片下载到本地后用./ ../获取）
   width  宽
   height  高
   title  鼠标悬停后提示文字
7.p  段落元素
  段落标签用于表示内容中的一个自然段
  p标签中的文字，会独占一行，并且段与段之间会有一个间距,有16px的上下margin。
8.h1~h6
  h1一级标题、h2、h3
9.br换行  hr分割线
  自结束标签  <br>  <hr>

---------------------------------
day02
1.列表
先后之分：有  排行榜
        无  新闻列表  商品列表

无序列表 ul li  班级-学生  导航栏
  <ul  type="value" >
    <li>需要显示的条目内容</li>
  </ul>
  type
    disc    默认值 实心圆
    circle  空心圆
    square  实心方块

有序列表 ol li  奥运会排行榜
  <ul  type="value">
    <li>需要显示的条目内容</li>
  </ul>
  type
    1   （1、2、3、4）
    a   （a、b、c、d）
    A   （A、B、C、D）
    i   （i, ii, iii, iv）
    I    (I, II, III, IV）

2.表格标签
  一对table标签就是一个表格
  一对tr标签就是表格中的一行
  一对td标签就是一行中的一个单元格
补充：
  tr与th搭配用来表示表头，字体为居中的粗体文本。
  tr与td搭配用来表示表体，字体为左对齐的普通文本。

宽高属性设置
  table   表格的宽高
  tr,th,td   单元格的宽高
  （都属于块级元素，宽默认100%，当...当...,高由内容撑起）

水平垂直对齐
  水平方向  align   table（表格）,tr,td（单元格内容）  left center right
  垂直方向  valign  tr,td（单元格内容）  top mid bottom

表格外边距内边距(在元素中为margin、padding)
  cellspacing外边距  单元格和单元格之间的距离   默认2px
  cellpadding内边距  单元格的边框和文字之间的间隙   默认1px

表格完整结构
  标题caption  表头thead,th  主体tbody,td  附加tfoot

单元格合并
  水平方向  合并列  colspan
  垂直方向  合并行  rowspan

3.form 表单
提交表单信息
  <form action="提交的服务器接口地址">
      <表单元素>
  </form>

input
  明文输入框
      <input type="text" name="account" placeholder="请输入用户名">
  (name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构。placeholder:提示）

  暗文输入框
      <input type="password" name="password" placeholder="请输入密码">


  单选框
      <input type="radio" name="xx" value="xxx">
        互斥：
        1.都设置name属性  值一样
        2.某个单选框默认选中  checked
        3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。

  多选框
      <input type="checkbox" name="xxx" value="xxx" checked>

  提交按钮
    <input type="submit">
    将表单中已经填写好的数据, 提交到远程服务器
    操作：
      1.form表单添加一个action属性, 指定需要提交到的服务器地址。
      2.给要提交的表单元素添加一个name属性。

  submit提交
    在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮（<input type=’submit’>）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。
      <form action=’http://www.123.com/postValue’ method=’post’>
          <input type=’text’ name=’username’ />
          <input type=’password’ name=’password’/>
          <input type=’submit’ value=’登陆'/>
      </form>
    当点击登陆时，向数据库发生的数据是：username=username&password=password.
    这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的，希望提交成功则关闭弹出框并刷选父页面，失败则提示失败原因，且弹出框不关闭。此时可以采用Ajax进行数据提交。

  普通按钮
        <input type="button" value="xxx">
        可以通过value属性来给按钮指定标题

  图片按钮
    <input type="image" src="">

  重置按钮
    <input type="reset" value="xx">
    作用: 清空表单数据
------------------------
day03
1.get  post
get
   传输数据量小，一般不超过1024个字符
   GET方法把参数以及参数值都暴露在URL中了，不利于数据的保密和安全。
   使用GET方法请求时，请求参数和对应的值是跟在URL后面，通过问号（“?”）和and连接符（“&”）以及“=”号连接。
   没有请求体
post （swagger-登陆注册）
   传输数据量大
   参数携带在请求体中，所以需要在代码中对参数进行封装，封装完毕传入接口
   保密性高，安全性高
区别  高频面试题
   1.传输数据量
   2.参数携带
   3.数据保密性