前端H5、css3

　　前端开发的主要任务：使网页在不同浏览器、不同分辨率、不同设备上，提供相似或相近的浏览体验。

　　前端开发需要掌握的知识体系：主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是 HTML、CSS、JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。

　　分辨率与像素：像素指组成图片的点，分辨率指用于放图片点的密度（棋盘）；像素大，分辨率大，图片清晰打印大小却不一定大；像素小，分辨率小，图片模糊打印不清晰。

　　设置min-width的意义:网页内容区制作时，我们往往希望它在不同分辨率，浏览器中按一定比例美观的居中存在，不出现滚动条，因此往往根据屏幕大小设置宽度百分数。那么在当用户为小分辨率小屏时，极有可能存在内容区内容宽度大于屏幕百分数的情况，这时候就会出现内容样式混乱的情况，因此往往再设置一个最小宽度，当窗口缩小到一定宽度时，窗口下方出现滚动条

　　HTML5新标签

　　HTML中的<header>标签:HTML5强调语义化标签，<header>标签相当于<div class="header">好处是使得文档结构层次清晰，利于代码编写和开发。

　　<section>标签是HTML5新标签，主要作用是对页面内容进行分块或内容分段，从某种意义上来说就是语义化的div。<section>标签通常包含一个标题和一个内容块。<section>和<div>都可以用来分块，section是进行有意义的分块，无意义的分块（如用作设置页面样式的容器）则由div来做。此外，section和artical可以相互嵌套。

　　<a>标签的title属性实现了鼠标停留在超链接上时显示的文字。

　　<img>标签的alt属性实现的是当浏览器无法显示图品时，图片的替代文本。

　　CSS3样式

1、文字内容溢出用省略号...表示：

　　对块级元素：selector{20em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

　　对内联元素需把其变成内联块级元素;

　　栗子：

<ul>
    <li><a href="#">"武汉大学进口设备采购及技术服务"通过验收</a><time class="time">[2016-06-24]</time></li>
</ul>

　　1、控制li整体情况：

 li{list-style:none;20em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} 

　　效果图

　　

　　2、控制a标签情况

　　　display:inline-block;

li a{display:inline-block;list-style:none;width:15em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

　　　　效果图

　　  

 2、样式优先级问题

　　2.1 <a>样式

　　栗子　　

    *{margin:0;padding:0;outline:0;}
　　body{font-family:"微软雅黑"；font-size:14px;color:#7e7e7e;}
　　li{list-style:none;}

　　/*在body中设置的字体颜色对a标签无用，需要在a中重新设置一下*/
　　a{text-decoration:none;color:#7e7e7e;}
 7 　　a:hover{color:#1e96d5;}
　　/*此时强调，如果在后面的<a>标签中再重新定义了color，那么此处的a:hover将无效，需重新定义hover*/ 

3、css3 resize属性 规定可以由用户调整 div 元素的大小

　　3.1 使用范围

　　　　Firefox 4+、Safari 以及 Chrome 支持 resize 属性。

　　3.2实现效果图　

　

　　3.3实现代码

 　　div{resize:both；overflow:auto；}