精华内容
下载资源
问答
  • HTML5代码大全

    2016-01-17 05:55:08
    HTML1 - HTML5代码大全,特殊属性
  • HTML5开发技术详细教程, HTML5代码大全, H5技术总结, 附带超详细html5学习路径图
  • HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网...
  • html5代码大全-精读

    2020-06-16 12:25:00
    表示label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点 email: 颜色的表示方式 1)颜色名 如red color:red; 2)rgb() 范围0-255 red green blue 黑:rgb(0,0,0) 白:rgb(255,255,255) color...
    1.css引用方式:
    
    ①内联式
    
    <style>
    
        div{
    
            color:red;
    
        }
    
    </style>
    
    ②行内式
    
    <div style="color:green">
    
    ③外联式
    
    <link href="css/css1.css" rel="stylesheet">
    
    ④import方式
    
    <style>
    
        @import url("css/css1.css");
    
    </style>
    
    
    
    2.相对路径:<link href="css/css1.css" rel="stylesheet">
    
              ../返回上一级目录
    
      绝对路径:<link href="E:/web Test-43/css/css1.css" rel="stylesheet">

     

    1. 表格:colspan 列合并  rowspan 行合并  cellspacing 单元格间距 <table cellspacing="0"></table>
    <tr>
      <td colspan="2">a1</td><!--行-->
    </tr>
    <tr>
    
        <td rowspan="2">b1</td><!--列-->
    
    </tr>
    ①固定表格布局
    
    table{  
         table-layout:fixed;}
    ②如何让表格边框为1px
    
    方法1:用边框的上下左右调整
    
    方法2:border-collapse:collapse 表格边框合并为单一边框 
           默认:separate
    
           <style>
    
               table{
                    border-collapse:collapse;
                }
           </style>
    ③列间隔 行间隔:border-spacing
    
      border-spacing:10px 5px;
    ④文字水平对齐 text-align -- left center right
    
    table{  text-align:center;  }
    ⑤空单元格 empty-cells:hide隐藏空单元格  show显示空单元格
    
    table{  empty-cells:hide;  }
    ⑥表格居中
    
    table{  margin: auto;  }
    ⑦垂直对齐 vertical-align -- top middle bottom
    
    table tr td{  
              vertical-align:top;  }
    
     
    4.圆角问题:
    border-bottom-left-radius: ;
    
    border-bottom-right-radius: ;
    
    border-top-left-radius: ;
    
    border-top-right-radius: ;
    
    border-radius: 10px 0px 0px 10px;
    
     
    1. 伪类:hover--鼠标悬停
    table tr:hover{
    
        background-color: blue;
    
    }  --行悬停
    
    table tr td:hover{
    
        background-color: blue;
    
    }  --每个表格悬停
    
    table tr th:hover{
    
        background-color:red;
    
    }  --表头悬停
    
     
    6.表头<!--th-->
    
    <tr>
    
        <th>t1</th>
    
        <th>t2</th>
    
        <th>t3</th>
    
    </tr>
    
     
    1. 表格当中添加表格
    <table class="t1">
    
        <tr><td>
    
                <table class="t2">
    
                    <tr>
    
                        <td></td>
    
                    </tr>
    
                </table>
    
        </td></tr>
    
    </table>
    
     
    1. 透明度:
    .uname:hover{
    
        background-color: red;
    
        opacity: 0.2;
    
    }
    
    9.焦点:
    
    .pwd:focus{
        background-color: green;
    
        width: 300px;
    
    }
    
     
    10.表单及表单控件:  action:提交地址  action=""提交当前页
    
                       method:提交方式  get-默认 post-更加安全
    
    <form action="" method="post"></form>
    (1)<!--文本输入控件-->
    
    <input type="text" name="uname" value="uname">
    (2)<!--密码输入控件-->
    
    <input type="password" name="pwd" value="pwd>
    (3)<!--按钮控件-->
    
       1)<button>登录</button>
    
       2)<input type="button" value="登录按钮" name="but01">
    (4)<!--提交按钮 整体刷新-->      --ajax 局部刷新
    
    <input type="submit" value="登录" name="but02">
    (5)<!--重置按钮-->
    
    <input type="reset" value="重置" name="but03">
    (6)<!--单选控件 默认选中属性:checked--> --value="不同" name="相同"
    
    <input type="radio" value="nan" name="r1">男
    
    <input type="radio" value="nv" name="r1">女
    (7)<!--复选控件 默认选中属性:checked--> --value="不同" name="相同"
    
    爱好:<input type="checkbox" value="xx" name="c1" >学习
    
          <input type="checkbox" value="yx" name="c1" >游戏
    
          <input type="checkbox" value="sj" name="c1" >睡觉
    (8)<!--下拉列表   multiple:多选  selected:默认-->
    
    城市:<select multiple>
    
             <option class="p01" selected>北京</option>
    
             <option class="p01">上海</option>
    
             <option class="p01">哈尔滨</option>
    
          </select>
    (9)<!--多行文本控件-->
    
    简介:<textarea rows="20" cols="30"></textarea>
    (10)<!--上传文件控件-->
    
    上传文件:<input type="file">
    (11)<!--隐藏控件-->
    
    <input type="hidden">
    (12)
    <!--html5表单控件-->
    
    <form action="">
    
        <!--email控件-->
    
        <input type="email">
    
        <!--网址-->
    
        <input type="url">
    
        <!--电话-->
    
        <input type="tel">
    
        <!--日期-->
    
        <input type="date" value="2016-01-01">
    
        <input type="time">
    
        <input type="datetime-local">
    
        <input type="month">
    
        <input type="week">
        <!--<input type="datetime">不好使-->
    
        <!--数值控件-->
    
        <input type="number">
    
        <!--范围控件-->
    
        <input type="range" value="25" min="0" max="100" step="1">
    
        <!--颜色控件-->
    
        <input type="color">
    
        <!--搜索控件-->
    
        <input type="search">
    
    </form>
    
     
    
     
    1. 外边距 margin-left margin-right margin-top margin-bottom      1)元素(盒子)垂直排列,margin上下合并,取最大值。      2)元素(盒子)水平排列,margin左右累加      margin允许有负值
    margin:20px;       四边
    
    margin:20px 40px;     上下 左右
    
    margin:20px 180px 200px;   上 左右 下
    
    margin:20px 700px 80px 100px; 上 右 下 左
    
     
    1. 内边距 
    padding-left padding-right padding-top padding-bottom
    padding 不允许负值
    padding:50px;   四边
    
    padding:30px 40px;    上下 左右
    
    padding:20px 20px 40px;   上 左右 下
    
    padding:20px 40px 20px 40px;    上 右 下 左
    
     
    1. 加粗:
    font-weight: border 100~900;
    简写:
    font:italic bolder 20px arial ;(简写:20px arial 必写 顺序不能颠倒)
    
     
    14.背景简写:
    background: red url("") no-repeat fixed top;简写 顺序可变
    
     
    15.字体单位:
    
    px 像素
    
    cm 厘米
    
    pt 磅
    
    in 英寸
    
    百分比  对默认字体缩放(不同浏览器默认字体不同,默认最小字体也不同)
    
    em 字号倍数,相对于默认字体(父元素或浏览器)
    
    //font-size:2em;//
    
    //pt cm in 200%原基础上放大 50%原基础上缩小 em成倍数放大//
    
     
    16.使红框固定大小
    label{
    width: 100px;
    
        border:1px solid red;
    
        display: inline-block;
    
    }
    <label>email:</label>
    <label>user name:</label>
    
     
    
     
    17.表示label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点
    <label for="inp01">email:</label><input type="text" id="inp01">
    
     
    1. 颜色的表示方式   1)颜色名 如red
        color:red;
    
      2)rgb()  范围0-255 red green blue  黑:rgb(0,0,0) 白:rgb(255,255,255)
        color:rgb(255,0,0)
    
      3)十六进制表示,如#fea230
    color:#ff0000;
    
      4)十六进制简写:#223344简写为 #234
    
        color:#234;
    
    
    
    
    1. 背景图片定位 background-position:top right;
    简写:
    background:url("images/1.jpg") no-repeat top right;
    
     
    20.CSS3 阴影
    
    box-shadow:(inset内阴影,省略为外阴影)水平偏移量,垂直偏移量,阴影模糊度,阴影大小,阴影颜色
    
    box-shadow: 10px 10px 10px 10px black;          (外阴影)
    
    box-shadow:inset 10px 10px 10px 10px black;     (内阴影)
    
     
    1. 伪类:被选中(被激活) .d01:active{   background: blue; }
    
     
    22.先隐藏,鼠标悬浮时显示(隐藏的模块必须被包含在悬停的模块里)
    .d02{
    
        /*隐藏*/
    
        display: none;
    
    }
    
    .d01:hover .d02{
    
        /*显示*/
    
        display: block;
    
    }
    <div class="d01"> <div class="d02"></div> </div>
    
     
    1. line-height:10px;     //行高
       //与height所设值相同时,文字垂直居中
    
     
    24.
    块级元素:与同级元素竖直排列,且左右撑满
    
              如:div  ul  li  p  dd  dt  dl
    
    行级元素:与同级元素横向排列,且内容自适应,不会左右撑满
    
              如:span  a  img  input
    
                  span a:宽高不能改变
    
                  img input:宽高能改变(特例)
    
    标准流static:css规定的默认的块级元素与行级元素的排列方式
    
    display: block;  将当前元素转换为块级元素
    
    display: inline;  将当前元素转换为行级元素
    
    display: inline-block;  行级块元素
    
     
    25.display 与 visibility区别?
    
    display 不占用空间(后元素补位)   visibility 占用空间(保留原元素空间)
    
       display: none; //隐藏
    
       display: block;  //显示
    
       visibility: hidden;  //隐藏
       visibility: visible;  //显示
    
     
    26.浮动    float:left;
               float:right;
    
      1)浮动的元素会脱离标准流
    
      2)如前面有浮动元素,会依次排在后面
    
      3)浮动是以标准流所在位置为起始点
    
      4)同高度元素横向排满后,会被“挤”到下面
    
      5)不同高度元素横向排满后,挤下后会被其他元素“卡”住
    
      6)清除浮动:clear:both/left/right;
    
      7)一个div的范围是由它里面的标准流决定的,与里面浮动的内容无关
    
    
    
    27.绝对定位
    
      1)position: absolute;  left right top bottom
    
      2)对定位脱离标准流
    
      3)绝对定位的元素是以它最近的一个已经定位的祖先元素为基准进行偏移
    
        如果没有已经定位的祖先元素,则会以浏览器窗口为基准进行偏移
    
      4)多个元素绝对定位,后面定位的元素的层级会高于前面(覆盖之前的元素)
    
      5)z-index 设定层级
    
     
    28.相对定位
    
      1)position: relative;  left right top bottom
    
      2)相对定位不脱离标准流
    
      3)相对定位元素会相对于它原来的位置进行偏移,不受父元素影响
    
         //相对定位、绝对定位允许负值
    
         //相对定位、绝对定位对浮动元素依然有效
    
     
    1. position:static; 恢复标准流
    
     
    1. <!--选项卡特效-->
    <style>
    .tab1_content{
    
        display: none;
    
    }
    
    .tab1:hover .tab1_content{
    
        display: block;
    
    }
    <style>
    <div class="tab1">
    
        tab1
    
        <div class="tab1_content">11111111111</div>
    
    </div>
    
     
    31.<!--列表-->
    列表类型
    
    list-style-type: circle;空心
    
    list-style-type: disc;实心
    
    list-style-type: square;实心正方形
    
    list-style-type: decimal;数字
    
    list-style-type: decimal-leading-zero;零开头的数字标记
    
    list-style-type: lower-roman;小写罗马
    
    list-style-type: upper-roman;大写罗马
    
    列表缩进
    
    list-style-position: inside;
    
    列表图片
    
    list-style-image: url("images/1.jpg");
    
    
    
    简写 顺序不能改变
    
    list-style:circle inside url("images/1.jpg");
    
    
    
    取消样式
    
    list-style: none;
    
     
    <!--无序列表-->
    
    <ul>
    
        <li>a111111111</li>
    
        <li>a222222222</li>
    
        <li>a333333333</li>
    
    </ul>
    
    
    
    
    
    <!--有序列表-->
    
    <ol>
    
        <li>b111111111</li>
    
        <li>b222222222</li>
    
        <li>b333333333</li>
    
    </ol>
    
    
    
    <!--定义列表-->
    
    <dl>
    
        <dt>计算机图书</dt>
    
            <dd>css计算</dd>
    
            <dd>java应用</dd>
    
        <dt>幼儿图书</dt>
    
            <dd>365故事</dd>
    
            <dd>唐诗300</dd>
    
    </dl>
    32.固定定位
    
       1)position: fixed;  left right top bottom
    
       2)固定定位脱离标准流(只有相对定位不脱离标准流)
    
       3)固定定位元素是以浏览器窗口或其他显示设备窗口为基准进行偏移
    
       4)固定定位对浮动元素依然有效
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 381
精华内容 152
关键字:

html5代码大全