zoukankan      html  css  js  c++  java
  • HTML


    HTML格式

    1.<html>

         <head>

         <title></title>  

         </head>

        文字

     </html>

    2.meta标签

    //设置html内容的文档内容格式和编码方式.

    <meta http-equvi="Content-Type"    

       comtent="text/html;charset=gb2312"/>

    <meta  name="keywords  content="内容"/>  

      3.h标签(标题标签)

       <h1>-<h6>  

      4.br标签(换行标签)

       <br/>  

      5.hr标签(水平线标签)  

      <hr/>  

      6.strong(加粗)  

      7.em(倾斜)  

      8.特殊:    &nbsp;空格    &gt;(>)  

      &lt;(<)    &qout(“)    &copy:(版权符号)  


      9.图片  

      图片标签(img)<img src="" alt= title=""    width="" height=""/>  

      width宽度 height高度   

      src:图片的地址(路径+图片名称)

      alt:图片找不到的提示信息。

      title:当鼠标停留在图片上的提示信息   

      注意:怎么找图片   

          1:先确定当前html的位置   

          2:如果图片在同级目录直接写图片名称    

             如果在上级目录就用../图片名称    

             如果在下级目录就用目录名称/图片名称   

    10.超链接   

        <a href="" target="">跳转到***</a>    

        href:要跳转的文件路径名称     

       target:        _self(目标页面覆盖当前的页面)     

       _blank(目标页面弹出新的框来显示)   

    11.锚链接   

      创建步骤:      

        1创建锚点:<a name="head">顶</a>      

        2访问锚点链接 :  <a href=#"head">访问锚点</a>  

      12.功能性作用        <a href="mailto:邮箱地址"></a>

    第二章:
       1.无序列表
         <ul>---声明无序列表
         <li></li>---列表项
         </ul>
         补充:type属性 circle  squear...
       2.有序列表
         <ol>---声明有序列表
         <li></li>---列表项
         </ol>
         补充:type属性 I a/A 1
       3.定义列表
         <dl>---声明定义列表
         <dt></dt>---列表项内容声明
         <dd></dd>---列表项内容
         </dl>
       4.表格
        <table>----表格标签
           <tr>----行标签
              <td></td>----单元标签
           </tr>
        </table>
        table的属性:align,valign,width,border,
                     bgcolor,cellspancing,cellpadding.
              cellspancing:单元格与单元格边界的距离,
              cellpadding:单元格边界和单元格文字的距离。
        td的属性:colspan(这个单元格占几列)
                  rowspan(这个单元格占几行)
        5.框架
           <frameset> ------<框架标签>
              <frame src="html的路径+名称"></frame>(引用html标签)
           </frameset>
        刷新指定区域(1:在指定的frame中指定name属性值)框架.html
                    (2:在超链接部分指定target的值为第一步的属性值)left.html
        6.内联框架<iframe>
           <iframe src="html路径+名称" frameborder="0/1" scrolling="yes/no">
           </iframe>
           frameborder:0:表示无边框  1:表示有边框
           scrolling: yes表示有滚动条 no表示无滚动条
         刷新内联框架步骤
          第一步:在指定的iframe中指定name属性值
          第二步:在超链接部分指定target的值为第一步的属性值

     第三章:表单  

       1.语法:

    <form action=""(跳转地址) method="get/post"(提交方式)>         

              <input type="" name="" value="">     

     </form>   

      2.type属性的值    

       text:表示输入框(文本框)    

       password:表示密码框     

      submit:表示提交按钮   

        reset:表示重置按    

       radio:表示单选按钮   

        checkbox:表示复选按钮  

       3.下拉框(列表框)     

      <select name"">          下拉框          

          <option value=""></option>  下拉框的选项   

      </select>    

      注意:a.默认选中<option selected="selected"></option>       

          bradio,checkbox的默认选中是checked="checked"

        4.图片按钮     

      <input type="image" src="图片路径+名称"/>   

      5.文件域    

       <input type="file"/>   

       注意:提交方式是post,并且在form中指定enctype="multipart/form-data"  

       6.<textarea cols="多列" rows="多行" ></textarea>  

       7.域      

    <fieldset>  -----  域标签        

              <legend>xxx</legend>  ----域标题        

              <input type="xx"/>   

    <fieldset>  

       8.表单元素标注       

       <label for="id属性值"></label>标注     

      步骤:      

        1.给指定的标签加上id属性      

        2.在label中加上for="id属性的值"   

      9.只读和禁用    

                1.只读:readonly="readonly"    

                2.禁用:disabled="disabled"  

    第四章CSS   

      1.css的语法     

        位置    

         <head>        

             <style type="text/css">

              css代码       

              </style>      

          </head>  

       2.选择器{       

          属性名1:属性值1;      

          属性名2:属性2:;  

      }      

    列:     

      h1{font-size:12px;}---字体大小    

          color:red;      ---字体颜色    

       }

    注意多个属性用分号分隔   

      3.标签选择器   

       语法:     

         标签名{    

             ...       

       }    

    4.类选择器    

       语法:       

        .class属性值{

        ...  

        }  

        步骤:     

         第一步:给指定的html标签加上class属性    

          第二步:在style中写             

                  .class属性值{             

                    ...                  

             }    

    5.id选择器   

      语法:    

         #id属性值{       

          ...      

        }    

    6.行内样式    

       使用style属性值引入样式     

      列:<h1 style="font-size:10px;color:red;">xx</h1>

     7.内部样式表    

       在head中写style   

        列:h1{      

          xxx   

         }   

      8.外部样式表    

       把css代码保存在以css结尾的文件中(层叠样式文件)   

        吧css文件引入html中   

        引入方式两种:  

         1:链接方式    

       <link rel="stylesheet" href="文件路径" type="text/css"/>   

        2:<style >       

                @import url("文件路径");    

          </style>  

       9.优先级   

               行内样式>内部样式>外部样式(就近原则)   

               id选择器>class选择>标签选择器

        10.高级选择器    

        后代选择器     

       外层标签(父)内层标签(子)  

       11.并集选择器       

        选择器1,选择器2,选择器3,...选择器n{       

                    ...      

          }

    第五章    

      字体样式   

        font-family:字体类型  

         font-size:字体大小   

        font-weight:字体的粗细(bold)   

        font-style:字体的倾斜(italic)   

        font:倾斜 粗细 大小 类型     transp(背景)

         文本样式   

        color:颜色  

         text-align:文本对其方式(left/right/center)  

         line-height:行高/距    

         text-decoration:装饰(underlin/overline)   

        text-indent 首行缩进    

       verti-align:垂直对齐方式   

        注意:vertical-align通常适用于td中

     超链接转换器   

       a:link 表示没有访问      a:visited 被访问后      a:hover  鼠标悬浮      a:active 未松开

        背景样式   

       background-color 背景颜色   

       background-image:ulrl(图片路径)背景图片   

       background-repeat:图片平铺方式(no-repeat,repeat,repeat-x,repeat-y)  

        background-position:图片的位置(x,y|x%,y%center,left,right|top,center,bottom)   

       简单写法:background:yanse,图片,位置,平铺方式

        列表样式   

       list-style-type:列表样式   

       list-style-image:url(图片路径)   

       list-style-position:位置(inside|outside)   

       list-style:样式 图片 位置

    第六章

      盒子模型   

       属性      

      width 宽   

      height 高    

      border 边框    

      padding 内边框   

      margin 外边框   

       边框    

        border 简写    

        border-color 颜色    

        border-width 边框宽度    

        border-style 边框风格    

      注意:边框 可以分为上 下 左 右四个,可以分别设置数值      

          列:border-color:red green blue yellow;    

        外边距    

        margin:外边距    

        margin-top:上外边距     

         margin-left:左外边距    

        margin-right:右外边距     

       margin-bottom:底外边距

         内边距    

        padding:内边距   

        padding-top:上内边距    

        padding-left:左内边距    

        padding-right:右内边距    

        padding-bottom:底内边距

         display属性   

         display:none;表示的隐藏元素   

         display:block;块级元素(显示)    

         display:inline;内联元素(显示)

    第七章   浮动    

       float:left;左浮动     

       float:right;右浮动   

       float:none;     

       注意:

       a.浮动元素会把当前的块级元素变成内联元素       

             b.不在标准文档流中(不会按普通的元素排版)    

       清除浮动    

        clear:both;清除左右浮动     

        clear:left;清除左浮动    

        clear:right;清除右浮动

          溢出处理   

            overflow:none;(默认)    

            overflow:hidden;(隐藏)    

            overflow:scroil;(滚动)   

            overflow:auto;自动 滚动     

       注意:可以通过overflow:hidden设置浮动元素的父元素的高度,使它包裹整个浮动元素

    第八章 元素定位(position)      

       static:mor     

        relative:相对定位    

         absolute:绝对定位    

         fixed:固定(建议不要使用,部分浏览器不兼容)

    注意:

      a.相对布局和决定布局如果它的直接父标签是body,那么相对位置和绝对位置的起始点不同,如果他们的直接父标签是div 那么他们的起始点都在父标签的左上角。    

       b.绝对布局都是从父标签的左上角开始的. 而绝对布局是遵循标准文档流格式。    

           c.绝对布局一定要设置top或者left才会生效    

    层叠关系(z-index)    

       默认为0      

       值可以是如何整数    

       值越大,位置在越前面     

      透明值      

       opacity:0-1值越小越透明

  • 相关阅读:
    一卦,测一年运气
    测一下我心中想的事
    一卦,测一下我心里想的事
    这一卦,学到了不少东西
    癸山丁向下卦(七运)
    起卦测我心里想的事
    现在的卦,越来越看不懂了
    luogu P2759 奇怪的函数 |二分答案
    luogu P2515 [HAOI2010]软件安装 |Tarjan+树上背包
    luogu P2343 宝石管理系统 |分块+堆
  • 原文地址:https://www.cnblogs.com/xuling123/p/6895638.html
Copyright © 2011-2022 走看看