移动端基础知识总结--从0开始
<!DOCTYPE html> <!--这个是HTML5使用的开头声明.-->
<html>
<head>
<title>html整体结构</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--禁止浏览器从本地计算机的缓存中访问页面内容问-->
<!--no-cache:不缓存--><!--no-store:缓存但不存档-->
<meta http-equiv="Cache-Control" name="no-store" />
<!--防止别人在框架里调用自己的页面-->
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<!--viewport:移动端设备视窗-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--忽略页面中的数字识别为电话，忽略email识别,去除Android平台中对邮箱地址的识别-->
<meta content="telephone=no" name="format-detection" />
<!--启用360浏览器的极速模式(webkit)-->
<meta name="renderer" content="webkit">
<!--UC强制竖屏-->
<meta name="screen-orientation" content="portrait">
<!--QQ强制竖屏-->
<meta name="x5-orientation" content="portrait">
<!--windows phone 点击无高光-->
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript" src="js/style.js"></script>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<p>写页面我们最先要了解的就是整体结构,然后就是头部,中间部分,底部.</p>
<p>meta标签里面的东西我已经大致写好注释了,你们可以自己恰当的去做选择.</p>
<p>然后就是引入外部css,js文件了.</p>
<p>从优化的角度,我建议是先引入js,再引入css.注意:JS文件普遍应该写到<span><pre></body></pre>前面</span></p>
<p>浏览器是从第一行开始读取文件的,有顺序的来读取.如果JS写在head里面会容易出现“阻塞”问题.</p>
<P>我们来先了解html中的div结构</P>
<pre>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</pre>
<p>上面这个属于div嵌套(跟ul li写法一样),先下外面最大的父元素,再逐个写子元素.</p>
<p>第二节现在我该给大家介绍下id,class选择器,包括HTML5新增的选择器</p>
</body>
</html>
第二步,我要介绍的是:选择器.
选择器:
权重顺序 “ !important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.
4个等级的定义如下：
第一等：代表内联样式,如: style=””,权值为1000.
第二等：代表ID选择器,如：#content,权值为100.
第三等：代表类,伪类和属性选择器,如.content,权值为10.
第四等：代表类型选择器和伪元素选择器,如div p,权值为1.
特别注意: !important这个尽量少使用.
id选择器:一般不是用来写样式用的,是提供给后端或JS来操作DOM的.
class选择器:通过定义类名来添加样式,近年来有专业的前端开始利用后端的面向对象思想来写前端页面,目的是:简洁,高效,复用性高.
1,在class里面实现class组合:class="c1 c2 c3 c4"(组合必须要不得大于4个)
2,在css样式表中,可以提高重复使用率,
.c1{height:100px}
.c2{width:100%}
/*一般情况下,所有页面布局多多少少都会存在相同情况:宽度,高度等是会重复出现的,那么一般新手是会一个一个去写,一个一个去定义.例如:*/
.div1{width:100%;height:100px;color:#000000;font-size:18px}
.div2{width:100%;height:50px;color:#000000;font-size:16px}
为了减少重复,提高效率,我们可以写成下面的情况:
.div1,.div2{width:100%;color:#000000}
.div1{height:100px;font-size:18px}
.div2{height:50px;font-size:16px}
为了可以实现重复使用的,而不单单是写一个css,而是“哪里需要放哪里”.
3,模块化:这个本来是后端才会有的,现在前端也可以实现了.那么我们该如何去理解呢？
<div class="menu">...这里可能会出现多组div嵌套</div>
<div class="list">...这里可能会出现多组div嵌套</div>
在css上我们就要这样来写:(就是以父元素开头,这样就不会出现跟其他模块冲突)
/*公同使用的样式:*/.menu div1,.menu div2,.list div1,.list div2{width:100%;color#000000}
.menu div1{....}
.menu div2{....}
.list div1{....}
.list div2{....}
下面来介绍下HTML5的新标签和新选择器---(只讲解我常用的)
article>h2{background:#239528;}/*h1是article的子元素*/
.title+p{background:#239528;}/*兄弟选择器*/
.title1 li:first-child{background:#239528;}/*第一个li元素*/
p:nth-of-type(2){color:#0066cc;}/*2是指父元素的第二个选择器*/
fieldset:nth-child(odd){background:#239528;}
fieldset:nth-child(even){color:#0066cc;}
ul li:last-child{background:#0066CC;color:#239528;}/*最后一个li元素*/
<h1>下面来介绍下HTML5的新标签和新选择器---(只讲解我常用的)</h1>
<address>
Written by <a href="#">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<article>
<h2>Internet Explorer 9</h2>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<blockquote>
<p class="title">This is a long quotation. This is a long quotationuotatiouotatio.</p>
<p>This is a long quotation.</p>
<p>This is a long quotation. This is a long quotation.</p>
</blockquote>
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<ul class="title1">
<li>黄浦江</li>
<li>黄浦江黄浦江</li>
<li>黄浦江黄浦江黄浦江</li>
</ul>
</figure>
<div>
<input list="cars" value="asd" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</div>
<form>
<fieldset>
身高：
<input type="text" />
</fieldset>
<fieldset>
体重：
<input type="text" />
</fieldset>
<fieldset>
姓名：
<input type="text" />
</fieldset>
<fieldset>
住址：
<input type="text" />
</fieldset>
</form>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
你可以复制上面的html来查看页面效果.
下面我来介绍下在移动端上该注意的去取浏览器默认样式---style.css
@charset "utf-8";
html{font-size: 62.5%;}
body {
/*禁止选择*/
-webkit-user-select:none;
/*去掉a,img,input的遮罩层*/
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
/*允许独立的滚动区域和触摸回弹*/
-webkit-overflow-scrolling:touch;
/*跟上面的一样..写法是兼容问题的话.*/
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
/*禁止系统默认菜单*/
-webkit-touch-callout:none;
-webkit-box-sizing:border-box;
}
*{-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td,button,article,aside,details,figcaption,figure,footer,header,nav,section{margin:0;padding:0}
body,button,input,select,textarea,p,article,span{line-height:2rem}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:3rem}
/*1rem=10px */
/*字体自适应*/
/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/
/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小*/
h1{font-size:2.8rem;}
h2{font-size:2.6rem;}
h3{font-size:2.2rem;}
@media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/
html{font-size:87.5% !important;}
}
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6,Iphone6plus最低宽度:16px*/
html{font-size:100% !important;}
}
/*手机横屏:最低宽度480px:18px*/
@media only screen and (min-width:480px) and (max-width:740px){
html{font-size:112.5% !important;}
}
/*平板电脑:最低宽度768px:20px*/
@media only screen and (min-width:768px) {
html{font-size:125% !important;}
}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/
textarea{resize:none;-webkit-appearance:none;outline:none}
a,img{-webkit-touch-callout:none;}
/* 链接选中以及鼠标悬浮样式*/
a:active,
a:hover {
outline: 0;
text-decoration: none;
}
/*取消标签的特殊字体样式*/
strong {
font-weight: normal;
}
em , i{
font-style: normal;
}
/*取消按钮在inphone上的默认样式*/
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance:button;
cursor:pointer
}
input[type="checkbox"], input[type="radio"] {
box-sizing:border-box;
padding:0;
-webkit-appearance:none;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height:auto
}
input[type="search"] {
-webkit-box-sizing:content-box;
box-sizing:content-box;
-webkit-appearance:textfield
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
input[type=button] {
outline:0;
-webkit-appearance:none
}
table {
border-collapse:collapse;
border-spacing:0
}
audio, canvas, progress, video {
display:inline-block;
vertical-align:baseline
}
audio:not([controls]) {
display:none;
height:0
}
input::-webkit-input-placeholder{color:#F0F0F0;}
textarea::-webkit-input-placeholder{color:#F0F0F0;}
input::-webkit-input-speech-button {display:none}
/*android上input:focus时input不随软键盘升起而抬高的情况和点击时高亮*/
a:focus,input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);/*这个是兼容2.3以下的系统*/
-webkit-user-modify:read-write-plaintext-only;/*这个兼容到4.0以上的系统*/
}
table {border-collapse:collapse;border-spacing:0;}
th {text-align:inherit;}
fieldset,img {border:none;}
abbr,acronym {border:none;font-variant:normal;}
del{text-decoration:line-through;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
ins,a,a:hover {text-decoration:none;}
a:focus,*:focus {outline:none;}
.clearfix:before,.clearfix:after {content:"";display:table;clear:both;overflow:hidden;}
.clearfix {zoom:1;}
.clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}
.hide {display:none;}
.block {display:block;}
/*单行文本控制溢出和换行*/
.outL{white-space:normal;word-break:break-all;width:100px;}
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}
/*多行文本溢出显示省略号(...)的方法------webkit-line-clamp:2;这里的数字代表多少行*/
.ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/*布局*/
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.rel{position:relative;}
.abs{position:absolute;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.dib{display:inline-block;}
.vab{vertical-align:bottom;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}
/*网格*/
.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}
.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.grid{*zoom:1}
.grid:before,.grid:after{display:table;content:"";line-height:0}
.grid:after{clear:both}
.grid{list-style-type:none;padding:0;margin:0}
.grid>.grid{clear:none;float:left;margin:0 !important}
.wrap{float:left;width:100%}
/*网格*/
/*flex*/
.flex{display:-webkit-flex;display:flex;display:-webkit-box;-webkit-flex:1;flex:1;-webkit-box-flex:1;}
.flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
/*垂直方向*/
.col{display:-webkit-box;display:flex;display:-webkit-flex;height:100%;-webkit-box-orient:vertical;flex-direction:column}
/*水平方向*/
.row{display:-webkit-flex;display:flex;display:-webkit-box;margin:auto;width:100%;height:auto;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;-webkit-box-orient:horizontal;-webkit-box-lines:multiple}
.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2}
.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3}
/*flex*/
/*容器*/
.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding-bottom:60px;overflow:auto;-webkit-overflow-scrolling:touch;}
/*头尾*/
header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}
header{top:0;height:44px;}
footer{bottom:0;}
/*ios上使用transform的时候的闪屏问题可以尝试使用
.transform{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;}
*/
/*宽度*/
.w100p{width:100%}
.w20p{width:20%;}
/*边距*/
.m5{margin:5px;}
.p5{padding:5px;}
.box{height:100%;text-align:center;}
/* 页面背景图,需要注意问题:
1,该图片看设计师做的图片大小,不然做手机的怎么可能会在PC上浏览清晰呢?
2,利用好background-size:100% 100%;就可以让整个背景图都正确的展示到页面上.
*/
body{background:url('../img/back.jpg') no-repeat;background-size:100% 100%;}
/*如果底部出现留白,不能占满屏幕时的解决方法:
添加 html,body{height:100%}
*/
/* 页面背景图 */
/* 手机断点 */
/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度),
用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/
/*iphone4等屏幕高度480px的解决方案*/
@media only screen and (max-device-height:480px) {
}
/*iphone5以上的屏幕高度解决方案*/
@media only screen and (min-device-height:481px) {
}
@media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
}
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6 plus,红米等大屏幕手机*/
}
/*手机横屏:orientation:landscape*/
@media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {
/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/
}
@media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){
/*三星,红米等手机屏幕横屏宽度断点*/
}
@media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {
/*Iphone6横屏宽度断点*/
}
@media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){
/*Iphone6 plus横屏宽度断点*/
}
@media all and (orientation:landscape) {
/*这里是指所有屏幕横屏时*/
}
/*平板和电脑:最小宽度768px*/
@media only screen and (min-width:768px) and (max-width: 959px) {
}
@media only screen and (min-width:960px) and (max-width:1024px) {
}
@media only screen and (min-width:1025px)and (max-width:1536px) {
}
上面有足够的注释说明，做移动端页面就是这么烦,要考虑不同屏幕的布局，字体大小等情况.
现在该轮到最痛苦的一个知识点:JavaScript
1,先讲解使用次数最多的点击事件开始吧:
一般来说，我们新手写点击事件会类似于下面这样的情况:获取ID值,添加点击事件函数.
var show=document.getElementById("show"); show.onclick=function(){ show.className="hide"; }; var mask=document.getElementById("mask"); mask.onclick=function(){ var show=document.getElementById("show").className="show"; }; var back=document.getElementById("back"); back.onclick=function(){ var show=document.getElementById("show").className="hide"; };
教大家一个简单易懂的封装:
//这个是最基本的封装，简单易懂,有兴趣写出更高效的,我们可以联系沟通 function $(obj){return document.getElementById(obj)};//返回dom对象 //上面为封装,下面为调用 //$是函数名. show.onclick=function(){ show.className="hide"; }; mask.onclick=function(){ var show=document.getElementById("show").className="show"; }; back.onclick=function(){ var show=document.getElementById("show").className="hide"; };
如果不是用id而是打算用标签名,类名等,记住要添加[]这个来做标记索引.
document.getElementsByClassName()[索引:0开始]
document.getElementsByName()[索引:0开始]
document.getElementsByTagName()[索引:0开始]
下面是DOM简单基础:
.chat{ color:#00cc66; font-size:28px; background:#999999; }
改变元素样式3种方法:
<p id="con">Hello World!</p> <p id="p2">Hello Wind!</p> <p id="p3">welcome!</p>
document.getElementById("p2").className="chat"
改变样式在DOM里面最好的方法还是写className，会比你写style好！
单击改变事件:
<h1 onclick="change(this)">OK</h1>
function change(id) { id.innerHTML="Hello"; id.className="chat" }
toogle:点击改变，再点击返回.
<input type="button" value="显示" /> <div style="height:100px;background:#FF69B4;"></div>
有2种方式来实现toogle()这个方法：
var toggle = false;//记得在input上添加 onclick="toggles()",div上添加id="toggle" function toggles() { if (toggle == false) { document.getElementById("toggle").style.display = "none"; toggle = true; } else { document.getElementById("toggle").style.display = "block"; toggle = false; } }
第二种:
var onInput = document.getElementsByTagName("input")[0]; var oDiv = document.getElementsByTagName("div")[0]; onInput.onclick = function() { var style = oDiv.style; style.display = style.display == "none" ? "block" : "none"; onInput.className = style.display == "none" ? "open" : "" }
创建和追加节点元素:
.anthor{color:#26C6D9}
这个是专门处理DOM比较好的一个优化方案:
//在文档之外创建并更新一个文档片断，然后将它附加在原始列表上 //文档片断是一个轻量级的document对象,它被设计专用于更新、移动节点之类的任务 //使用容器存放临时变更,最后再一次性更新DOM var fragment = document.createDocumentFragment(); for (var i = 0; i < 10; i++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); fragment.appendChild(p); } var anthor = document.getElementById("anthor"); anthor.appendChild(fragment);
<div id="anthor">6789</div>
有时间我会找30个不一样的页面来给大家当作练习,这些页面主要是包括列表页面,纯数据页面,表单.
以基于angularjs框架和JS模板引擎来开发.
