• html知识补充


    1.点击超链接跳转到新窗口

    <a href="http://www.baidu.com" target="_blank">百度一下</a>  #target="_self"或者不写,默认在当前窗口打开

    2.超链接,找到本窗口中的某个地方

    <a href="#">超链接</a>    #相当于刷新了本界面,跳到界面的最顶端
    <a href="#2">超链接</a>    #找到本界面id=2的地方,置顶显示
    #               哈希值 锚点 默认有点击行为 当设置了javascript:void(0);后会阻止a标签的默认点击行为
    <a href="javascript:void(0);">超链接</a> 

    3.img标签:

      src连接的图片资源

      alt图片资源加载失败,显示的文本

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            a{
                display:block;    #设置之后就能保证超链接和图片的大小一样
                width: 300px;
                height:300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="javascript:void(0)">
                <img src="https://pic.baike.soso.com/ugc/baikepic2/0/20170825230330-2051740427_jpg_570_711_35774.jpg/800" alt="加载失败" width="300" height="300">
            </a>
        </div>
        <div>
            <span>1111</span>
        </div>
    </body>
    </html>
    View Code

    4.ul:unordered list无需列表 ul下的子元素只能是li

      默认是实心圆圈

      type="circle" 空心圆

      tpye="square"实心方块

      **li中可以继续嵌套ul,可以嵌套多次

     

    5.ol:ordered list 有序列表

      默认是小写数字排序

    <ol type="I" start="5">    #I是大写罗马数字,i是小写罗马数字 start是从几开始
    <ol type="a" start="4"> a就是字母排序也支持大写,也可以从第几个字母开始

    5.dl:定义列表:

      dt:定义标题

      dd:定义描述

    6.表格 table

    <table border="1" style="border-collapse: collapse">    #边线的大小,让边线合并
            <tr>    #tr是行
                <td>id</td>    #是列
                <td>name</td>
                <td>age</td>
            </tr>
            <tr>
                <td>1</td>
                <td>lianda</td>
                <td>nan</td>
            </tr>
    </table>
    View Code
    <body>
        <table border="1" style="border-collapse: collapse">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
                <td rowspan="3">tell</td>
            </tr>
            <tr>
                <td>1</td>
                <td>lian</td>
                <td>nan</td>
            </tr>
            <tr>
                <td>2</td>
                <td colspan="2">lian</td>
            </tr>
        </table>
    </body>
    View Code

    7.form表单

      http协议

      action:提交的服务器网址

      method:默认get,post(应用:登录注册,上传文件)在上传文件时还要加上Enctype='multipart/form-data'

        页面中的a img link 默认是get请求

      input

        type:

          text:文本输入框

          password:密码输入框

          file:文件按钮,提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'

          number:值允许输入数字

          submit:提交按钮,提交到服务器

          button:普通按钮

          reset:重置按钮

          radio:单选框(name是一个值得时候才是单选)

          checkbox:复选框

        name:提交到服务器的key

        value:显示的文本内容,服务器的value

        placeholder:文本代替

      lable:

        for:是与下面的某个表单空间的id属性相关联

     下拉列表框

    <select name="school" id="">
        <option value="1">小学</option>    #没有selected显示第一行
        <option value="2">初中</option>
        <option value="3">高中</option>
        <option selected value="4">大学</option>    #selected优先显示这个
    </select>
    View Code

    描述框

    <textarea name="" id="" cols="30" rows="10"></textarea>
    View Code

      BS交互

        1.form表单默认与服务器进行交互

        2.ajax技术

    CSS层叠样式

      作用:修饰网页结构

    CSS的三种引入方式:  默认下面的比上面的优先级高(覆盖)

      行内样式

        行内样式的优先级是最高的

      内接样式

      外接样式

     基本选择器

      id选择器:选中的是特性 唯一的,不能重复  用#+id

      标签选择器:选中的是页面中共性的标签  直接标签名

      类选择器:选中的是页面中的共性的标签,同一类名可以有又多个  .+类名

      通配符选择器:通常是对页面进行重置样式  

    a{
        /*清除a标签的下划线*/
        text-decoration: none;
     }
    .baidu{
        color: blue;
        /*下划线*/
        text-decoration: underline;
        /*显示小手的状态*/
        cursor: pointer;
    }
    View Code

      

        

  • 相关阅读:
    1:position
    vue2源码解析入门 (vue 2.6.14) (一)
    js判断对象是否包含某个属性
    公共枚举转换
    深度拷贝对象与数组
    年月日
    BIM自动识别三维地图Revit模型自动识别三维地图IFC模型自动识别三维地图制作
    易景空间BIM轻量化、BIM在线编辑器、BIM在线平台与bimface、品茗CCBIM对比优势
    波纹效果
    推荐一篇关于IOS内购的博客
  • 原文地址:https://www.cnblogs.com/qq849784670/p/9662649.html
Copyright © 2020-2023  润新知