html+css笔记

1.理解web1.0  web2.0  web3.0 的概念:


web1.0 :是一个厂商发布了内容给很多人看。主要特点在于用户通过浏览器被动的获取信息，
代表性内容：各大门户网站！个人展示型网站


web2.0:是把发布的权利同时放给普通人，更注重用户的交互作用，用户既是网站内容的消费者（浏览者），也是网站内容的制造者。它强调参与性、标签性、聚合性
            由于这些技术有不同程度的网络营销价值，因此Web2.0在网络营销中的应用已经成为网络营销的崭新领域，比如： 搜索引擎优化、
            每次点击成本、信息推送 Rss
代表性内容：博客的兴起、百度知道、wiki（网摘、社会网络），SNS各大社交型网络（facebook、开心网） 即时信息（IM）！




web3.0：是可以随时通过互联网获得自己需要的信息，甚至不是你来找信息，而是信息主动找你。最明显的特征就是主动性，即强调网站对用户需求的主动提取。另外就是用户在互联网上拥有自己的数据，无论走到哪里，都可以随时使用，用户在互联网上拥有自己的数据，并能在不同网站上使用，网站内的信息可以直接和其他网站相关信息进行交互和倒腾，能通过第三方信息平台同时对多家网站的信息进行整合使用；完全基于WEB，用浏览器即可以实现复杂的系序才具有的功能,比如即时通聊天等等就可以直接在网页完成，
代表性内容：Twitter、各大门户推出的微博。




2.理解 zend服务器组件 zendcCore  zendServer  他们的异同:
    Zend Core 也可用于windows平台下图形化的安装，让IIS一键安装PHP环境。ZEND官方说，可以让你的PHP运行在WIN环境 下，像LINUX环境一样的稳定。它能有效利用微软的FastCGI特性，为PHP的解析工作提供更高的可靠性和性能。
   Zend Server 是PHP创始公司Zend开发的功能十分强大的PHP Web开发应用服务器。是一个现成的 PHP 解决方案，可以简化 Windows 和 Linux 环境中 PHP 应用程序的开发和运行。它包括一个经过全面测试的 PHP 最新版本、对众多数据库系统的支持，以及许多用于改善 PHP 性能和诊断的专用于 Zend 的附加软件。




3.理解 html   xhtml  Dhtml   xml 的区别：
  HTML:  HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。
 dhtml: 确切地说，DHTML只是一种制作网页的概念，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变              换页面元素效果的网页的设计概念。
 xhtml: HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。
 XML: 结构化的信息描述，一种标记语言，是定义文档结构的机制。XML规范定义了一个对文档进行标记的标准。


4.理解w3c:
  w3c是研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作的一个组织.W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document Object Model）
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。




head部分常用标签：
  <meta charset="utf-8">   ----设置当前网页的编码     补充： phpstorm  默认的编码是  utf-8
 <meta  name="keywords" content=" 这是网页的关键词描述 ">--- 设置关键词  作用方便seo 爬虫收录该网页
 <meta name="description" content="当前网页的简单描述" /> ---网页简单描述
 <meta http-equiv="refresh"content="5;url=html4Demo.html">  ---表示5秒后页面重定向到  html4Demo.html适合做404网页。  
 <meta name="author" content="网页作者">


Body部分：
 <fieldset title="这是标题">
    <legend>   
          定义 fieldset 中的标题
   </legend>
      这是被包含的内容部分
</fieldset>


<lable >文本包含标签</lable>


<p>定义文章段落  </p>


<span>文档标签</span>


<div>块状标签</div>


 <table>  
       <tbody>    
         <tr><th>th通常表示表格的标题</th></tr>   ----tr代表 行   td  th代表　列
         <tr><td>td通常表示表格的内容</td></tr>
        </tbody>
 </table>






文字标签
    <b>字体加粗 </b>  <strong>...</strong>粗体字(强调)
    <em> 呈现为被强调的文本。</em>
    <h1>这是标题 1</h1>   ---在网页中 h1-h6网页权种较高.方便seo 对网页通过标题进行检索收录
  <h1>这是标题 2</h1>  标题字(最大)
<h2>这是标题 3</h2>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>  (最小)
^上标
<u> 加下划线</u>
<i>...</i>斜体字  <em>...</em>斜体字(强调)
<s>...</s>删除线   <del>...</del>删除线(表示删除)
瞄点（超链接）
 
<a href="链接地址">链接文本</a>
 <base href="当前网页的基准链接" /> ---通常是放在 head 标签里面    当前网页的基准链接通常是  http://服务器域名/地址


图像标签
<img  src="图片链接地址"  />  
<img src="1.png" width="500" height="200">    width ：表示宽度    height： 表示高度
<img src=图片地址>贴图
<img src=图片地址 width=180>设定图片宽度
<img src=图片地址 height=30>设定图片高度
<img src=图片地址 alt=提示文字>设定图片提示文字
<img src=图片地址 border=1>设定图片边框
<bgsound src=MID音乐文件地址>背景音乐设定












表单标签
  <form></form>
  <form action="" method="post" name="fromName" enctype="multipart/form-data">
     action  ---表单提交的地址
    method  ---表单提交的方式 通常我们使用 post   也可以使用 get 提交
   enctype  ---如果需要提交文件上传必须加 enctype 属性 而且属性的值必须是multipart/form-data  用于对表单内容进行编码的 MIME 类型。（山寨： 对文件进行二进制编码处理 后上传数据）




</form>
<input   type="表单类型" />
     <input type="text" name=""  id="" value=""  size="" maxlength=""  />  文本框
    <input type="button"  name=""  id="" value="按钮"  size=""    />
    <input type="checkbox"  name=""  id="" value="男"  size=""    />男
    <input type="file"  name=""  id="" value=""  size=""    />
    <input type="hidden"  name=""  id="" value=""  size=""    />
    <input type="image"  src="btn_sure.gif" name=""  id="" value=""  size=""    />
    <input type="password"  name=""  id="" value=""  size=""    />
    <input type="radio"  name="a"  id="" value="女"  size=""    />女
    <input type="reset"  name="a"  id="" value="重置"  size=""    />
    <input type="submit"  name="a"  id="" value="确定按钮"  size=""    />
    <textarea rows="10" cols="30">
        这里是文本域中的文本
    </textarea>


<select>
  <option value="值">文本</option>
</select>






序列标签


    <dl>    ---定义列表 但是在实际的网页设计中我们通常使用该标记做网页排版
          <dt>项目描述 </dt>
        <dd>内容部分</dd>
  </dl>


<ul>
   <ol type="[A，a,I,i,1]">有序列表</ol>     []中选择其中一个 类型，默认是 数字
</ul>




<ul   type="类型">   实体圆点  disc   空圆点 circle   实体方形 square
   <li>Coffee</li>
   <li>Tea</li>
</ul>


窗体：
 <frameset  rows='300,*' border=20px  frameborder=1 bordercolor='green'>
    <frame src='1.html'/>
    <frameset cols="200,*"> 
        <frame src='1.html'/>
        <frame src='a.html'/>
    </frameset> 


 注意:frameset 不能写在body 里面
 <frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架






<iframe/>  浮动窗体，在一个页面中划分出一定的区域来显示列一个页面。


背景图固定：
bgproperties:fixed




1、只是想要链接的样式：
<a href='#'> 内容 </a>-----#链接到本页上




2、书签：
   要返回的目的地：
   <a name='test'></a>


   在单击点
   <a href='#test'></a>




3、外部链接：
   <a href="http://www.baidu.com">去百度</a>      


4、内部链接：链接到本地的文件上


    <a href='相对路径'> </a>
-----------------------------HTML规范------------
HTML基础设施
   1.文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”。


   2.必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码<meta charset="utf-8"/>。


   3.根据页面内容和需求填写适当的keywords和description。+


   4.页面title是极为重要的不可缺少的一项。


   5.结构顺序和视觉顺序基本保持一致


   6.按照从上至下、从左到右的视觉顺序书写HTML结构。


   7.有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
 
   8.用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。


   9.table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。


   10.结构、表现、行为三者分离，避免内联


   11.使用link将css文件引入，并置于head中。


   12.使用script将js文件引入，并置于body底部。
    
   13.一个标签上引用的className不要过多，越少越好。
      比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>


----------------------------------------------------------------------------






css:cascading style sheet  :层叠样式表：控制外观：
分离样式和结构


三种放位置方法：


1、内联式：直接加在html的标签上


<标签  style="css代码"></标签>     css属性： 属性与属性之间用分号隔开，属性和属性值用冒号隔开


2、植入式：把css代码添加到html的标签的<head></head>---可以控制当前页面的所有样式


<style>
css代码了


</style>


3、外部链接：
把css分离成单独的一个css文件，然后<link/>将外部文件引入到html的<head>之间


多个文档之间可以同时引用相同的css文件
<link rel="stylesheet" href="css文件路径" type="text/css"/>




html的注释：<!--sdf -->
 css的注释/*    */


语法格式：


1
  选择符{属性1：属性1值；属性2：属性2值；}  p{color:red;font-size:60px;}


2 多个选择符{属性1：属性1值；属性2：属性2值；} 多个选择符之间用逗号隔开，表示并列关系
p,div{color:red};




3多个选择符{属性1：属性1值；属性2：属性2值；} 多个选择符之间用 空格 隔开，表示包含关系


div p{color:red};




选择符的分类：
1、标签选择符


     p {color:red;}   如果要使文档中所有的p标签都用一个css样式，就用标签选择符


2、类选择符：
   对相同的标签采用不同的样式


任何标签都有class属性，利用class给标签取一个类名


在css中     .类名{属性：属性值;}


不同的标签可以有相同的class类名




3、id选择符：
任何标签都有id属性，利用id给标签取一个id号


在css中     #id名{属性：属性值;}


id名是唯一的




4、 全局选择符：
*{属性：属性值;}  作用与文档中的所有标签






选择符的优先级：


    id选择符----class类---标签选择符---全局（*）


---伪类：
伪类的css样式并不是作用于标签上，而是标签的行为或状态上的
a标签链接：
a:link{  } 未访问时的状态


a:hover{   }鼠标悬停时的状态


a:active{  }鼠标按下与放开的状态


a:visited {  } 已访问状态  


/*去掉超链接的点击时的虚线框*/
a{outline:none;text-decoration: no-underline;}


长度 ：绝对长度   px 
              相对长度  em


css 导入方式  
 @import url("global.css");  等效于  @import url(global.css);
 @import "global.css";


普通语法：
  /*comment*/  注释
  @charset "utf-8";   在外部样式表中规定css 文件的编码


列表样式:
  list-style:  值 参考手册             -----设置列表标签的样式
 list-style-image:url(skin/ico.png)     ------设置列表标签的图片样式  通常可以使用background背景图片来代替.


文本样式:  设置元素内部的元素的排版方式
   text-indent: 像素;    ---设置区块内文本的缩进的显示样式
   text-align：left： 内容左对齐。 
                      center： 内容居中对齐。 
                      right： 内容右对齐。 
 letter-spacing：像素;     ---设置每个字体之间的距离 对中文有效


vertical-align:baseline： 将支持valign特性的对象的内容与基线对齐    （通常需要用参照元素来设置样）
                       sub： 垂直对齐文本的下标 
                       super： 垂直对齐文本的上标 
word-wrap: break-word;   ---区块内的文字自动换行


direction: rtl;        --------文字居右
                 ltr        ------文字居左


 line-height：像素；  设置行高


text-decoration: line-through
                   underline
                   overline
                   none---没有下划线
 text-decoration:  none;  设置去掉下划线  
                             block；  设置显示下划线  


字体样式:
   font-weight:normal： 正常的字体。相当于number为400 
                       bold： 粗体。相当于number为700。 
                       bolder： 特粗体。也相当于strong和b对象的作用 
                       lighter： 细体 
                       <integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 




font-size: 像素;    字体大小


font-family:"字体"


颜色样式:
   color: 颜色;


 背景样式：
      background
     background-repeat：repeat-x： 背景图像在横向上平铺             ---背景是否平铺
                                         repeat-y： 背景图像在纵向上平铺 
                                         repeat： 背景图像在横向和纵向平铺 
                                         no-repeat： 背景图像不平铺 






边框样式：
 border:


内间距
  padding


外间距
  margin


布局:
  display:  block;  元素显示       通常也用于将普通元素标签设置成块状标签    block;  带有换行   inline-block  不带br的块状标签
                  none;   元素隐藏   不占位隐藏


 float: none： 设置对象不浮动 
             left： 设置对象浮在左边 
             right： 设置对象浮在右边 




clear：none： 允许两边都可以有浮动对象 
              both： 不允许有浮动对象 
              left： 不允许左边有浮动对象 
              right： 不允许右边有浮动对象 


清除浮动的另外一种解决方案
 #test{zoom: 1; overflow: hidden; display: block; }  ---  id=test  为浮动标签的父级




 visibility：visible： 设置对象可视 
                  hidden： 设置对象隐藏     占位隐藏




overflow：visible： 不剪切内容。 
                   hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。 
                     scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。 
                     auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。 




 定位:
  z-index: 数字;   ---在浏览器显示层次
   position：relative：  对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 
                    absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 
                     fixed;        相对于窗口固定




使网页布局整体居中的解决方案:
设置 body{margin: 0px auto;}  或者整体的div{margin: 0px auto;}


浏览器兼容性解决方案 hack


1.条件式hack


<!--[if ! IE 7]>
      非ie版本
<![endif]-->




<!--[if IE]>
     ie版本识别
<![endif]-->


<!--[if gt IE 6]>
        gt  大于 ie 6  注意这种写法
        gte   大于或等于  
        lt   小于
        lte  小于或等于
<![endif]-->


属性hack
_： 选择IE6及以下
*:  选择IE7及以下   或者  +       *background-color: red;




* html      只对ie 6有效
* + html   只对ie 7 有效
 选择器:lang(zh-cn){css样式}  只对 ie8 和非 ie 有效


 * + html .mydiv{width: 200px; height: 100px; background-color: blue; }  /* ie7  为红色*/






以下是兼容IE6/IE7/IE8/FF的写法，注意下面的顺序不可颠倒


margin-bottom:40px;       /*ff的属性*/
margin-bottom:140px\9;    /* IE6/7/8的属性 */
color:red\0;              /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的属性*/


测试：
 #abc {
 border:2px solid #00f;     /*ff的属性*/
 border:2px solid #090\9;   /* IE6/7/8的属性 */
 border:2px solid #F90\0;     /* IE8支持 */
 _border:2px solid #f00;     /*IE6的属性*/
 }


<div id="abc">
  <ul>
    <li>FF下蓝边</li>
    <li>IE6下红边</li>
    <li>IE7下绿边</li>
    <li>IE8下黄边</li>
    <li>转载请注明来www.ietester.net</li>
  </ul>
</div>


比较实用的网站设计时常用的代码，代码很简单，只有一行，不需要理解多高深的JS或者HTML知识，按照提示把相应的代码加入到网页模板中即可得到你想要的效果。


 进入网页时淡入淡出的效果：<meta http-equiv=”Page-Exit”; content=”blendTrans(Duration=1.0)”>
          Page-Exit”（离开网页）
           Site-Enter”（进入站点）
          Site-Exit”（离开站点）
          ”Duration=1.0″可以设定每个周期的时间为多久，单位是秒（现在设置的是每周期1秒）


彻底屏蔽鼠标右键。此段代码加入<body>区域： <body   oncontextmenu=”window.event.returnValue=false”> 


取消选取、防止复制。此段代码加入<body>区域：  <body   onselectstart=”return   false”>
不准粘贴。 此段代码加入<body>区域: <body   onpaste=”return   false”> 
防止网站被扒皮,网页将不能被另存为 :<noscript><iframe   src=”/blog/*.html>”;</iframe></noscript>  将src 替换成你的项目目录地址
可防止复制，此段代码加入<body>区域: <body oncopy=”return   false;”   oncut=”return   false;” > 
防止被人frame。例：有些网址导航站收录您的网址之后，不会直接跳转到你的网站，而是加载到他的网页中，这样不会给你的网站产生任何IP和PV。
  <SCRIPT  LANGUAGE=JAVASCRIPT><!– if (top.location != self.location)top.location=self.location;// –></SCRIPT>


页面自动刷新，把如下代码加入 <head> 区域中 其中20指每隔20秒刷新一次页面. 可用户增加文章点击率，这是作弊行为。
<meta http-equiv= “refresh ” content= “20 “>


设置浏览器内核渲染器:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />














网页目录结构:
  www ---服务器根目录
    -------projectName
    --------------css  ----存放 css 代码
    --------------images  ------存放网页图片
    -------------template -------存放静态页面




--------------------------------------------------------------------------------
css规范:
   
    1.通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。
      将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用


     公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用                   布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。




     特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”                 “特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。


     皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。


     比如：
         <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
         <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
         <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>




    2.选择器、属性和值都使用小写


    3.单行写完一个选择器定义,便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。


    4.省略值为0时的单位为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。 
           .m-box{margin:0 10px;background-position:50% 0;}


    5.使用单引号省略url引用中的引号，其他需要引号的地方使用单引号。
          
    6.根据属性的重要性按顺序书写,只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。
        → 显示属性 自身属性 文本属性和其他修饰
        display        width font
        visibility height text-align
  position margin text-decoration
  float padding vertical-align
  clear border white-space
  list-style overflow color
  top min-width background
     .m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}
 
    7. 如果属性间存在关联性，则不要隔开写。


    /* 这里的height和line-height有关联性 */
   .m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}


    8.私有在前，标准在后先写带有浏览器私有标志的，后写W3C标准的。
   .m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}








--------------------------------------------------------------
工程师开发规范:
  
1.了解产品和设计
   参加需求、交互、视觉会议，了解产品设计和项目成员。
   了解产品面向的设备和平台。
   了解产品对兼容性的要求以及是否采用响应式设计等。
   了解产品要使用的技术（WEB技术、桌面技术、APP技术、模板语言、混合模式等）。


2.提出疑问和见解
   在交互或视觉会议中结合技术要求，提出疑问和见解。
   提出可能存在的问题（技术实现问题、性能问题等），协商解决方案并达成共识。
   提出已有新技术可能在产品中的应用场景，协助产品创新。




3.技术调研和培训
   是否需要技术调研，提出可能存在的风险。
   进行技术调研，产出技术demo，展示demo，反馈调研结果。
   技术调研的内容可以先咨询经验丰富的前端工程师或前端技术组。
   经验不足或新入职员工，可提出培训申请。




4.预算人力和时间
  根据项目时间要求及工作量，预算人力和时间。
  预算开发周期和阶段性产出。
  提醒需求方在项目管理平台中创建项目并加入项目成员，创建SVN并设置成员权限。