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值越小越透明

原文地址:https://www.cnblogs.com/xuling123/p/6895638.html