Web ページの幅を画面に合わせます
1) アプリ対応" content = "yes" /＆gt;＆lt; meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
3) この文を追加すると、ホーム画面に追加されるアイコンを定義できますiPhone の
Web ページの開き方: Link
autocomplete="off"//入力ボックスの履歴を削除します Record
querySelectorAll は一致する要素のコレクションを返します。一致する要素がない場合は、空のノードリスト (ノード配列) を返します。
document.querySelector('#indicator > li.active').className = '';//...innerheight: ウィンドウのドキュメント表示領域の高さを返します。 (IEはdocument.documentElement.clientHeightを使用します)
innerwidthはウィンドウのドキュメント表示領域の幅を返します。 (IE は document.documentElement.clientWidth を使用します)
<------------------------------------- --- ----------------------------HTML5-------------->
HTML5 new:
contenteditable: ユーザーが要素を編集できるかどうかを設定します
ドラッグ可能: ユーザーに要素のドラッグを許可するかどうかを設定します。
無関係: 要素が関連するかどうかを設定します。関連性のない要素は表示されません。
ref: 別の文書またはこの文書上の別の場所への参照。テンプレート属性が設定されている場合にのみ使用されます
登録マーク: 要素の設定の写真を撮ります。
< ;! --[IE の場合]>
//ビューポート: 表示領域
//initial-scale: 初期のスケーリング比率; ユーザーが手動でズームできるかどうか
//minimum-scale: ユーザーが最大ズームできる最小比率。 -scale: ユーザーがズームインできる最大比率
//認識されたものを削除します。 Apple メニュー バーとツールバー。Apple メニュー バーとツールバーが必要な場合は省略できます
//モバイル Web サイト収集時に追加されたアイコン定義属性 - モバイル Web (「デスクトップ アイコンに追加」)
//apple-touch-icon: ハイライトの明るいアイコンを追加//apple-touch-icon-precomposed: オリジナルのアイコンをデザインします
网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。
移动网站的视图的标签
HTML5 の data- プレフィックスは data 属性と呼ばれます
ローカル ストレージ:
sessionStorage.lastname="Smith";//セッション用ストレージ
localStorage.lastname="Smith";//時間制限のないローカル ストレージ ( IE8でもサポートされています)
document.write(localStorage.lastname);
ローカルストレージを使用する前に、まずwindow.localStorageが存在するかどうかを確認する必要があります
//placeholder: デフォルトのプロンプト、必須: 入力フィールドが必須かどうかを定義します (送信時に空でないことの確認)
HTML5 では、オンラインかどうかを検出する 2 つの方法が提供されます。ナビゲーター。オンライン (真/偽) およびオンライン/オフライン イベント。
navigator.standalone が true: デスクトップから開始
navigator.standalone が false: iOS ブラウザから開始
localStorage length: 現在格納されている変数の数を返します。
localStorage.key(n): n 番目の変数のキー値 (key) を返します。
localStorage.getItem(k): localStorage.k と同様に、キー値 k を持つ変数の値を取得します。
localStorage.setItem(k, v): localStorage.k = v と同様に、キー値 k の変数値を設定します。
localStorage.removeItem(k): キー値 k の変数を削除します。
localStorage.clear(): すべての変数をクリアします。
window.applicationCache オブジェクトのイベント:
checking: ユーザー エージェントが更新をチェックするとき、または初めてマニフェスト ファイルをダウンロードしようとするとき、このイベントは多くの場合、イベント キューで最初にトリガーされます
noupdate : マニフェスト ファイルが検出されました 更新はありません
downloading: ユーザー エージェントは更新を検出し、リソースを取得しているか、マニフェスト ファイル リストにリストされているリソースを初めてダウンロードしています
progress: ユーザー エージェントはキャッシュする必要があるリソースをダウンロードしていますリソース マニフェスト ファイル内
cached: マニフェスト内 リストされたリソースがダウンロードされ、キャッシュされました
updateready: マニフェストにリストされたファイルが再ダウンロードされ、正常に更新されました 次に、js を使用してアプリケーションを更新できます。 swapCache() メソッド
廃止: 1. マニフェスト リクエストに 404 または 410 エラーが表示され、アプリケーション キャッシュがキャンセルされます。 2. マニフェスト リクエストで 404 または 410 エラーが発生し、キャッシュを更新するリクエストが失敗します。ファイルは変更されていませんが、ページによって参照されているマニフェスト ファイルが正しくダウンロードされていません
エラー: 1. マニフェストにリストされているリソースを取得中に致命的なエラーが発生しました 2. マニフェスト ファイルが更新プロセス中に変更されました
http ://www.cnblogs.com/roucheng/p/sunwukong.html
<----- ------------------------ ------------------------ --------CSS----------------> ;
-moz-border-radius: 6px; border-radius: 6px; // 角丸
text-shadow: 2px 2px 5px #333; -select: none; // 最初にテキストを選択することはできません (Webkit ベースのブラウザ)
-webkit-text-size-adjust:none;//Apple モバイル デバイスで認識され、テキスト サイズを確保するために使用されます
変換、遷移、アニメーション
transition_duration{
-webkit-transform:rotate(10deg);
-webkit-transition-property:all; //変更されたプロパティ
-webkit-transition-duration:0.5s;変更時間
-webkit-transition-timing-function:ease-in;//アニメーション変化のカーブを定義
}
transition_duration:hover{
-webkit-transform:rotate(40deg);
}
transform: 回転、歪み、スケーリング、移動、行列変換 {transform-origin :要素の基点、デフォルトは要素の中心です}
transform: 回転(30度)スケール(2,1.5)(水平、垂直) | スキュー(30度,10度) | 変換(100ピクセル,20ピクセル) |行列;
<------------------------------------- ------------------------ ------------ajax----- -->
isLocal: true//リクエストはローカル コンピューターから来ます
document.onreadystatechange メソッドを使用して状態の変化を監視し、
document.readyState == "complete" を使用して読み込みが完了したかどうかを判断します
1 - ロード中 (ロード中) は send() メソッドを呼び出しており、リクエストは送信中です
2 - ロード済み (読み込み完了) send() メソッドの実行が完了し、すべての応答コンテンツが受信されました
3 - インタラクティブ (対話型) 応答コンテンツが解析中です
4 - 完全 (完了) 応答コンテンツの解析が完了し、クライアントで呼び出すことができます
document.getElementById("testButton").addEventListener("click", Go , false);//リスニング イベントの追加
ウィンドウの DOMContentLoaded イベントは、画像、JavaScript ファイル、CSS ファイル、その他のリソースがダウンロードされたかどうかに関係なく、完成した DOM ツリーが形成された後にトリガーされます。ロード イベントとは異なり、DOMContentLoaded はページのダウンロードの早い段階でイベント ハンドラーの追加をサポートしています。つまり、ユーザーはできるだけ早くページを操作できます。 (これは Firefox での固有のイベントです)
document.addEventListener('DOMContentLoaded',loaded,false); //
リスナーには 3 つの段階があります: キャプチャ段階 (呼び出しがリッスンしているかどうかを確認するためのルート ノードから子ノードへ)関数）→、ターゲットステージ（ターゲット自体）→バブルステージ（ターゲット自体からルートノードまで）。
パブリックオーバーライド関数 addEventListener(type(イベントタイプ):String,listener():Function,useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
$(selector).bind( event) // 一致する要素に 1 つ以上のイベント ハンドラーを追加します
$(selector).live(event) // 現在または将来、一致する要素にイベント ハンドラーを追加します
$(selector).die() 削除されましたlive() 関数を通じて追加されたすべてのイベント ハンドラー
$(selector).unbind() は、選択された要素のイベント ハンドラーを削除し、jQuery を通じてアタッチされたイベント ハンドラーに適用されます
Tmpl にはいくつかのタグが用意されています:
${}: 同等{{=}} に、これは出力変数であり、HTML エンコーディングが渡されています。
{{html}}: 出力変数 html ですが、HTML エンコードなしで、HTML コードの出力に適しています。
{{if }} {{else}}: 分岐ロジックを提供します。
{{each}}: ループ ロジック、$value アクセス反復変数を提供します。
devicePixelRatio: デバイスのピクセル比、高解像度の iPad では、window.devicePixelRatio は 2
(/ipad/gi).test(navigator.appVersion)//モバイル端末のブラウザが ipad であるかどうかを判断し、navigator.appVersion はブラウザのVersion
window.orientation: この属性は現在のデバイスの画面の向きを示します。0 は縦画面を意味し、プラスまたはマイナス 90 は横画面 (左と右) モードを意味します
onorientationchange: 画面の向きを毎回水平画面と垂直画面の間で切り替えますその後、このウィンドウ イベントがトリガーされます。使い方は従来のイベントと同様です。
pagebeforecreate: DOM が初期化される前にトリガーされます。ページの DOM がロードされます。
pagecreate : DOM で HTML が確立された後、初期化も完了します pageinit: ページが完全にロードされた後
タッチ イベント
にリストされている 3 つの基本的なタッチ イベント
1. touchstart : 指が DOM 要素上に置かれます。
3. タッチエンド: DOM 要素から指を遠ざけます。
各タッチ イベントには 3 つのタッチ リストが含まれます。
1. タッチ: 現在画面上にあるすべての指のリスト。
2. targetTouches: 現在の DOM 要素上にある指のリスト。
3.ChangeTouches: 現在のイベントに関係する指のリスト。
たとえば、タッチエンド イベントでは、これは離れた指になります。
これらのリストは、タッチ情報を含むオブジェクトで構成されます。
1. 識別子: タッチ セッション内の現在の指を一意に識別する数値。
2. ターゲット: アクションのターゲットである DOM 要素。
3. クライアント/ページ/画面座標: アクションが発生する画面上の位置。
4. 半径座標と回転角度: 指の形にほぼ等しい楕円を描きます。
gesturestart // 2 本の指が画面に触れるとトリガーされます
gesturechange // 2 本の指が画面に触れた後に動き始めるとトリガーされます
onorientationchange // 画面回転イベント
orientationchange // 画面に触れている指の方向が変わったときを検出します
//アドレスバーを非表示にし、イベント処理時にスクロールバーが表示されないようにします
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
e.preventDefault()//イベントのデフォルトアクションをキャンセルします
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定义一滚动对象
hScroll:false 禁止横向滚动 true横向滚动 默认为true
vScroll:false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar:false 隐藏水平方向上的滚动条
vScrollbar:false 隐藏垂直方向上的滚动条
fixedScrollbar: 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar:false 指定在无渐隐效果时隐藏滚动条
hideScrollbar: 在没有用户交互时隐藏滚动条 默认为true
bounce: 启用或禁用边界的反弹，默认为true
momentum: 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection:false 取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
zoom:true 滚动对象可以放大缩小
zoomMax: 指定允许放大的最大倍数，默认为4
onScrollEnd:在滚动完成后的回调
x:滚动水平初始位置
y:滚动垂直初始位置
bounce:true,是否超过实际位置反弹
bounceLock:false,当内容少于滚动是否可以反弹，这个实际用处不大
momentum:true,动量效果，拖动惯性
lockDirection:true,当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动
useTransform:true,是否使用CSS形变
useTransition:false,是否使用CSS变换
topOffset:0,已经滚动的基准值(一般情况用不到)
checkDOMChanges:false,是否自动检测内容变化
【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit- transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩 溃。
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
encodeURI()//编码
decodeURI()//解码
停止:
myVideo.currentTime = 0;
myVideo.pause();
浏览器的渲染和操作顺序大致如下：
HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载
<--------------------tmpl替换-------------------------->
news_template = $('#news_template').template();
$.tmpl(news_template, manufacture_news).appendTo('#news_content');
var html = $("#news_content").html();
if (html.indexOf("[br]") > -1)
{
html = html.$replace("[br]", "
");
html = html.$replace("<", "<").$replace(">", ">");
$("#news_content").html(html);
}
------------------数据库优化---------------------
A、数据类型尽量用数字型，数字型的比较比字符型的快很多。
B、 数据类型尽量小，这里的尽量小是指在满足可以预见的未来需求的前提下的。
C、 尽量不要允许NULL，除非必要，可以用NOT NULL+DEFAULT代替。
D、少用TEXT和IMAGE，二进制字段的读写是比较慢的，而且，读取的方法也不多，大部分情况下最好不用。
E、 自增字段要慎用，不利于数据迁移。
系统设计阶段应该归纳一些业务逻辑放在数据库编程实现，数据库编程包括数据库存储过程、触发器和函数。用数据库编程实现业务逻辑的好处是减少网络流量并可更充分利用数据库的预编译和缓存功能。
----------
索引的设计
在设计阶段，可以根据功能和性能的需求进行初步的索引设计，这里需要根据预计的数据量和查询来设计索引，可能与将来实际使用的时候会有所区别。
关于索引的选择，应改主意：
A、 根据数据量决定哪些表需要增加索引，数据量小的可以只有主键。
B、 根据使用频率决定哪些字段需要建立索引，选择经常作为连接条件、筛选条件、聚合查询、排序的字段作为索引的候选字段。
C、 把经常一起出现的字段组合在一起，组成组合索引，组合索引的字段顺序与主键一样，也需要把最常用的字段放在前面，把重复率低的字段放在前面。
D、 一个表不要加太多索引，因为索引影响插入和更新的速度。
注意SELECT INTO后的WHERE子句，因为SELECT INTO把数据插入到临时表，这个过程会锁定一些系统表，如果这个WHERE子句返回的数据过多或者速度太慢，会造成系统表长期锁定，诸塞其他进程。
A、 控制同一语句的多次执行，特别是一些基础数据的多次执行是很多程序员很少注意的。
B、 减少多次的数据转换，也许需要数据转换是设计的问题，但是减少次数是程序员可以做到的。
C、 杜绝不必要的子查询和连接表，子查询在执行计划一般解释成外连接，多余的连接表带来额外的开销。
---------尖角代码
モバイル版 Web サイトは、少なくともいくつかの基本機能を実装する必要があります。
1. ページの適用性。モバイル端末の場合、コンピューター側のデザインでも Web ページの幅が 1003px などのピクセル値に制限されており、フォント サイズが 12px または 14px である場合、端末の違いによる影響が生じます。とても大きくなります。したがって、ここでは、Web ページの幅を画面に合わせて調整することが最善です。幸いなことに、w3c は HTML を設計するときにこれを考慮しており、
Javascript コード
< を追加するだけで済みます。 ; meta name="viewport" content="width=device-width"/>
、フォントの場合は、バージョンの作成の問題として em または ex を使用します。モバイル ページには、通常、合理化バージョン、標準バージョン、3G バージョン、タッチ スクリーン バージョン、スマートフォン バージョンなど、携帯電話ごとに異なるバージョンがあることがよくあります。ページ デザインの違いに加えて、ページ言語も異なります。合理化されたバージョンは wap 1.0 wml スクリプトを使用して記述されており、この言語は多くの国内携帯電話でサポートされていましたが、この言語は非常に合理化されています。標準バージョンでは通常 wap 2.0 テクノロジーを使用でき、対応するスクリプト言語は xhtml mp (xhtml mobile profile) です。この言語は xhtml のサブセットであり、ほとんどの CSS をサポートします。ただし、通常は使用できません。これらの携帯電話は js をサポートしていないことを考慮して、js を使用します。スマートフォン バージョンの場合、ほとんどのスマートフォンが js をサポートするようになったので、このバージョンの作成ははるかに簡単になります。ただし、ほとんどのスマートフォン (Android、ios、wp7 などを含む Symbian 携帯電話を基本的に除く) は Html5 をサポートするため、スマート モバイル。バージョンはhtml5を使用して作成できます。
3. バージョン管理の問題。おそらくこの部分は解決するのが難しいのですが、これらの側面から携帯電話の最適なバージョンを賢く判断してそこにジャンプする方法を検討することができます。一方では、Android や iOS などの携帯電話のオペレーティング システムを入手する方法があり、HTML5 バージョン、Windows システム、そして間違いなくコンピュータ バージョンにジャンプして携帯電話システムを入手することができます。 , 携帯電話のモデルを取得できます。その方法は、ブラウザの UA (ユーザー エージェント) を通じて携帯電話に関する情報を取得することです。UA を通じて携帯電話のメーカーを直接確認できます。携帯電話のモデルによって UA 情報が異なるため、より多くの情報を取得するには、データベースが必要です。しかし、そのようなデータベースを自分で作成するのはまだ困難です。すでにそのようなデータベースが用意されています。もっと便利には、携帯電話に最適なバージョンを特定するための関数ライブラリが用意されています。ここでは Wurfl を使用することをお勧めします。一方、ブラウザが JS と HTML5 をサポートしているかどうかは、ページのスクリプトを通じて判断できます。 コードは次のとおりです。
Javascript コード
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.hovertree.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"/> <title>版本控制 - 何问起</title> <script type="text/javascript"> window.onload = function(){ //检测是否支持js try{//检测是否支持html5 document.getElementById("c").getContext("2d"); document.location = '支持html5版的链接'; }catch(e){//否则跳到支持js版 document.location = '支持js版'; } }; </script> </head> <!-- hovertree.com --><body> <canvas id='c'></canvas> 普通版 </body> </html>
バージョンを開発したいだけの場合は、単に判断してください。モバイル クライアントであっても、discuz からの引用です。一般的に、モバイル Web ページの合理化バージョンと通常バージョンでは、節約できるコードを省略するのが最善です。結局のところ、モバイル トラフィックはユーザーにとって非常に価値があります。たとえば、要素に名前を付ける場合、通常、ページ数が少ない場合は、名前が短いほど、CSS を 1 行で記述するのが最適です。 CSS では、一部の要素は親クラスのスタイルを継承するため、定義を繰り返してデフォルト値を活用する必要はありません。
5. ブラウザのキャッシュ。更新が遅い場合は、ブラウザのキャッシュをオンにすることをお勧めします
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
