标签

- 自闭合标签:<meta charset="UTF-8"/> # 末尾一般会有一个'/',不加也可以

- 非自闭合标签: <title></title>

html 头部信息 --- 除了 title/图标,其他都是不可见的

- 指明网页的编码方式(以下两句效果一样)

    <meta charset="UTF-8">

    <meta http-equiv="content-type",content="text/html; charset=utf-8">

- "自动刷新"和'自动跳转'

    <meta http-equiv="Refresh" Content="5"> # 5s 后自动刷新网页

    <meta http-equiv="Refresh" content="3;url=http://www.baidu.com"> # 3s后自动跳转到百度

- 关键词:方便搜索引擎

    <meta name="keywords" content="开源,OSC,开源软件,开源硬件,开源网站,开源社区,java开源,perl开源,python开源,ruby开源,php开源,开源项目,开源代码">

- link 的两种用途

    - 指明CSS路径: <link rel="stylesheet" href="....">

    - 指明<title>图标路径: <link rel="shortcut icon" href="GREEN.ico">

html 块级元素(独自占一行) 和 行内元素(有多少内容,就占多少),通过CSS是可以进行互相转换的

    # chrome 检查元素,区别很明显

    - 块级元素:div h1 p (一整行)

    - 行内元素:span a select (有多少内容就占多少空间)

html 特殊字符

- 查询网址: 包含各种各样的特殊符号,需要自取

    https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

- 说明

    - 输入'<', html可以正常显示

    - 输入"<a", html就不会显示了(被解释成了标签),要显示怎么办? --- &lt;a

p和a标签注意事项

- <p> 标签

    默认的<p>标签直接独占两行(一行文字,另一行的空白)

        # html
        <p>内容一</p> # 都占两行
        <p>内容二</p>
        <p>内容三</p>

- <a> 标签

    - 链接属性

        <a href="http://www.baidu.com">百度</a> # 原窗口打开

        <a href="http://www.baidu.com" target="_blank">百度</a> # 新窗口打开

    - 定位'锚点' --- 与 id 属性配合

        <body>

            <h1>测试页面</h1>
            <a href="#i1">跳转到一</a>
            <a href="#i2">跳转到二</a>
            <a href="#i3">跳转到三</a>


            <div style="height:500px" id="i1">一一一一一一一一</div>
            <div style="height:500px" id="i2">二二二二二二二二二</div>
            <div style="height:500px" id="i3">三三三三三三三三三</div>

        </body>
    - 实战中,<a>经常被改造成'按钮'

input 系列

- 单选框:radio(实现'单选'效果,name属性值必须一致)

  <body>
      <h1>测试页面</h1>
      <div style="border: 1px solid red">
          <p>username:<input type="text"></p>
          <p>password:<input type="password"></p>
          <p>
              sex:                            # 如果name属性值不一致,则出现'多选'的效果
              <br>&nbsp;&nbsp;&nbsp;&nbsp;male <input type="radio" name="gender">
              <br>&nbsp;&nbsp;&nbsp;&nbsp;female <input type="radio" name="gender">
          </p>
      </div>

  </body>

- 复选框:checkbox

  <h1>测试页面</h1>
    <div style="border: 1px solid red">
        ......
        <p>
            loving:                               # 复选框
            <br>&nbsp;&nbsp;&nbsp;&nbsp;Football <input type="checkbox">
            <br>&nbsp;&nbsp;&nbsp;&nbsp;Basketball <input type="checkbox">
            <br>&nbsp;&nbsp;&nbsp;&nbsp;Tennis <input type="checkbox">
        </p>
    </div>

- 下拉框(单选): select-option

  <h1>测试页面</h1>
    <div style="border: 1px solid red">
        ......
        <p>
            City:
            <select> # 单选效果
                <option>Beijing</option>
                <option>Shanghai</option>
                <option>Guangzhou</option>
            </select>
        </p>
    </div>


  # 并列单选效果(原来的基础上,再来一次即可)

  <h1>测试页面</h1>
    ......
        <p>
            City:
            <select>
                <option>Beijing</option>
                <option>Shanghai</option>
                <option>Guangzhou</option>
            </select>
            <select>
                <option>Tianhe Area</option>
                <option>Haidian Area</option>
                <option>Huangpu Area</option>
            </select>
        </p>

  - 下拉框(复选):multiple

    <p>
        City:

        <select multiple size="2"> # 复选,size属性指定显示的个数
            <option>Beijing</option>
            <option>Shanghai</option>
            <option>Guangzhou</option>
        </select>

        <select>
            <option>Tianhe Area</option>
            <option>Haidian Area</option>
            <option>Huangpu Area</option>
        </select>

    </p>

  - 小标题效果:optgroup-label

    <p>
        City:
        <select>
            <optgroup label="AAA"> # AAA小标题
                <option>Beijing</option>
                <option>Shanghai</option>
            </optgroup>
            <optgroup label="BBB"> # BBB小标题
                <option>Guangzhou</option>
            </optgroup>

        </select>
        ......
    </p>

- 文件

  <input type="file">

- 按钮

  <input type="submit" value="submit"> # 表单提交
  <input type="button" value="button"> # 配合js才有效果
  <input type="reset" value="reset"> # 清空表单内容

input系列小结

- text

- password

- eamil

- radio

- checkbox

- file

- submit

- button

- reset

最最重要的html标签小结

- input 系列

- select 下拉框(搭配option,optgroup)

- textarea

- form

重要标签注意事项

- input 输入的内容,后端如何获取 --- name 属性值

  - 搜狗搜索的提交地址: https://www.sogou.com/web?query=aclas

    # 示例代码(在django中,也是通过'name值'获取用户提交的内容)
    <div style="border: 1px solid green">
        <form action="https://www.sogou.com/web" method="get">
            <p>
                搜索内容:<input type="text" name="query"> # name='query'
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

  - django示例

    # test.html
    <div style="border: 1px solid green">
        <form action="/app01/test/" method="get">
            <p>
                提交内容:<input type="text" name="query">
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request):
      print(request.GET) # <QueryDict: {'query': ['aclas']}>
      print(request.GET.get('query')) # aclas
      print(request.POST) # <QueryDict: {}>
      return render(request,'test.html')

- radio 提交演示

  - 基础版

    # test.hml
    <div style="border: 2px solid purple">
        <form action="/app01/test/" method="get">
            <p>
                提交内容:<input type="text" name="query">
            </p>
            <p>
                male:<input type="radio" name="sex"> # name属性值保持一致
                female:<input type="radio" name="sex">
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request):
      print(request.GET) # <QueryDict: {'query': ['aclas'], 'sex': ['on']}>
      print(request.GET.get('sex')) # on
      print(request.POST) # <QueryDict: {}>
      return render(request,'test.html')

    - 只是依赖'name属性',无法达到目的

  - 改进版:增加 value 属性

    # test.html
    <div style="border: 2px solid purple">
        <form action="/app01/test/" method="get">
            <p>
                提交内容:<input type="text" name="query">
            </p>
            <p>
                male:<input type="radio" name="sex" value="1"> # 值设置为 1
                female:<input type="radio" name="sex" value="2"> # 值设置为 2
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request):
      print(request.GET)
      print(request.GET.get('sex'))
      print(request.POST)
      return render(request,'test.html')

    '''
    <QueryDict: {'query': ['aclas'], 'sex': ['1']}>
    1
    <QueryDict: {}>

    <QueryDict: {'query': ['aclas'], 'sex': ['2']}>
    2
    <QueryDict: {}>
    '''

- checkbox 复选框

  - 基础版:

    # test.html
    <div style="border: 2px solid purple">
        <form action="/app01/test/" method="get">
           ......
            <p>
                Loving:
                Football:<input type="checkbox" value="1">
                Basketball:<input type="checkbox" value="2">
                Tennis:<input type="checkbox" value="3">
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request): # 获取不到'复选框的值'
      print(request.GET) # <QueryDict: {'query': ['aclas'], 'sex': ['1']}>
      print(request.POST) # <QueryDict: {}>
      return render(request,'test.html')

  - 改进版:增加 name 属性

    # test.html
    <p>
        Loving:                   # 增加 name 属性
        Football:<input type="checkbox" name="favor" value="1">
        Basketball:<input type="checkbox" name="favor" value="2">
        Tennis:<input type="checkbox" name="favor" value="3">
    </p>

    # views
    def test(request):
      print(request.GET) # <QueryDict: {'query': ['aclas'], 'sex': ['1'], 'favor': ['2', '3']}>
      print(request.POST) # <QueryDict: {}>
      return render(request,'test.html')


- 上传文件:

  - 基础版:

    # test.html
    <div style="border: 2px solid purple">
        <form action="/app01/test/" method="get">
            ......

            <p>
                上传: <input type="file" name="upload">
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request):                                            # 只有文件名,文件并没有上传
      print(request.GET) # <QueryDict: {'query': ['aclas'], ...... 'upload': ['cookies.txt']}>
      print(request.POST)
      return render(request,'test.html')

  - 改进版:<form> 增加 enctype="multipart/form-data",method='post'(后端要作修改)

    # test.html
    <div style="border: 2px solid purple">
        # method='post' enctype="multipart/form-data"
        <form action="/app01/test/" method="post" enctype="multipart/form-data">
           ......

            <p>
                上传: <input type="file" name="upload">
            </p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </div>

    # views
    def test(request):
      print(request.GET) # <QueryDict: {}>
      print(request.POST) # <QueryDict: {'query': ['aclas'], 'sex': ['1'], 'favor': ['1', '2']}>
      if request.method == 'POST':
          print(request.FILES) # <MultiValueDict: {'upload': [<InMemoryUploadedFile: my_test.py (text/x-python)>]}>
          file_obj = request.FILES.get('upload')
          print(file_obj.name, file_obj.size) # my_test.py     204

          f = open(file_obj.name, 'wb')  # 生成文件对象
          for chunk in file_obj.chunks():  # 遍历'文件块 --- chunks'
              f.write(chunk)
          f.close()
          return HttpResponse('Upload Sucess!!!')
      else:
          return render(request,'test.html')

- 下拉框

  # test.html
  <p>
      城市:
      <select name="city"> # name属性,传给后端
          <option value="1">北京</option> # value值用于区分
          <option value="2">上海</option>
          <option value="3">广州</option>
      </select>
  </p>

  # views
  def test(request):
    print(request.GET) # <QueryDict: {}>
    print(request.POST) # <QueryDict: {'query': ['aclas'], ...... 'city': ['2']}>
    return render(request, 'test.html')

- 多文本

  # test.html
  <p>
      <textarea name="many_text" cols="30" rows="10"></textarea>
  </p>

  # views
  def test(request):
    print(request.GET) # <QueryDict: {}>
    print(request.POST) # <QueryDict: {'query': ['aclas'], ...... 'many_text': ['123213123\r\n13212321\r\n123213']}>
    return render(request, 'test.html')

- 小结: name是必须的,value 在'选框'中需要,file 在form中要加额外的东东

  - input

    - name 属性

      - text
      - password
      - radio(name值要一致)
      - checkbox(name值要一致)
      - file
        - enctype="multipart/form-data"

      - select
      - textarea

    - value 属性

      - radio
      - checkbox
      - option

- label:标签,与其他元素搭配实现对应元素的'便捷功能'(label for='关联元素的id')

  - 实例:

    ......
    <body>
        <h1>测试页面</h1>
        <div style="border: 1px solid red">
            <p>
                用户名: <input type="text"> // 点击用户名是没有效果的,必须点击 input 框,下同
                密码: <input type="password">
            </p>
            <p>
                <label for="username">用户名: // 点击用户名有效果,直接跳到 input 框,下同
                    <input type="text" id="username">
                </label>
                <label for="pwd">密码:
                    <input type="password" id="pwd">
                </label>
            </p>
        </div>

    </body>
    </html>

- 三种列表

  - ul:无序列表

    - li

  - ol:有序列表
    - li

  - dl:列表

    - dt:小标题
    - dd:内容


  - 实例:

    ......
    <body>
        <h1>测试页面</h1>
        <div style="border: 1px solid red">
            <ul>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>

            <ol>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ol>

            <dl>
                <dt>AAA</dt>
                <dd>aaa</dd>
                <dd>bbb</dd>
                <dt>CCC</dt>
                <dd>ccc</dd>
            </dl>
        </div>

    </body>
    </html>


- table:表格

  - 结构: table,thead,tbody

    <body>
      <h1>测试页面</h1>
      <div style="border: 1px solid red">
          <table>
              <thead></thead>
              <tbody></tbody>
          </table>
      </div>

  </body>

  - tr 表示'行',td 表示'列',th 表示 '头部的列'

    <div style="border: 1px solid red">
        <table>
            <thead>
                <tr> # 这么写,显得头部和body一样,区别不明显
                    <td>第一列</td>
                    <td>第二列</td>
                    <td>第三列</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一列</td>
                    <td>第二列</td>
                    <td>第三列</td>
                </tr>
            </tbody>
        </table>
    </div>

    - 纠正头部的'列'

      <div style="border: 1px solid red">
        <table>
            <thead>
                <tr>
                    <th>第一列</th> # 会有加粗效果
                    <th>第二列</th>
                    <th>第三列</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一列</td>
                    <td>第二列</td>
                    <td>第三列</td>
                </tr>
            </tbody>
        </table>
    </div>

  - 添加边框效果

    <table border="1"> # 这种写法是'过时'的写法
            ......
    </table>

- 表格的合并(行的合并,列的合并)


  - 测试实例: 四列五行

    <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <link rel="stylesheet" href="....">
          <link rel="shortcut icon" href="GREEN.ico">
      </head>
      <body>
          <h1>测试页面</h1>
          <div>
              <table border="1">
                  <thead>
                      <tr>
                          <th>第一列</th>
                          <th>第二列</th>
                          <th>第三列</th>
                          <th>第四列</th>
                      </tr>
                  </thead>

                  <tbody>
                      <tr>
                          <td>第一个</td>
                          <td>第二个</td>
                          <td>第三个</td>
                          <td>第四个</td>
                      </tr>

                      <tr>
                          <td>第一个</td>
                          <td>第二个</td>
                          <td>第三个</td>
                          <td>第四个</td>
                      </tr>

                      <tr>
                          <td>第一个</td>
                          <td>第二个</td>
                          <td>第三个</td>
                          <td>第四个</td>
                      </tr>

                      <tr>
                          <td>第一个</td>
                          <td>第二个</td>
                          <td>第三个</td>
                          <td>第四个</td>
                      </tr>
                  </tbody>
              </table>
          </div>

      </body>
      </html>

  - 行的合并,colspan

    // 把表头的前两个单元格合并 

    <table border="1">
      <thead>
          <tr>
              <th colspan="2">第一列</th>
              <th>第二列</th>
              <th>第三列</th>
              <!--<th>第四列</th>--> // 第四列就得删除了,不删会凸出来
          </tr>
      </thead>

      <tbody>

  - 列的合并,rowspan

    // 表体的第一个单元格,和下面一个单元格合并

    <tbody>
      <tr>
          <td rowspan="2">第一个</td>
          <td>第二个</td>
          <td>第三个</td>
          <td>第四个</td>
      </tr>

      <tr>
          <!--<td>第一个</td>-->
          <td>第二个</td>
          <td>第三个</td>
          <td>第四个</td>
      </tr>

  - 合并的套路就是,合并多少格,相应的就要删掉多少格

- fieldset:类似登录表单

- 元素:fieldset,legend

  - 实例:

    ......
        <h1>测试页面</h1>
        <div>
            <fieldset>
                <legend>Login</legend>
                <label for="username">
                    <p>用户名: <input type="text" id="username"></p>
                </label>
                <label for="pwd">
                    <p>密码: <input type="password" id="pwd"></p>
                </label>
            </fieldset>
        </div>

    </body>
    </html>

- iframe:加载别的网页(跨域问题)

HTML 小结

- 分类

  - 块级元素

  - 行类元素

- 特殊符号

- p,br,h

- input 系列

- form
  - action
  - method
  -enctype: 文件上传专属

- select,textarea

- ul/ol/dl

- table

- iframe,fieldset

- div,span

引入CSS的三种方式

- 标签引入 style(优先级最高)

- <head>引入 style(优先级中)

- <head>引入 <link>,即外部文件(优先级最低)

CSS 选择器

- 层级选择器: 使用'空格'一层一层找下来

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="....">
        <link rel="shortcut icon" href="GREEN.ico">
        <style>
            // 相互之间使用'空格'隔开
            div div p .c3{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div class="c2">
            <div></div>
            <div>
                <p>
                    <span>00</span>
                    <a class="c3">uu</a> // 红色背景效果
                </p>
            </div>
        </div>

    </body>
    </html>

- 组合选择器: 使用'逗号'隔开,批量选择

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="....">
        <link rel="shortcut icon" href="GREEN.ico">
        <style>
            // 使用'逗号'隔开
            .c1,.c2,.c3{
                color:greenyellow;
            }
        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>

    </body>
    </html>

- 三个基本的css属性

    <style>
        .c1{
            color:red; # 字体颜色
            background-color: #00a8c6; # 背景色
            font-size: 32px; # 字体大小
        }
    </style>

- 颜色的三种写法

    <style>
        background-color:#FF69B4;
        background-color:rgb(25,180,10);
        background-color:red;
    </style>

- 高度 和 宽度

    - height:没有 100% 属性

    - width: 有 100% 属性

    - 基础实例
    ......
        <style>

            .c2{
                height:160px;
                width:500px
            }
        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div class="c2">第二个</div> # 利用 chrome 检查,可以看出这块区域的大小,即高度和宽度

    </body>


    - 相对父元素所占百分比

        <body>
            <h1>测试页面</h1>
            <div class="c1">king水电费</div>
            <div style="width:500px">
                <div style="width:20%;background-color:greenyellow">123456</div> # 只占20%的宽度(相对父元素的500px,从左往右)
                <div style="width:80%;background-color:pink">789101</div> # # 只占80%的宽度(相对父元素的500px,从左往右)
            </div>

        </body>

    - 这里如果想把20%和80%占满整个div,可以都添加 float:left 即可实现效果

CSS背景图片的处理

- background-image: url('blue.png')

    - 实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="....">
        <link rel="shortcut icon" href="GREEN.ico">
        <style>
            .img{
                # 如果没有'高度'和'宽度',图片存在,但是无法显示
                # 由于设定了宽度和高度,图片会一直重复,填充满整个div
                width:100%;
                height:800px;
                background-image: url('blue.png')
            }

        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div class="img"></div>
    </body>
    </html>


-此时,不想让图片重复填充,怎么破 --- background-repeat:no-repeat

    <style>
        .img{

            width:100%;
            height:800px;
            background-repeat:no-repeat; # 图片不再重复,只有一张
            background-image: url('blue.png')
        }

    </style>


- 当我们定义了'宽度','高度',以及图片背景,并且图片不重复,这时图片是'死的'
  '宽度'和'高度'的限制,使图片只能固定显示那一块区域,此时若想让这块区域
  显示图片的其他部分,怎么破? 定义 background-position(定义x,定义y)
  可以使用chrome的'检查',使用鼠标滚轮确定'x,y的像素'

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="....">
        <link rel="shortcut icon" href="GREEN.ico">
        <style>
            .img2{
                width:100px;
                height:50px;
                background-repeat: no-repeat;
                background-image: url('blue.png');
                background-position:-307px -140px; # chrome 调试显示美女图片的'眼睛'
            }

        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div class="img2"></div>

    </body>
    </html>

- background 可以把属性值全部写在一起(个人不推荐这么写...)

    <style>
    background: #00FF00 url(bgimage.gif) no-repeat fixed top; 
    </style>

border

- 含义:边框

- 赋值:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        ......
    </head>
    <body>
        <h1>测试页面</h1>
        <div style="border: 4px solid red"> # 边框大小 实线(虚线) 颜色
            xxxx
        </div>

    </body>
    </html>

    - 由此延伸出'border-left,border-right,border-top,border-bottom'等等属性

display 展示

- 基础示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="....">
        <link rel="shortcut icon" href="GREEN.ico">
        <style>
            .div1{
                display: none; # chrome 勾选,再取消,看看效果
            }
        </style>
    </head>
    <body>
        <h1>测试页面</h1>
        <div style="border: 4px solid red" class="div1">
            xxxx
        </div>

    </body>
    </html>

    - 效果:整个<div>块消失(在京东首页的'登录'导航条测试,'内容'和'位置'一起消失...)
      与 display 属性类似的,还有一个属性 visibility ('内容'消失,但是'位置'还在,京东首页测试很明显)


- display:block : 把元素效果渲染成'块级元素'效果

    - 原实例

        <!DOCTYPE html>
        <html lang="en">
        <head>
            ......
        </head>
        <body>
            <h1>测试页面</h1>
            <div style="border: 4px solid red" class="div1">
                <p style="background-color:green"> # 整个段落都是呈现'绿色'
                    123456789
                    <br>
                    <span style="background-color:purple">456789</span> # 456789显示紫色(内容多少,就占多少空间),被包裹在绿色中
                </p>
            </div>

        </body>
        </html>

    - 此时,我想把'紫色'占满'一行'怎木破 --- 把<span>提升为'块级元素'即可:display:none

        ......
                <p style="background-color:green">
                    123456789
                    <br>                                # 新增属性
                    <span style="background-color:purple;display: block">456789</span>
                </p>
            </div>

        </body>
        </html>

    - display:inline 就是把'块级元素'变成'内联元素',不再作示例

    - 小结:

        - block的特性:块级元素,可以设置'width'和'height'

        - inline的特性:内联元素,不换行


    - display:inline-block,具有'小结'的所有特性('折叠菜单'效果的运用)

        <!DOCTYPE html>
        <html lang="en">
        <head>
            ......
        </head>
        <body>
            <span style="background-color:red;height:50px;width:200px">123456789</span> # 内联元素,是无法设置'width'和'height'
            <span style="display:inline-block;background-color:green;height:50px;width:100px">987654321</span> # 可以设置了
        </body>
        </html>

cursor: 渲染'鼠标'的形状

- 基础示例
    style>
        .div1{
            cursor:pointer;
        }
    </style>
    ......
    <body>
        <a href="http://www.baidu.com" target="_blank">百度</a> # 鼠标默认小手
        <div class="div1">
            123 # 也会变成小手
        </div>
    </body>

    - 鼠标的样式

        - cursor:help; 鼠标帮助样式

        - cursor:wait; 鼠标等待样式

        - cursor:move; 鼠标移动样式

        - cursor:crosshair;鼠标十字架样式

CSS边距 --- margin(外边距)/padding(内边距)

- 测试代码

    <body>
        <div style="height: 70px;border: 1px solid red;">
            <div style="height: 30px;background-color: greenyellow"></div>
        </div>
    </body>


- 刷新网页,右键'内div',chrome增加'margin-top:17px',可以看到,greenyellow颜色块不再位于顶部,而是与顶部有距离了


- 刷新网页,右键'内div',勾掉"margin-top",chrome增加'padding-top:17px',可以看到,greenyellow颜色块区域越来大(原区域块实际没有变化的,只是被撑开了,仔细看chrome)

- 实例

    <div style="height: 100px;border: 1px solid red;background-color:#ddd">
        <div style="margin-top:30px;margin-left: 100px;"> # 若删除 style,input框默认样式就是位于'左上角',而且挤在一起
            <input type="text">
            <input type="text"> # 这里可以增加'padding',使中间的input框看起来比较'大条'
            <input type="text">
        </div>
    </div>

- 小结

    - margin(外边距):元素本身不会增加

    - padding(内边距):元素本身会增加

浮动:堆叠挤在一起

- 基础实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        # 20%的颜色块和80%的颜色块不会'叠加'在一起
        # 因为都是'块级'元素,各占一行
        <div style="width: 500px;border: 1px solid red">
            <div style="width: 20%;background-color: green">aaa</div>
            <div style="width: 80%;background-color: purple">bbb</div>
        </div>
    </body>
</html>

- 浮动效果:挤压在一起,从而两个颜色块占据100%的空间

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="width: 500px;border: 1px solid red">
            <div style="width: 20%;background-color: green;float: left">aaa</div>
            <div style="width: 80%;background-color: purple;float: left">bbb</div>
        </div>
    </body>
</html>

- 注意:如果'purple块'此时 width 设置成'90%',就'浮动'不起来,没有堆叠效果了,因为父div的空间不够

- 实例3:clear:both,把浮动后的元素,拉回到'父元素'

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="width: 500px;border: 1px solid red">
            # 浮动以后,子元素会脱离父元素
            <div style="width: 20%;background-color: green;float: left">aaa</div>
            <div style="width: 30%;background-color: purple;float: left">bbb</div>
            # 拉回来
            <div style="clear: both"></div>
        </div>
    </body>
</html>


--- 小结:

    - 所谓'浮动',就是'堆叠'效果,标签会浮起来,但是会脱离父元素,需要拉回来

    - 漂起来的时候要注意'宽度'的限制,超过'宽度'就无法浮动

position

- 博文地址

    https://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

- 三个值

    - fixed:固定窗口,鼠标滚动对其无影响

    - relative:搭配 absolute 使用的

    - absolute:固定窗口,鼠标滚动对其有影响

- 基础实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 1000px;background-color: #ddd"></div>
        <div style="position: fixed">返回顶部</div> # 无效果(因为没有指定显示的位置)
    </body>
</html>

- 实例2:增加显示的位置

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 1000px;background-color: #ddd"></div>
                                    # 靠右边200px,并且一直在底部
        <div style="position: fixed;right: 200px;bottom: 0">返回顶部</div>
    </body>
</html>

- 实例3:把'fixed'换成'absolute',结果就是开始固定,鼠标一滚,位置马上变了...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 1000px;background-color: #ddd"></div>
                            # 变更之处
        <div style="position: absolute;right: 200px;bottom: 0">返回顶部</div>
    </body>
</html>

- 实例4:relative放在'父元素'作'关联'

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 500px;width:400px;border: 1px solid red;position: relative">
                        # 位于父元素的右下角显示 123456789
            <div style="position: absolute;bottom: 0;right: 0">123456789</div>
        </div>

    </body>
</html>

- 实例5:干扰的'父元素',实际是没有影响的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
       <div style="height: 500px;width:400px;border: 1px solid red;position: relative">
           <div style="height: 200px"> # 无效果,123会继续向上找'relative'
               <div style="position: absolute;bottom: 0;right: 0">123456789</div>
           </div>

        </div>

    </body>
</html>

img 标签本身就有 width 和 height 属性

- 经过测试,它的效果和css效果一样

    <body>
        <h1>测试页面</h1>
        # 两个效果一样的
        <img src="mid-autumnday.jpg" alt="中秋图片" width="50px" height="50px">
        <br>
        <img src="mid-autumnday.jpg" alt="中秋图片" style="height: 50px;width: 50px">
    </body>

- 注意: <img>自带的'width'和'height'可以限制图片的大小,而div中'width'和'height'是无法限制img的

模态框练习

- 基础实例(一个按钮,一个'模态框区域',一个'div区域')

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .modal{
                width: 400px;
                height: 300px;
                background-color: #dddddd;
                position: fixed;
                top: 50%;
                left: 50%;
            }
        </style>
    </head>

    <body>
        <h1>测试页面</h1>
        <input type="button" value="添加">
        <div class="modal"></div>
        <div style="height: 2000px"></div>
    </body>
</html>

- 改进实例(让模态框显示在页面中间)
......
<style>
    .modal{
        ......
        left: 50%;
        margin-left: -200px; # 新增外边距
        margin-top: -150px;
    }
</style>

- 添加'遮罩层'


    <style>
        .modal{
            width: 400px;
            height: 300px;
            background-color: #dddddd;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
        }
        .shadow{ # 占满整个屏幕
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
        }
    </style>


<body>
    <h1>测试页面</h1>
    <input type="button" value="添加">
    <div class="shadow"></div> # 添加遮罩层
    <div class="modal">
        <input type="text"> # 新增测试框
        <input type="text">
        <input type="text">
    </div>
    <div style="height: 2000px"></div>
</body>

-指明元素的堆叠顺序, 并修改'遮罩层'的'不透明度'

.modal{
        ......
        margin-top: -150px;
        z-index: 10; # 比较大,所以在遮罩层上面
    }

.shadow{
        ......
        background-color: black;
        opacity: 0.4; # 不透明度
        z-index: 9; # 相对小,所以在模态框下面
    }

.....
<div class="modal">
    <input type="text"> # 新增测试框
    <input type="text">
    <input type="text">
</div>

- 注意,这里的 background-color 和 opacity 可以简写

.shadow{
        ......
        background-color: rgba(0,0,0,.6); # 颜色和不透明度
        z-index: 9;
    }

写网页的基本布局

<!DOCTYPE html>
<html lang="en">
    <head>
       ......
    </head>

    <body>
        <div class="pg-header"></div> # 头部
        <div class="pg-body"></div> # 中间内容
        <div class="pg-footer"></div> # 尾部
    </body>
</html>